Merge pull request #3178 from openstreetmap/modules-renderer

modularize iD.renderer & iD.behavior

Makefile

@@ -44,11 +44,13 @@ $(BUILDJS_TARGETS): $(BUILDJS_SOURCES) build.js
 
 MODULE_TARGETS = \
 	js/lib/id/actions.js \
+	js/lib/id/behavior.js \
 	js/lib/id/core.js \
 	js/lib/id/geo.js \
 	js/lib/id/modes.js \
 	js/lib/id/operations.js \
 	js/lib/id/presets.js \
+	js/lib/id/renderer.js \
 	js/lib/id/services.js \
 	js/lib/id/svg.js \
 	js/lib/id/util.js \
@@ -58,6 +60,10 @@ js/lib/id/actions.js: $(shell find modules/actions -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD.actions modules/actions/index.js --no-strict -o $@
 
+js/lib/id/behavior.js: $(shell find modules/behavior -type f)
+	@rm -f $@
+	node_modules/.bin/rollup -f umd -n iD.behavior modules/behavior/index.js --no-strict -o $@
+
 js/lib/id/core.js: $(shell find modules/core -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD modules/core/index.js --no-strict -o $@
@@ -78,6 +84,10 @@ js/lib/id/presets.js: $(shell find modules/presets -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD.presets modules/presets/index.js --no-strict -o $@
 
+js/lib/id/renderer.js: $(shell find modules/renderer -type f)
+	@rm -f $@
+	node_modules/.bin/rollup -f umd -n iD modules/renderer/index.js --no-strict -o $@
+
 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 $@
@@ -94,7 +104,6 @@ js/lib/id/validations.js: $(shell find modules/validations -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD.validations modules/validations/index.js --no-strict -o $@
 
-
 dist/iD.js: \
 	js/lib/bootstrap-tooltip.js \
 	js/lib/d3.v3.js \
@@ -118,25 +127,6 @@ dist/iD.js: \
 	js/id/start.js \
 	js/id/id.js \
 	$(MODULE_TARGETS) \
-	js/id/behavior.js \
-	js/id/behavior/add_way.js \
-	js/id/behavior/breathe.js \
-	js/id/behavior/copy.js \
-	js/id/behavior/drag.js \
-	js/id/behavior/draw.js \
-	js/id/behavior/draw_way.js \
-	js/id/behavior/edit.js \
-	js/id/behavior/hash.js \
-	js/id/behavior/hover.js \
-	js/id/behavior/lasso.js \
-	js/id/behavior/paste.js \
-	js/id/behavior/select.js \
-	js/id/behavior/tail.js \
-	js/id/renderer/background.js \
-	js/id/renderer/background_source.js \
-	js/id/renderer/features.js \
-	js/id/renderer/map.js \
-	js/id/renderer/tile_layer.js \
 	js/id/ui.js \
 	js/id/ui/account.js \
 	js/id/ui/attribution.js \

index.html

@@ -35,11 +35,13 @@
 
         <script src='js/id/id.js'></script>
         <script src='js/lib/id/actions.js'></script>
+        <script src='js/lib/id/behavior.js'></script>
         <script src='js/lib/id/core.js'></script>
         <script src='js/lib/id/geo.js'></script>
         <script src='js/lib/id/modes.js'></script>
         <script src='js/lib/id/operations.js'></script>
         <script src='js/lib/id/presets.js'></script>
+        <script src='js/lib/id/renderer.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>
@@ -47,12 +49,6 @@
 
         <script src='data/data_dev.js'></script>
 
-        <script src='js/id/renderer/background.js'></script>
-        <script src='js/id/renderer/background_source.js'></script>
-        <script src='js/id/renderer/features.js'></script>
-        <script src='js/id/renderer/map.js'></script>
-        <script src='js/id/renderer/tile_layer.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>
@@ -122,21 +118,6 @@
         <script src='js/id/ui/intro/line.js'></script>
         <script src='js/id/ui/intro/start_editing.js'></script>
 
-        <script src='js/id/behavior.js'></script>
-        <script src='js/id/behavior/add_way.js'></script>
-        <script src='js/id/behavior/breathe.js'></script>
-        <script src='js/id/behavior/copy.js'></script>
-        <script src='js/id/behavior/drag.js'></script>
-        <script src='js/id/behavior/draw.js'></script>
-        <script src='js/id/behavior/draw_way.js'></script>
-        <script src='js/id/behavior/edit.js'></script>
-        <script src='js/id/behavior/hash.js'></script>
-        <script src='js/id/behavior/hover.js'></script>
-        <script src='js/id/behavior/lasso.js'></script>
-        <script src='js/id/behavior/paste.js'></script>
-        <script src='js/id/behavior/select.js'></script>
-        <script src='js/id/behavior/tail.js'></script>
-
         <script src='js/lib/locale.js'></script>
         <script src='data/introGraph.js'></script>
     </head>

js/id/behavior.js

@@ -1 +0,0 @@
-iD.behavior = {};

modules/behavior/add_way.js

@@ -1,6 +1,8 @@
-iD.behavior.AddWay = function(context) {
+import { Draw } from './draw';
+
+export function AddWay(context) {
     var event = d3.dispatch('start', 'startFromWay', 'startFromNode'),
-        draw = iD.behavior.Draw(context);
+        draw = Draw(context);
 
     var addWay = function(surface) {
         draw.on('click', event.start)
@@ -33,4 +35,4 @@ iD.behavior.AddWay = function(context) {
     };
 
     return d3.rebind(addWay, event, 'on');
-};
+}

modules/behavior/breathe.js

@@ -1,4 +1,4 @@
-iD.behavior.Breathe = function() {
+export function Breathe(){
     var duration = 800,
         selector = '.selected.shadow, .selected .shadow',
         selected = d3.select(null),
@@ -102,4 +102,4 @@ iD.behavior.Breathe = function() {
     };
 
     return breathe;
-};
+}

modules/behavior/copy.js

@@ -1,4 +1,4 @@
-iD.behavior.Copy = function(context) {
+export function Copy(context) {
     var keybinding = d3.keybinding('copy');
 
     function groupEntities(ids, graph) {
@@ -76,4 +76,4 @@ iD.behavior.Copy = function(context) {
     };
 
     return copy;
-};
+}

modules/behavior/drag.js

@@ -14,7 +14,7 @@
     * Delegation is supported via the `delegate` function.
 
  */
-iD.behavior.drag = function() {
+export function drag() {
     function d3_eventCancel() {
       d3.event.stopPropagation();
       d3.event.preventDefault();
@@ -91,7 +91,7 @@ iD.behavior.drag = function() {
             var p = point(),
                 dx = p[0] - origin_[0],
                 dy = p[1] - origin_[1];
-            
+
             if (dx === 0 && dy === 0)
                 return;
 
@@ -198,4 +198,4 @@ iD.behavior.drag = function() {
     };
 
     return d3.rebind(drag, event, 'on');
-};
+}

modules/behavior/draw.js

@@ -1,17 +1,21 @@
-iD.behavior.Draw = function(context) {
+import { Edit } from './edit';
+import { Hover } from './hover';
+import { Tail } from './tail';
+
+export function Draw(context) {
     var event = d3.dispatch('move', 'click', 'clickWay',
             'clickNode', 'undo', 'cancel', 'finish'),
         keybinding = d3.keybinding('draw'),
-        hover = iD.behavior.Hover(context)
+        hover = Hover(context)
             .altDisables(true)
             .on('hover', context.ui().sidebar.hover),
-        tail = iD.behavior.Tail(),
-        edit = iD.behavior.Edit(context),
+        tail = Tail(),
+        edit = Edit(context),
         closeTolerance = 4,
         tolerance = 12,
         mouseLeave = false,
         lastMouse = null,
-        cached = iD.behavior.Draw;
+        cached = Draw;
 
     function datum() {
         if (d3.event.altKey) return {};
@@ -200,8 +204,8 @@ iD.behavior.Draw = function(context) {
     };
 
     return d3.rebind(draw, event, 'on');
-};
+}
 
-iD.behavior.Draw.usedTails = {};
-iD.behavior.Draw.disableSpace = false;
-iD.behavior.Draw.lastSpace = null;
+Draw.usedTails = {};
+Draw.disableSpace = false;
+Draw.lastSpace = null;

modules/behavior/draw_way.js

@@ -1,11 +1,13 @@
-iD.behavior.DrawWay = function(context, wayId, index, mode, baseGraph) {
+import { Draw } from './draw';
+
+export function DrawWay(context, wayId, index, mode, baseGraph) {
     var way = context.entity(wayId),
         isArea = context.geometry(wayId) === 'area',
         finished = false,
         annotation = t((way.isDegenerate() ?
             'operations.start.annotation.' :
             'operations.continue.annotation.') + context.geometry(wayId)),
-        draw = iD.behavior.Draw(context);
+        draw = Draw(context);
 
     var startIndex = typeof index === 'undefined' ? way.nodes.length - 1 : 0,
         start = iD.Node({loc: context.graph().entity(way.nodes[startIndex]).loc}),
@@ -207,4 +209,4 @@ iD.behavior.DrawWay = function(context, wayId, index, mode, baseGraph) {
     };
 
     return drawWay;
-};
+}

modules/behavior/edit.js

@@ -1,4 +1,4 @@
-iD.behavior.Edit = function(context) {
+export function Edit(context) {
     function edit() {
         context.map()
             .minzoom(context.minEditableZoom());
@@ -10,4 +10,4 @@ iD.behavior.Edit = function(context) {
     };
 
     return edit;
-};
+}

modules/behavior/hash.js

@@ -1,4 +1,4 @@
-iD.behavior.Hash = function(context) {
+export function Hash(context) {
     var s0 = null, // cached location.hash
         lat = 90 - 1e-8; // allowable latitude range
 
@@ -89,4 +89,4 @@ iD.behavior.Hash = function(context) {
     };
 
     return hash;
-};
+}

modules/behavior/hover.js

@@ -7,7 +7,7 @@
    Only one of these elements can have the :hover pseudo-class, but all of them will
    have the .hover class.
  */
-iD.behavior.Hover = function() {
+export function Hover() {
     var dispatch = d3.dispatch('hover'),
         selection,
         altDisables,
@@ -124,4 +124,4 @@ iD.behavior.Hover = function() {
     };
 
     return d3.rebind(hover, dispatch, 'on');
-};
+}

modules/behavior/index.js

@@ -0,0 +1,13 @@
+export { AddWay } from './add_way';
+export { Breathe } from './breathe';
+export { Copy } from './copy';
+export { drag } from './drag';
+export { DrawWay } from './draw_way';
+export { Draw } from './draw';
+export { Edit } from './edit';
+export { Hash } from './hash';
+export { Hover } from './hover';
+export { Lasso } from './lasso';
+export { Paste } from './paste';
+export { Select } from './select';
+export { Tail } from './tail';

modules/behavior/lasso.js

@@ -1,4 +1,4 @@
-iD.behavior.Lasso = function(context) {
+export function Lasso(context) {
 
     var behavior = function(selection) {
         var lasso;
@@ -69,4 +69,4 @@ iD.behavior.Lasso = function(context) {
     };
 
     return behavior;
-};
+}

modules/behavior/paste.js

@@ -1,4 +1,4 @@
-iD.behavior.Paste = function(context) {
+export function Paste(context) {
     var keybinding = d3.keybinding('paste');
 
     function omitTag(v, k) {
@@ -67,4 +67,4 @@ iD.behavior.Paste = function(context) {
     };
 
     return paste;
-};
+}

modules/behavior/select.js

@@ -1,4 +1,4 @@
-iD.behavior.Select = function(context) {
+export function Select(context) {
     function keydown() {
         if (d3.event && d3.event.shiftKey) {
             context.surface()
@@ -61,4 +61,4 @@ iD.behavior.Select = function(context) {
     };
 
     return behavior;
-};
+}

modules/behavior/tail.js

@@ -1,4 +1,4 @@
-iD.behavior.Tail = function() {
+export function Tail() {
     var text,
         container,
         xmargin = 25,
@@ -79,4 +79,4 @@ iD.behavior.Tail = function() {
     };
 
     return tail;
-};
+}

modules/renderer/background.js

@@ -1,6 +1,9 @@
-iD.Background = function(context) {
+import { BackgroundSource } from './background_source';
+import { TileLayer } from './tile_layer';
+
+export function Background(context) {
     var dispatch = d3.dispatch('change'),
-        baseLayer = iD.TileLayer(context).projection(context.projection),
+        baseLayer = TileLayer(context).projection(context.projection),
         overlayLayers = [],
         backgroundSources;
 
@@ -148,7 +151,7 @@ iD.Background = function(context) {
             }
         }
 
-        layer = iD.TileLayer(context)
+        layer = TileLayer(context)
             .source(d)
             .projection(context.projection)
             .dimensions(baseLayer.dimensions());
@@ -188,20 +191,20 @@ iD.Background = function(context) {
 
         backgroundSources = imagery.map(function(source) {
             if (source.type === 'bing') {
-                return iD.BackgroundSource.Bing(source, dispatch);
+                return BackgroundSource.Bing(source, dispatch);
             } else {
-                return iD.BackgroundSource(source);
+                return BackgroundSource(source);
             }
         });
 
-        backgroundSources.unshift(iD.BackgroundSource.None());
+        backgroundSources.unshift(BackgroundSource.None());
 
         if (!chosen && extent) {
             best = _.find(this.sources(extent), function(s) { return s.best(); });
         }
 
         if (chosen && chosen.indexOf('custom:') === 0) {
-            background.baseLayerSource(iD.BackgroundSource.Custom(chosen.replace(/^custom:/, '')));
+            background.baseLayerSource(BackgroundSource.Custom(chosen.replace(/^custom:/, '')));
         } else {
             background.baseLayerSource(findSource(chosen) || best || findSource('Bing') || backgroundSources[1] || backgroundSources[0]);
         }
@@ -241,4 +244,4 @@ iD.Background = function(context) {
     };
 
     return d3.rebind(background, dispatch, 'on');
-};
+}

modules/renderer/background_source.js

@@ -1,4 +1,4 @@
-iD.BackgroundSource = function(data) {
+export function BackgroundSource(data) {
     var source = _.clone(data),
         offset = [0, 0],
         name = source.name,
@@ -80,15 +80,15 @@ iD.BackgroundSource = function(data) {
     source.copyrightNotices = function() {};
 
     return source;
-};
+}
 
-iD.BackgroundSource.Bing = function(data, dispatch) {
+BackgroundSource.Bing = function(data, dispatch) {
     // http://msdn.microsoft.com/en-us/library/ff701716.aspx
     // http://msdn.microsoft.com/en-us/library/ff701701.aspx
 
     data.template = 'https://ecn.t{switch:0,1,2,3}.tiles.virtualearth.net/tiles/a{u}.jpeg?g=587&mkt=en-gb&n=z';
 
-    var bing = iD.BackgroundSource(data),
+    var bing = BackgroundSource(data),
         key = 'Arzdiw4nlOJzRwOz__qailc8NiR31Tt51dN2D7cm57NrnceZnCpgOkmJhNpGoppU', // Same as P2 and JOSM
         url = 'https://dev.virtualearth.net/REST/v1/Imagery/Metadata/Aerial?include=ImageryProviders&key=' +
             key + '&jsonp={callback}',
@@ -128,8 +128,8 @@ iD.BackgroundSource.Bing = function(data, dispatch) {
     return bing;
 };
 
-iD.BackgroundSource.None = function() {
-    var source = iD.BackgroundSource({id: 'none', template: ''});
+BackgroundSource.None = function() {
+    var source = BackgroundSource({id: 'none', template: ''});
 
     source.name = function() {
         return t('background.none');
@@ -146,8 +146,8 @@ iD.BackgroundSource.None = function() {
     return source;
 };
 
-iD.BackgroundSource.Custom = function(template) {
-    var source = iD.BackgroundSource({id: 'custom', template: template});
+BackgroundSource.Custom = function(template) {
+    var source = BackgroundSource({id: 'custom', template: template});
 
     source.name = function() {
         return t('background.custom');

modules/renderer/features.js

@@ -1,4 +1,4 @@
-iD.Features = function(context) {
+export function Features(context) {
     var traffic_roads = {
         'motorway': true,
         'motorway_link': true,
@@ -417,4 +417,4 @@ iD.Features = function(context) {
     };
 
     return d3.rebind(features, dispatch, 'on');
-};
+}

modules/renderer/index.js

@@ -0,0 +1,5 @@
+export { BackgroundSource } from './background_source';
+export { Background } from './background';
+export { Features } from './features';
+export { Map } from './map';
+export { TileLayer } from './tile_layer';

modules/renderer/map.js

@@ -1,4 +1,4 @@
-iD.Map = function(context) {
+export function Map(context) {
     var dimensions = [1, 1],
         dispatch = d3.dispatch('move', 'drawn'),
         projection = context.projection,
@@ -528,4 +528,4 @@ iD.Map = function(context) {
     map.layers = drawLayers;
 
     return d3.rebind(map, dispatch, 'on');
-};
+}

modules/renderer/tile_layer.js

@@ -1,4 +1,4 @@
-iD.TileLayer = function(context) {
+export function TileLayer(context) {
     var tileSize = 256,
         tile = d3.geo.tile(),
         projection,
@@ -204,4 +204,4 @@ iD.TileLayer = function(context) {
     };
 
     return background;
-};
+}

test/index.html

@@ -43,21 +43,17 @@
     <script src='../js/id/id.js'></script>
     <script src='../js/lib/id/actions.js'></script>
     <script src='../js/lib/id/core.js'></script>
+    <script src='../js/lib/id/behavior.js'></script>
     <script src='../js/lib/id/geo.js'></script>
     <script src='../js/lib/id/modes.js'></script>
     <script src='../js/lib/id/operations.js'></script>
     <script src='../js/lib/id/presets.js'></script>
+    <script src='../js/lib/id/renderer.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>
 
-    <script src='../js/id/renderer/background.js'></script>
-    <script src='../js/id/renderer/background_source.js'></script>
-    <script src='../js/id/renderer/features.js'></script>
-    <script src='../js/id/renderer/map.js'></script>
-    <script src='../js/id/renderer/tile_layer.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>
@@ -107,21 +103,6 @@
     <script src='../js/id/ui/preset/localized.js'></script>
     <script src='../js/id/ui/preset/wikipedia.js'></script>
 
-    <script src='../js/id/behavior.js'></script>
-    <script src='../js/id/behavior/add_way.js'></script>
-    <script src='../js/id/behavior/breathe.js'></script>
-    <script src='../js/id/behavior/copy.js'></script>
-    <script src='../js/id/behavior/drag.js'></script>
-    <script src='../js/id/behavior/draw.js'></script>
-    <script src='../js/id/behavior/draw_way.js'></script>
-    <script src='../js/id/behavior/edit.js'></script>
-    <script src='../js/id/behavior/hash.js'></script>
-    <script src='../js/id/behavior/hover.js'></script>
-    <script src='../js/id/behavior/lasso.js'></script>
-    <script src='../js/id/behavior/paste.js'></script>
-    <script src='../js/id/behavior/select.js'></script>
-    <script src='../js/id/behavior/tail.js'></script>
-
     <script src='../js/lib/locale.js'></script>
 
     <script src='../data/data_dev.js'></script>