melonjs 15.2.1 → 15.4.0

package/src/video/video.js

@@ -10,6 +10,7 @@ import { throttle } from "../utils/function.js";
 /**
  * Select the HTML5 Canvas renderer
  * @memberof video
+ * @name CANVAS
  * @static
  */
 export { CANVAS } from "../const";
@@ -17,6 +18,7 @@ export { CANVAS } from "../const";
 /**
  * Select the WebGL renderer
  * @memberof video
+ * @name WEBGL
  * @static
  */
 export { WEBGL } from "../const";
@@ -24,6 +26,7 @@ export { WEBGL } from "../const";
 /**
  * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
  * @memberof video
+ * @name AUTO
  * @static
  */
 export { AUTO } from "../const";
@@ -37,34 +40,10 @@ export let renderer = null;
 
 /**
  * Initialize the "video" system (create a canvas based on the given arguments, and the related renderer). <br>
- * melonJS support various scaling mode, that can be enabled <u>once the scale option is set to <b>`auto`</b></u> : <br>
- *  - <i><b>`fit`</b></i> : Letterboxed; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fit.png"/></center><br>
- *  - <i><b>`fill-min`</b></i> : Canvas is resized to fit minimum design resolution; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fill-min.png"/></center><br>
- *  - <i><b>`fill-max`</b></i> : Canvas is resized to fit maximum design resolution; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fill-max.png"/></center><br>
- *  - <i><b>`flex`</b><</i> : Canvas width & height is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex.png"/></center><br>
- *  - <i><b>`flex-width`</b></i> : Canvas width is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex-width.png"/></center><br>
- *  - <i><b>`flex-height`</b></i> : Canvas height is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex-height.png"/></center><br>
- *  - <i><b>`stretch`</b></i> : Canvas is resized to fit; content is scaled to screen aspect ratio
- * <center><img src="images/scale-stretch.png"/></center><br>
  * @memberof video
  * @param {number} width - The width of the canvas viewport
  * @param {number} height - The height of the canvas viewport
- * @param {object} [options] - The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
- * @param {string|HTMLElement} [options.parent=document.body] - the DOM parent element to hold the canvas in the HTML file
- * @param {number|Renderer} [options.renderer=video.AUTO] - renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO), or a custom renderer class
- * @param {number|string} [options.scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
- * @param {string} [options.scaleMethod="fit"] - screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
- * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
- * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
- * @param {boolean} [options.transparent=false] - whether to allow transparent pixels in the front buffer (screen).
- * @param {boolean} [options.antiAlias=false] - whether to enable or not video scaling interpolation
- * @param {boolean} [options.consoleHeader=true] - whether to display melonJS version and basic device information in the console
+ * @param {Application.Settings} [options] - optional parameters for the renderer
  * @returns {boolean} false if initialization failed (canvas not supported)
  * @example
  * // init the video with a 640x480 canvas
@@ -82,7 +61,7 @@ export function init(width, height, options) {
     }
 
     try {
-         // initialize the default game Application with the given options
+        // initialize the default game Application with the given options
         game.init(width, height, options);
     } catch (e) {
         console.log(e.message);
@@ -144,7 +123,7 @@ export function init(width, height, options) {
  * @param {number} width - width
  * @param {number} height - height
  * @param {boolean} [returnOffscreenCanvas=false] - will return an OffscreenCanvas if supported
- * @returns {HTMLCanvasElement|OffscreenCanvas}
+ * @returns {HTMLCanvasElement|OffscreenCanvas} a new Canvas element of the given size
  */
 export function createCanvas(width, height, returnOffscreenCanvas = false) {
     let _canvas;
@@ -173,7 +152,7 @@ export function createCanvas(width, height, returnOffscreenCanvas = false) {
 /**
  * return a reference to the parent DOM element holding the main canvas
  * @memberof video
- * @returns {HTMLElement}
+ * @returns {HTMLElement} the HTML parent element
  */
 export function getParent() {
     return game.getParentElement();

package/src/video/webgl/buffer/vertex.js

@@ -5,7 +5,7 @@
  * @ignore
  */
 
- export default class VertexArrayBuffer {
+export default class VertexArrayBuffer {
 
     constructor(vertex_size, vertex_per_obj) {
         // the size of one vertex in float
@@ -38,7 +38,7 @@
      * @ignore
      */
     isFull(vertex = this.objSize) {
-         return (this.vertexCount + vertex >= this.maxVertex);
+        return (this.vertexCount + vertex >= this.maxVertex);
     }
 
     /**

package/src/video/webgl/compositors/compositor.js

@@ -5,19 +5,19 @@ import GLShader from "../glshader.js";
  * @classdesc
  * A base Compositor object.
  */
- export default class Compositor {
+export default class Compositor {
     /**
      * @param {WebGLRenderer} renderer - the current WebGL renderer session
-     * @param {Object} settings - additional settings to initialize this compositors
-     * @param {object[]} attribute - an array of attributes definition
-     * @param {string} attribute.name - name of the attribute in the vertex shader
-     * @param {number} attribute.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
-     * @param {GLenum} attribute.type - data type of each component in the array
-     * @param {boolean} attribute.normalized - whether integer data values should be normalized into a certain range when being cast to a float
-     * @param {number} attribute.offset - offset in bytes of the first component in the vertex attribute array
-     * @param {object} shader - an array of attributes definition
-     * @param {string} shader.vertex - a string containing the GLSL source code to set
-     * @param {string} shader.fragment - a string containing the GLSL source code to set
+     * @param {object} settings - additional settings to initialize this compositors
+     * @param {object[]} settings.attribute - an array of attributes definition
+     * @param {string} settings.attribute.name - name of the attribute in the vertex shader
+     * @param {number} settings.attribute.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
+     * @param {GLenum} settings.attribute.type - data type of each component in the array
+     * @param {boolean} settings.attribute.normalized - whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} settings.attribute.offset - offset in bytes of the first component in the vertex attribute array
+     * @param {object} settings.shader - an array of attributes definition
+     * @param {string} settings.shader.vertex - a string containing the GLSL source code to set
+     * @param {string} settings.shader.fragment - a string containing the GLSL source code to set
      */
     constructor (renderer, settings) {
         this.init(renderer, settings);
@@ -119,7 +119,6 @@ import GLShader from "../glshader.js";
     }
 
     /**
-     * @ignore
      * called by the WebGL renderer when a compositor become the current one
      */
     bind() {
@@ -192,7 +191,7 @@ import GLShader from "../glshader.js";
 
     /**
      * set/change the current projection matrix
-     * @param {Matrix3d} matrix
+     * @param {Matrix3d} matrix - the new projection matrix
      */
     setProjection(matrix) {
         this.currentShader.setUniform("uProjectionMatrix", matrix);

package/src/video/webgl/compositors/primitive_compositor.js

@@ -8,7 +8,7 @@ import Compositor from "./compositor.js";
  * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU
  * @augments Compositor
  */
- export default class PrimitiveCompositor extends Compositor {
+export default class PrimitiveCompositor extends Compositor {
 
     /**
      * Initialize the compositor
@@ -35,8 +35,8 @@ import Compositor from "./compositor.js";
     drawVertices(mode, verts, vertexCount = verts.length) {
         let viewMatrix = this.viewMatrix;
         let vertexData = this.vertexData;
-        let color = this.renderer.currentColor;
         let alpha = this.renderer.getGlobalAlpha();
+        let colorUint32 = this.renderer.currentColor.toUint32(alpha);
 
         if (vertexData.isFull(vertexCount)) {
             // is the vertex buffer full if we add more vertices
@@ -52,11 +52,11 @@ import Compositor from "./compositor.js";
         if (!viewMatrix.isIdentity()) {
             verts.forEach((vert) => {
                 viewMatrix.apply(vert);
-                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+                vertexData.push(vert.x, vert.y, undefined, undefined, colorUint32);
             });
         } else {
             verts.forEach((vert) => {
-                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+                vertexData.push(vert.x, vert.y, undefined, undefined, colorUint32);
             });
         }
 

package/src/video/webgl/compositors/quad_compositor.js

@@ -18,7 +18,7 @@ let V_ARRAY = [
  * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU
  * @augments Compositor
  */
- export default class QuadCompositor extends Compositor {
+export default class QuadCompositor extends Compositor {
 
     /**
      * Initialize the compositor
@@ -108,7 +108,6 @@ let V_ARRAY = [
     /**
      * delete the given WebGL texture
      * @param {WebGLTexture} [texture] - a WebGL texture to delete
-     * @param {number} [unit] - Texture unit to delete
      */
     deleteTexture2D(texture) {
         this.gl.deleteTexture(texture);

package/src/video/webgl/glshader.js

@@ -9,7 +9,7 @@ import { minify } from "./utils/string.js";
  * @classdesc
  * a base GL Shader object
  */
- export default class GLShader {
+export default class GLShader {
     /**
      * @param {WebGLRenderingContext} gl - the current WebGL rendering context
      * @param {string} vertex - a string containing the GLSL source code to set

package/src/video/webgl/utils/precision.js

@@ -13,17 +13,17 @@ export function setPrecision(src, precision) {
 /**
  * return the highest precision format supported by this device for GL Shaders
  * @ignore
- * @param {WebGLRenderingContext} gl
+ * @param {WebGLRenderingContext} gl - the current WebGL context
  * @returns {boolean} "lowp", "mediump", or "highp"
  */
 export function getMaxShaderPrecision(gl) {
     if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT ).precision > 0 &&
         gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT ).precision > 0) {
-            return "highp";
+        return "highp";
     }
     if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT ).precision > 0 &&
         gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT ).precision > 0) {
-            return "mediump";
+        return "mediump";
     }
     return "lowp";
 }

package/src/video/webgl/webgl_renderer.js

@@ -15,23 +15,9 @@ import { isPowerOfTwo } from "./../../math/math.js";
  * a WebGL renderer object
  * @augments Renderer
  */
- export default class WebGLRenderer extends Renderer {
+export default class WebGLRenderer extends Renderer {
     /**
-     * @param {object} options - The renderer parameters
-     * @param {number} options.width - The width of the canvas without scaling
-     * @param {number} options.height - The height of the canvas without scaling
-     * @param {HTMLCanvasElement} [options.canvas] - The html canvas to draw to on screen
-     * @param {boolean} [options.antiAlias=false] - Whether to enable anti-aliasing
-     * @param {boolean} [options.failIfMajorPerformanceCaveat=true] - If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas
-     * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
-     * @param {boolean} [options.subPixel=false] - Whether to enable subpixel renderering (performance hit when enabled)
-     * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
-     * @param {boolean} [options.depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
-     * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
-     * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
-     * @param {number} [options.zoomY=height] - The actual height of the canvas with scaling applied
-     * @param {Compositor} [options.compositor] - A class that implements the compositor API for sprite rendering
+     * @param {Application.Settings} [options] - optional parameters for the renderer
      */
     constructor(options) {
         // parent contructor
@@ -202,6 +188,17 @@ import { isPowerOfTwo } from "./../../math/math.js";
     reset() {
         super.reset();
 
+        // clear all stacks
+        this._colorStack.forEach((color) => {
+            pool.push(color);
+        });
+        this._matrixStack.forEach((matrix) => {
+            pool.push(matrix);
+        });
+        this._colorStack.length = 0;
+        this._matrixStack.length = 0;
+        this._blendStack.length = 0;
+
         // clear gl context
         this.clear();
 
@@ -234,8 +231,8 @@ import { isPowerOfTwo } from "./../../math/math.js";
     /**
      * add a new compositor to this renderer
      * @param {Compositor} compositor - a compositor instance
-     * @param {String} name - a name uniquely identifying this compositor
-     * @param {Boolean} [activate=false] - true if the given compositor should be set as the active one
+     * @param {string} name - a name uniquely identifying this compositor
+     * @param {boolean} [activate=false] - true if the given compositor should be set as the active one
      */
     addCompositor(compositor, name = "default", activate = false) {
         // make sure there is no existing compositor with the same name
@@ -254,9 +251,9 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * set the active compositor for this renderer
-     * @param {String} name - a compositor name
+     * @param {string} name - a compositor name
      * @param {GLShader} [shader] - an optional shader program to be used, instead of the default one, when activating the compositor
-     * @return {Compositor} an instance to the current active compositor
+     * @returns {Compositor} an instance to the current active compositor
      */
     setCompositor(name = "default", shader = this.customShader) {
         let compositor = this.compositors.get(name);
@@ -295,7 +292,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
      * Create a pattern with the specified repetition
      * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - Source image to be used as the pattern's image
      * @param {string} repeat - Define how the pattern should be repeated
-     * @returns {TextureAtlas}
+     * @returns {TextureAtlas} the patterned texture created
      * @see ImageLayer#repeat
      * @example
      * let tileable   = renderer.createPattern(image, "repeat");
@@ -332,7 +329,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * set/change the current projection matrix (WebGL only)
-     * @param {Matrix3d} matrix
+     * @param {Matrix3d} matrix - the new projection matrix
      */
     setProjection(matrix) {
         super.setProjection(matrix);
@@ -455,10 +452,10 @@ import { isPowerOfTwo } from "./../../math/math.js";
     /**
      * Draw a pattern within the given rectangle.
      * @param {TextureAtlas} pattern - Pattern object
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
+     * @param {number} x - x position where to draw the pattern
+     * @param {number} y - y position where to draw the pattern
+     * @param {number} width - width of the pattern
+     * @param {number} height - height of the pattern
      * @see WebGLRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
@@ -469,10 +466,10 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Returns the WebGL Context object of the given canvas element
-     * @param {HTMLCanvasElement} canvas
+     * @param {HTMLCanvasElement} canvas - the canvas element
      * @param {boolean} [transparent=false] - use true to enable transparency
      * @param {boolean} [depth=false] - use true to enable depth buffer testing
-     * @returns {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext} the WebGL Context object
      */
     getContextGL(canvas, transparent = false, depth = false) {
         if (typeof canvas === "undefined" || canvas === null) {
@@ -521,7 +518,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
     /**
      * Returns the WebGLContext instance for the renderer
      * return a reference to the system 2d Context
-     * @returns {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext} the current WebGL context
      */
     getContext() {
         return this.gl;
@@ -540,7 +537,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
      * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @param {string} [mode="normal"] - blend mode : "normal", "multiply", "lighter", "additive", "screen"
-     * @param {WebGLRenderingContext} [gl]
+     * @param {WebGLRenderingContext} [gl] - a WebGL context
      */
     setBlendMode(mode = "normal", gl = this.gl) {
 
@@ -629,8 +626,8 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * scales the uniform matrix
-     * @param {number} x
-     * @param {number} y
+     * @param {number} x - x-axis scale
+     * @param {number} y - y-axis scale
      */
     scale(x, y) {
         this.currentTransform.scale(x, y);
@@ -684,11 +681,11 @@ import { isPowerOfTwo } from "./../../math/math.js";
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @param {number} x - arc center point x-axis
      * @param {number} y - arc center point y-axis
-     * @param {number} radius
+     * @param {number} radius - arc radius
      * @param {number} start - start angle in radians
      * @param {number} end - end angle in radians
      * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise
-     * @param {boolean} [fill=false]
+     * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeArc(x, y, radius, start, end, antiClockwise = false, fill = false) {
         this.setCompositor("primitive");
@@ -706,7 +703,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @param {number} x - arc center point x-axis
      * @param {number} y - arc center point y-axis
-     * @param {number} radius
+     * @param {number} radius - arc radius
      * @param {number} start - start angle in radians
      * @param {number} end - end angle in radians
      * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise
@@ -809,10 +806,10 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Draw a stroke rectangle at the specified coordinates
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
+     * @param {number} x - x axis of the coordinate for the rectangle starting point.
+     * @param {number} y - y axis of the coordinate for the rectangle starting point.
+     * @param {number} width - The rectangle's width.
+     * @param {number} height - The rectangle's height.
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
@@ -828,10 +825,10 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Draw a filled rectangle at the specified coordinates
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
+     * @param {number} x - x axis of the coordinate for the rectangle starting point.
+     * @param {number} y - y axis of the coordinate for the rectangle starting point.
+     * @param {number} width - The rectangle's width.
+     * @param {number} height - The rectangle's height.
      */
     fillRect(x, y, width, height) {
         this.strokeRect(x, y, width, height, true);
@@ -839,11 +836,11 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Stroke a rounded rectangle at the specified coordinates
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
-     * @param {number} radius
+     * @param {number} x - x axis of the coordinate for the rounded rectangle starting point.
+     * @param {number} y - y axis of the coordinate for the rounded rectangle starting point.
+     * @param {number} width - The rounded rectangle's width.
+     * @param {number} height - The rounded rectangle's height.
+     * @param {number} radius - The rounded corner's radius.
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeRoundRect(x, y, width, height, radius, fill = false) {
@@ -860,11 +857,11 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Draw a rounded filled rectangle at the specified coordinates
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
-     * @param {number} radius
+     * @param {number} x - x axis of the coordinate for the rounded rectangle starting point.
+     * @param {number} y - y axis of the coordinate for the rounded rectangle starting point.
+     * @param {number} width - The rounded rectangle's width.
+     * @param {number} height - The rounded rectangle's height.
+     * @param {number} radius - The rounded corner's radius.
      */
     fillRoundRect(x, y, width, height, radius) {
         this.strokeRoundRect(x, y, width, height, radius, true);
@@ -872,8 +869,8 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Stroke a Point at the specified coordinates
-     * @param {number} x
-     * @param {number} y
+     * @param {number} x - x axis of the coordinate for the point.
+     * @param {number} y - y axis of the coordinate for the point.
      */
     strokePoint(x, y) {
         this.strokeLine(x, y, x + 1, y + 1);
@@ -881,10 +878,8 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Draw a a point at the specified coordinates
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
+     * @param {number} x - x axis of the coordinate for the point.
+     * @param {number} y - y axis of the coordinate for the point.
      */
     fillPoint(x, y) {
         this.strokePoint(x, y);
@@ -917,8 +912,8 @@ import { isPowerOfTwo } from "./../../math/math.js";
 
     /**
      * Translates the uniform matrix by the given coordinates
-     * @param {number} x
-     * @param {number} y
+     * @param {number} x - x axis of the coordinate for the translation.
+     * @param {number} y - y axis of the coordinate for the translation.
      */
     translate(x, y) {
         let currentTransform = this.currentTransform;
@@ -937,10 +932,10 @@ import { isPowerOfTwo } from "./../../math/math.js";
      * You can however save the current region using the save(),
      * and restore it (with the restore() method) any time in the future.
      * (<u>this is an experimental feature !</u>)
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
+     * @param {number} x - x axis of the coordinate for the upper-left corner of the rectangle to start clipping from.
+     * @param {number} y - y axis of the coordinate for the upper-left corner of the rectangle to start clipping from.
+     * @param {number} width - the width of the rectangle to start clipping from.
+     * @param {number} height - the height of the rectangle to start clipping from.
      */
     clipRect(x, y, width, height) {
         let canvas = this.getCanvas();
@@ -952,7 +947,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
                 // if same as the current scissor box do nothing
                 if (currentScissor[0] === x && currentScissor[1] === y &&
                     currentScissor[2] === width && currentScissor[3] === height) {
-                        return;
+                    return;
                 }
             }
             // flush the compositor