Begin d3 v4 update

This commit is contained in:
Tom MacWright
2016-08-12 10:29:00 -04:00
parent 36a90b4f86
commit cdb533fa84
137 changed files with 842 additions and 6691 deletions
+10 -6
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
import _ from 'lodash';
export function access(field) {
@@ -33,7 +37,7 @@ export function access(field) {
.attr('id', function(d) { return 'preset-input-access-' + d; })
.each(function(d) {
d3.select(this)
.call(d3.combobox()
.call(d3combobox()
.data(access.options(d)));
});
@@ -46,8 +50,8 @@ export function access(field) {
function change(d) {
var tag = {};
tag[d] = d3.select(this).value() || undefined;
dispatch.change(tag);
tag[d] = getSetValue(d3.select(this)) || undefined;
dispatch.call("change", this, tag);
}
access.options = function(type) {
@@ -174,8 +178,8 @@ export function access(field) {
};
access.tags = function(tags) {
items.selectAll('.preset-input-access')
.value(function(d) { return tags[d] || ''; })
getSetValue(items.selectAll('.preset-input-access'),
function(d) { return tags[d] || ''; })
.attr('placeholder', function() {
return tags.access ? tags.access : field.placeholder();
});
@@ -194,5 +198,5 @@ export function access(field) {
.node().focus();
};
return d3.rebind(access, dispatch, 'on');
return rebind(access, dispatch, 'on');
}
+14 -11
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
import _ from 'lodash';
import { Extent, chooseEdge, sphericalDistance } from '../../geo/index';
import { nominatim } from '../../services/index';
@@ -150,19 +154,19 @@ export function address(field, context) {
// Update
wrap.selectAll('.addr-street')
.call(d3.combobox()
.call(d3combobox()
.fetcher(function(value, callback) {
callback(getStreets());
}));
wrap.selectAll('.addr-city')
.call(d3.combobox()
.call(d3combobox()
.fetcher(function(value, callback) {
callback(getCities());
}));
wrap.selectAll('.addr-postcode')
.call(d3.combobox()
.call(d3combobox()
.fetcher(function(value, callback) {
callback(getPostCodes());
}));
@@ -174,7 +178,7 @@ export function address(field, context) {
wrap.selectAll('input:not(.combobox-input)')
.on('input', change(true));
dispatch.init();
dispatch.call("init");
isInitialized = true;
});
}
@@ -188,15 +192,14 @@ export function address(field, context) {
tags['addr:' + field.id] = this.value || undefined;
});
dispatch.change(tags, onInput);
dispatch.call("change", this, tags, onInput);
};
}
function updateTags(tags) {
wrap.selectAll('input')
.value(function (field) {
return tags['addr:' + field.id] || '';
});
getSetValue(wrap.selectAll('input'), function (field) {
return tags['addr:' + field.id] || '';
});
}
address.entity = function(_) {
@@ -209,7 +212,7 @@ export function address(field, context) {
if (isInitialized) {
updateTags(tags);
} else {
dispatch.on('init', function () {
dispatch.call("on", this, 'init', function () {
updateTags(tags);
});
}
@@ -220,5 +223,5 @@ export function address(field, context) {
if (node) node.focus();
};
return d3.rebind(address, dispatch, 'on');
return rebind(address, dispatch, 'on');
}
+4 -2
View File
@@ -1,3 +1,5 @@
import { rebind } from '../../util/rebind';
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { oneWayTags } from '../../core/index';
@@ -56,7 +58,7 @@ export function check(field) {
.on('click', function() {
var t = {};
t[field.key] = values[(values.indexOf(value) + 1) % values.length];
dispatch.change(t);
dispatch.call("change", this, t);
d3.event.stopPropagation();
});
@@ -81,5 +83,5 @@ export function check(field) {
box.node().focus();
};
return d3.rebind(check, dispatch, 'on');
return rebind(check, dispatch, 'on');
}
+11 -7
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
import _ from 'lodash';
import { t } from '../../util/locale';
@@ -15,7 +19,7 @@ export function combo(field, context) {
optstrings = field.strings && field.strings.options,
optarray = field.options,
snake_case = (field.snake_case || (field.snake_case === undefined)),
combobox = d3.combobox().minItems(isMulti ? 1 : 2),
combobox = d3combobox().minItems(isMulti ? 1 : 2),
comboData = [],
multiData = [],
container,
@@ -189,13 +193,13 @@ export function combo(field, context) {
function change() {
var val = tagValue(input.value()),
var val = tagValue(getSetValue(input)),
t = {};
if (isMulti) {
if (!val) return;
container.classed('active', false);
input.value('');
getSetValue(input, '');
field.keys.push(field.key + val);
t[field.key + val] = 'yes';
window.setTimeout(function() { input.node().focus(); }, 10);
@@ -204,7 +208,7 @@ export function combo(field, context) {
t[field.key] = val;
}
dispatch.change(t);
dispatch.call("change", this, t);
}
@@ -212,7 +216,7 @@ export function combo(field, context) {
d3.event.stopPropagation();
var t = {};
t[d.key] = undefined;
dispatch.change(t);
dispatch.call("change", this, t);
}
@@ -315,7 +319,7 @@ export function combo(field, context) {
.remove();
} else {
input.value(displayValue(tags[field.key]));
getSetValue(input, displayValue(tags[field.key]));
}
};
@@ -332,5 +336,5 @@ export function combo(field, context) {
};
return d3.rebind(combo, dispatch, 'on');
return rebind(combo, dispatch, 'on');
}
+10 -7
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
export function cycleway(field) {
var dispatch = d3.dispatch('change'),
items;
@@ -31,7 +35,7 @@ export function cycleway(field) {
.attr('id', function(d) { return 'preset-input-cycleway-' + d; })
.each(function(d) {
d3.select(this)
.call(d3.combobox()
.call(d3combobox()
.data(cycleway.options(d)));
});
@@ -44,8 +48,8 @@ export function cycleway(field) {
function change() {
var inputs = d3.selectAll('.preset-input-cycleway')[0],
left = d3.select(inputs[0]).value(),
right = d3.select(inputs[1]).value(),
left = getSetValue(d3.select(inputs[0])),
right = getSetValue(d3.select(inputs[1])),
tag = {};
if (left === 'none' || left === '') { left = undefined; }
if (right === 'none' || right === '') { right = undefined; }
@@ -67,7 +71,7 @@ export function cycleway(field) {
};
}
dispatch.change(tag);
dispatch.call("change", this, tag);
}
cycleway.options = function() {
@@ -80,8 +84,7 @@ export function cycleway(field) {
};
cycleway.tags = function(tags) {
items.selectAll('.preset-input-cycleway')
.value(function(d) {
getSetValue(items.selectAll('.preset-input-cycleway'), function(d) {
// If cycleway is set, always return that
if (tags.cycleway) {
return tags.cycleway;
@@ -96,5 +99,5 @@ export function cycleway(field) {
.node().focus();
};
return d3.rebind(cycleway, dispatch, 'on');
return rebind(cycleway, dispatch, 'on');
}
+7 -4
View File
@@ -1,3 +1,6 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { nominatim as nominatimService } from '../../services/index';
import { phoneFormats } from '../../../data/index';
@@ -71,8 +74,8 @@ export function url(field, context) {
function change(onInput) {
return function() {
var t = {};
t[field.key] = input.value() || undefined;
dispatch.change(t, onInput);
t[field.key] = getSetValue(input) || undefined;
dispatch.call("change", this, t, onInput);
};
}
@@ -83,7 +86,7 @@ export function url(field, context) {
};
i.tags = function(tags) {
input.value(tags[field.key] || '');
getSetValue(input, tags[field.key] || '');
};
i.focus = function() {
@@ -91,5 +94,5 @@ export function url(field, context) {
if (node) node.focus();
};
return d3.rebind(i, dispatch, 'on');
return rebind(i, dispatch, 'on');
}
+4 -2
View File
@@ -1,3 +1,5 @@
import { rebind } from '../../util/rebind';
import * as d3 from 'd3';
export function lanes(field, context) {
var dispatch = d3.dispatch('change'),
LANE_WIDTH = 40,
@@ -23,7 +25,7 @@ export function lanes(field, context) {
var surface = wrap.selectAll('.surface')
.data([0]);
var d = wrap.dimensions();
var d = getDimensions(wrap);
var freeSpace = d[0] - lanesData.lanes.length * LANE_WIDTH * 1.5 + LANE_WIDTH * 0.5;
surface.enter()
@@ -116,5 +118,5 @@ export function lanes(field, context) {
lanes.focus = function() {};
lanes.off = function() {};
return d3.rebind(lanes, dispatch, 'on');
return rebind(lanes, dispatch, 'on');
}
+20 -18
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import { getSetValue } from '../../util/get_set_value';
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import _ from 'lodash';
@@ -25,7 +29,7 @@ export function localized(field, context) {
if (field.id === 'name') {
var preset = context.presets().match(entity, context.graph());
input.call(d3.combobox().fetcher(
input.call(d3combobox().fetcher(
SuggestNames(preset, suggestions)
));
}
@@ -73,15 +77,15 @@ export function localized(field, context) {
function change(onInput) {
return function() {
var t = {};
t[field.key] = d3.select(this).value() || undefined;
dispatch.change(t, onInput);
t[field.key] = getSetValue(d3.select(this)) || undefined;
dispatch.call("change", this, t, onInput);
};
}
function key(lang) { return field.key + ':' + lang; }
function changeLang(d) {
var lang = d3.select(this).value(),
var lang = getSetValue(d3.select(this)),
t = {},
language = _.find(wikipediaData, function(d) {
return d[0].toLowerCase() === lang.toLowerCase() ||
@@ -94,9 +98,8 @@ export function localized(field, context) {
t[key(d.lang)] = undefined;
}
var value = d3.select(this.parentNode)
.selectAll('.localized-value')
.value();
var value = getSetValue(d3.select(this.parentNode)
.selectAll('.localized-value'));
if (lang && value) {
t[key(lang)] = value;
@@ -105,14 +108,14 @@ export function localized(field, context) {
}
d.lang = lang;
dispatch.change(t);
dispatch.call("change", this, t);
}
function changeValue(d) {
if (!d.lang) return;
var t = {};
t[key(d.lang)] = d3.select(this).value() || undefined;
dispatch.change(t);
t[key(d.lang)] = getSetValue(d3.select(this)) || undefined;
dispatch.call("change", this, t);
}
function fetcher(value, cb) {
@@ -137,7 +140,7 @@ export function localized(field, context) {
innerWrap.attr('class', 'entry')
.each(function() {
var wrap = d3.select(this);
var langcombo = d3.combobox().fetcher(fetcher).minItems(0);
var langcombo = d3combobox().fetcher(fetcher).minItems(0);
var label = wrap.append('label')
.attr('class','form-label')
@@ -150,7 +153,7 @@ export function localized(field, context) {
d3.event.preventDefault();
var t = {};
t[key(d.lang)] = undefined;
dispatch.change(t);
dispatch.call("change", this, t);
d3.select(this.parentNode.parentNode)
.style('top','0')
.style('max-height','240px')
@@ -202,14 +205,13 @@ export function localized(field, context) {
var entry = selection.selectAll('.entry');
entry.select('.localized-lang')
.value(function(d) {
getSetValue(entry.select('.localized-lang'), function(d) {
var lang = _.find(wikipediaData, function(lang) { return lang[2] === d.lang; });
return lang ? lang[1] : d.lang;
});
entry.select('.localized-value')
.value(function(d) { return d.value; });
getSetValue(entry.select('.localized-value'),
function(d) { return d.value; });
}
localized.tags = function(tags) {
@@ -224,7 +226,7 @@ export function localized(field, context) {
}
}
input.value(tags[field.key] || '');
getSetValue(input, tags[field.key] || '');
var postfixed = [], k, m;
for (k in tags) {
@@ -247,5 +249,5 @@ export function localized(field, context) {
return localized;
};
return d3.rebind(localized, dispatch, 'on');
return rebind(localized, dispatch, 'on');
}
+13 -9
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { getSetValue } from '../../util/get_set_value';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
import _ from 'lodash';
import { pointInPolygon } from '../../geo/index';
import { imperial as imperialData } from '../../../data/index';
@@ -14,8 +18,8 @@ export function maxspeed(field, context) {
imperialValues = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80];
function maxspeed(selection) {
combobox = d3.combobox();
var unitCombobox = d3.combobox().data(['km/h', 'mph'].map(comboValues));
combobox = d3combobox();
var unitCombobox = d3combobox().data(['km/h', 'mph'].map(comboValues));
input = selection.selectAll('#preset-input-' + field.id)
.data([0]);
@@ -52,8 +56,8 @@ export function maxspeed(field, context) {
.call(unitCombobox);
function changeUnits() {
imperial = unitInput.value() === 'mph';
unitInput.value(imperial ? 'mph' : 'km/h');
imperial = getSetValue(unitInput) === 'mph';
getSetValue(unitInput, imperial ? 'mph' : 'km/h');
setSuggestions();
change();
}
@@ -62,7 +66,7 @@ export function maxspeed(field, context) {
function setSuggestions() {
combobox.data((imperial ? imperialValues : metricValues).map(comboValues));
unitInput.value(imperial ? 'mph' : 'km/h');
getSetValue(unitInput, imperial ? 'mph' : 'km/h');
}
function comboValues(d) {
@@ -74,7 +78,7 @@ export function maxspeed(field, context) {
function change() {
var tag = {},
value = input.value();
value = getSetValue(input);
if (!value) {
tag[field.key] = undefined;
@@ -84,7 +88,7 @@ export function maxspeed(field, context) {
tag[field.key] = value + ' mph';
}
dispatch.change(tag);
dispatch.call("change", this, tag);
}
maxspeed.tags = function(tags) {
@@ -99,7 +103,7 @@ export function maxspeed(field, context) {
setSuggestions();
input.value(value || '');
getSetValue(input, value || '');
};
maxspeed.focus = function() {
@@ -110,5 +114,5 @@ export function maxspeed(field, context) {
entity = _;
};
return d3.rebind(maxspeed, dispatch, 'on');
return rebind(maxspeed, dispatch, 'on');
}
+4 -2
View File
@@ -1,3 +1,5 @@
import { rebind } from '../../util/rebind';
import * as d3 from 'd3';
import { t } from '../../util/locale';
export function radio(field) {
@@ -47,7 +49,7 @@ export function radio(field) {
t[d] = active ? 'yes' : undefined;
}
});
dispatch.change(t);
dispatch.call("change", this, t);
}
radio.tags = function(tags) {
@@ -73,5 +75,5 @@ export function radio(field) {
radios.node().focus();
};
return d3.rebind(radio, dispatch, 'on');
return rebind(radio, dispatch, 'on');
}
+10 -7
View File
@@ -1,3 +1,7 @@
import { rebind } from '../../util/rebind';
import { functor } from '../../util/index';
import { getDimensions, setDimensions } from '../../util/dimensions';
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { Extent, Intersection, RawMercator, Turn, inferRestriction } from '../../geo/index';
import { Layers, Lines, Turns, Vertices } from '../../svg/index';
@@ -33,11 +37,11 @@ export function restrictions(field, context) {
var intersection = Intersection(context.graph(), vertexID),
graph = intersection.graph,
vertex = graph.entity(vertexID),
filter = d3.functor(true),
filter = functor(true),
extent = Extent(),
projection = RawMercator();
var d = wrap.dimensions(),
var d = getDimensions(wrap),
c = [d[0] / 2, d[1] / 2],
z = 24;
@@ -50,7 +54,7 @@ export function restrictions(field, context) {
.translate([c[0] - s[0], c[1] - s[1]])
.clipExtent([[0, 0], d]);
var drawLayers = Layers(projection, context).only('osm').dimensions(d),
var drawLayers = setDimensions(Layers(projection, context).only('osm'), d),
drawVertices = Vertices(projection, context),
drawLines = Lines(projection, context),
drawTurns = Turns(projection, context);
@@ -63,8 +67,7 @@ export function restrictions(field, context) {
var surface = wrap.selectAll('.surface');
surface
.dimensions(d)
setDimensions(surface, d)
.call(drawVertices, graph, [vertex], filter, extent, z)
.call(drawLines, graph, intersection.ways, filter)
.call(drawTurns, graph, intersection.turns(fromNodeID));
@@ -91,7 +94,7 @@ export function restrictions(field, context) {
d3.select(window)
.on('resize.restrictions', function() {
wrap.dimensions(null);
setDimensions(wrap, null);
render();
});
@@ -176,5 +179,5 @@ export function restrictions(field, context) {
.on('resize.restrictions', null);
};
return d3.rebind(restrictions, dispatch, 'on');
return rebind(restrictions, dispatch, 'on');
}
+6 -4
View File
@@ -1,3 +1,5 @@
import { rebind } from '../../util/rebind';
import * as d3 from 'd3';
import { t } from '../../util/locale';
export function textarea(field) {
@@ -22,18 +24,18 @@ export function textarea(field) {
function change(onInput) {
return function() {
var t = {};
t[field.key] = input.value() || undefined;
dispatch.change(t, onInput);
t[field.key] = getSetValue(input) || undefined;
dispatch.call("change", this, t, onInput);
};
}
textarea.tags = function(tags) {
input.value(tags[field.key] || '');
getSetValue(input, tags[field.key] || '');
};
textarea.focus = function() {
input.node().focus();
};
return d3.rebind(textarea, dispatch, 'on');
return rebind(textarea, dispatch, 'on');
}
+20 -17
View File
@@ -1,3 +1,6 @@
import { rebind } from '../../util/rebind';
import { d3combobox } from '../../../js/lib/d3.combobox.js';
import * as d3 from 'd3';
import { t } from '../../util/locale';
import _ from 'lodash';
import { ChangeTags } from '../../actions/index';
@@ -16,7 +19,7 @@ export function wikipedia(field, context) {
link, entity, lang, title;
function wiki(selection) {
var langcombo = d3.combobox()
var langcombo = d3combobox()
.fetcher(function(value, cb) {
var v = value.toLowerCase();
@@ -29,7 +32,7 @@ export function wikipedia(field, context) {
}));
});
var titlecombo = d3.combobox()
var titlecombo = d3combobox()
.fetcher(function(value, cb) {
if (!value) value = context.entity(entity.id).tags.name || '';
@@ -45,11 +48,11 @@ export function wikipedia(field, context) {
lang = selection.selectAll('input.wiki-lang')
.data([0]);
lang.enter().append('input')
getSetValue(lang.enter().append('input')
.attr('type', 'text')
.attr('class', 'wiki-lang')
.attr('placeholder', t('translate.localized_translation_language'))
.value(language()[1]);
.attr('placeholder', t('translate.localized_translation_language')),
language()[1]);
lang
.call(langcombo)
@@ -80,7 +83,7 @@ export function wikipedia(field, context) {
}
function language() {
var value = lang.value().toLowerCase();
var value = getSetValue(lang).toLowerCase();
var locale = Detect().locale.toLowerCase();
var localeLanguage;
return _.find(wikipediaData, function(d) {
@@ -92,7 +95,7 @@ export function wikipedia(field, context) {
}
function changeLang() {
lang.value(language()[1]);
getSetValue(lang, language()[1]);
change(true);
}
@@ -101,7 +104,7 @@ export function wikipedia(field, context) {
}
function change(skipWikidata) {
var value = title.value(),
var value = getSetValue(title),
m = value.match(/https?:\/\/([-a-z]+)\.wikipedia\.org\/(?:wiki|\1-[-a-z]+)\/([^#]+)(?:#(.+))?/),
l = m && _.find(wikipediaData, function(d) { return m[1] === d[2]; }),
anchor,
@@ -120,8 +123,8 @@ export function wikipedia(field, context) {
value += '#' + anchor.replace(/_/g, ' ');
}
value = value.slice(0, 1).toUpperCase() + value.slice(1);
lang.value(l[1]);
title.value(value);
getSetValue(lang, l[1]);
getSetValue(title, value);
}
syncTags.wikipedia = value ? language()[2] + ':' + value : undefined;
@@ -129,7 +132,7 @@ export function wikipedia(field, context) {
syncTags.wikidata = undefined;
}
dispatch.change(syncTags);
dispatch.call("change", this, syncTags);
if (skipWikidata || !value || !language()[2]) return;
@@ -160,7 +163,7 @@ export function wikipedia(field, context) {
});
context.overwrite(ChangeTags(currEntityId, currTags), annotation);
dispatch.change(currTags);
dispatch.call("change", this, currTags);
});
}
@@ -172,8 +175,8 @@ export function wikipedia(field, context) {
// value in correct format
if (l) {
lang.value(l[1]);
title.value(m[2] + (anchor ? ('#' + anchor) : ''));
getSetValue(lang, l[1]);
getSetValue(title, m[2] + (anchor ? ('#' + anchor) : ''));
if (anchor) {
try {
// Best-effort `anchorencode:` implementation
@@ -187,9 +190,9 @@ export function wikipedia(field, context) {
// unrecognized value format
} else {
title.value(value);
getSetValue(title, value);
if (value && value !== '') {
lang.value('');
getSetValue(lang, '');
}
link.attr('href', 'https://en.wikipedia.org/wiki/Special:Search?search=' + value);
}
@@ -205,5 +208,5 @@ export function wikipedia(field, context) {
title.node().focus();
};
return d3.rebind(wiki, dispatch, 'on');
return rebind(wiki, dispatch, 'on');
}