Skip to content

Commit 3afdd99

Browse files
committed
chore: format and clean code
1 parent a038a9f commit 3afdd99

File tree

14 files changed

+571
-474
lines changed

14 files changed

+571
-474
lines changed

.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"tabWidth": 2,
4+
"quoteProps": "preserve",
5+
"printWidth": 120,
6+
"proseWrap": "preserve"
7+
}

demo/index.html

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Taxonomy</title>
6+
<meta content="Building a map taxonomy chart with style.json." name="Description" />
7+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8+
<meta content="Taxonomy" itemprop="name" property="og:title" />
9+
<meta content="Building a map taxonomy chart with style.json." itemprop="description" property="og:description" />
10+
<meta content="Taxonomy" property="og:site_name" />
11+
<style>
12+
html,
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
320

4-
<head>
5-
<meta charset='utf-8' />
6-
<title>Taxonomy</title>
7-
<meta content="Building a map taxonomy chart with style.json." name="Description">
8-
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
9-
<meta content="Taxonomy" itemprop="name" property="og:title">
10-
<meta content="Building a map taxonomy chart with style.json." itemprop="description" property="og:description">
11-
<meta content="Taxonomy" property="og:site_name">
12-
<style>
13-
html,
14-
body {
15-
margin: 0;
16-
padding: 0;
17-
height: 100%;
21+
<body>
22+
<div id="taxonomy-container"></div>
23+
</body>
24+
<script>
25+
function getTaxonomyURL() {
26+
var search = window.location.search;
27+
var param;
28+
if (/[&?]url=/.test(search)) {
29+
param = search.split(/^\?|&/).find(function (param) {
30+
return param && /^url=.+/.test(param);
31+
});
32+
}
33+
return param
34+
? window.decodeURIComponent(param.replace(/^url=/, ''))
35+
: 'https://jawg.github.io/taxonomy/example.json';
1836
}
19-
</style>
20-
</head>
21-
22-
<body>
23-
<div id="taxonomy-container"></div>
24-
</body>
25-
<script>
26-
function getTaxonomyURL() {
27-
var search = window.location.search;
28-
var param;
29-
if (/[&?]url=/.test(search)) {
30-
param = search.split(/^\?|&/).find(function(param) {
31-
return param && /^url=.+/.test(param);
32-
});
33-
}
34-
return param ? window.decodeURIComponent(param.replace(/^url=/, '')) : 'https://jawg.github.io/taxonomy/example.json';
35-
}
36-
const tag = document.createElement('taxonomy');
37-
tag.setAttribute('style-url', getTaxonomyURL());
38-
document.getElementById('taxonomy-container').appendChild(tag);
39-
</script>
40-
<script src="../dist/taxonomy-bundle+riot.js"></script>
41-
42-
</html>
37+
const tag = document.createElement('taxonomy');
38+
tag.setAttribute('style-url', getTaxonomyURL());
39+
document.getElementById('taxonomy-container').appendChild(tag);
40+
</script>
41+
<script src="../dist/taxonomy-bundle+riot.js"></script>
42+
</html>

example.json

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,7 @@
101101
"source-layer": "landuse",
102102
"type": "fill",
103103
"metadata": {
104-
"taxonomy:group": "landcover",
105-
"taxonomy:matches": [
106-
{ "name": "cemetery", "get:class": "cemetery" },
107-
{ "name": "hospital", "get:class": "hospital" },
108-
{ "name": "school", "get:class": "school" }
109-
]
104+
"taxonomy:group": "landcover"
110105
},
111106
"filter": [ "in", "class", "cemetery", "hospital", "school" ],
112107
"paint": {
@@ -322,6 +317,39 @@
322317
"text-color": "#87c6f8"
323318
}
324319
},
320+
{
321+
"id": "marine-label-line",
322+
"source": "osm",
323+
"source-layer": "natural_label",
324+
"metadata": {
325+
"taxonomy:group": "water-label",
326+
"taxonomy:example": "Caribbean Sea"
327+
},
328+
"filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "ocean", "sea" ] ],
329+
"type": "symbol",
330+
"layout": {
331+
"symbol-placement": "line-center",
332+
"text-field": "name",
333+
"text-font": [ "Noto Sans Regular" ],
334+
"text-max-width": 6.0,
335+
"text-size": [
336+
"interpolate",
337+
[ "linear" ],
338+
[ "zoom" ],
339+
1, 18,
340+
6, [
341+
"step",
342+
[ "get", "scalerank" ],
343+
24,
344+
1, 18,
345+
5, 14
346+
]
347+
]
348+
},
349+
"paint": {
350+
"text-color": "#87c6f8"
351+
}
352+
},
325353
{
326354
"id": "place-city",
327355
"type": "symbol",

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"scripts": {
55
"build": "rollup -c",
66
"format": "npm run format-html && npm run format-js && npm run format-riot",
7-
"format-html": "find src demo -name '*.html' -exec js-beautify --config .jsbeautifyrc -f {} --type html -r \\;",
8-
"format-js": "find src -name '*.js' -exec js-beautify --config .jsbeautifyrc -f {} --type js -r \\;",
9-
"format-riot": "find src -name '*.riot' -exec js-beautify --config .jsbeautifyrc -f {} --type html -r \\;",
7+
"format-html": "find src demo -name '*.html' -exec prettier --config .prettierrc --parser html -w {} \\;",
8+
"format-js": "prettier -w --config .prettierrc src/ rollup.*",
9+
"format-riot": "find src -type f -name '*.riot' -exec prettier --config .prettierrc --parser html -w {} \\;",
1010
"start": "rollup -c rollup.serve.js -w",
1111
"watch": "rollup -c -w"
1212
},
@@ -26,7 +26,7 @@
2626
"@rollup/plugin-html": "^0.2.0",
2727
"@rollup/plugin-node-resolve": "^11.0.0",
2828
"color-operations-ui": "^1.1.0",
29-
"js-beautify": "^1.13.0",
29+
"prettier": "^2.8.7",
3030
"riot": "^5.1.1",
3131
"rollup": "^2.34.2",
3232
"rollup-plugin-app-utils": "^1.0.6",

rollup.serve.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import riot from 'rollup-plugin-riot';
22
import nodeResolve from '@rollup/plugin-node-resolve';
33
import commonjs from '@rollup/plugin-commonjs';
44
import { babel } from '@rollup/plugin-babel';
5-
import serve from 'rollup-plugin-serve'
5+
import serve from 'rollup-plugin-serve';
66
import html from '@rollup/plugin-html';
77
import fs from 'fs';
88

@@ -19,10 +19,13 @@ export default [
1919
commonjs(),
2020
babel({ babelHelpers: 'bundled', presets: ['@babel/env'] }),
2121
serve({ host: 'localhost', port: 8000, contentBase: ['.serve', './'] }),
22-
html({ template: () =>
23-
fs.readFileSync('./demo/index.html').toString()
24-
.replace(/..\/dist\//g, './')
25-
.replace('https://jawg.github.io/taxonomy/example.json', './example.json')
22+
html({
23+
template: () =>
24+
fs
25+
.readFileSync('./demo/index.html')
26+
.toString()
27+
.replace(/..\/dist\//g, './')
28+
.replace('https://jawg.github.io/taxonomy/example.json', './example.json'),
2629
}),
2730
],
2831
},

src/index.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import {
2-
component
3-
} from 'riot'
4-
import Taxonomy from './tags/taxonomy.riot'
1+
import { component } from 'riot';
2+
import Taxonomy from './tags/taxonomy.riot';
53

64
const createApp = component(Taxonomy);
75

86
for (let i = 0; i < document.getElementsByTagName('taxonomy').length; i++) {
9-
createApp(document.getElementsByTagName('taxonomy').item(i))
10-
}
7+
createApp(document.getElementsByTagName('taxonomy').item(i));
8+
}

src/scripts/expressions.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
export class Expressions {
2+
constructor() {}
3+
findStopLessThanOrEqualTo(stops, input) {
4+
const n = stops.length;
5+
var lowerIndex = 0;
6+
var upperIndex = n - 1;
7+
var currentIndex = 0;
8+
var currentValue, upperValue;
9+
10+
while (lowerIndex <= upperIndex) {
11+
currentIndex = Math.floor((lowerIndex + upperIndex) / 2);
12+
currentValue = stops[currentIndex][0];
13+
upperValue = stops[currentIndex + 1][0];
14+
if (input === currentValue || (input > currentValue && input < upperValue)) {
15+
// Search complete
16+
return currentIndex;
17+
} else if (currentValue < input) {
18+
lowerIndex = currentIndex + 1;
19+
} else if (currentValue > input) {
20+
upperIndex = currentIndex - 1;
21+
}
22+
}
23+
return Math.max(currentIndex - 1, 0);
24+
}
25+
interpolationFactor(input, base, lowerValue, upperValue) {
26+
const difference = upperValue - lowerValue;
27+
const progress = input - lowerValue;
28+
29+
if (difference === 0) {
30+
return 0;
31+
} else if (base === 1 || base === undefined) {
32+
return progress / difference;
33+
} else {
34+
return (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
35+
}
36+
}
37+
number(a, b, t) {
38+
return a * (1 - t) + b * t;
39+
}
40+
array(from, to, t) {
41+
return from.map(function (d, i) {
42+
return this.number(d, to[i], t);
43+
});
44+
}
45+
asExpression(exp) {
46+
if (Array.isArray(exp)) {
47+
return exp;
48+
}
49+
if (!exp.stops) {
50+
throw new Error(`${JSON.stringify(exp)} is not a correct expression`);
51+
}
52+
if (exp.base === 1 || exp.base === undefined) {
53+
return ['interpolate', ['linear'], ['zoom']].concat(exp.stops.reduce((acc, e) => acc.concat(e), []));
54+
}
55+
return ['interpolate', ['exponential', exp.base], ['zoom']].concat(exp.stops.reduce((acc, e) => acc.concat(e), []));
56+
}
57+
parseInterpolate(exp, value) {
58+
if (!exp || exp[0] !== 'interpolate' || exp.length < 4) {
59+
return null;
60+
}
61+
62+
const base = exp[1][0] === 'exponential' ? exp[1][1] : 1;
63+
const stops = exp.slice(3).reduce((acc, e, i) => {
64+
i % 2 === 0 ? acc.push([e]) : acc[acc.length - 1].push(e);
65+
return acc;
66+
}, []);
67+
if (stops.length === 1 || stops[0][0] >= value) {
68+
return {
69+
value: stops[0][1],
70+
};
71+
} else if (stops[stops.length - 1][0] <= value) {
72+
return {
73+
value: stops[stops.length - 1][1],
74+
};
75+
}
76+
const index = this.findStopLessThanOrEqualTo(stops, value);
77+
return {
78+
lower: stops[index][1],
79+
upper: stops[index + 1][1],
80+
t: this.interpolationFactor(value, base, stops[index][0], stops[index + 1][0]),
81+
};
82+
}
83+
renderMatch(exp, match) {
84+
if (!Array.isArray(exp)) {
85+
return exp;
86+
}
87+
return this.decision(
88+
exp.map((e) => this.renderMatch(e, match)),
89+
match
90+
);
91+
}
92+
lookup(exp, match) {
93+
if (!Array.isArray(exp)) {
94+
return exp;
95+
}
96+
switch (exp[0]) {
97+
case 'at':
98+
return this.lookup(exp[2], match)[exp[1]];
99+
case 'get':
100+
case 'has':
101+
case '!has':
102+
return match[`${exp[0]}:${exp[1]}`];
103+
case 'in':
104+
return this.lookup(exp[2], match).indexOf(exp[1]) >= 0;
105+
case '!in':
106+
return this.lookup(exp[2], match).indexOf(exp[1]) < 0;
107+
case 'index-of':
108+
return this.lookup(exp[2], match).indexOf(exp[1]);
109+
case 'length':
110+
return this.lookup(exp[1], match).length;
111+
case 'slice':
112+
return this.lookup(exp[1], match).slice(exp[2], exp[3]);
113+
}
114+
return exp;
115+
}
116+
decision(exp, match) {
117+
if (!Array.isArray(exp)) {
118+
return exp;
119+
}
120+
switch (exp[0]) {
121+
case '!':
122+
return !this.lookup(exp[1], match);
123+
case '==':
124+
return this.lookup(exp[1], match) == exp[2];
125+
case '!=':
126+
return this.lookup(exp[1], match) != exp[2];
127+
case '>':
128+
return this.lookup(exp[1], match) > exp[2];
129+
case '<':
130+
return this.lookup(exp[1], match) < exp[2];
131+
case '>=':
132+
return this.lookup(exp[1], match) >= exp[2];
133+
case '<=':
134+
return this.lookup(exp[1], match) <= exp[2];
135+
case 'all':
136+
return exp.slice(1).every((e) => this.lookup(e, match) === true);
137+
case 'some':
138+
return exp.slice(1).any((e) => this.lookup(e, match) === true);
139+
case 'match': {
140+
for (let i = 2; i < exp.length - 2; i = i + 2) {
141+
if (exp[1] == exp[i] || (Array.isArray(exp[i]) && exp[1] == exp[i][0])) {
142+
return exp[i + 1];
143+
}
144+
}
145+
return exp[exp.length - 1];
146+
}
147+
case 'case': {
148+
for (let i = 1; i < exp.length - 2; i = i + 2) {
149+
if (exp[i] === true) {
150+
return exp[i + 1];
151+
}
152+
}
153+
return exp[exp.length - 1];
154+
}
155+
case 'step': {
156+
let value = exp[1];
157+
let res = exp[2];
158+
if (value < exp[3]) {
159+
return res;
160+
}
161+
for (let i = 3; i < exp.length; i = i + 2) {
162+
if (exp[i] >= value) {
163+
return exp[i + 1];
164+
}
165+
}
166+
return res;
167+
}
168+
case 'coalesce':
169+
return exp.slice(1).find((e) => e !== null && e !== undefined);
170+
}
171+
return this.lookup(exp, match);
172+
}
173+
}

0 commit comments

Comments
 (0)