CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-09 20:55:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3177 from beaugunderson/3118-svg-module

Browse Source 
refactor svg into ES6 modules for #3118
This commit is contained in:
Tom MacWright
2016-06-16 15:20:57 -04:00
committed by GitHub
parent cdbca258af fb838645ae
commit 9d973d5992
27 changed files with 2377 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Makefile
View File

@@ -50,6 +50,7 @@ MODULE_TARGETS = \
js/lib/id/operations.js \
js/lib/id/presets.js \
js/lib/id/services.js \
js/lib/id/svg.js \
js/lib/id/util.js \
js/lib/id/validations.js
@@ -81,6 +82,10 @@ js/lib/id/services.js: $(shell find modules/services -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.services modules/services/index.js --no-strict -o $@
js/lib/id/svg.js: $(shell find modules/svg -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.svg modules/svg/index.js --no-strict -o $@
js/lib/id/util.js: $(shell find modules/util -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.util modules/util/index.js --no-strict -o $@
@@ -132,23 +137,6 @@ dist/iD.js: \
js/id/renderer/features.js \
js/id/renderer/map.js \
js/id/renderer/tile_layer.js \
js/id/svg.js \
js/id/svg/areas.js \
js/id/svg/debug.js \
js/id/svg/defs.js \
js/id/svg/gpx.js \
js/id/svg/icon.js \
js/id/svg/labels.js \
js/id/svg/layers.js \
js/id/svg/lines.js \
js/id/svg/mapillary_images.js \
js/id/svg/mapillary_signs.js \
js/id/svg/midpoints.js \
js/id/svg/osm.js \
js/id/svg/points.js \
js/id/svg/tag_classes.js \
js/id/svg/turns.js \
js/id/svg/vertices.js \
js/id/ui.js \
js/id/ui/account.js \
js/id/ui/attribution.js \

19
index.html
View File

@@ -41,6 +41,7 @@
<script src='js/lib/id/operations.js'></script>
<script src='js/lib/id/presets.js'></script>
<script src='js/lib/id/services.js'></script>
<script src='js/lib/id/svg.js'></script>
<script src='js/lib/id/util.js'></script>
<script src='js/lib/id/validations.js'></script>
@@ -52,24 +53,6 @@
<script src='js/id/renderer/map.js'></script>
<script src='js/id/renderer/tile_layer.js'></script>
<script src='js/id/svg.js'></script>
<script src='js/id/svg/areas.js'></script>
<script src='js/id/svg/debug.js'></script>
<script src='js/id/svg/defs.js'></script>
<script src='js/id/svg/gpx.js'></script>
<script src='js/id/svg/icon.js'></script>
<script src='js/id/svg/labels.js'></script>
<script src='js/id/svg/lines.js'></script>
<script src='js/id/svg/mapillary_images.js'></script>
<script src='js/id/svg/mapillary_signs.js'></script>
<script src='js/id/svg/midpoints.js'></script>
<script src='js/id/svg/osm.js'></script>
<script src='js/id/svg/points.js'></script>
<script src='js/id/svg/layers.js'></script>
<script src='js/id/svg/tag_classes.js'></script>
<script src='js/id/svg/turns.js'></script>
<script src='js/id/svg/vertices.js'></script>
<script src='js/id/ui.js'></script>
<script src='js/id/ui/intro.js'></script>
<script src='js/id/ui/info.js'></script>

98
js/id/svg.js
View File

@@ -1,98 +0,0 @@
iD.svg = {
PointTransform: function(projection) {
return function(entity) {
// http://jsperf.com/short-array-join
var pt = projection(entity.loc);
return 'translate(' + pt[0] + ',' + pt[1] + ')';
};
},
Path: function(projection, graph, polygon) {
var cache = {},
clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
project = projection.stream,
path = d3.geo.path()
.projection({stream: function(output) { return polygon ? project(output) : project(clip(output)); }});
return function(entity) {
if (entity.id in cache) {
return cache[entity.id];
} else {
return cache[entity.id] = path(entity.asGeoJSON(graph));
}
};
},
OneWaySegments: function(projection, graph, dt) {
return function(entity) {
var a,
b,
i = 0,
offset = dt,
segments = [],
clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
coordinates = graph.childNodes(entity).map(function(n) {
return n.loc;
});
if (entity.tags.oneway === '-1') coordinates.reverse();
d3.geo.stream({
type: 'LineString',
coordinates: coordinates
}, projection.stream(clip({
lineStart: function() {},
lineEnd: function() {
a = null;
},
point: function(x, y) {
b = [x, y];
if (a) {
var span = iD.geo.euclideanDistance(a, b) - offset;
if (span >= 0) {
var angle = Math.atan2(b[1] - a[1], b[0] - a[0]),
dx = dt * Math.cos(angle),
dy = dt * Math.sin(angle),
p = [a[0] + offset * Math.cos(angle),
a[1] + offset * Math.sin(angle)];
var segment = 'M' + a[0] + ',' + a[1] +
'L' + p[0] + ',' + p[1];
for (span -= dt; span >= 0; span -= dt) {
p[0] += dx;
p[1] += dy;
segment += 'L' + p[0] + ',' + p[1];
}
segment += 'L' + b[0] + ',' + b[1];
segments.push({id: entity.id, index: i, d: segment});
}
offset = -span;
i++;
}
a = b;
}
})));
return segments;
};
},
RelationMemberTags: function(graph) {
return function(entity) {
var tags = entity.tags;
graph.parentRelations(entity).forEach(function(relation) {
var type = relation.tags.type;
if (type === 'multipolygon' || type === 'boundary') {
tags = _.extend({}, relation.tags, tags);
}
});
return tags;
};
}
};

2224
js/lib/id/svg.js Normal file
View File

File diff suppressed because it is too large Load Diff

4
js/id/svg/areas.js → modules/svg/areas.js
View File

@@ -1,4 +1,4 @@
iD.svg.Areas = function(projection) {
export function Areas(projection) {
// Patterns only work in Firefox when set directly on element.
// (This is not a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=750632)
var patterns = {
@@ -129,4 +129,4 @@ iD.svg.Areas = function(projection) {
paths
.attr('d', path);
};
};
}

4
js/id/svg/debug.js → modules/svg/debug.js
View File

@@ -1,4 +1,4 @@
iD.svg.Debug = function(projection, context) {
export function Debug(projection, context) {
function multipolygons(imagery) {
return imagery.map(function(data) {
@@ -134,4 +134,4 @@ iD.svg.Debug = function(projection, context) {
};
return drawDebug;
};
}

4
js/id/svg/defs.js → modules/svg/defs.js
View File

@@ -2,7 +2,7 @@
A standalone SVG element that contains only a `defs` sub-element. To be
used once globally, since defs IDs must be unique within a document.
*/
iD.svg.Defs = function(context) {
export function Defs(context) {
function SVGSpriteDefinition(id, href) {
return function(defs) {
@@ -108,4 +108,4 @@ iD.svg.Defs = function(context) {
'maki-sprite',
context.imagePath('maki-sprite.svg')));
};
};
}

4
js/id/svg/gpx.js → modules/svg/gpx.js
View File

@@ -1,4 +1,4 @@
iD.svg.Gpx = function(projection, context, dispatch) {
export function Gpx(projection, context, dispatch) {
var showLabels = true,
layer;
@@ -161,4 +161,4 @@ iD.svg.Gpx = function(projection, context, dispatch) {
init();
return drawGpx;
};
}

4
js/id/svg/icon.js → modules/svg/icon.js
View File

@@ -1,4 +1,4 @@
iD.svg.Icon = function(name, svgklass, useklass) {
export function Icon(name, svgklass, useklass) {
return function drawIcon(selection) {
selection.selectAll('svg')
.data([0])
@@ -9,4 +9,4 @@ iD.svg.Icon = function(name, svgklass, useklass) {
.attr('xlink:href', name)
.attr('class', useklass);
};
};
}

20
modules/svg/index.js Normal file
View File

@@ -0,0 +1,20 @@
export { Areas } from './areas.js';
export { Debug } from './debug.js';
export { Defs } from './defs.js';
export { Gpx } from './gpx.js';
export { Icon } from './icon.js';
export { Labels } from './labels.js';
export { Layers } from './layers.js';
export { Lines } from './lines.js';
export { MapillaryImages } from './mapillary_images.js';
export { MapillarySigns } from './mapillary_signs.js';
export { Midpoints } from './midpoints.js';
export { OneWaySegments } from './one_way_segments.js';
export { Osm } from './osm.js';
export { Path } from './path.js';
export { PointTransform } from './point_transform.js';
export { Points } from './points.js';
export { RelationMemberTags } from './relation_member_tags.js';
export { TagClasses } from './tag_classes.js';
export { Turns } from './turns.js';
export { Vertices } from './vertices.js';

4
js/id/svg/labels.js → modules/svg/labels.js
View File

@@ -1,4 +1,4 @@
iD.svg.Labels = function(projection, context) {
export function Labels(projection, context) {
var path = d3.geo.path().projection(projection);
// Replace with dict and iterate over entities tags instead?
@@ -473,4 +473,4 @@ iD.svg.Labels = function(projection, context) {
};
return drawLabels;
};
}

4
js/id/svg/layers.js → modules/svg/layers.js
View File

@@ -1,4 +1,4 @@
iD.svg.Layers = function(projection, context) {
export function Layers(projection, context) {
var dispatch = d3.dispatch('change'),
svg = d3.select(null),
layers = [
@@ -81,4 +81,4 @@ iD.svg.Layers = function(projection, context) {
return d3.rebind(drawLayers, dispatch, 'on');
};
}

4
js/id/svg/lines.js → modules/svg/lines.js
View File

@@ -1,4 +1,4 @@
iD.svg.Lines = function(projection) {
export function Lines(projection) {
var highway_stack = {
motorway: 0,
@@ -125,4 +125,4 @@ iD.svg.Lines = function(projection) {
.remove();
};
};
}

4
js/id/svg/mapillary_images.js → modules/svg/mapillary_images.js
View File

@@ -1,4 +1,4 @@
iD.svg.MapillaryImages = function(projection, context, dispatch) {
export function MapillaryImages(projection, context, dispatch) {
var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
minZoom = 12,
layer = d3.select(null),
@@ -163,4 +163,4 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
init();
return drawImages;
};
}

4
js/id/svg/mapillary_signs.js → modules/svg/mapillary_signs.js
View File

@@ -1,4 +1,4 @@
iD.svg.MapillarySigns = function(projection, context, dispatch) {
export function MapillarySigns(projection, context, dispatch) {
var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
minZoom = 12,
layer = d3.select(null),
@@ -133,4 +133,4 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
init();
return drawSigns;
};
}

4
js/id/svg/midpoints.js → modules/svg/midpoints.js
View File

@@ -1,4 +1,4 @@
iD.svg.Midpoints = function(projection, context) {
export function Midpoints(projection, context) {
return function drawMidpoints(surface, graph, entities, filter, extent) {
var poly = extent.polygon(),
midpoints = {};
@@ -102,4 +102,4 @@ iD.svg.Midpoints = function(projection, context) {
groups.exit()
.remove();
};
};
}

59
modules/svg/one_way_segments.js Normal file
View File

@@ -0,0 +1,59 @@
export function OneWaySegments(projection, graph, dt) {
return function(entity) {
var a,
b,
i = 0,
offset = dt,
segments = [],
clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
coordinates = graph.childNodes(entity).map(function(n) {
return n.loc;
});
if (entity.tags.oneway === '-1') coordinates.reverse();
d3.geo.stream({
type: 'LineString',
coordinates: coordinates
}, projection.stream(clip({
lineStart: function() {},
lineEnd: function() {
a = null;
},
point: function(x, y) {
b = [x, y];
if (a) {
var span = iD.geo.euclideanDistance(a, b) - offset;
if (span >= 0) {
var angle = Math.atan2(b[1] - a[1], b[0] - a[0]),
dx = dt * Math.cos(angle),
dy = dt * Math.sin(angle),
p = [a[0] + offset * Math.cos(angle),
a[1] + offset * Math.sin(angle)];
var segment = 'M' + a[0] + ',' + a[1] +
'L' + p[0] + ',' + p[1];
for (span -= dt; span >= 0; span -= dt) {
p[0] += dx;
p[1] += dy;
segment += 'L' + p[0] + ',' + p[1];
}
segment += 'L' + b[0] + ',' + b[1];
segments.push({id: entity.id, index: i, d: segment});
}
offset = -span;
i++;
}
a = b;
}
})));
return segments;
};
}

4
js/id/svg/osm.js → modules/svg/osm.js
View File

@@ -1,4 +1,4 @@
iD.svg.Osm = function() {
export function Osm() {
return function drawOsm(selection) {
var layers = selection.selectAll('.layer-osm')
.data(['areas', 'lines', 'hit', 'halo', 'label']);
@@ -6,4 +6,4 @@ iD.svg.Osm = function() {
layers.enter().append('g')
.attr('class', function(d) { return 'layer-osm layer-' + d; });
};
};
}

15
modules/svg/path.js Normal file
View File

@@ -0,0 +1,15 @@
export function Path(projection, graph, polygon) {
var cache = {},
clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
project = projection.stream,
path = d3.geo.path()
.projection({stream: function(output) { return polygon ? project(output) : project(clip(output)); }});
return function(entity) {
if (entity.id in cache) {
return cache[entity.id];
} else {
return cache[entity.id] = path(entity.asGeoJSON(graph));
}
};
}

7
modules/svg/point_transform.js Normal file
View File

@@ -0,0 +1,7 @@
export function PointTransform(projection) {
return function(entity) {
// http://jsperf.com/short-array-join
var pt = projection(entity.loc);
return 'translate(' + pt[0] + ',' + pt[1] + ')';
};
}

4
js/id/svg/points.js → modules/svg/points.js
View File

@@ -1,4 +1,4 @@
iD.svg.Points = function(projection, context) {
export function Points(projection, context) {
function markerPath(selection, klass) {
selection
.attr('class', klass)
@@ -55,4 +55,4 @@ iD.svg.Points = function(projection, context) {
groups.exit()
.remove();
};
};
}

12
modules/svg/relation_member_tags.js Normal file
View File

@@ -0,0 +1,12 @@
export function RelationMemberTags(graph) {
return function(entity) {
var tags = entity.tags;
graph.parentRelations(entity).forEach(function(relation) {
var type = relation.tags.type;
if (type === 'multipolygon' || type === 'boundary') {
tags = _.extend({}, relation.tags, tags);
}
});
return tags;
};
}

4
js/id/svg/tag_classes.js → modules/svg/tag_classes.js
View File

@@ -1,4 +1,4 @@
iD.svg.TagClasses = function() {
export function TagClasses() {
var primaries = [
'building', 'highway', 'railway', 'waterway', 'aeroway',
'motorway', 'boundary', 'power', 'amenity', 'natural', 'landuse',
@@ -110,4 +110,4 @@ iD.svg.TagClasses = function() {
};
return tagClasses;
};
}

4
js/id/svg/turns.js → modules/svg/turns.js
View File

@@ -1,4 +1,4 @@
iD.svg.Turns = function(projection) {
export function Turns(projection) {
return function drawTurns(surface, graph, turns) {
function key(turn) {
return [turn.from.node + turn.via.node + turn.to.node].join('-');
@@ -70,4 +70,4 @@ iD.svg.Turns = function(projection) {
return this;
};
};
}

4
js/id/svg/vertices.js → modules/svg/vertices.js
View File

@@ -1,4 +1,4 @@
iD.svg.Vertices = function(projection, context) {
export function Vertices(projection, context) {
var radiuses = {
// z16-, z17, z18+, tagged
shadow: [6, 7.5, 7.5, 11.5],
@@ -174,4 +174,4 @@ iD.svg.Vertices = function(projection, context) {
};
return drawVertices;
};
}

19
test/index.html
View File

@@ -48,6 +48,7 @@
<script src='../js/lib/id/operations.js'></script>
<script src='../js/lib/id/presets.js'></script>
<script src='../js/lib/id/services.js'></script>
<script src='../js/lib/id/svg.js'></script>
<script src='../js/lib/id/util.js'></script>
<script src='../js/lib/id/validations.js'></script>
@@ -57,24 +58,6 @@
<script src='../js/id/renderer/map.js'></script>
<script src='../js/id/renderer/tile_layer.js'></script>
<script src='../js/id/svg.js'></script>
<script src='../js/id/svg/areas.js'></script>
<script src='../js/id/svg/debug.js'></script>
<script src='../js/id/svg/defs.js'></script>
<script src='../js/id/svg/gpx.js'></script>
<script src='../js/id/svg/icon.js'></script>
<script src='../js/id/svg/labels.js'></script>
<script src='../js/id/svg/lines.js'></script>
<script src='../js/id/svg/mapillary_images.js'></script>
<script src='../js/id/svg/mapillary_signs.js'></script>
<script src='../js/id/svg/midpoints.js'></script>
<script src='../js/id/svg/osm.js'></script>
<script src='../js/id/svg/points.js'></script>
<script src='../js/id/svg/layers.js'></script>
<script src='../js/id/svg/tag_classes.js'></script>
<script src='../js/id/svg/turns.js'></script>
<script src='../js/id/svg/vertices.js'></script>
<script src='../js/id/ui.js'></script>
<script src='../js/id/ui/attribution.js'></script>
<script src='../js/id/ui/radial_menu.js'></script>

12
test/rendering.html
View File

@@ -13,19 +13,9 @@
<script src='../js/id/id.js'></script>
<script src='../js/lib/id/geo.js'></script>
<script src='../js/lib/id/presets.js'></script>
<script src='../js/lib/id/svg.js'></script>
<script src='../js/lib/id/util.js'></script>
<script src='../js/id/svg.js'></script>
<script src='../js/id/svg/areas.js'></script>
<script src='../js/id/svg/icon.js'></script>
<script src='../js/id/svg/lines.js'></script>
<script src='../js/id/svg/midpoints.js'></script>
<script src='../js/id/svg/osm.js'></script>
<script src='../js/id/svg/points.js'></script>
<script src='../js/id/svg/layers.js'></script>
<script src='../js/id/svg/tag_classes.js'></script>
<script src='../js/id/svg/vertices.js'></script>
<script src='../js/id/core/entity.js'></script>
<script src='../js/id/core/graph.js'></script>
<script src='../js/id/core/history.js'></script>