Skip to content

Commit

Permalink
convert Style and related classes to ES6 class syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@mourner
mourner committed Oct 19, 2016
1 parent ab8aa7a commit fe2631c
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 311 deletions.
8 changes: 4 additions & 4 deletions bench/benchmarks/buffer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,14 @@ function preloadAssets(stylesheet, callback) {

style.on('style.load', () => {
function getGlyphs(params, callback) {
style['get glyphs'](0, params, (err, glyphs) => {
style.getGlyphs(0, params, (err, glyphs) => {
assets.glyphs[JSON.stringify(params)] = glyphs;
callback(err, glyphs);
});
}

function getIcons(params, callback) {
style['get icons'](0, params, (err, icons) => {
style.getIcons(0, params, (err, icons) => {
assets.icons[JSON.stringify(params)] = icons;
callback(err, icons);
});
Expand Down Expand Up @@ -147,9 +147,9 @@ function runSample(stylesheet, getGlyphs, getIcons, getTile, callback) {
const actor = {
send: function(action, params, sendCallback) {
setTimeout(() => {
if (action === 'get icons') {
if (action === 'getIcons') {
getIcons(params, sendCallback);
} else if (action === 'get glyphs') {
} else if (action === 'getGlyphs') {
getGlyphs(params, sendCallback);
} else assert(false);
}, 0);
Expand Down
4 changes: 2 additions & 2 deletions js/source/worker_tile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,13 @@ WorkerTile.prototype.parse = function(data, layerFamilies, actor, callback) {
}
};

actor.send('get glyphs', {uid: this.uid, stacks: stacks}, (err, newStacks) => {
actor.send('getGlyphs', {uid: this.uid, stacks: stacks}, (err, newStacks) => {
stacks = newStacks;
gotDependency(err);
});

if (icons.length) {
actor.send('get icons', {icons: icons}, (err, newIcons) => {
actor.send('getIcons', {icons: icons}, (err, newIcons) => {
icons = newIcons;
gotDependency(err);
});
Expand Down
50 changes: 26 additions & 24 deletions js/style/animation_loop.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
'use strict';

module.exports = AnimationLoop;
class AnimationLoop {
constructor() {
this.n = 0;
this.times = [];
}

function AnimationLoop() {
this.n = 0;
this.times = [];
}
// Are all animations done?
stopped() {
this.times = this.times.filter((t) => {
return t.time >= (new Date()).getTime();
});
return !this.times.length;
}

// Are all animations done?
AnimationLoop.prototype.stopped = function() {
this.times = this.times.filter((t) => {
return t.time >= (new Date()).getTime();
});
return !this.times.length;
};
// Add a new animation that will run t milliseconds
// Returns an id that can be used to cancel it layer
set(t) {
this.times.push({ id: this.n, time: t + (new Date()).getTime() });
return this.n++;
}

// Add a new animation that will run t milliseconds
// Returns an id that can be used to cancel it layer
AnimationLoop.prototype.set = function(t) {
this.times.push({ id: this.n, time: t + (new Date()).getTime() });
return this.n++;
};
// Cancel an animation
cancel(n) {
this.times = this.times.filter((t) => {
return t.id !== n;
});
}
}

// Cancel an animation
AnimationLoop.prototype.cancel = function(n) {
this.times = this.times.filter((t) => {
return t.id !== n;
});
};
module.exports = AnimationLoop;
126 changes: 68 additions & 58 deletions js/style/image_sprite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,75 +5,85 @@ const ajax = require('../util/ajax');
const browser = require('../util/browser');
const normalizeURL = require('../util/mapbox').normalizeSpriteURL;

module.exports = ImageSprite;

function ImageSprite(base) {
this.base = base;
this.retina = browser.devicePixelRatio > 1;

const format = this.retina ? '@2x' : '';
class SpritePosition {
constructor() {
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.pixelRatio = 1;
this.sdf = false;
}
}

ajax.getJSON(normalizeURL(base, format, '.json'), (err, data) => {
if (err) {
this.fire('error', {error: err});
return;
}
class ImageSprite extends Evented {

this.data = data;
if (this.img) this.fire('data', {dataType: 'style'});
});
constructor(base) {
super();
this.base = base;
this.retina = browser.devicePixelRatio > 1;

ajax.getImage(normalizeURL(base, format, '.png'), (err, img) => {
if (err) {
this.fire('error', {error: err});
return;
}
const format = this.retina ? '@2x' : '';

// premultiply the sprite
const data = img.getData();
const newdata = img.data = new Uint8Array(data.length);
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3] / 255;
newdata[i + 0] = data[i + 0] * alpha;
newdata[i + 1] = data[i + 1] * alpha;
newdata[i + 2] = data[i + 2] * alpha;
newdata[i + 3] = data[i + 3];
}
ajax.getJSON(normalizeURL(base, format, '.json'), (err, data) => {
if (err) {
this.fire('error', {error: err});
return;
}

this.img = img;
if (this.data) this.fire('data', {dataType: 'style'});
});
}
this.data = data;
if (this.img) this.fire('data', {dataType: 'style'});
});

ImageSprite.prototype = Object.create(Evented.prototype);
ajax.getImage(normalizeURL(base, format, '.png'), (err, img) => {
if (err) {
this.fire('error', {error: err});
return;
}

// premultiply the sprite
const data = img.getData();
const newdata = img.data = new Uint8Array(data.length);
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3] / 255;
newdata[i + 0] = data[i + 0] * alpha;
newdata[i + 1] = data[i + 1] * alpha;
newdata[i + 2] = data[i + 2] * alpha;
newdata[i + 3] = data[i + 3];
}

this.img = img;
if (this.data) this.fire('data', {dataType: 'style'});
});
}

ImageSprite.prototype.toJSON = function() {
return this.base;
};
toJSON() {
return this.base;
}

ImageSprite.prototype.loaded = function() {
return !!(this.data && this.img);
};
loaded() {
return !!(this.data && this.img);
}

ImageSprite.prototype.resize = function(/*gl*/) {
if (browser.devicePixelRatio > 1 !== this.retina) {
const newSprite = new ImageSprite(this.base);
newSprite.on('data', () => {
this.img = newSprite.img;
this.data = newSprite.data;
this.retina = newSprite.retina;
});
resize(/*gl*/) {
if (browser.devicePixelRatio > 1 !== this.retina) {
const newSprite = new ImageSprite(this.base);
newSprite.on('data', () => {
this.img = newSprite.img;
this.data = newSprite.data;
this.retina = newSprite.retina;
});
}
}
};

function SpritePosition() {}
SpritePosition.prototype = { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1, sdf: false };
getSpritePosition(name) {
if (!this.loaded()) return new SpritePosition();

ImageSprite.prototype.getSpritePosition = function(name) {
if (!this.loaded()) return new SpritePosition();
const pos = this.data && this.data[name];
if (pos && this.img) return pos;

const pos = this.data && this.data[name];
if (pos && this.img) return pos;
return new SpritePosition();
}
}

return new SpritePosition();
};
module.exports = ImageSprite;
60 changes: 30 additions & 30 deletions js/style/light.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,21 @@ const validateStyle = require('./validate_style');
const StyleDeclaration = require('./style_declaration');
const StyleTransition = require('./style_transition');

const TRANSITION_SUFFIX = '-transition';

/*
* Represents the light used to light extruded features.
*/
module.exports = Light;
class Light extends Evented {

const TRANSITION_SUFFIX = '-transition';

function Light(lightOptions) {
this.set(lightOptions);
}
constructor(lightOptions) {
super();
this.properties = ['anchor', 'color', 'position', 'intensity'];
this._specifications = styleSpec.$root.light;
this.set(lightOptions);
}

Light.prototype = util.inherit(Evented, {
properties: ['anchor', 'color', 'position', 'intensity'],

_specifications: styleSpec.$root.light,

set: function(lightOpts) {
set(lightOpts) {
if (this._validate(validateStyle.light, lightOpts)) return;
this._declarations = {};
this._transitions = {};
Expand All @@ -44,18 +42,18 @@ Light.prototype = util.inherit(Evented, {
}

return this;
},
}

getLight: function() {
getLight() {
return {
anchor: this.getLightProperty('anchor'),
color: this.getLightProperty('color'),
position: this.getLightProperty('position'),
intensity: this.getLightProperty('intensity')
};
},
}

getLightProperty: function(property) {
getLightProperty(property) {
if (util.endsWith(property, TRANSITION_SUFFIX)) {
return (
this._transitionOptions[property]
Expand All @@ -66,9 +64,9 @@ Light.prototype = util.inherit(Evented, {
this._declarations[property].value
);
}
},
}

getLightValue: function(property, globalProperties) {
getLightValue(property, globalProperties) {
if (property === 'position') {
const calculated = this._transitions[property].calculate(globalProperties),
cartesian = util.sphericalToCartesian(calculated);
Expand All @@ -80,9 +78,9 @@ Light.prototype = util.inherit(Evented, {
}

return this._transitions[property].calculate(globalProperties);
},
}

setLight: function(options) {
setLight(options) {
if (this._validate(validateStyle.light, options)) return;

for (const key in options) {
Expand All @@ -96,15 +94,15 @@ Light.prototype = util.inherit(Evented, {
this._declarations[key] = new StyleDeclaration(this._specifications[key], value);
}
}
},
}

recalculate: function(zoom, zoomHistory) {
recalculate(zoom, zoomHistory) {
for (const property in this._declarations) {
this.calculated[property] = this.getLightValue(property, {zoom: zoom, zoomHistory: zoomHistory});
}
},
}

_applyLightDeclaration: function(property, declaration, options, globalOptions, animationLoop) {
_applyLightDeclaration(property, declaration, options, globalOptions, animationLoop) {
const oldTransition = options.transition ? this._transitions[property] : undefined;
const spec = this._specifications[property];

Expand All @@ -127,21 +125,23 @@ Light.prototype = util.inherit(Evented, {
if (oldTransition) {
animationLoop.cancel(oldTransition.loopID);
}
},
}

updateLightTransitions: function(options, globalOptions, animationLoop) {
updateLightTransitions(options, globalOptions, animationLoop) {
let property;
for (property in this._declarations) {
this._applyLightDeclaration(property, this._declarations[property], options, globalOptions, animationLoop);
}
},
}

_validate: function(validate, value) {
_validate(validate, value) {
return validateStyle.emitErrors(this, validate.call(validateStyle, util.extend({
value: value,
// Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
style: {glyphs: true, sprite: true},
styleSpec: styleSpec
})));
},
});
}
}

module.exports = Light;
Loading

0 comments on commit fe2631c

Please sign in to comment.