Skip to content

Commit 832b027

Browse files
authored
Merge pull request #505 from LLK/revert-496-revert-493-revert-470-skin-alter-push
Revert "Revert "Revert "Skin alter push"""
2 parents 928cd60 + 1cd9e54 commit 832b027

File tree

8 files changed

+46
-124
lines changed

8 files changed

+46
-124
lines changed

src/BitmapSkin.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ class BitmapSkin extends Skin {
2323

2424
/** @type {Array<int>} */
2525
this._textureSize = [0, 0];
26-
27-
/**
28-
* The "native" size, in texels, of this skin.
29-
* @type {Array<number>}
30-
*/
31-
this.size = [0, 0];
3226
}
3327

3428
/**
@@ -49,6 +43,13 @@ class BitmapSkin extends Skin {
4943
return true;
5044
}
5145

46+
/**
47+
* @return {Array<number>} the "native" size, in texels, of this skin.
48+
*/
49+
get size () {
50+
return [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
51+
}
52+
5253
/**
5354
* @param {Array<number>} scale - The scaling factors to be used.
5455
* @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
@@ -109,7 +110,6 @@ class BitmapSkin extends Skin {
109110
// Do these last in case any of the above throws an exception
110111
this._costumeResolution = costumeResolution || 2;
111112
this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
112-
this.size = [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
113113

114114
if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
115115
this.setRotationCenter.apply(this, rotationCenter);

src/Drawable.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const twgl = require('twgl.js');
33
const Rectangle = require('./Rectangle');
44
const RenderConstants = require('./RenderConstants');
55
const ShaderManager = require('./ShaderManager');
6+
const Skin = require('./Skin');
67
const EffectTransform = require('./EffectTransform');
78

89
/**
@@ -100,6 +101,8 @@ class Drawable {
100101
/** @todo move convex hull functionality, maybe bounds functionality overall, to Skin classes */
101102
this._convexHullPoints = null;
102103
this._convexHullDirty = true;
104+
105+
this._skinWasAltered = this._skinWasAltered.bind(this);
103106
}
104107

105108
/**
@@ -138,7 +141,13 @@ class Drawable {
138141
*/
139142
set skin (newSkin) {
140143
if (this._skin !== newSkin) {
144+
if (this._skin) {
145+
this._skin.removeListener(Skin.Events.WasAltered, this._skinWasAltered);
146+
}
141147
this._skin = newSkin;
148+
if (this._skin) {
149+
this._skin.addListener(Skin.Events.WasAltered, this._skinWasAltered);
150+
}
142151
this._skinWasAltered();
143152
}
144153
}

src/PenSkin.js

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,6 @@ class PenSkin extends Skin {
8888
/** @type {HTMLCanvasElement} */
8989
this._canvas = document.createElement('canvas');
9090

91-
/** @type {Array<number>} */
92-
this._canvasSize = twgl.v3.create();
93-
9491
/** @type {WebGLTexture} */
9592
this._texture = null;
9693

@@ -168,7 +165,7 @@ class PenSkin extends Skin {
168165
* @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
169166
*/
170167
get size () {
171-
return this._canvasSize;
168+
return [this._canvas.width, this._canvas.height];
172169
}
173170

174171
/**
@@ -191,13 +188,13 @@ class PenSkin extends Skin {
191188
clear () {
192189
const gl = this._renderer.gl;
193190
twgl.bindFramebufferInfo(gl, this._framebuffer);
194-
191+
195192
/* Reset framebuffer to transparent black */
196193
gl.clearColor(0, 0, 0, 0);
197194
gl.clear(gl.COLOR_BUFFER_BIT);
198195

199196
const ctx = this._canvas.getContext('2d');
200-
ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]);
197+
ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
201198

202199
this._silhouetteDirty = true;
203200
}
@@ -454,7 +451,7 @@ class PenSkin extends Skin {
454451
* @param {number} x - centered at x
455452
* @param {number} y - centered at y
456453
*/
457-
_drawRectangle (currentShader, texture, bounds, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) {
454+
_drawRectangle (currentShader, texture, bounds, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
458455
const gl = this._renderer.gl;
459456

460457
const projection = twgl.m4.ortho(
@@ -517,7 +514,7 @@ class PenSkin extends Skin {
517514
* @param {number} x - texture centered at x
518515
* @param {number} y - texture centered at y
519516
*/
520-
_drawToBuffer (texture = this._texture, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) {
517+
_drawToBuffer (texture = this._texture, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
521518
if (texture !== this._texture && this._canvasDirty) {
522519
this._drawToBuffer();
523520
}
@@ -531,7 +528,7 @@ class PenSkin extends Skin {
531528
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._canvas);
532529

533530
const ctx = this._canvas.getContext('2d');
534-
ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]);
531+
ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
535532

536533
this._canvasDirty = false;
537534
}
@@ -567,8 +564,8 @@ class PenSkin extends Skin {
567564
this._bounds = new Rectangle();
568565
this._bounds.initFromBounds(width / 2, width / -2, height / 2, height / -2);
569566

570-
this._canvas.width = this._canvasSize[0] = width;
571-
this._canvas.height = this._canvasSize[1] = height;
567+
this._canvas.width = width;
568+
this._canvas.height = height;
572569
this._rotationCenter[0] = width / 2;
573570
this._rotationCenter[1] = height / 2;
574571

@@ -654,8 +651,8 @@ class PenSkin extends Skin {
654651
this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
655652

656653
// Sample the framebuffer's pixels into the silhouette instance
657-
const skinPixels = new Uint8Array(Math.floor(this._canvasSize[0] * this._canvasSize[1] * 4));
658-
gl.readPixels(0, 0, this._canvasSize[0], this._canvasSize[1], gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
654+
const skinPixels = new Uint8Array(Math.floor(this._canvas.width * this._canvas.height * 4));
655+
gl.readPixels(0, 0, this._canvas.width, this._canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
659656

660657
const skinCanvas = this._canvas;
661658
skinCanvas.width = bounds.width;

src/RenderWebGL.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const EventEmitter = require('events');
33
const hull = require('hull.js');
44
const twgl = require('twgl.js');
55

6-
const Skin = require('./Skin');
76
const BitmapSkin = require('./BitmapSkin');
87
const Drawable = require('./Drawable');
98
const Rectangle = require('./Rectangle');
@@ -292,20 +291,6 @@ class RenderWebGL extends EventEmitter {
292291
this.emit(RenderConstants.Events.NativeSizeChanged, {newSize: this._nativeSize});
293292
}
294293

295-
/**
296-
* Notify Drawables whose skin is the skin that changed.
297-
* @param {Skin} skin - the skin that changed.
298-
* @private
299-
*/
300-
_skinWasAltered (skin) {
301-
for (let i = 0; i < this._allDrawables.length; i++) {
302-
const drawable = this._allDrawables[i];
303-
if (drawable && drawable._skin === skin) {
304-
drawable._skinWasAltered();
305-
}
306-
}
307-
}
308-
309294
/**
310295
* Create a new bitmap skin from a snapshot of the provided bitmap data.
311296
* @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
@@ -318,7 +303,6 @@ class RenderWebGL extends EventEmitter {
318303
const skinId = this._nextSkinId++;
319304
const newSkin = new BitmapSkin(skinId, this);
320305
newSkin.setBitmap(bitmapData, costumeResolution, rotationCenter);
321-
newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
322306
this._allSkins[skinId] = newSkin;
323307
return skinId;
324308
}
@@ -334,7 +318,6 @@ class RenderWebGL extends EventEmitter {
334318
const skinId = this._nextSkinId++;
335319
const newSkin = new SVGSkin(skinId, this);
336320
newSkin.setSVG(svgData, rotationCenter);
337-
newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
338321
this._allSkins[skinId] = newSkin;
339322
return skinId;
340323
}
@@ -346,7 +329,6 @@ class RenderWebGL extends EventEmitter {
346329
createPenSkin () {
347330
const skinId = this._nextSkinId++;
348331
const newSkin = new PenSkin(skinId, this);
349-
newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
350332
this._allSkins[skinId] = newSkin;
351333
return skinId;
352334
}
@@ -363,7 +345,6 @@ class RenderWebGL extends EventEmitter {
363345
const skinId = this._nextSkinId++;
364346
const newSkin = new TextBubbleSkin(skinId, this);
365347
newSkin.setTextBubble(type, text, pointsLeft);
366-
newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
367348
this._allSkins[skinId] = newSkin;
368349
return skinId;
369350
}

src/SVGSkin.js

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,6 @@ class SVGSkin extends Skin {
3030

3131
/** @type {Number} */
3232
this._maxTextureScale = 0;
33-
34-
/**
35-
* The natural size, in Scratch units, of this skin.
36-
* @type {Array<number>}
37-
*/
38-
this.size = [0, 0];
39-
40-
/**
41-
* The viewbox offset of the svg.
42-
* @type {Array<number>}
43-
*/
44-
this._viewOffset = [0, 0];
45-
46-
/**
47-
* The rotation center before offset by _viewOffset.
48-
* @type {Array<number>}
49-
*/
50-
this._rawRotationCenter = [NaN, NaN];
5133
}
5234

5335
/**
@@ -61,17 +43,21 @@ class SVGSkin extends Skin {
6143
super.dispose();
6244
}
6345

46+
/**
47+
* @return {Array<number>} the natural size, in Scratch units, of this skin.
48+
*/
49+
get size () {
50+
return this._svgRenderer.size;
51+
}
52+
6453
/**
6554
* Set the origin, in object space, about which this Skin should rotate.
6655
* @param {number} x - The x coordinate of the new rotation center.
6756
* @param {number} y - The y coordinate of the new rotation center.
6857
*/
6958
setRotationCenter (x, y) {
70-
if (x !== this._rawRotationCenter[0] || y !== this._rawRotationCenter[1]) {
71-
this._rawRotationCenter[0] = x;
72-
this._rawRotationCenter[1] = y;
73-
super.setRotationCenter(x - this._viewOffset[0], y - this._viewOffset[1]);
74-
}
59+
const viewOffset = this._svgRenderer.viewOffset;
60+
super.setRotationCenter(x - viewOffset[0], y - viewOffset[1]);
7561
}
7662

7763
/**
@@ -114,19 +100,7 @@ class SVGSkin extends Skin {
114100
* @fires Skin.event:WasAltered
115101
*/
116102
setSVG (svgData, rotationCenter) {
117-
this._svgRenderer.loadString(svgData);
118-
119-
// Size must be updated synchronously because the VM sets the costume's `size` immediately after calling this.
120-
// TODO: add either a callback to this function so the costume size can be set after this is done,
121-
// or something in the VM to handle setting the costume size when Skin.Events.WasAltered is emitted.
122-
this.size = this._svgRenderer.size;
123-
if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
124-
this._viewOffset = this._svgRenderer.viewOffset;
125-
// Reset rawRotationCenter when we update viewOffset.
126-
this._rawRotationCenter = [NaN, NaN];
127-
this.setRotationCenter(rotationCenter[0], rotationCenter[1]);
128-
129-
this._svgRenderer._draw(1, () => {
103+
this._svgRenderer.fromString(svgData, 1, () => {
130104
const gl = this._renderer.gl;
131105
this._textureScale = this._maxTextureScale = 1;
132106

@@ -159,6 +133,8 @@ class SVGSkin extends Skin {
159133
this._maxTextureScale = testScale;
160134
}
161135

136+
if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
137+
this.setRotationCenter.apply(this, rotationCenter);
162138
this.emit(Skin.Events.WasAltered);
163139
});
164140
}

src/Skin.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,6 @@ class Skin extends EventEmitter {
3333
/** @type {Vec3} */
3434
this._rotationCenter = twgl.v3.create(0, 0);
3535

36-
/**
37-
* The "native" size, in texels, of this skin.
38-
* @member size
39-
* @abstract
40-
* @type {Array<number>}
41-
*/
42-
4336
/**
4437
* The uniforms to be used by the vertex and pixel shaders.
4538
* Some of these are used by other parts of the renderer as well.
@@ -104,6 +97,14 @@ class Skin extends EventEmitter {
10497
return this._rotationCenter;
10598
}
10699

100+
/**
101+
* @abstract
102+
* @return {Array<number>} the "native" size, in texels, of this skin.
103+
*/
104+
get size () {
105+
return [0, 0];
106+
}
107+
107108
/**
108109
* Set the origin, in object space, about which this Skin should rotate.
109110
* @param {number} x - The x coordinate of the new rotation center.

test/fixtures/MockSkinPool.js

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)