From 4a28cffcd46d75fcbba01f32eba65c83824dbb0f Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Tue, 13 Aug 2019 11:22:27 -0400 Subject: [PATCH] Revert "Skin alter push" --- src/BitmapSkin.js | 14 ++++++------- src/Drawable.js | 9 +++++++++ src/PenSkin.js | 23 +++++++++------------ src/RenderWebGL.js | 19 ------------------ src/SVGSkin.js | 38 +++++++++-------------------------- src/Skin.js | 15 +++++++------- test/fixtures/MockSkinPool.js | 35 -------------------------------- test/unit/DrawableTests.js | 7 ------- 8 files changed, 44 insertions(+), 116 deletions(-) delete mode 100644 test/fixtures/MockSkinPool.js diff --git a/src/BitmapSkin.js b/src/BitmapSkin.js index 13d17bd..94f2984 100644 --- a/src/BitmapSkin.js +++ b/src/BitmapSkin.js @@ -23,12 +23,6 @@ class BitmapSkin extends Skin { /** @type {Array} */ this._textureSize = [0, 0]; - - /** - * The "native" size, in texels, of this skin. - * @type {Array} - */ - this.size = [0, 0]; } /** @@ -49,6 +43,13 @@ class BitmapSkin extends Skin { return true; } + /** + * @return {Array} the "native" size, in texels, of this skin. + */ + get size () { + return [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution]; + } + /** * @param {Array} scale - The scaling factors to be used. * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale. @@ -109,7 +110,6 @@ class BitmapSkin extends Skin { // Do these last in case any of the above throws an exception this._costumeResolution = costumeResolution || 2; this._textureSize = BitmapSkin._getBitmapSize(bitmapData); - this.size = [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution]; if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter(); this.setRotationCenter.apply(this, rotationCenter); diff --git a/src/Drawable.js b/src/Drawable.js index f97b4e7..ea94acd 100644 --- a/src/Drawable.js +++ b/src/Drawable.js @@ -3,6 +3,7 @@ const twgl = require('twgl.js'); const Rectangle = require('./Rectangle'); const RenderConstants = require('./RenderConstants'); const ShaderManager = require('./ShaderManager'); +const Skin = require('./Skin'); const EffectTransform = require('./EffectTransform'); /** @@ -100,6 +101,8 @@ class Drawable { /** @todo move convex hull functionality, maybe bounds functionality overall, to Skin classes */ this._convexHullPoints = null; this._convexHullDirty = true; + + this._skinWasAltered = this._skinWasAltered.bind(this); } /** @@ -138,7 +141,13 @@ class Drawable { */ set skin (newSkin) { if (this._skin !== newSkin) { + if (this._skin) { + this._skin.removeListener(Skin.Events.WasAltered, this._skinWasAltered); + } this._skin = newSkin; + if (this._skin) { + this._skin.addListener(Skin.Events.WasAltered, this._skinWasAltered); + } this._skinWasAltered(); } } diff --git a/src/PenSkin.js b/src/PenSkin.js index 273cac1..1e500ba 100644 --- a/src/PenSkin.js +++ b/src/PenSkin.js @@ -88,9 +88,6 @@ class PenSkin extends Skin { /** @type {HTMLCanvasElement} */ this._canvas = document.createElement('canvas'); - /** @type {Array} */ - this._canvasSize = twgl.v3.create(); - /** @type {WebGLTexture} */ this._texture = null; @@ -168,7 +165,7 @@ class PenSkin extends Skin { * @return {Array} the "native" size, in texels, of this skin. [width, height] */ get size () { - return this._canvasSize; + return [this._canvas.width, this._canvas.height]; } /** @@ -191,13 +188,13 @@ class PenSkin extends Skin { clear () { const gl = this._renderer.gl; twgl.bindFramebufferInfo(gl, this._framebuffer); - + /* Reset framebuffer to transparent black */ gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); const ctx = this._canvas.getContext('2d'); - ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]); + ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); this._silhouetteDirty = true; } @@ -454,7 +451,7 @@ class PenSkin extends Skin { * @param {number} x - centered at x * @param {number} y - centered at y */ - _drawRectangle (currentShader, texture, bounds, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) { + _drawRectangle (currentShader, texture, bounds, x = -this._canvas.width / 2, y = this._canvas.height / 2) { const gl = this._renderer.gl; const projection = twgl.m4.ortho( @@ -517,7 +514,7 @@ class PenSkin extends Skin { * @param {number} x - texture centered at x * @param {number} y - texture centered at y */ - _drawToBuffer (texture = this._texture, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) { + _drawToBuffer (texture = this._texture, x = -this._canvas.width / 2, y = this._canvas.height / 2) { if (texture !== this._texture && this._canvasDirty) { this._drawToBuffer(); } @@ -531,7 +528,7 @@ class PenSkin extends Skin { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._canvas); const ctx = this._canvas.getContext('2d'); - ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]); + ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); this._canvasDirty = false; } @@ -567,8 +564,8 @@ class PenSkin extends Skin { this._bounds = new Rectangle(); this._bounds.initFromBounds(width / 2, width / -2, height / 2, height / -2); - this._canvas.width = this._canvasSize[0] = width; - this._canvas.height = this._canvasSize[1] = height; + this._canvas.width = width; + this._canvas.height = height; this._rotationCenter[0] = width / 2; this._rotationCenter[1] = height / 2; @@ -654,8 +651,8 @@ class PenSkin extends Skin { this._renderer.enterDrawRegion(this._toBufferDrawRegionId); // Sample the framebuffer's pixels into the silhouette instance - const skinPixels = new Uint8Array(Math.floor(this._canvasSize[0] * this._canvasSize[1] * 4)); - gl.readPixels(0, 0, this._canvasSize[0], this._canvasSize[1], gl.RGBA, gl.UNSIGNED_BYTE, skinPixels); + const skinPixels = new Uint8Array(Math.floor(this._canvas.width * this._canvas.height * 4)); + gl.readPixels(0, 0, this._canvas.width, this._canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, skinPixels); const skinCanvas = this._canvas; skinCanvas.width = bounds.width; diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index d9f5ae2..ba629ea 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -3,7 +3,6 @@ const EventEmitter = require('events'); const hull = require('hull.js'); const twgl = require('twgl.js'); -const Skin = require('./Skin'); const BitmapSkin = require('./BitmapSkin'); const Drawable = require('./Drawable'); const Rectangle = require('./Rectangle'); @@ -292,20 +291,6 @@ class RenderWebGL extends EventEmitter { this.emit(RenderConstants.Events.NativeSizeChanged, {newSize: this._nativeSize}); } - /** - * Notify Drawables whose skin is the skin that changed. - * @param {Skin} skin - the skin that changed. - * @private - */ - _skinWasAltered (skin) { - for (let i = 0; i < this._allDrawables.length; i++) { - const drawable = this._allDrawables[i]; - if (drawable && drawable._skin === skin) { - drawable._skinWasAltered(); - } - } - } - /** * Create a new bitmap skin from a snapshot of the provided bitmap data. * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin. @@ -318,7 +303,6 @@ class RenderWebGL extends EventEmitter { const skinId = this._nextSkinId++; const newSkin = new BitmapSkin(skinId, this); newSkin.setBitmap(bitmapData, costumeResolution, rotationCenter); - newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin)); this._allSkins[skinId] = newSkin; return skinId; } @@ -334,7 +318,6 @@ class RenderWebGL extends EventEmitter { const skinId = this._nextSkinId++; const newSkin = new SVGSkin(skinId, this); newSkin.setSVG(svgData, rotationCenter); - newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin)); this._allSkins[skinId] = newSkin; return skinId; } @@ -346,7 +329,6 @@ class RenderWebGL extends EventEmitter { createPenSkin () { const skinId = this._nextSkinId++; const newSkin = new PenSkin(skinId, this); - newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin)); this._allSkins[skinId] = newSkin; return skinId; } @@ -363,7 +345,6 @@ class RenderWebGL extends EventEmitter { const skinId = this._nextSkinId++; const newSkin = new TextBubbleSkin(skinId, this); newSkin.setTextBubble(type, text, pointsLeft); - newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin)); this._allSkins[skinId] = newSkin; return skinId; } diff --git a/src/SVGSkin.js b/src/SVGSkin.js index 9c10e61..90e3908 100644 --- a/src/SVGSkin.js +++ b/src/SVGSkin.js @@ -30,24 +30,6 @@ class SVGSkin extends Skin { /** @type {Number} */ this._maxTextureScale = 0; - - /** - * The natural size, in Scratch units, of this skin. - * @type {Array} - */ - this.size = [0, 0]; - - /** - * The viewbox offset of the svg. - * @type {Array} - */ - this._viewOffset = [0, 0]; - - /** - * The rotation center before offset by _viewOffset. - * @type {Array} - */ - this._rawRotationCenter = [NaN, NaN]; } /** @@ -61,17 +43,21 @@ class SVGSkin extends Skin { super.dispose(); } + /** + * @return {Array} the natural size, in Scratch units, of this skin. + */ + get size () { + return this._svgRenderer.size; + } + /** * Set the origin, in object space, about which this Skin should rotate. * @param {number} x - The x coordinate of the new rotation center. * @param {number} y - The y coordinate of the new rotation center. */ setRotationCenter (x, y) { - if (x !== this._rawRotationCenter[0] || y !== this._rawRotationCenter[1]) { - this._rawRotationCenter[0] = x; - this._rawRotationCenter[1] = y; - super.setRotationCenter(x - this._viewOffset[0], y - this._viewOffset[1]); - } + const viewOffset = this._svgRenderer.viewOffset; + super.setRotationCenter(x - viewOffset[0], y - viewOffset[1]); } /** @@ -148,11 +134,7 @@ class SVGSkin extends Skin { } if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter(); - this.size = this._svgRenderer.size; - this._viewOffset = this._svgRenderer.viewOffset; - // Reset rawRotationCenter when we update viewOffset. - this._rawRotationCenter = [NaN, NaN]; - this.setRotationCenter(rotationCenter[0], rotationCenter[1]); + this.setRotationCenter.apply(this, rotationCenter); this.emit(Skin.Events.WasAltered); }); } diff --git a/src/Skin.js b/src/Skin.js index 8bd89d6..473c70b 100644 --- a/src/Skin.js +++ b/src/Skin.js @@ -33,13 +33,6 @@ class Skin extends EventEmitter { /** @type {Vec3} */ this._rotationCenter = twgl.v3.create(0, 0); - /** - * The "native" size, in texels, of this skin. - * @member size - * @abstract - * @type {Array} - */ - /** * The uniforms to be used by the vertex and pixel shaders. * Some of these are used by other parts of the renderer as well. @@ -104,6 +97,14 @@ class Skin extends EventEmitter { return this._rotationCenter; } + /** + * @abstract + * @return {Array} the "native" size, in texels, of this skin. + */ + get size () { + return [0, 0]; + } + /** * Set the origin, in object space, about which this Skin should rotate. * @param {number} x - The x coordinate of the new rotation center. diff --git a/test/fixtures/MockSkinPool.js b/test/fixtures/MockSkinPool.js deleted file mode 100644 index 208d933..0000000 --- a/test/fixtures/MockSkinPool.js +++ /dev/null @@ -1,35 +0,0 @@ -const Skin = require('../../src/Skin'); - -class MockSkinPool { - constructor () { - this._allDrawables = []; - } - - static forDrawableSkin (drawable) { - const pool = new MockSkinPool(); - pool.addDrawable(drawable); - pool.addSkin(drawable.skin); - return pool; - } - - _skinWasAltered (skin) { - for (let i = 0; i < this._allDrawables.length; i++) { - const drawable = this._allDrawables[i]; - if (drawable && drawable._skin === skin) { - drawable._skinWasAltered(); - } - } - } - - addDrawable (drawable) { - this._allDrawables.push(drawable); - return drawable; - } - - addSkin (skin) { - skin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, skin)); - return skin; - } -} - -module.exports = MockSkinPool; diff --git a/test/unit/DrawableTests.js b/test/unit/DrawableTests.js index 235e3d3..f0f163b 100644 --- a/test/unit/DrawableTests.js +++ b/test/unit/DrawableTests.js @@ -8,7 +8,6 @@ global.document = { const Drawable = require('../../src/Drawable'); const MockSkin = require('../fixtures/MockSkin'); -const MockSkinPool = require('../fixtures/MockSkinPool'); const Rectangle = require('../../src/Rectangle'); /** @@ -32,7 +31,6 @@ test('translate by position', t => { const drawable = new Drawable(); drawable.skin = new MockSkin(); drawable.skin.size = [200, 50]; - MockSkinPool.forDrawableSkin(drawable); expected.initFromBounds(0, 200, -50, 0); t.same(snapToNearest(drawable.getAABB()), expected); @@ -49,7 +47,6 @@ test('translate by costume center', t => { const drawable = new Drawable(); drawable.skin = new MockSkin(); drawable.skin.size = [200, 50]; - MockSkinPool.forDrawableSkin(drawable); drawable.skin.setRotationCenter(1, 0); expected.initFromBounds(-1, 199, -50, 0); @@ -67,7 +64,6 @@ test('translate and rotate', t => { const drawable = new Drawable(); drawable.skin = new MockSkin(); drawable.skin.size = [200, 50]; - MockSkinPool.forDrawableSkin(drawable); drawable.updateProperties({position: [1, 2], direction: 0}); expected.initFromBounds(1, 51, 2, 202); @@ -94,7 +90,6 @@ test('rotate by non-right-angles', t => { drawable.skin = new MockSkin(); drawable.skin.size = [10, 10]; drawable.skin.setRotationCenter(5, 5); - MockSkinPool.forDrawableSkin(drawable); expected.initFromBounds(-5, 5, -5, 5); t.same(snapToNearest(drawable.getAABB()), expected); @@ -111,7 +106,6 @@ test('scale', t => { const drawable = new Drawable(); drawable.skin = new MockSkin(); drawable.skin.size = [200, 50]; - MockSkinPool.forDrawableSkin(drawable); drawable.updateProperties({scale: [100, 50]}); expected.initFromBounds(0, 200, -25, 0); @@ -134,7 +128,6 @@ test('rotate and scale', t => { const drawable = new Drawable(); drawable.skin = new MockSkin(); drawable.skin.size = [100, 1000]; - MockSkinPool.forDrawableSkin(drawable); drawable.skin.setRotationCenter(50, 50); expected.initFromBounds(-50, 50, -950, 50);