Skip to content

Commit

Permalink
refactor(StyleOptions): move StyleOptions from Style to its own file
Browse files Browse the repository at this point in the history
  • Loading branch information
@ftoromanoff
ftoromanoff committed Jan 15, 2025
1 parent 858b89e commit 29976cb
Show file tree
Hide file tree
Showing 7 changed files with 666 additions and 621 deletions.
4 changes: 2 additions & 2 deletions src/Core/Feature.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as THREE from 'three';
import Extent from 'Core/Geographic/Extent';
import Coordinates from 'Core/Geographic/Coordinates';
import Style from 'Core/Style';
import StyleOptions from 'Core/StyleOptions';

function defaultExtent(crs) {
return new Extent(crs, Infinity, -Infinity, Infinity, -Infinity);
Expand Down Expand Up @@ -250,7 +250,7 @@ class Feature {
}
this._pos = 0;
this._pushValues = (this.size === 3 ? push3DValues : push2DValues).bind(this);
this.style = Style.setFromProperties;
this.style = StyleOptions.setFromProperties;
}
/**
* Instance a new {@link FeatureGeometry} and push in {@link Feature}.
Expand Down
411 changes: 0 additions & 411 deletions src/Core/Style.js
View file

Large diffs are not rendered by default.

416 changes: 416 additions & 0 deletions src/Core/StyleOptions.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/Source/VectorTilesSource.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { featureFilter } from '@maplibre/maplibre-gl-style-spec';
import Style from 'Core/Style';
import StyleOptions from 'Core/StyleOptions';
import TMSSource from 'Source/TMSSource';
import URLBuilder from 'Provider/URLBuilder';
import Fetcher from 'Provider/Fetcher';
Expand Down Expand Up @@ -117,7 +117,7 @@ class VectorTilesSource extends TMSSource {
if (layer['source-layer'] === undefined) {
getPropertiesFromRefLayer(mvtStyle.layers, layer);
}
const style = Style.setFromVectorTileLayer(layer, this.sprites, this.symbolToCircle);
const style = StyleOptions.setFromVectorTileLayer(layer, this.sprites, this.symbolToCircle);
this.styles[layer.id] = style;

if (!this.layers[layer['source-layer']]) {
Expand Down
16 changes: 11 additions & 5 deletions test/unit/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,19 @@ describe('Label', function () {
'text-field': 'label',
},
};
const sprites = {
img: '',
icon: { x: 0, y: 0, width: 10, height: 10 },
};

before('init style', function () {
style = new Style(Style.setFromVectorTileLayer(layerVT, sprites));
const styleOptions = {
text: {
field: 'label',
},
icon: {
id: 'icon',
cropValues: { x: 0, y: 0, width: 10, height: 10 },
size: 1,
},
};
style = new Style(styleOptions);
});

it('should throw errors for bad Label construction', function () {
Expand Down
201 changes: 0 additions & 201 deletions test/unit/style.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { FEATURE_TYPES } from 'Core/Feature';
import Style from 'Core/Style';
import assert from 'assert';
import { TextureLoader } from 'three';
Expand Down Expand Up @@ -329,204 +328,4 @@ describe('Style', function () {
});
});
});

describe('setFromProperties', () => {
it('FEATURE_TYPES.POINT', () => {
const properties = {
radius: 2,
'label-color': '#eba55f',
'icon-color': '#eba55f',
};
const style = Style.setFromProperties(properties, { type: FEATURE_TYPES.POINT });
assert.equal(style.point.radius, 2);
assert.equal(style.text.color, '#eba55f');
assert.equal(style.icon.color, '#eba55f');
});
it('FEATURE_TYPES.POLYGON', () => {
const properties = {
fill: '#eba55f',
stroke: '#eba55f',
};
const style = Style.setFromProperties(properties, { type: FEATURE_TYPES.POLYGON });
assert.equal(style.stroke.color, '#eba55f');
assert.equal(style.fill.color, '#eba55f');
});
});

describe('setFromVectorTileLayer', () => {
describe('test sub-function', () => {
it('rgba2rgb(color)', () => {
const vectorTileLayer = {
type: 'fill',
};
let style = Style.setFromVectorTileLayer(vectorTileLayer);
// origin is undefined
assert.equal(style.fill.color, undefined);
// origin has stops or expression
vectorTileLayer.paint = {
'fill-color': {
stops: [[10, '#eba55f']],
},
'fill-outline-color': ['string', 'blue'],
};
style = Style.setFromVectorTileLayer(vectorTileLayer);
assert.equal(style.fill.color, vectorTileLayer.paint['fill-color']);
assert.equal(style.stroke.color.constructor.name, 'StyleExpression');
assert.equal(style.stroke.color.evaluate().constructor.name, 'Color');
// origin is string (named or hex)
vectorTileLayer.paint = {
'fill-color': 'red',
'fill-outline-color': '#aabbccdd',
};
style = Style.setFromVectorTileLayer(vectorTileLayer);
assert.equal(style.fill.color, vectorTileLayer.paint['fill-color']);
assert.equal(style.fill.opacity, 1);
assert.equal(style.stroke.color, '#aabbcc');
assert.equal(style.stroke.opacity, 221 / 255);
// origin is string (rgba or hsl)
vectorTileLayer.paint = {
'fill-color': 'rgba(120, 130, 140, 12)',
'fill-outline-color': 'hsl(220, 230, 240)',
};
style = Style.setFromVectorTileLayer(vectorTileLayer);
assert.equal(style.fill.color, 'rgb(120,130,140)');
assert.equal(style.fill.opacity, 12);
assert.equal(style.stroke.color, 'hsl(220,230,240)');
assert.equal(style.stroke.opacity, 1);
});
});

describe("layer.type==='fill'", () => {
const imgId = 'filler';
const vectorTileLayer = {
type: 'fill',
};
it('without fill-pattern (or sprites)', () => {
vectorTileLayer.paint = {
'fill-outline-color': '#eba55f',
'fill-opacity': 0.5,
};
const style = Style.setFromVectorTileLayer(vectorTileLayer);
// fill-outline-color
assert.equal(style.stroke.color, '#eba55f');
// fill-opacity
assert.equal(style.fill.opacity, vectorTileLayer.paint['fill-opacity']);
});

it('with fill-pattern (and sprites)', () => {
vectorTileLayer.paint['fill-pattern'] = imgId;
const sprites = {
filler: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
// fill-pattern
assert.equal(style.fill.pattern.id, imgId);
assert.equal(style.fill.pattern.cropValues, sprites[imgId]);
});
});

it("layer.type==='line'", () => {
const vectorTileLayer = {
type: 'line',
paint: {
'line-color': '#eba55f',
},
};
const style = Style.setFromVectorTileLayer(vectorTileLayer);
assert.equal(style.stroke.color, '#eba55f');
});

it("layer.type==='circle'", () => {
const vectorTileLayer = {
type: 'circle',
paint: {
'circle-color': '#eba55f',
},
};
const style = Style.setFromVectorTileLayer(vectorTileLayer);
assert.equal(style.point.color, '#eba55f');
});

describe("layer.type==='symbol'", () => {
const vectorTileLayer = {
type: 'symbol',
};
it('without icon-image', () => {
vectorTileLayer.layout = {
'symbol-z-order': 'auto',
'text-justify': 'center',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer);
// symbol-z-order
assert.equal(style.text.zOrder, 'Y');
// text-justify
assert.equal(style.text.justify, vectorTileLayer.layout['text-justify']);
});

describe('with icon-image (and sprites)', () => {
it("with icon-image = 'icon-13'", () => {
const imgId = 'icon-13';
vectorTileLayer.layout = {
'icon-image': imgId,
};
const sprites = {
[imgId]: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
assert.equal(style.icon.id, vectorTileLayer.layout['icon-image']);
assert.equal(style.icon.cropValues, sprites[vectorTileLayer.layout['icon-image']]);
});

it("with icon-image = '{name}'", () => {
const imgId = '{name}';
vectorTileLayer.layout = {
'icon-image': imgId,
};
const sprites = {
[imgId]: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
assert.equal(style.icon.id, vectorTileLayer.layout['icon-image']);
assert.equal(typeof style.icon.cropValues, 'function');
});

it("with icon-image = {stops: [$zoom, 'icon-13']", () => {
const imgId = 'icon-13';
vectorTileLayer.layout = {
'icon-image': {
base: 1,
stops: [[13, imgId]],
},
};
const sprites = {
[imgId]: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
assert.equal(style.icon.id, vectorTileLayer.layout['icon-image']);
assert.equal(style.icon.cropValues.stops[0][1], sprites[vectorTileLayer.layout['icon-image'].stops[0][1]]);
});

it("with icon-image = {stops: [$zoom, '{name}']", () => {
const imgId = '{name}';
vectorTileLayer.layout = {
'icon-image': {
base: 1,
stops: [[13, imgId]],
},
};
const sprites = {
[imgId]: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
};
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
assert.equal(style.icon.id, vectorTileLayer.layout['icon-image']);
assert.equal(typeof style.icon.cropValues.stops[0][1], 'function');
});
});
});
});
});
Loading

0 comments on commit 29976cb

Please sign in to comment.