' + (escaped ? _code : escape$2(_code, true)) + '' + (escaped ? _code : escape$2(_code, true)) + '\n' + quote + '\n'; - } - }, { - key: "html", - value: function html(_html) { - return _html; - } - }, { - key: "heading", - value: function heading(text, level, raw, slugger) { - if (this.options.headerIds) { - return '
\n' : '
\n'; - } - }, { - key: "list", - value: function list(body, ordered, start) { - var type = ordered ? 'ol' : 'ul', - startatt = ordered && start !== 1 ? ' start="' + start + '"' : ''; - return '<' + type + startatt + '>\n' + body + '\n'; - } - }, { - key: "listitem", - value: function listitem(text) { - return '
' + text + '
\n'; - } - }, { - key: "table", - value: function table(header, body) { - if (body) body = '' + body + ''; - return '' + text + '';
- }
- }, {
- key: "br",
- value: function br() {
- return this.options.xhtml ? '' : '
'; - } - }, { - key: "del", - value: function del(text) { - return '
An error occurred:
' + escape$3(e.message + '', true) + ''; - } - throw e; + return a !== a && b !== b; + }; + + // J. W. Hunt and M. D. McIlroy, An algorithm for differential buffer + // comparison, Bell Telephone Laboratories CSTR #41 (1976) + // http://www.cs.dartmouth.edu/~doug/ + // https://en.wikipedia.org/wiki/Longest_common_subsequence_problem + // + // Expects two arrays, finds longest common sequence + + function LCS(buffer1, buffer2) { + var equivalenceClasses = {}; + + for (var j = 0; j < buffer2.length; j++) { + var item = buffer2[j]; + + if (equivalenceClasses[item]) { + equivalenceClasses[item].push(j); + } else { + equivalenceClasses[item] = [j]; + } } - } - /** - * Options - */ + var NULLRESULT = { + buffer1index: -1, + buffer2index: -1, + chain: null + }; + var candidates = [NULLRESULT]; + + for (var i = 0; i < buffer1.length; i++) { + var _item = buffer1[i]; + var buffer2indices = equivalenceClasses[_item] || []; + var r = 0; + var c = candidates[0]; + + for (var jx = 0; jx < buffer2indices.length; jx++) { + var _j = buffer2indices[jx]; + var s = void 0; + + for (s = r; s < candidates.length; s++) { + if (candidates[s].buffer2index < _j && (s === candidates.length - 1 || candidates[s + 1].buffer2index > _j)) { + break; + } + } + + if (s < candidates.length) { + var newCandidate = { + buffer1index: i, + buffer2index: _j, + chain: candidates[s] + }; + + if (r === candidates.length) { + candidates.push(c); + } else { + candidates[r] = c; + } + + r = s + 1; + c = newCandidate; + + if (r === candidates.length) { + break; // no point in examining further (j)s + } + } + } - marked.options = marked.setOptions = function (opt) { - merge$3(marked.defaults, opt); - changeDefaults(marked.defaults); - return marked; - }; + candidates[r] = c; + } // At this point, we know the LCS: it's in the reverse of the + // linked-list through .chain of candidates[candidates.length - 1]. - marked.getDefaults = getDefaults; - marked.defaults = defaults$5; - /** - * Use Extension - */ - marked.use = function (extension) { - var opts = merge$3({}, extension); + return candidates[candidates.length - 1]; + } // We apply the LCS to build a 'comm'-style picture of the + // offsets and lengths of mismatched chunks in the input + // buffers. This is used by diff3MergeRegions. - if (extension.renderer) { - (function () { - var renderer = marked.defaults.renderer || new Renderer_1(); - var _loop = function _loop(prop) { - var prevRenderer = renderer[prop]; + function diffIndices(buffer1, buffer2) { + var lcs = LCS(buffer1, buffer2); + var result = []; + var tail1 = buffer1.length; + var tail2 = buffer2.length; - renderer[prop] = function () { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } + for (var candidate = lcs; candidate !== null; candidate = candidate.chain) { + var mismatchLength1 = tail1 - candidate.buffer1index - 1; + var mismatchLength2 = tail2 - candidate.buffer2index - 1; + tail1 = candidate.buffer1index; + tail2 = candidate.buffer2index; - var ret = extension.renderer[prop].apply(renderer, args); + if (mismatchLength1 || mismatchLength2) { + result.push({ + buffer1: [tail1 + 1, mismatchLength1], + buffer1Content: buffer1.slice(tail1 + 1, tail1 + 1 + mismatchLength1), + buffer2: [tail2 + 1, mismatchLength2], + buffer2Content: buffer2.slice(tail2 + 1, tail2 + 1 + mismatchLength2) + }); + } + } - if (ret === false) { - ret = prevRenderer.apply(renderer, args); - } + result.reverse(); + return result; + } // We apply the LCS to build a JSON representation of a + // independently derived from O, returns a fairly complicated + // internal representation of merge decisions it's taken. The + // interested reader may wish to consult + // + // Sanjeev Khanna, Keshav Kunal, and Benjamin C. Pierce. + // 'A Formal Investigation of ' In Arvind and Prasad, + // editors, Foundations of Software Technology and Theoretical + // Computer Science (FSTTCS), December 2007. + // + // (http://www.cis.upenn.edu/~bcpierce/papers/diff3-short.pdf) + // - return ret; - }; - }; - for (var prop in extension.renderer) { - _loop(prop); - } + function diff3MergeRegions(a, o, b) { + // "hunks" are array subsets where `a` or `b` are different from `o` + // https://www.gnu.org/software/diffutils/manual/html_node/diff3-Hunks.html + var hunks = []; - opts.renderer = renderer; - })(); + function addHunk(h, ab) { + hunks.push({ + ab: ab, + oStart: h.buffer1[0], + oLength: h.buffer1[1], + // length of o to remove + abStart: h.buffer2[0], + abLength: h.buffer2[1] // length of a/b to insert + // abContent: (ab === 'a' ? a : b).slice(h.buffer2[0], h.buffer2[0] + h.buffer2[1]) + + }); } - if (extension.tokenizer) { - (function () { - var tokenizer = marked.defaults.tokenizer || new Tokenizer_1(); + diffIndices(o, a).forEach(function (item) { + return addHunk(item, 'a'); + }); + diffIndices(o, b).forEach(function (item) { + return addHunk(item, 'b'); + }); + hunks.sort(function (x, y) { + return x.oStart - y.oStart; + }); + var results = []; + var currOffset = 0; - var _loop2 = function _loop2(prop) { - var prevTokenizer = tokenizer[prop]; + function advanceTo(endOffset) { + if (endOffset > currOffset) { + results.push({ + stable: true, + buffer: 'o', + bufferStart: currOffset, + bufferLength: endOffset - currOffset, + bufferContent: o.slice(currOffset, endOffset) + }); + currOffset = endOffset; + } + } - tokenizer[prop] = function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; - } + while (hunks.length) { + var hunk = hunks.shift(); + var regionStart = hunk.oStart; + var regionEnd = hunk.oStart + hunk.oLength; + var regionHunks = [hunk]; + advanceTo(regionStart); // Try to pull next overlapping hunk into this region - var ret = extension.tokenizer[prop].apply(tokenizer, args); + while (hunks.length) { + var nextHunk = hunks[0]; + var nextHunkStart = nextHunk.oStart; + if (nextHunkStart > regionEnd) break; // no overlap - if (ret === false) { - ret = prevTokenizer.apply(tokenizer, args); - } + regionEnd = Math.max(regionEnd, nextHunkStart + nextHunk.oLength); + regionHunks.push(hunks.shift()); + } - return ret; - }; + if (regionHunks.length === 1) { + // Only one hunk touches this region, meaning that there is no conflict here. + // Either `a` or `b` is inserting into a region of `o` unchanged by the other. + if (hunk.abLength > 0) { + var buffer = hunk.ab === 'a' ? a : b; + results.push({ + stable: true, + buffer: hunk.ab, + bufferStart: hunk.abStart, + bufferLength: hunk.abLength, + bufferContent: buffer.slice(hunk.abStart, hunk.abStart + hunk.abLength) + }); + } + } else { + // A true a/b conflict. Determine the bounds involved from `a`, `o`, and `b`. + // Effectively merge all the `a` hunks into one giant hunk, then do the + // same for the `b` hunks; then, correct for skew in the regions of `o` + // that each side changed, and report appropriate spans for the three sides. + var bounds = { + a: [a.length, -1, o.length, -1], + b: [b.length, -1, o.length, -1] }; - for (var prop in extension.tokenizer) { - _loop2(prop); + while (regionHunks.length) { + hunk = regionHunks.shift(); + var oStart = hunk.oStart; + var oEnd = oStart + hunk.oLength; + var abStart = hunk.abStart; + var abEnd = abStart + hunk.abLength; + var _b = bounds[hunk.ab]; + _b[0] = Math.min(abStart, _b[0]); + _b[1] = Math.max(abEnd, _b[1]); + _b[2] = Math.min(oStart, _b[2]); + _b[3] = Math.max(oEnd, _b[3]); } - opts.tokenizer = tokenizer; - })(); - } - - if (extension.walkTokens) { - var walkTokens = marked.defaults.walkTokens; - - opts.walkTokens = function (token) { - extension.walkTokens(token); + var aStart = bounds.a[0] + (regionStart - bounds.a[2]); + var aEnd = bounds.a[1] + (regionEnd - bounds.a[3]); + var bStart = bounds.b[0] + (regionStart - bounds.b[2]); + var bEnd = bounds.b[1] + (regionEnd - bounds.b[3]); + var result = { + stable: false, + aStart: aStart, + aLength: aEnd - aStart, + aContent: a.slice(aStart, aEnd), + oStart: regionStart, + oLength: regionEnd - regionStart, + oContent: o.slice(regionStart, regionEnd), + bStart: bStart, + bLength: bEnd - bStart, + bContent: b.slice(bStart, bEnd) + }; + results.push(result); + } - if (walkTokens) { - walkTokens(token); - } - }; + currOffset = regionEnd; } - marked.setOptions(opts); - }; - /** - * Run callback for every token - */ - - - marked.walkTokens = function (tokens, callback) { - var _iterator = _createForOfIteratorHelper(tokens), - _step; + advanceTo(o.length); + return results; + } // Applies the output of diff3MergeRegions to actually + // construct the merged buffer; the returned result alternates + // between 'ok' and 'conflict' blocks. + // A "false conflict" is where `a` and `b` both change the same from `o` - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var token = _step.value; - callback(token); - switch (token.type) { - case 'table': - { - var _iterator2 = _createForOfIteratorHelper(token.tokens.header), - _step2; + function diff3Merge(a, o, b, options) { + var defaults = { + excludeFalseConflicts: true, + stringSeparator: /\s+/ + }; + options = Object.assign(defaults, options); + var aString = typeof a === 'string'; + var oString = typeof o === 'string'; + var bString = typeof b === 'string'; + if (aString) a = a.split(options.stringSeparator); + if (oString) o = o.split(options.stringSeparator); + if (bString) b = b.split(options.stringSeparator); + var results = []; + var regions = diff3MergeRegions(a, o, b); + var okBuffer = []; - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var cell = _step2.value; - marked.walkTokens(cell, callback); - } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); - } + function flushOk() { + if (okBuffer.length) { + results.push({ + ok: okBuffer + }); + } - var _iterator3 = _createForOfIteratorHelper(token.tokens.cells), - _step3; + okBuffer = []; + } - try { - for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { - var row = _step3.value; + function isFalseConflict(a, b) { + if (a.length !== b.length) return false; - var _iterator4 = _createForOfIteratorHelper(row), - _step4; + for (var i = 0; i < a.length; i++) { + if (a[i] !== b[i]) return false; + } - try { - for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { - var _cell = _step4.value; - marked.walkTokens(_cell, callback); - } - } catch (err) { - _iterator4.e(err); - } finally { - _iterator4.f(); - } - } - } catch (err) { - _iterator3.e(err); - } finally { - _iterator3.f(); - } + return true; + } - break; - } + regions.forEach(function (region) { + if (region.stable) { + var _okBuffer; - case 'list': - { - marked.walkTokens(token.items, callback); - break; - } + (_okBuffer = okBuffer).push.apply(_okBuffer, _toConsumableArray(region.bufferContent)); + } else { + if (options.excludeFalseConflicts && isFalseConflict(region.aContent, region.bContent)) { + var _okBuffer2; - default: - { - if (token.tokens) { - marked.walkTokens(token.tokens, callback); - } + (_okBuffer2 = okBuffer).push.apply(_okBuffer2, _toConsumableArray(region.aContent)); + } else { + flushOk(); + results.push({ + conflict: { + a: region.aContent, + aIndex: region.aStart, + o: region.oContent, + oIndex: region.oStart, + b: region.bContent, + bIndex: region.bStart } + }); } } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - }; - /** - * Parse Inline - */ + }); + flushOk(); + return results; + } + function actionMergeRemoteChanges(id, localGraph, remoteGraph, discardTags, formatUser) { + discardTags = discardTags || {}; + var _option = 'safe'; // 'safe', 'force_local', 'force_remote' - marked.parseInline = function (src, opt) { - // throw error in case of non string input - if (typeof src === 'undefined' || src === null) { - throw new Error('marked.parseInline(): input parameter is undefined or null'); - } + var _conflicts = []; - if (typeof src !== 'string') { - throw new Error('marked.parseInline(): input parameter is of type ' + Object.prototype.toString.call(src) + ', string expected'); + function user(d) { + return typeof formatUser === 'function' ? formatUser(d) : d; } - opt = merge$3({}, marked.defaults, opt || {}); - checkSanitizeDeprecation$1(opt); + function mergeLocation(remote, target) { + function pointEqual(a, b) { + var epsilon = 1e-6; + return Math.abs(a[0] - b[0]) < epsilon && Math.abs(a[1] - b[1]) < epsilon; + } - try { - var tokens = Lexer_1.lexInline(src, opt); + if (_option === 'force_local' || pointEqual(target.loc, remote.loc)) { + return target; + } - if (opt.walkTokens) { - marked.walkTokens(tokens, opt.walkTokens); + if (_option === 'force_remote') { + return target.update({ + loc: remote.loc + }); } - return Parser_1.parseInline(tokens, opt); - } catch (e) { - e.message += '\nPlease report this to https://github.com/markedjs/marked.'; + _conflicts.push(_t('merge_remote_changes.conflict.location', { + user: user(remote.user) + })); - if (opt.silent) { - return '
An error occurred:
' + escape$3(e.message + '', true) + ''; + return target; + } + + function mergeNodes(base, remote, target) { + if (_option === 'force_local' || fastDeepEqual(target.nodes, remote.nodes)) { + return target; } - throw e; - } - }; - /** - * Expose - */ + if (_option === 'force_remote') { + return target.update({ + nodes: remote.nodes + }); + } + var ccount = _conflicts.length; + var o = base.nodes || []; + var a = target.nodes || []; + var b = remote.nodes || []; + var nodes = []; + var hunks = diff3Merge(a, o, b, { + excludeFalseConflicts: true + }); - marked.Parser = Parser_1; - marked.parser = Parser_1.parse; - marked.Renderer = Renderer_1; - marked.TextRenderer = TextRenderer_1; - marked.Lexer = Lexer_1; - marked.lexer = Lexer_1.lex; - marked.Tokenizer = Tokenizer_1; - marked.Slugger = Slugger_1; - marked.parse = marked; - var marked_1 = marked; + for (var i = 0; i < hunks.length; i++) { + var hunk = hunks[i]; - var tiler$2 = utilTiler(); - var dispatch$3 = dispatch('loaded'); - var _tileZoom$2 = 14; - var _osmoseUrlRoot = 'https://osmose.openstreetmap.fr/api/0.3'; - var _osmoseData = { - icons: {}, - items: [] - }; // This gets reassigned if reset + if (hunk.ok) { + nodes.push.apply(nodes, hunk.ok); + } else { + // for all conflicts, we can assume c.a !== c.b + // because `diff3Merge` called with `true` option to exclude false conflicts.. + var c = hunk.conflict; - var _cache$2; + if (fastDeepEqual(c.o, c.a)) { + // only changed remotely + nodes.push.apply(nodes, c.b); + } else if (fastDeepEqual(c.o, c.b)) { + // only changed locally + nodes.push.apply(nodes, c.a); + } else { + // changed both locally and remotely + _conflicts.push(_t('merge_remote_changes.conflict.nodelist', { + user: user(remote.user) + })); - function abortRequest$2(controller) { - if (controller) { - controller.abort(); - } - } + break; + } + } + } - function abortUnwantedRequests$2(cache, tiles) { - Object.keys(cache.inflightTile).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k === tile.id; - }); + return _conflicts.length === ccount ? target.update({ + nodes: nodes + }) : target; + } - if (!wanted) { - abortRequest$2(cache.inflightTile[k]); - delete cache.inflightTile[k]; + function mergeChildren(targetWay, children, updates, graph) { + function isUsed(node, targetWay) { + var hasInterestingParent = graph.parentWays(node).some(function (way) { + return way.id !== targetWay.id; + }); + return node.hasInterestingTags() || hasInterestingParent || graph.parentRelations(node).length > 0; } - }); - } - function encodeIssueRtree$2(d) { - return { - minX: d.loc[0], - minY: d.loc[1], - maxX: d.loc[0], - maxY: d.loc[1], - data: d - }; - } // Replace or remove QAItem from rtree + var ccount = _conflicts.length; + for (var i = 0; i < children.length; i++) { + var id = children[i]; + var node = graph.hasEntity(id); // remove unused childNodes.. - function updateRtree$2(item, replace) { - _cache$2.rtree.remove(item, function (a, b) { - return a.data.id === b.data.id; - }); + if (targetWay.nodes.indexOf(id) === -1) { + if (node && !isUsed(node, targetWay)) { + updates.removeIds.push(id); + } - if (replace) { - _cache$2.rtree.insert(item); - } - } // Issues shouldn't obscure each other + continue; + } // restore used childNodes.. - function preventCoincident$1(loc) { - var coincident = false; + var local = localGraph.hasEntity(id); + var remote = remoteGraph.hasEntity(id); + var target; + + if (_option === 'force_remote' && remote && remote.visible) { + updates.replacements.push(remote); + } else if (_option === 'force_local' && local) { + target = osmEntity(local); + + if (remote) { + target = target.update({ + version: remote.version + }); + } + + updates.replacements.push(target); + } else if (_option === 'safe' && local && remote && local.version !== remote.version) { + target = osmEntity(local, { + version: remote.version + }); - do { - // first time, move marker up. after that, move marker right. - var delta = coincident ? [0.00001, 0] : [0, 0.00001]; - loc = geoVecAdd(loc, delta); - var bbox = geoExtent(loc).bbox(); - coincident = _cache$2.rtree.search(bbox).length; - } while (coincident); + if (remote.visible) { + target = mergeLocation(remote, target); + } else { + _conflicts.push(_t('merge_remote_changes.conflict.deleted', { + user: user(remote.user) + })); + } - return loc; - } + if (_conflicts.length !== ccount) break; + updates.replacements.push(target); + } + } - var serviceOsmose = { - title: 'osmose', - init: function init() { - _mainFileFetcher.get('qa_data').then(function (d) { - _osmoseData = d.osmose; - _osmoseData.items = Object.keys(d.osmose.icons).map(function (s) { - return s.split('-')[0]; - }).reduce(function (unique, item) { - return unique.indexOf(item) !== -1 ? unique : [].concat(_toConsumableArray(unique), [item]); - }, []); - }); + return targetWay; + } - if (!_cache$2) { - this.reset(); + function updateChildren(updates, graph) { + for (var i = 0; i < updates.replacements.length; i++) { + graph = graph.replace(updates.replacements[i]); } - this.event = utilRebind(this, dispatch$3, 'on'); - }, - reset: function reset() { - var _strings = {}; - var _colors = {}; + if (updates.removeIds.length) { + graph = actionDeleteMultiple(updates.removeIds)(graph); + } - if (_cache$2) { - Object.values(_cache$2.inflightTile).forEach(abortRequest$2); // Strings and colors are static and should not be re-populated + return graph; + } - _strings = _cache$2.strings; - _colors = _cache$2.colors; + function mergeMembers(remote, target) { + if (_option === 'force_local' || fastDeepEqual(target.members, remote.members)) { + return target; } - _cache$2 = { - data: {}, - loadedTile: {}, - inflightTile: {}, - inflightPost: {}, - closed: {}, - rtree: new RBush(), - strings: _strings, - colors: _colors - }; - }, - loadIssues: function loadIssues(projection) { - var _this = this; + if (_option === 'force_remote') { + return target.update({ + members: remote.members + }); + } - var params = { - // Tiles return a maximum # of issues - // So we want to filter our request for only types iD supports - item: _osmoseData.items - }; // determine the needed tiles to cover the view + _conflicts.push(_t('merge_remote_changes.conflict.memberlist', { + user: user(remote.user) + })); - var tiles = tiler$2.zoomExtent([_tileZoom$2, _tileZoom$2]).getTiles(projection); // abort inflight requests that are no longer needed + return target; + } - abortUnwantedRequests$2(_cache$2, tiles); // issue new requests.. + function mergeTags(base, remote, target) { + if (_option === 'force_local' || fastDeepEqual(target.tags, remote.tags)) { + return target; + } - tiles.forEach(function (tile) { - if (_cache$2.loadedTile[tile.id] || _cache$2.inflightTile[tile.id]) return; + if (_option === 'force_remote') { + return target.update({ + tags: remote.tags + }); + } - var _tile$xyz = _slicedToArray(tile.xyz, 3), - x = _tile$xyz[0], - y = _tile$xyz[1], - z = _tile$xyz[2]; + var ccount = _conflicts.length; + var o = base.tags || {}; + var a = target.tags || {}; + var b = remote.tags || {}; + var keys = utilArrayUnion(utilArrayUnion(Object.keys(o), Object.keys(a)), Object.keys(b)).filter(function (k) { + return !discardTags[k]; + }); + var tags = Object.assign({}, a); // shallow copy - var url = "".concat(_osmoseUrlRoot, "/issues/").concat(z, "/").concat(x, "/").concat(y, ".json?") + utilQsString(params); - var controller = new AbortController(); - _cache$2.inflightTile[tile.id] = controller; - d3_json(url, { - signal: controller.signal - }).then(function (data) { - delete _cache$2.inflightTile[tile.id]; - _cache$2.loadedTile[tile.id] = true; + var changed = false; - if (data.features) { - data.features.forEach(function (issue) { - var _issue$properties = issue.properties, - item = _issue$properties.item, - cl = _issue$properties["class"], - id = _issue$properties.uuid; - /* Osmose issues are uniquely identified by a unique - `item` and `class` combination (both integer values) */ + for (var i = 0; i < keys.length; i++) { + var k = keys[i]; - var itemType = "".concat(item, "-").concat(cl); // Filter out unsupported issue types (some are too specific or advanced) + if (o[k] !== b[k] && a[k] !== b[k]) { + // changed remotely.. + if (o[k] !== a[k]) { + // changed locally.. + _conflicts.push(_t('merge_remote_changes.conflict.tags', { + tag: k, + local: a[k], + remote: b[k], + user: user(remote.user) + })); + } else { + // unchanged locally, accept remote change.. + if (b.hasOwnProperty(k)) { + tags[k] = b[k]; + } else { + delete tags[k]; + } - if (itemType in _osmoseData.icons) { - var loc = issue.geometry.coordinates; // lon, lat + changed = true; + } + } + } - loc = preventCoincident$1(loc); - var d = new QAItem(loc, _this, itemType, id, { - item: item - }); // Setting elems here prevents UI detail requests + return changed && _conflicts.length === ccount ? target.update({ + tags: tags + }) : target; + } // `graph.base()` is the common ancestor of the two graphs. + // `localGraph` contains user's edits up to saving + // `remoteGraph` contains remote edits to modified nodes + // `graph` must be a descendent of `localGraph` and may include + // some conflict resolution actions performed on it. + // + // --- ... --- `localGraph` -- ... -- `graph` + // / + // `graph.base()` --- ... --- `remoteGraph` + // - if (item === 8300 || item === 8360) { - d.elems = []; - } - _cache$2.data[d.id] = d; + var action = function action(graph) { + var updates = { + replacements: [], + removeIds: [] + }; + var base = graph.base().entities[id]; + var local = localGraph.entity(id); + var remote = remoteGraph.entity(id); + var target = osmEntity(local, { + version: remote.version + }); // delete/undelete - _cache$2.rtree.insert(encodeIssueRtree$2(d)); - } - }); + if (!remote.visible) { + if (_option === 'force_remote') { + return actionDeleteMultiple([id])(graph); + } else if (_option === 'force_local') { + if (target.type === 'way') { + target = mergeChildren(target, utilArrayUniq(local.nodes), updates, graph); + graph = updateChildren(updates, graph); } - dispatch$3.call('loaded'); - })["catch"](function () { - delete _cache$2.inflightTile[tile.id]; - _cache$2.loadedTile[tile.id] = true; - }); - }); - }, - loadIssueDetail: function loadIssueDetail(issue) { - var _this2 = this; + return graph.replace(target); + } else { + _conflicts.push(_t('merge_remote_changes.conflict.deleted', { + user: user(remote.user) + })); - // Issue details only need to be fetched once - if (issue.elems !== undefined) { - return Promise.resolve(issue); + return graph; // do nothing + } + } // merge + + + if (target.type === 'node') { + target = mergeLocation(remote, target); + } else if (target.type === 'way') { + // pull in any child nodes that may not be present locally.. + graph.rebase(remoteGraph.childNodes(remote), [graph], false); + target = mergeNodes(base, remote, target); + target = mergeChildren(target, utilArrayUnion(local.nodes, remote.nodes), updates, graph); + } else if (target.type === 'relation') { + target = mergeMembers(remote, target); } - var url = "".concat(_osmoseUrlRoot, "/issue/").concat(issue.id, "?langs=").concat(_mainLocalizer.localeCode()); + target = mergeTags(base, remote, target); - var cacheDetails = function cacheDetails(data) { - // Associated elements used for highlighting - // Assign directly for immediate use in the callback - issue.elems = data.elems.map(function (e) { - return e.type.substring(0, 1) + e.id; - }); // Some issues have instance specific detail in a subtitle + if (!_conflicts.length) { + graph = updateChildren(updates, graph).replace(target); + } - issue.detail = data.subtitle ? marked_1(data.subtitle.auto) : ''; + return graph; + }; - _this2.replaceItem(issue); - }; + action.withOption = function (opt) { + _option = opt; + return action; + }; - return d3_json(url).then(cacheDetails).then(function () { - return issue; - }); - }, - loadStrings: function loadStrings() { - var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _mainLocalizer.localeCode(); - var items = Object.keys(_osmoseData.icons); + action.conflicts = function () { + return _conflicts; + }; - if (locale in _cache$2.strings && Object.keys(_cache$2.strings[locale]).length === items.length) { - return Promise.resolve(_cache$2.strings[locale]); - } // May be partially populated already if some requests were successful + return action; + } + // https://github.com/openstreetmap/potlatch2/blob/master/net/systemeD/halcyon/connection/actions/MoveNodeAction.as - if (!(locale in _cache$2.strings)) { - _cache$2.strings[locale] = {}; - } // Only need to cache strings for supported issue types - // Using multiple individual item + class requests to reduce fetched data size + function actionMove(moveIDs, tryDelta, projection, cache) { + var _delta = tryDelta; + function setupCache(graph) { + function canMove(nodeID) { + // Allow movement of any node that is in the selectedIDs list.. + if (moveIDs.indexOf(nodeID) !== -1) return true; // Allow movement of a vertex where 2 ways meet.. - var allRequests = items.map(function (itemType) { - // No need to request data we already have - if (itemType in _cache$2.strings[locale]) return null; + var parents = graph.parentWays(graph.entity(nodeID)); + if (parents.length < 3) return true; // Restrict movement of a vertex where >2 ways meet, unless all parentWays are moving too.. - var cacheData = function cacheData(data) { - // Bunch of nested single value arrays of objects - var _data$categories = _slicedToArray(data.categories, 1), - _data$categories$ = _data$categories[0], - cat = _data$categories$ === void 0 ? { - items: [] - } : _data$categories$; + var parentsMoving = parents.every(function (way) { + return cache.moving[way.id]; + }); + if (!parentsMoving) delete cache.moving[nodeID]; + return parentsMoving; + } - var _cat$items = _slicedToArray(cat.items, 1), - _cat$items$ = _cat$items[0], - item = _cat$items$ === void 0 ? { - "class": [] - } : _cat$items$; + function cacheEntities(ids) { + for (var i = 0; i < ids.length; i++) { + var id = ids[i]; + if (cache.moving[id]) continue; + cache.moving[id] = true; + var entity = graph.hasEntity(id); + if (!entity) continue; - var _item$class = _slicedToArray(item["class"], 1), - _item$class$ = _item$class[0], - cl = _item$class$ === void 0 ? null : _item$class$; // If null default value is reached, data wasn't as expected (or was empty) + if (entity.type === 'node') { + cache.nodes.push(id); + cache.startLoc[id] = entity.loc; + } else if (entity.type === 'way') { + cache.ways.push(id); + cacheEntities(entity.nodes); + } else { + cacheEntities(entity.members.map(function (member) { + return member.id; + })); + } + } + } + function cacheIntersections(ids) { + function isEndpoint(way, id) { + return !way.isClosed() && !!way.affix(id); + } - if (!cl) { - /* eslint-disable no-console */ - console.log("Osmose strings request (".concat(itemType, ") had unexpected data")); - /* eslint-enable no-console */ + for (var i = 0; i < ids.length; i++) { + var id = ids[i]; // consider only intersections with 1 moved and 1 unmoved way. - return; - } // Cache served item colors to automatically style issue markers later + var childNodes = graph.childNodes(graph.entity(id)); + for (var j = 0; j < childNodes.length; j++) { + var node = childNodes[j]; + var parents = graph.parentWays(node); + if (parents.length !== 2) continue; + var moved = graph.entity(id); + var unmoved = null; - var itemInt = item.item, - color = item.color; + for (var k = 0; k < parents.length; k++) { + var way = parents[k]; - if (/^#[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/.test(color)) { - _cache$2.colors[itemInt] = color; - } // Value of root key will be null if no string exists - // If string exists, value is an object with key 'auto' for string + if (!cache.moving[way.id]) { + unmoved = way; + break; + } + } + if (!unmoved) continue; // exclude ways that are overly connected.. - var title = cl.title, - detail = cl.detail, - fix = cl.fix, - trap = cl.trap; // Osmose titles shouldn't contain markdown + if (utilArrayIntersection(moved.nodes, unmoved.nodes).length > 2) continue; + if (moved.isArea() || unmoved.isArea()) continue; + cache.intersections.push({ + nodeId: node.id, + movedId: moved.id, + unmovedId: unmoved.id, + movedIsEP: isEndpoint(moved, node.id), + unmovedIsEP: isEndpoint(unmoved, node.id) + }); + } + } + } - var issueStrings = {}; - if (title) issueStrings.title = title.auto; - if (detail) issueStrings.detail = marked_1(detail.auto); - if (trap) issueStrings.trap = marked_1(trap.auto); - if (fix) issueStrings.fix = marked_1(fix.auto); - _cache$2.strings[locale][itemType] = issueStrings; - }; + if (!cache) { + cache = {}; + } - var _itemType$split = itemType.split('-'), - _itemType$split2 = _slicedToArray(_itemType$split, 2), - item = _itemType$split2[0], - cl = _itemType$split2[1]; // Osmose API falls back to English strings where untranslated or if locale doesn't exist + if (!cache.ok) { + cache.moving = {}; + cache.intersections = []; + cache.replacedVertex = {}; + cache.startLoc = {}; + cache.nodes = []; + cache.ways = []; + cacheEntities(moveIDs); + cacheIntersections(cache.ways); + cache.nodes = cache.nodes.filter(canMove); + cache.ok = true; + } + } // Place a vertex where the moved vertex used to be, to preserve way shape.. + // + // Start: + // b ---- e + // / \ + // / \ + // / \ + // a c + // + // * node '*' added to preserve shape + // / \ + // / b ---- e way `b,e` moved here: + // / \ + // a c + // + // - var url = "".concat(_osmoseUrlRoot, "/items/").concat(item, "/class/").concat(cl, "?langs=").concat(locale); - return d3_json(url).then(cacheData); - }).filter(Boolean); - return Promise.all(allRequests).then(function () { - return _cache$2.strings[locale]; - }); - }, - getStrings: function getStrings(itemType) { - var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _mainLocalizer.localeCode(); - // No need to fallback to English, Osmose API handles this for us - return locale in _cache$2.strings ? _cache$2.strings[locale][itemType] : {}; - }, - getColor: function getColor(itemType) { - return itemType in _cache$2.colors ? _cache$2.colors[itemType] : '#FFFFFF'; - }, - postUpdate: function postUpdate(issue, callback) { - var _this3 = this; + function replaceMovedVertex(nodeId, wayId, graph, delta) { + var way = graph.entity(wayId); + var moved = graph.entity(nodeId); + var movedIndex = way.nodes.indexOf(nodeId); + var len, prevIndex, nextIndex; - if (_cache$2.inflightPost[issue.id]) { - return callback({ - message: 'Issue update already inflight', - status: -2 - }, issue); - } // UI sets the status to either 'done' or 'false' + if (way.isClosed()) { + len = way.nodes.length - 1; + prevIndex = (movedIndex + len - 1) % len; + nextIndex = (movedIndex + len + 1) % len; + } else { + len = way.nodes.length; + prevIndex = movedIndex - 1; + nextIndex = movedIndex + 1; + } + var prev = graph.hasEntity(way.nodes[prevIndex]); + var next = graph.hasEntity(way.nodes[nextIndex]); // Don't add orig vertex at endpoint.. - var url = "".concat(_osmoseUrlRoot, "/issue/").concat(issue.id, "/").concat(issue.newStatus); - var controller = new AbortController(); + if (!prev || !next) return graph; + var key = wayId + '_' + nodeId; + var orig = cache.replacedVertex[key]; - var after = function after() { - delete _cache$2.inflightPost[issue.id]; + if (!orig) { + orig = osmNode(); + cache.replacedVertex[key] = orig; + cache.startLoc[orig.id] = cache.startLoc[nodeId]; + } - _this3.removeItem(issue); + var start, end; - if (issue.newStatus === 'done') { - // Keep track of the number of issues closed per `item` to tag the changeset - if (!(issue.item in _cache$2.closed)) { - _cache$2.closed[issue.item] = 0; - } + if (delta) { + start = projection(cache.startLoc[nodeId]); + end = projection.invert(geoVecAdd(start, delta)); + } else { + end = cache.startLoc[nodeId]; + } - _cache$2.closed[issue.item] += 1; - } + orig = orig.move(end); + var angle = Math.abs(geoAngle(orig, prev, projection) - geoAngle(orig, next, projection)) * 180 / Math.PI; // Don't add orig vertex if it would just make a straight line.. - if (callback) callback(null, issue); - }; + if (angle > 175 && angle < 185) return graph; // moving forward or backward along way? - _cache$2.inflightPost[issue.id] = controller; - fetch(url, { - signal: controller.signal - }).then(after)["catch"](function (err) { - delete _cache$2.inflightPost[issue.id]; - if (callback) callback(err.message); - }); - }, - // Get all cached QAItems covering the viewport - getItems: function getItems(projection) { - var viewport = projection.clipExtent(); - var min = [viewport[0][0], viewport[1][1]]; - var max = [viewport[1][0], viewport[0][1]]; - var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); - return _cache$2.rtree.search(bbox).map(function (d) { - return d.data; - }); - }, - // Get a QAItem from cache - // NOTE: Don't change method name until UI v3 is merged - getError: function getError(id) { - return _cache$2.data[id]; - }, - // get the name of the icon to display for this item - getIcon: function getIcon(itemType) { - return _osmoseData.icons[itemType]; - }, - // Replace a single QAItem in the cache - replaceItem: function replaceItem(item) { - if (!(item instanceof QAItem) || !item.id) return; - _cache$2.data[item.id] = item; - updateRtree$2(encodeIssueRtree$2(item), true); // true = replace + var p1 = [prev.loc, orig.loc, moved.loc, next.loc].map(projection); + var p2 = [prev.loc, moved.loc, orig.loc, next.loc].map(projection); + var d1 = geoPathLength(p1); + var d2 = geoPathLength(p2); + var insertAt = d1 <= d2 ? movedIndex : nextIndex; // moving around closed loop? - return item; - }, - // Remove a single QAItem from the cache - removeItem: function removeItem(item) { - if (!(item instanceof QAItem) || !item.id) return; - delete _cache$2.data[item.id]; - updateRtree$2(encodeIssueRtree$2(item), false); // false = remove - }, - // Used to populate `closed:osmose:*` changeset tags - getClosedCounts: function getClosedCounts() { - return _cache$2.closed; - }, - itemURL: function itemURL(item) { - return "https://osmose.openstreetmap.fr/en/error/".concat(item.id); - } - }; + if (way.isClosed() && insertAt === 0) insertAt = len; + way = way.addNode(orig.id, insertAt); + return graph.replace(orig).replace(way); + } // Remove duplicate vertex that might have been added by + // replaceMovedVertex. This is done after the unzorro checks. - var apibase = 'https://a.mapillary.com/v3/'; - var viewercss = 'mapillary-js/mapillary.min.css'; - var viewerjs = 'mapillary-js/mapillary.min.js'; - var clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi'; - var mapFeatureConfig = { - values: ['construction--flat--crosswalk-plain', 'marking--discrete--crosswalk-zebra', 'object--banner', 'object--bench', 'object--bike-rack', 'object--billboard', 'object--catch-basin', 'object--cctv-camera', 'object--fire-hydrant', 'object--mailbox', 'object--manhole', 'object--phone-booth', 'object--sign--advertisement', 'object--sign--information', 'object--sign--store', 'object--street-light', 'object--support--utility-pole', 'object--traffic-light--*', 'object--traffic-light--pedestrians', 'object--trash-can'].join(',') - }; - var maxResults = 1000; - var tileZoom = 14; - var tiler$3 = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true); - var dispatch$4 = dispatch('change', 'loadedImages', 'loadedSigns', 'loadedMapFeatures', 'bearingChanged', 'nodeChanged'); - var _mlyFallback = false; - var _mlyCache; + function removeDuplicateVertices(wayId, graph) { + var way = graph.entity(wayId); + var epsilon = 1e-6; + var prev, curr; - var _mlyClicks; + function isInteresting(node, graph) { + return graph.parentWays(node).length > 1 || graph.parentRelations(node).length || node.hasInterestingTags(); + } - var _mlyActiveImage; + for (var i = 0; i < way.nodes.length; i++) { + curr = graph.entity(way.nodes[i]); - var _mlySelectedImageKey; + if (prev && curr && geoVecEqual(prev.loc, curr.loc, epsilon)) { + if (!isInteresting(prev, graph)) { + way = way.removeNode(prev.id); + graph = graph.replace(way).remove(prev); + } else if (!isInteresting(curr, graph)) { + way = way.removeNode(curr.id); + graph = graph.replace(way).remove(curr); + } + } - var _mlyViewer; + prev = curr; + } - var _mlyViewerFilter = ['all']; + return graph; + } // Reorder nodes around intersections that have moved.. + // + // Start: way1.nodes: b,e (moving) + // a - b - c ----- d way2.nodes: a,b,c,d (static) + // | vertex: b + // e isEP1: true, isEP2, false + // + // way1 `b,e` moved here: + // a ----- c = b - d + // | + // e + // + // reorder nodes way1.nodes: b,e + // a ----- c - b - d way2.nodes: a,c,b,d + // | + // e + // - var _loadViewerPromise; - var _mlyHighlightedDetection; + function unZorroIntersection(intersection, graph) { + var vertex = graph.entity(intersection.nodeId); + var way1 = graph.entity(intersection.movedId); + var way2 = graph.entity(intersection.unmovedId); + var isEP1 = intersection.movedIsEP; + var isEP2 = intersection.unmovedIsEP; // don't move the vertex if it is the endpoint of both ways. - var _mlyShowFeatureDetections = false; - var _mlyShowSignDetections = false; + if (isEP1 && isEP2) return graph; + var nodes1 = graph.childNodes(way1).filter(function (n) { + return n !== vertex; + }); + var nodes2 = graph.childNodes(way2).filter(function (n) { + return n !== vertex; + }); + if (way1.isClosed() && way1.first() === vertex.id) nodes1.push(nodes1[0]); + if (way2.isClosed() && way2.first() === vertex.id) nodes2.push(nodes2[0]); + var edge1 = !isEP1 && geoChooseEdge(nodes1, projection(vertex.loc), projection); + var edge2 = !isEP2 && geoChooseEdge(nodes2, projection(vertex.loc), projection); + var loc; // snap vertex to nearest edge (or some point between them).. - function abortRequest$3(controller) { - controller.abort(); - } + if (!isEP1 && !isEP2) { + var epsilon = 1e-6, + maxIter = 10; - function loadTiles(which, url, projection) { - var currZoom = Math.floor(geoScaleToZoom(projection.scale())); - var tiles = tiler$3.getTiles(projection); // abort inflight requests that are no longer needed + for (var i = 0; i < maxIter; i++) { + loc = geoVecInterp(edge1.loc, edge2.loc, 0.5); + edge1 = geoChooseEdge(nodes1, projection(loc), projection); + edge2 = geoChooseEdge(nodes2, projection(loc), projection); + if (Math.abs(edge1.distance - edge2.distance) < epsilon) break; + } + } else if (!isEP1) { + loc = edge1.loc; + } else { + loc = edge2.loc; + } - var cache = _mlyCache[which]; - Object.keys(cache.inflight).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k.indexOf(tile.id + ',') === 0; - }); + graph = graph.replace(vertex.move(loc)); // if zorro happened, reorder nodes.. - if (!wanted) { - abortRequest$3(cache.inflight[k]); - delete cache.inflight[k]; + if (!isEP1 && edge1.index !== way1.nodes.indexOf(vertex.id)) { + way1 = way1.removeNode(vertex.id).addNode(vertex.id, edge1.index); + graph = graph.replace(way1); } - }); - tiles.forEach(function (tile) { - loadNextTilePage(which, currZoom, url, tile); - }); - } - function loadNextTilePage(which, currZoom, url, tile) { - var cache = _mlyCache[which]; - var rect = tile.extent.rectangle(); - var maxPages = maxPageAtZoom(currZoom); - var nextPage = cache.nextPage[tile.id] || 0; - var nextURL = cache.nextURL[tile.id] || url + utilQsString({ - per_page: maxResults, - page: nextPage, - client_id: clientId, - bbox: [rect[0], rect[1], rect[2], rect[3]].join(',') - }); - if (nextPage > maxPages) return; - var id = tile.id + ',' + String(nextPage); - if (cache.loaded[id] || cache.inflight[id]) return; - var controller = new AbortController(); - cache.inflight[id] = controller; - var options = { - method: 'GET', - signal: controller.signal, - headers: { - 'Content-Type': 'application/json' + if (!isEP2 && edge2.index !== way2.nodes.indexOf(vertex.id)) { + way2 = way2.removeNode(vertex.id).addNode(vertex.id, edge2.index); + graph = graph.replace(way2); } - }; - fetch(nextURL, options).then(function (response) { - if (!response.ok) { - throw new Error(response.status + ' ' + response.statusText); + + return graph; + } + + function cleanupIntersections(graph) { + for (var i = 0; i < cache.intersections.length; i++) { + var obj = cache.intersections[i]; + graph = replaceMovedVertex(obj.nodeId, obj.movedId, graph, _delta); + graph = replaceMovedVertex(obj.nodeId, obj.unmovedId, graph, null); + graph = unZorroIntersection(obj, graph); + graph = removeDuplicateVertices(obj.movedId, graph); + graph = removeDuplicateVertices(obj.unmovedId, graph); } - var linkHeader = response.headers.get('Link'); + return graph; + } // check if moving way endpoint can cross an unmoved way, if so limit delta.. - if (linkHeader) { - var pagination = parsePagination(linkHeader); - if (pagination.next) { - cache.nextURL[tile.id] = pagination.next; - } + function limitDelta(graph) { + function moveNode(loc) { + return geoVecAdd(projection(loc), _delta); } - return response.json(); - }).then(function (data) { - cache.loaded[id] = true; - delete cache.inflight[id]; + for (var i = 0; i < cache.intersections.length; i++) { + var obj = cache.intersections[i]; // Don't limit movement if this is vertex joins 2 endpoints.. - if (!data || !data.features || !data.features.length) { - throw new Error('No Data'); - } + if (obj.movedIsEP && obj.unmovedIsEP) continue; // Don't limit movement if this vertex is not an endpoint anyway.. - var features = data.features.map(function (feature) { - var loc = feature.geometry.coordinates; - var d; // An image (shown as a green dot on the map) is a single street photo with extra - // information such as location, camera angle (CA), camera model, and so on. - // Each image feature is a GeoJSON Point + if (!obj.movedIsEP) continue; + var node = graph.entity(obj.nodeId); + var start = projection(node.loc); + var end = geoVecAdd(start, _delta); + var movedNodes = graph.childNodes(graph.entity(obj.movedId)); + var movedPath = movedNodes.map(function (n) { + return moveNode(n.loc); + }); + var unmovedNodes = graph.childNodes(graph.entity(obj.unmovedId)); + var unmovedPath = unmovedNodes.map(function (n) { + return projection(n.loc); + }); + var hits = geoPathIntersections(movedPath, unmovedPath); - if (which === 'images') { - d = { - loc: loc, - key: feature.properties.key, - ca: feature.properties.ca, - captured_at: feature.properties.captured_at, - captured_by: feature.properties.username, - pano: feature.properties.pano - }; - cache.forImageKey[d.key] = d; // cache imageKey -> image - // Mapillary organizes images as sequences. A sequence of images are continuously captured - // by a user at a give time. Sequences are shown on the map as green lines. - // Each sequence feature is a GeoJSON LineString - } else if (which === 'sequences') { - var sequenceKey = feature.properties.key; - cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString - - feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { - cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey - }); - return false; // because no `d` data worth loading into an rbush - // A map feature is a real world object that can be shown on a map. It could be any object - // recognized from images, manually added in images, or added on the map. - // Each map feature is a GeoJSON Point (located where the feature is) - } else if (which === 'map_features' || which === 'points') { - d = { - loc: loc, - key: feature.properties.key, - value: feature.properties.value, - detections: feature.properties.detections, - direction: feature.properties.direction, - accuracy: feature.properties.accuracy, - first_seen_at: feature.properties.first_seen_at, - last_seen_at: feature.properties.last_seen_at - }; + for (var j = 0; i < hits.length; i++) { + if (geoVecEqual(hits[j], end)) continue; + var edge = geoChooseEdge(unmovedNodes, end, projection); + _delta = geoVecSubtract(projection(edge.loc), start); } + } + } - return { - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1], - data: d - }; - }).filter(Boolean); + var action = function action(graph) { + if (_delta[0] === 0 && _delta[1] === 0) return graph; + setupCache(graph); - if (cache.rtree && features) { - cache.rtree.load(features); + if (cache.intersections.length) { + limitDelta(graph); } - if (data.features.length === maxResults) { - // more pages to load - cache.nextPage[tile.id] = nextPage + 1; - loadNextTilePage(which, currZoom, url, tile); - } else { - cache.nextPage[tile.id] = Infinity; // no more pages to load + for (var i = 0; i < cache.nodes.length; i++) { + var node = graph.entity(cache.nodes[i]); + var start = projection(node.loc); + var end = geoVecAdd(start, _delta); + graph = graph.replace(node.move(projection.invert(end))); } - if (which === 'images' || which === 'sequences') { - dispatch$4.call('loadedImages'); - } else if (which === 'map_features') { - dispatch$4.call('loadedSigns'); - } else if (which === 'points') { - dispatch$4.call('loadedMapFeatures'); + if (cache.intersections.length) { + graph = cleanupIntersections(graph); } - })["catch"](function () { - cache.loaded[id] = true; - delete cache.inflight[id]; - }); - } - function loadData(which, url) { - var cache = _mlyCache[which]; - var options = { - method: 'GET', - headers: { - 'Content-Type': 'application/json' - } + return graph; }; - var nextUrl = url + '&client_id=' + clientId; - return fetch(nextUrl, options).then(function (response) { - if (!response.ok) { - throw new Error(response.status + ' ' + response.statusText); - } - return response.json(); - }).then(function (data) { - if (!data || !data.features || !data.features.length) { - throw new Error('No Data'); - } + action.delta = function () { + return _delta; + }; - data.features.forEach(function (feature) { - var d; + return action; + } - if (which === 'image_detections') { - d = { - key: feature.properties.key, - image_key: feature.properties.image_key, - value: feature.properties.value, - shape: feature.properties.shape - }; + function actionMoveMember(relationId, fromIndex, toIndex) { + return function (graph) { + return graph.replace(graph.entity(relationId).moveMember(fromIndex, toIndex)); + }; + } - if (!cache.forImageKey[d.image_key]) { - cache.forImageKey[d.image_key] = []; - } + function actionMoveNode(nodeID, toLoc) { + var action = function action(graph, t) { + if (t === null || !isFinite(t)) t = 1; + t = Math.min(Math.max(+t, 0), 1); + var node = graph.entity(nodeID); + return graph.replace(node.move(geoVecInterp(node.loc, toLoc, t))); + }; - cache.forImageKey[d.image_key].push(d); - } - }); - }); + action.transitionable = true; + return action; } - function maxPageAtZoom(z) { - if (z < 15) return 2; - if (z === 15) return 5; - if (z === 16) return 10; - if (z === 17) return 20; - if (z === 18) return 40; - if (z > 18) return 80; - } // extract links to pages of API results + function actionNoop() { + return function (graph) { + return graph; + }; + } + function actionOrthogonalize(wayID, projection, vertexID, degThresh, ep) { + var epsilon = ep || 1e-4; + var threshold = degThresh || 13; // degrees within right or straight to alter + // We test normalized dot products so we can compare as cos(angle) - function parsePagination(links) { - return links.split(',').map(function (rel) { - var elements = rel.split(';'); + var lowerThreshold = Math.cos((90 - threshold) * Math.PI / 180); + var upperThreshold = Math.cos(threshold * Math.PI / 180); - if (elements.length === 2) { - return [/<(.+)>/.exec(elements[0])[1], /rel="(.+)"/.exec(elements[1])[1]]; - } else { - return ['', '']; + var action = function action(graph, t) { + if (t === null || !isFinite(t)) t = 1; + t = Math.min(Math.max(+t, 0), 1); + var way = graph.entity(wayID); + way = way.removeNode(''); // sanity check - remove any consecutive duplicates + + if (way.tags.nonsquare) { + var tags = Object.assign({}, way.tags); // since we're squaring, remove indication that this is physically unsquare + + delete tags.nonsquare; + way = way.update({ + tags: tags + }); } - }).reduce(function (pagination, val) { - pagination[val[1]] = val[0]; - return pagination; - }, {}); - } // partition viewport into higher zoom tiles + graph = graph.replace(way); + var isClosed = way.isClosed(); + var nodes = graph.childNodes(way).slice(); // shallow copy - function partitionViewport(projection) { - var z = geoScaleToZoom(projection.scale()); - var z2 = Math.ceil(z * 2) / 2 + 2.5; // round to next 0.5 and add 2.5 + if (isClosed) nodes.pop(); - var tiler = utilTiler().zoomExtent([z2, z2]); - return tiler.getTiles(projection).map(function (tile) { - return tile.extent; - }); - } // no more than `limit` results per partition. + if (vertexID !== undefined) { + nodes = nodeSubset(nodes, vertexID, isClosed); + if (nodes.length !== 3) return graph; + } // note: all geometry functions here use the unclosed node/point/coord list - function searchLimited(limit, projection, rtree) { - limit = limit || 5; - return partitionViewport(projection).reduce(function (result, extent) { - var found = rtree.search(extent.bbox()).slice(0, limit).map(function (d) { - return d.data; - }); - return found.length ? result.concat(found) : result; - }, []); - } + var nodeCount = {}; + var points = []; + var corner = { + i: 0, + dotp: 1 + }; + var node, point, loc, score, motions, i, j; - var serviceMapillary = { - init: function init() { - if (!_mlyCache) { - this.reset(); + for (i = 0; i < nodes.length; i++) { + node = nodes[i]; + nodeCount[node.id] = (nodeCount[node.id] || 0) + 1; + points.push({ + id: node.id, + coord: projection(node.loc) + }); } - this.event = utilRebind(this, dispatch$4, 'on'); - }, - reset: function reset() { - if (_mlyCache) { - Object.values(_mlyCache.images.inflight).forEach(abortRequest$3); - Object.values(_mlyCache.image_detections.inflight).forEach(abortRequest$3); - Object.values(_mlyCache.map_features.inflight).forEach(abortRequest$3); - Object.values(_mlyCache.points.inflight).forEach(abortRequest$3); - Object.values(_mlyCache.sequences.inflight).forEach(abortRequest$3); - } + if (points.length === 3) { + // move only one vertex for right triangle + for (i = 0; i < 1000; i++) { + motions = points.map(calcMotion); + points[corner.i].coord = geoVecAdd(points[corner.i].coord, motions[corner.i]); + score = corner.dotp; - _mlyCache = { - images: { - inflight: {}, - loaded: {}, - nextPage: {}, - nextURL: {}, - rtree: new RBush(), - forImageKey: {} - }, - image_detections: { - inflight: {}, - loaded: {}, - nextPage: {}, - nextURL: {}, - forImageKey: {} - }, - map_features: { - inflight: {}, - loaded: {}, - nextPage: {}, - nextURL: {}, - rtree: new RBush() - }, - points: { - inflight: {}, - loaded: {}, - nextPage: {}, - nextURL: {}, - rtree: new RBush() - }, - sequences: { - inflight: {}, - loaded: {}, - nextPage: {}, - nextURL: {}, - rtree: new RBush(), - forImageKey: {}, - lineString: {} + if (score < epsilon) { + break; + } } - }; - _mlySelectedImageKey = null; - _mlyActiveImage = null; - _mlyClicks = []; - }, - images: function images(projection) { - var limit = 5; - return searchLimited(limit, projection, _mlyCache.images.rtree); - }, - signs: function signs(projection) { - var limit = 5; - return searchLimited(limit, projection, _mlyCache.map_features.rtree); - }, - mapFeatures: function mapFeatures(projection) { - var limit = 5; - return searchLimited(limit, projection, _mlyCache.points.rtree); - }, - cachedImage: function cachedImage(imageKey) { - return _mlyCache.images.forImageKey[imageKey]; - }, - sequences: function sequences(projection) { - var viewport = projection.clipExtent(); - var min = [viewport[0][0], viewport[1][1]]; - var max = [viewport[1][0], viewport[0][1]]; - var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); - var sequenceKeys = {}; // all sequences for images in viewport - _mlyCache.images.rtree.search(bbox).forEach(function (d) { - var sequenceKey = _mlyCache.sequences.forImageKey[d.data.key]; + node = graph.entity(nodes[corner.i].id); + loc = projection.invert(points[corner.i].coord); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc, t))); + } else { + var straights = []; + var simplified = []; // Remove points from nearly straight sections.. + // This produces a simplified shape to orthogonalize - if (sequenceKey) { - sequenceKeys[sequenceKey] = true; - } - }); // Return lineStrings for the sequences + for (i = 0; i < points.length; i++) { + point = points[i]; + var dotp = 0; + if (isClosed || i > 0 && i < points.length - 1) { + var a = points[(i - 1 + points.length) % points.length]; + var b = points[(i + 1) % points.length]; + dotp = Math.abs(geoOrthoNormalizedDotProduct(a.coord, b.coord, point.coord)); + } - return Object.keys(sequenceKeys).map(function (sequenceKey) { - return _mlyCache.sequences.lineString[sequenceKey]; - }); - }, - signsSupported: function signsSupported() { - return true; - }, - loadImages: function loadImages(projection) { - loadTiles('images', apibase + 'images?sort_by=key&', projection); - loadTiles('sequences', apibase + 'sequences?sort_by=key&', projection); - }, - loadSigns: function loadSigns(projection) { - loadTiles('map_features', apibase + 'map_features?layers=trafficsigns&min_nbr_image_detections=2&sort_by=key&', projection); - }, - loadMapFeatures: function loadMapFeatures(projection) { - loadTiles('points', apibase + 'map_features?layers=points&min_nbr_image_detections=2&sort_by=key&values=' + mapFeatureConfig.values + '&', projection); - }, - ensureViewerLoaded: function ensureViewerLoaded(context) { - if (_loadViewerPromise) return _loadViewerPromise; // add mly-wrapper + if (dotp > upperThreshold) { + straights.push(point); + } else { + simplified.push(point); + } + } // Orthogonalize the simplified shape - var wrap = context.container().select('.photoviewer').selectAll('.mly-wrapper').data([0]); - wrap.enter().append('div').attr('id', 'ideditor-mly').attr('class', 'photo-wrapper mly-wrapper').classed('hide', true); - var that = this; - _loadViewerPromise = new Promise(function (resolve, reject) { - var loadedCount = 0; - function loaded() { - loadedCount += 1; // wait until both files are loaded + var bestPoints = clonePoints(simplified); + var originalPoints = clonePoints(simplified); + score = Infinity; - if (loadedCount === 2) resolve(); - } + for (i = 0; i < 1000; i++) { + motions = simplified.map(calcMotion); - var head = select('head'); // load mapillary-viewercss + for (j = 0; j < motions.length; j++) { + simplified[j].coord = geoVecAdd(simplified[j].coord, motions[j]); + } - head.selectAll('#ideditor-mapillary-viewercss').data([0]).enter().append('link').attr('id', 'ideditor-mapillary-viewercss').attr('rel', 'stylesheet').attr('crossorigin', 'anonymous').attr('href', context.asset(viewercss)).on('load.serviceMapillary', loaded).on('error.serviceMapillary', function () { - reject(); - }); // load mapillary-viewerjs + var newScore = geoOrthoCalcScore(simplified, isClosed, epsilon, threshold); - head.selectAll('#ideditor-mapillary-viewerjs').data([0]).enter().append('script').attr('id', 'ideditor-mapillary-viewerjs').attr('crossorigin', 'anonymous').attr('src', context.asset(viewerjs)).on('load.serviceMapillary', loaded).on('error.serviceMapillary', function () { - reject(); + if (newScore < score) { + bestPoints = clonePoints(simplified); + score = newScore; + } + + if (score < epsilon) { + break; + } + } + + var bestCoords = bestPoints.map(function (p) { + return p.coord; }); - })["catch"](function () { - _loadViewerPromise = null; - }).then(function () { - that.initViewer(context); - }); - return _loadViewerPromise; - }, - loadSignResources: function loadSignResources(context) { - context.ui().svgDefs.addSprites(['mapillary-sprite'], false - /* don't override colors */ - ); - return this; - }, - loadObjectResources: function loadObjectResources(context) { - context.ui().svgDefs.addSprites(['mapillary-object-sprite'], false - /* don't override colors */ - ); - return this; - }, - resetTags: function resetTags() { - if (_mlyViewer && !_mlyFallback) { - _mlyViewer.getComponent('tag').removeAll(); // remove previous detections + if (isClosed) bestCoords.push(bestCoords[0]); // move the nodes that should move - } - }, - showFeatureDetections: function showFeatureDetections(value) { - _mlyShowFeatureDetections = value; + for (i = 0; i < bestPoints.length; i++) { + point = bestPoints[i]; - if (!_mlyShowFeatureDetections && !_mlyShowSignDetections) { - this.resetTags(); - } - }, - showSignDetections: function showSignDetections(value) { - _mlyShowSignDetections = value; + if (!geoVecEqual(originalPoints[i].coord, point.coord)) { + node = graph.entity(point.id); + loc = projection.invert(point.coord); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc, t))); + } + } // move the nodes along straight segments - if (!_mlyShowFeatureDetections && !_mlyShowSignDetections) { - this.resetTags(); - } - }, - filterViewer: function filterViewer(context) { - var showsPano = context.photos().showsPanoramic(); - var showsFlat = context.photos().showsFlat(); - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); - var filter = ['all']; - if (!showsPano) filter.push(['==', 'pano', false]); - if (!showsFlat && showsPano) filter.push(['==', 'pano', true]); - if (usernames && usernames.length) filter.push(['==', 'username', usernames[0]]); - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - filter.push(['>=', 'capturedAt', fromTimestamp]); + for (i = 0; i < straights.length; i++) { + point = straights[i]; + if (nodeCount[point.id] > 1) continue; // skip self-intersections + + node = graph.entity(point.id); + + if (t === 1 && graph.parentWays(node).length === 1 && graph.parentRelations(node).length === 0 && !node.hasInterestingTags()) { + // remove uninteresting points.. + graph = actionDeleteNode(node.id)(graph); + } else { + // move interesting points to the nearest edge.. + var choice = geoVecProject(point.coord, bestCoords); + + if (choice) { + loc = projection.invert(choice.target); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc, t))); + } + } + } } - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - filter.push(['>=', 'capturedAt', toTimestamp]); - } + return graph; - if (_mlyViewer) { - _mlyViewer.setFilter(filter); + function clonePoints(array) { + return array.map(function (p) { + return { + id: p.id, + coord: [p.coord[0], p.coord[1]] + }; + }); } - _mlyViewerFilter = filter; - return filter; - }, - showViewer: function showViewer(context) { - var wrap = context.container().select('.photoviewer').classed('hide', false); - var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size(); + function calcMotion(point, i, array) { + // don't try to move the endpoints of a non-closed way. + if (!isClosed && (i === 0 || i === array.length - 1)) return [0, 0]; // don't try to move a node that appears more than once (self intersection) - if (isHidden && _mlyViewer) { - wrap.selectAll('.photo-wrapper:not(.mly-wrapper)').classed('hide', true); - wrap.selectAll('.photo-wrapper.mly-wrapper').classed('hide', false); + if (nodeCount[array[i].id] > 1) return [0, 0]; + var a = array[(i - 1 + array.length) % array.length].coord; + var origin = point.coord; + var b = array[(i + 1) % array.length].coord; + var p = geoVecSubtract(a, origin); + var q = geoVecSubtract(b, origin); + var scale = 2 * Math.min(geoVecLength(p), geoVecLength(q)); + p = geoVecNormalize(p); + q = geoVecNormalize(q); + var dotp = p[0] * q[0] + p[1] * q[1]; + var val = Math.abs(dotp); - _mlyViewer.resize(); + if (val < lowerThreshold) { + // nearly orthogonal + corner.i = i; + corner.dotp = val; + var vec = geoVecNormalize(geoVecAdd(p, q)); + return geoVecScale(vec, 0.1 * dotp * scale); + } + + return [0, 0]; // do nothing } + }; // if we are only orthogonalizing one vertex, + // get that vertex and the previous and next - return this; - }, - hideViewer: function hideViewer(context) { - _mlyActiveImage = null; - _mlySelectedImageKey = null; - if (!_mlyFallback && _mlyViewer) { - _mlyViewer.getComponent('sequence').stop(); + function nodeSubset(nodes, vertexID, isClosed) { + var first = isClosed ? 0 : 1; + var last = isClosed ? nodes.length : nodes.length - 1; + + for (var i = first; i < last; i++) { + if (nodes[i].id === vertexID) { + return [nodes[(i - 1 + nodes.length) % nodes.length], nodes[i], nodes[(i + 1) % nodes.length]]; + } } - var viewer = context.container().select('.photoviewer'); - if (!viewer.empty()) viewer.datum(null); - viewer.classed('hide', true).selectAll('.photo-wrapper').classed('hide', true); - this.updateUrlImage(null); - dispatch$4.call('nodeChanged'); - return this.setStyles(context, null, true); - }, - parsePagination: parsePagination, - updateUrlImage: function updateUrlImage(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); + return []; + } - if (imageKey) { - hash.photo = 'mapillary/' + imageKey; - } else { - delete hash.photo; - } + action.disabled = function (graph) { + var way = graph.entity(wayID); + way = way.removeNode(''); // sanity check - remove any consecutive duplicates - window.location.replace('#' + utilQsString(hash, true)); + graph = graph.replace(way); + var isClosed = way.isClosed(); + var nodes = graph.childNodes(way).slice(); // shallow copy + + if (isClosed) nodes.pop(); + var allowStraightAngles = false; + + if (vertexID !== undefined) { + allowStraightAngles = true; + nodes = nodeSubset(nodes, vertexID, isClosed); + if (nodes.length !== 3) return 'end_vertex'; } - }, - highlightDetection: function highlightDetection(detection) { - if (detection) { - _mlyHighlightedDetection = detection.detection_key; + + var coords = nodes.map(function (n) { + return projection(n.loc); + }); + var score = geoOrthoCanOrthogonalize(coords, isClosed, epsilon, threshold, allowStraightAngles); + + if (score === null) { + return 'not_squarish'; + } else if (score === 0) { + return 'square_enough'; + } else { + return false; } + }; - return this; - }, - initViewer: function initViewer(context) { - var that = this; - if (!window.Mapillary) return; - var opts = { - baseImageSize: 320, - component: { - cover: false, - keyboard: false, - tag: true - } - }; // Disable components requiring WebGL support + action.transitionable = true; + return action; + } - if (!Mapillary.isSupported() && Mapillary.isFallbackSupported()) { - _mlyFallback = true; - opts.component = { - cover: false, - direction: false, - imagePlane: false, - keyboard: false, - mouse: false, - sequence: false, - tag: false, - image: true, - // fallback - navigation: true // fallback + // + // `turn` must be an `osmTurn` object + // see osm/intersection.js, pathToTurn() + // + // This specifies a restriction of type `restriction` when traveling from + // `turn.from.way` toward `turn.to.way` via `turn.via.node` OR `turn.via.ways`. + // (The action does not check that these entities form a valid intersection.) + // + // From, to, and via ways should be split before calling this action. + // (old versions of the code would split the ways here, but we no longer do it) + // + // For testing convenience, accepts a restrictionID to assign to the new + // relation. Normally, this will be undefined and the relation will + // automatically be assigned a new ID. + // - }; + function actionRestrictTurn(turn, restrictionType, restrictionID) { + return function (graph) { + var fromWay = graph.entity(turn.from.way); + var toWay = graph.entity(turn.to.way); + var viaNode = turn.via.node && graph.entity(turn.via.node); + var viaWays = turn.via.ways && turn.via.ways.map(function (id) { + return graph.entity(id); + }); + var members = []; + members.push({ + id: fromWay.id, + type: 'way', + role: 'from' + }); + + if (viaNode) { + members.push({ + id: viaNode.id, + type: 'node', + role: 'via' + }); + } else if (viaWays) { + viaWays.forEach(function (viaWay) { + members.push({ + id: viaWay.id, + type: 'way', + role: 'via' + }); + }); } - _mlyViewer = new Mapillary.Viewer('ideditor-mly', clientId, null, opts); + members.push({ + id: toWay.id, + type: 'way', + role: 'to' + }); + return graph.replace(osmRelation({ + id: restrictionID, + tags: { + type: 'restriction', + restriction: restrictionType + }, + members: members + })); + }; + } - _mlyViewer.on('nodechanged', nodeChanged); + function actionRevert(id) { + var action = function action(graph) { + var entity = graph.hasEntity(id), + base = graph.base().entities[id]; - _mlyViewer.on('bearingchanged', bearingChanged); + if (entity && !base) { + // entity will be removed.. + if (entity.type === 'node') { + graph.parentWays(entity).forEach(function (parent) { + parent = parent.removeNode(id); + graph = graph.replace(parent); - if (_mlyViewerFilter) { - _mlyViewer.setFilter(_mlyViewerFilter); - } // Register viewer resize handler + if (parent.isDegenerate()) { + graph = actionDeleteWay(parent.id)(graph); + } + }); + } + graph.parentRelations(entity).forEach(function (parent) { + parent = parent.removeMembersWithID(id); + graph = graph.replace(parent); - context.ui().photoviewer.on('resize.mapillary', function () { - if (_mlyViewer) _mlyViewer.resize(); - }); // nodeChanged: called after the viewer has changed images and is ready. - // - // There is some logic here to batch up clicks into a _mlyClicks array - // because the user might click on a lot of markers quickly and nodechanged - // may be called out of order asynchronously. - // - // Clicks are added to the array in `selectedImage` and removed here. - // + if (parent.isDegenerate()) { + graph = actionDeleteRelation(parent.id)(graph); + } + }); + } - function nodeChanged(node) { - that.resetTags(); - var clicks = _mlyClicks; - var index = clicks.indexOf(node.key); - var selectedKey = _mlySelectedImageKey; - that.setActiveImage(node); + return graph.revert(id); + }; - if (index > -1) { - // `nodechanged` initiated from clicking on a marker.. - clicks.splice(index, 1); // remove the click - // If `node.key` matches the current _mlySelectedImageKey, call `selectImage()` - // one more time to update the detections and attribution.. + return action; + } - if (node.key === selectedKey) { - that.selectImage(context, _mlySelectedImageKey, true); - } - } else { - // `nodechanged` initiated from the Mapillary viewer controls.. - var loc = node.computedLatLon ? [node.computedLatLon.lon, node.computedLatLon.lat] : [node.latLon.lon, node.latLon.lat]; - context.map().centerEase(loc); - that.selectImage(context, node.key, true); - } + function actionRotate(rotateIds, pivot, angle, projection) { + var action = function action(graph) { + return graph.update(function (graph) { + utilGetAllNodes(rotateIds, graph).forEach(function (node) { + var point = geoRotate([projection(node.loc)], angle, pivot)[0]; + graph = graph.replace(node.move(projection.invert(point))); + }); + }); + }; - dispatch$4.call('nodeChanged'); - } + return action; + } - function bearingChanged(e) { - dispatch$4.call('bearingChanged', undefined, e); - } - }, - // Pass in the image key string as `imageKey`. - // This allows images to be selected from places that dont have access - // to the full image datum (like the street signs layer or the js viewer) - selectImage: function selectImage(context, imageKey, fromViewer) { - _mlySelectedImageKey = imageKey; - this.updateUrlImage(imageKey); - var d = _mlyCache.images.forImageKey[imageKey]; - var viewer = context.container().select('.photoviewer'); - if (!viewer.empty()) viewer.datum(d); - imageKey = d && d.key || imageKey; + function actionScale(ids, pivotLoc, scaleFactor, projection) { + return function (graph) { + return graph.update(function (graph) { + var point, radial; + utilGetAllNodes(ids, graph).forEach(function (node) { + point = projection(node.loc); + radial = [point[0] - pivotLoc[0], point[1] - pivotLoc[1]]; + point = [pivotLoc[0] + scaleFactor * radial[0], pivotLoc[1] + scaleFactor * radial[1]]; + graph = graph.replace(node.move(projection.invert(point))); + }); + }); + }; + } - if (!fromViewer && imageKey) { - _mlyClicks.push(imageKey); - } + /* Align nodes along their common axis */ - this.setStyles(context, null, true); + function actionStraightenNodes(nodeIDs, projection) { + function positionAlongWay(a, o, b) { + return geoVecDot(a, b, o) / geoVecDot(b, b, o); + } // returns the endpoints of the long axis of symmetry of the `points` bounding rect - if (_mlyShowFeatureDetections) { - this.updateDetections(imageKey, apibase + 'image_detections?layers=points&values=' + mapFeatureConfig.values + '&image_keys=' + imageKey); - } - if (_mlyShowSignDetections) { - this.updateDetections(imageKey, apibase + 'image_detections?layers=trafficsigns&image_keys=' + imageKey); - } + function getEndpoints(points) { + var ssr = geoGetSmallestSurroundingRectangle(points); // Choose line pq = axis of symmetry. + // The shape's surrounding rectangle has 2 axes of symmetry. + // Snap points to the long axis - if (_mlyViewer && imageKey) { - _mlyViewer.moveToKey(imageKey)["catch"](function (e) { - console.error('mly3', e); - }); // eslint-disable-line no-console + var p1 = [(ssr.poly[0][0] + ssr.poly[1][0]) / 2, (ssr.poly[0][1] + ssr.poly[1][1]) / 2]; + var q1 = [(ssr.poly[2][0] + ssr.poly[3][0]) / 2, (ssr.poly[2][1] + ssr.poly[3][1]) / 2]; + var p2 = [(ssr.poly[3][0] + ssr.poly[4][0]) / 2, (ssr.poly[3][1] + ssr.poly[4][1]) / 2]; + var q2 = [(ssr.poly[1][0] + ssr.poly[2][0]) / 2, (ssr.poly[1][1] + ssr.poly[2][1]) / 2]; + var isLong = geoVecLength(p1, q1) > geoVecLength(p2, q2); + if (isLong) { + return [p1, q1]; } - return this; - }, - getActiveImage: function getActiveImage() { - return _mlyActiveImage; - }, - getSelectedImageKey: function getSelectedImageKey() { - return _mlySelectedImageKey; - }, - getSequenceKeyForImageKey: function getSequenceKeyForImageKey(imageKey) { - return _mlyCache.sequences.forImageKey[imageKey]; - }, - setActiveImage: function setActiveImage(node) { - if (node) { - _mlyActiveImage = { - ca: node.originalCA, - key: node.key, - loc: [node.originalLatLon.lon, node.originalLatLon.lat], - pano: node.pano - }; - } else { - _mlyActiveImage = null; - } - }, - // Updates the currently highlighted sequence and selected bubble. - // Reset is only necessary when interacting with the viewport because - // this implicitly changes the currently selected bubble/sequence - setStyles: function setStyles(context, hovered, reset) { - if (reset) { - // reset all layers - context.container().selectAll('.viewfield-group').classed('highlighted', false).classed('hovered', false); - context.container().selectAll('.sequence').classed('highlighted', false).classed('currentView', false); + return [p2, q2]; + } + + var action = function action(graph, t) { + if (t === null || !isFinite(t)) t = 1; + t = Math.min(Math.max(+t, 0), 1); + var nodes = nodeIDs.map(function (id) { + return graph.entity(id); + }); + var points = nodes.map(function (n) { + return projection(n.loc); + }); + var endpoints = getEndpoints(points); + var startPoint = endpoints[0]; + var endPoint = endpoints[1]; // Move points onto the line connecting the endpoints + + for (var i = 0; i < points.length; i++) { + var node = nodes[i]; + var point = points[i]; + var u = positionAlongWay(point, startPoint, endPoint); + var point2 = geoVecInterp(startPoint, endPoint, u); + var loc2 = projection.invert(point2); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc2, t))); } - var hoveredImageKey = hovered && hovered.key; - var hoveredSequenceKey = hoveredImageKey && this.getSequenceKeyForImageKey(hoveredImageKey); - var hoveredLineString = hoveredSequenceKey && _mlyCache.sequences.lineString[hoveredSequenceKey]; - var hoveredImageKeys = hoveredLineString && hoveredLineString.properties.coordinateProperties.image_keys || []; - var selectedImageKey = _mlySelectedImageKey; - var selectedSequenceKey = selectedImageKey && this.getSequenceKeyForImageKey(selectedImageKey); - var selectedLineString = selectedSequenceKey && _mlyCache.sequences.lineString[selectedSequenceKey]; - var selectedImageKeys = selectedLineString && selectedLineString.properties.coordinateProperties.image_keys || []; // highlight sibling viewfields on either the selected or the hovered sequences + return graph; + }; - var highlightedImageKeys = utilArrayUnion(hoveredImageKeys, selectedImageKeys); - context.container().selectAll('.layer-mapillary .viewfield-group').classed('highlighted', function (d) { - return highlightedImageKeys.indexOf(d.key) !== -1; - }).classed('hovered', function (d) { - return d.key === hoveredImageKey; + action.disabled = function (graph) { + var nodes = nodeIDs.map(function (id) { + return graph.entity(id); }); - context.container().selectAll('.layer-mapillary .sequence').classed('highlighted', function (d) { - return d.properties.key === hoveredSequenceKey; - }).classed('currentView', function (d) { - return d.properties.key === selectedSequenceKey; - }); // update viewfields if needed - - context.container().selectAll('.viewfield-group .viewfield').attr('d', viewfieldPath); + var points = nodes.map(function (n) { + return projection(n.loc); + }); + var endpoints = getEndpoints(points); + var startPoint = endpoints[0]; + var endPoint = endpoints[1]; + var maxDistance = 0; - function viewfieldPath() { - var d = this.parentNode.__data__; + for (var i = 0; i < points.length; i++) { + var point = points[i]; + var u = positionAlongWay(point, startPoint, endPoint); + var p = geoVecInterp(startPoint, endPoint, u); + var dist = geoVecLength(p, point); - if (d.pano && d.key !== selectedImageKey) { - return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; - } else { - return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'; + if (!isNaN(dist) && dist > maxDistance) { + maxDistance = dist; } } - return this; - }, - updateDetections: function updateDetections(imageKey, url) { - if (!_mlyViewer || _mlyFallback) return; - if (!imageKey) return; - - if (!_mlyCache.image_detections.forImageKey[imageKey]) { - loadData('image_detections', url).then(function () { - showDetections(_mlyCache.image_detections.forImageKey[imageKey] || []); - }); - } else { - showDetections(_mlyCache.image_detections.forImageKey[imageKey]); + if (maxDistance < 0.0001) { + return 'straight_enough'; } + }; - function showDetections(detections) { - detections.forEach(function (data) { - var tag = makeTag(data); + action.transitionable = true; + return action; + } - if (tag) { - var tagComponent = _mlyViewer.getComponent('tag'); + /* + * Based on https://github.com/openstreetmap/potlatch2/net/systemeD/potlatch2/tools/Straighten.as + */ - tagComponent.add([tag]); - } - }); - } + function actionStraightenWay(selectedIDs, projection) { + function positionAlongWay(a, o, b) { + return geoVecDot(a, b, o) / geoVecDot(b, b, o); + } // Return all selected ways as a continuous, ordered array of nodes - function makeTag(data) { - var valueParts = data.value.split('--'); - if (!valueParts.length) return; - var tag; - var text; - var color = 0xffffff; - if (_mlyHighlightedDetection === data.key) { - color = 0xffff00; - text = valueParts[1]; + function allNodes(graph) { + var nodes = []; + var startNodes = []; + var endNodes = []; + var remainingWays = []; + var selectedWays = selectedIDs.filter(function (w) { + return graph.entity(w).type === 'way'; + }); + var selectedNodes = selectedIDs.filter(function (n) { + return graph.entity(n).type === 'node'; + }); - if (text === 'flat' || text === 'discrete' || text === 'sign') { - text = valueParts[2]; - } + for (var i = 0; i < selectedWays.length; i++) { + var way = graph.entity(selectedWays[i]); + nodes = way.nodes.slice(0); + remainingWays.push(nodes); + startNodes.push(nodes[0]); + endNodes.push(nodes[nodes.length - 1]); + } // Remove duplicate end/startNodes (duplicate nodes cannot be at the line end, + // and need to be removed so currNode difference calculation below works) + // i.e. ["n-1", "n-1", "n-2"] => ["n-2"] - text = text.replace(/-/g, ' '); - text = text.charAt(0).toUpperCase() + text.slice(1); - _mlyHighlightedDetection = null; - } - if (data.shape.type === 'Polygon') { - var polygonGeometry = new Mapillary.TagComponent.PolygonGeometry(data.shape.coordinates[0]); - tag = new Mapillary.TagComponent.OutlineTag(data.key, polygonGeometry, { - text: text, - textColor: color, - lineColor: color, - lineWidth: 2, - fillColor: color, - fillOpacity: 0.3 - }); - } else if (data.shape.type === 'Point') { - var pointGeometry = new Mapillary.TagComponent.PointGeometry(data.shape.coordinates[0]); - tag = new Mapillary.TagComponent.SpotTag(data.key, pointGeometry, { - text: text, - color: color, - textColor: color - }); - } + startNodes = startNodes.filter(function (n) { + return startNodes.indexOf(n) === startNodes.lastIndexOf(n); + }); + endNodes = endNodes.filter(function (n) { + return endNodes.indexOf(n) === endNodes.lastIndexOf(n); + }); // Choose the initial endpoint to start from - return tag; - } - }, - cache: function cache() { - return _mlyCache; - } - }; + var currNode = utilArrayDifference(startNodes, endNodes).concat(utilArrayDifference(endNodes, startNodes))[0]; + var nextWay = []; + nodes = []; // Create nested function outside of loop to avoid "function in loop" lint error - function validationIssue(attrs) { - this.type = attrs.type; // required - name of rule that created the issue (e.g. 'missing_tag') + var getNextWay = function getNextWay(currNode, remainingWays) { + return remainingWays.filter(function (way) { + return way[0] === currNode || way[way.length - 1] === currNode; + })[0]; + }; // Add nodes to end of nodes array, until all ways are added - this.subtype = attrs.subtype; // optional - category of the issue within the type (e.g. 'relation_type' under 'missing_tag') - this.severity = attrs.severity; // required - 'warning' or 'error' + while (remainingWays.length) { + nextWay = getNextWay(currNode, remainingWays); + remainingWays = utilArrayDifference(remainingWays, [nextWay]); - this.message = attrs.message; // required - function returning localized string + if (nextWay[0] !== currNode) { + nextWay.reverse(); + } - this.reference = attrs.reference; // optional - function(selection) to render reference information + nodes = nodes.concat(nextWay); + currNode = nodes[nodes.length - 1]; + } // If user selected 2 nodes to straighten between, then slice nodes array to those nodes - this.entityIds = attrs.entityIds; // optional - array of IDs of entities involved in the issue - this.loc = attrs.loc; // optional - [lon, lat] to zoom in on to see the issue + if (selectedNodes.length === 2) { + var startNodeIdx = nodes.indexOf(selectedNodes[0]); + var endNodeIdx = nodes.indexOf(selectedNodes[1]); + var sortedStartEnd = [startNodeIdx, endNodeIdx]; + sortedStartEnd.sort(function (a, b) { + return a - b; + }); + nodes = nodes.slice(sortedStartEnd[0], sortedStartEnd[1] + 1); + } - this.data = attrs.data; // optional - object containing extra data for the fixes + return nodes.map(function (n) { + return graph.entity(n); + }); + } + + function shouldKeepNode(node, graph) { + return graph.parentWays(node).length > 1 || graph.parentRelations(node).length || node.hasInterestingTags(); + } + + var action = function action(graph, t) { + if (t === null || !isFinite(t)) t = 1; + t = Math.min(Math.max(+t, 0), 1); + var nodes = allNodes(graph); + var points = nodes.map(function (n) { + return projection(n.loc); + }); + var startPoint = points[0]; + var endPoint = points[points.length - 1]; + var toDelete = []; + var i; - this.dynamicFixes = attrs.dynamicFixes; // optional - function(context) returning fixes + for (i = 1; i < points.length - 1; i++) { + var node = nodes[i]; + var point = points[i]; - this.hash = attrs.hash; // optional - string to further differentiate the issue + if (t < 1 || shouldKeepNode(node, graph)) { + var u = positionAlongWay(point, startPoint, endPoint); + var p = geoVecInterp(startPoint, endPoint, u); + var loc2 = projection.invert(p); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc2, t))); + } else { + // safe to delete + if (toDelete.indexOf(node) === -1) { + toDelete.push(node); + } + } + } - this.id = generateID.apply(this); // generated - see below + for (i = 0; i < toDelete.length; i++) { + graph = actionDeleteNode(toDelete[i].id)(graph); + } - this.autoFix = null; // generated - if autofix exists, will be set below - // A unique, deterministic string hash. - // Issues with identical id values are considered identical. + return graph; + }; - function generateID() { - var parts = [this.type]; + action.disabled = function (graph) { + // check way isn't too bendy + var nodes = allNodes(graph); + var points = nodes.map(function (n) { + return projection(n.loc); + }); + var startPoint = points[0]; + var endPoint = points[points.length - 1]; + var threshold = 0.2 * geoVecLength(startPoint, endPoint); + var i; - if (this.hash) { - // subclasses can pass in their own differentiator - parts.push(this.hash); + if (threshold === 0) { + return 'too_bendy'; } - if (this.subtype) { - parts.push(this.subtype); - } // include the entities this issue is for - // (sort them so the id is deterministic) + var maxDistance = 0; + for (i = 1; i < points.length - 1; i++) { + var point = points[i]; + var u = positionAlongWay(point, startPoint, endPoint); + var p = geoVecInterp(startPoint, endPoint, u); + var dist = geoVecLength(p, point); // to bendy if point is off by 20% of total start/end distance in projected space - if (this.entityIds) { - var entityKeys = this.entityIds.slice().sort(); - parts.push.apply(parts, entityKeys); + if (isNaN(dist) || dist > threshold) { + return 'too_bendy'; + } else if (dist > maxDistance) { + maxDistance = dist; + } } - return parts.join(':'); - } + var keepingAllNodes = nodes.every(function (node, i) { + return i === 0 || i === nodes.length - 1 || shouldKeepNode(node, graph); + }); - this.extent = function (resolver) { - if (this.loc) { - return geoExtent(this.loc); + if (maxDistance < 0.0001 && // Allow straightening even if already straight in order to remove extraneous nodes + keepingAllNodes) { + return 'straight_enough'; } + }; - if (this.entityIds && this.entityIds.length) { - return this.entityIds.reduce(function (extent, entityId) { - return extent.extend(resolver.entity(entityId).extent(resolver)); - }, geoExtent()); - } + action.transitionable = true; + return action; + } - return null; + // + // `turn` must be an `osmTurn` object with a `restrictionID` property. + // see osm/intersection.js, pathToTurn() + // + + function actionUnrestrictTurn(turn) { + return function (graph) { + return actionDeleteRelation(turn.restrictionID)(graph); }; + } - this.fixes = function (context) { - var fixes = this.dynamicFixes ? this.dynamicFixes(context) : []; - var issue = this; + /* Reflect the given area around its axis of symmetry */ - if (issue.severity === 'warning') { - // allow ignoring any issue that's not an error - fixes.push(new validationIssueFix({ - title: _t.html('issues.fix.ignore_issue.title'), - icon: 'iD-icon-close', - onClick: function onClick() { - context.validator().ignoreIssue(this.issue.id); - } - })); - } + function actionReflect(reflectIds, projection) { + var _useLongAxis = true; - fixes.forEach(function (fix) { - // the id doesn't matter as long as it's unique to this issue/fix - fix.id = fix.title; // add a reference to the issue for use in actions + var action = function action(graph, t) { + if (t === null || !isFinite(t)) t = 1; + t = Math.min(Math.max(+t, 0), 1); + var nodes = utilGetAllNodes(reflectIds, graph); + var points = nodes.map(function (n) { + return projection(n.loc); + }); + var ssr = geoGetSmallestSurroundingRectangle(points); // Choose line pq = axis of symmetry. + // The shape's surrounding rectangle has 2 axes of symmetry. + // Reflect across the longer axis by default. - fix.issue = issue; + var p1 = [(ssr.poly[0][0] + ssr.poly[1][0]) / 2, (ssr.poly[0][1] + ssr.poly[1][1]) / 2]; + var q1 = [(ssr.poly[2][0] + ssr.poly[3][0]) / 2, (ssr.poly[2][1] + ssr.poly[3][1]) / 2]; + var p2 = [(ssr.poly[3][0] + ssr.poly[4][0]) / 2, (ssr.poly[3][1] + ssr.poly[4][1]) / 2]; + var q2 = [(ssr.poly[1][0] + ssr.poly[2][0]) / 2, (ssr.poly[1][1] + ssr.poly[2][1]) / 2]; + var p, q; + var isLong = geoVecLength(p1, q1) > geoVecLength(p2, q2); - if (fix.autoArgs) { - issue.autoFix = fix; - } - }); - return fixes; - }; - } - function validationIssueFix(attrs) { - this.title = attrs.title; // Required + if (_useLongAxis && isLong || !_useLongAxis && !isLong) { + p = p1; + q = q1; + } else { + p = p2; + q = q2; + } // reflect c across pq + // http://math.stackexchange.com/questions/65503/point-reflection-over-a-line - this.onClick = attrs.onClick; // Optional - the function to run to apply the fix - this.disabledReason = attrs.disabledReason; // Optional - a string explaining why the fix is unavailable, if any + var dx = q[0] - p[0]; + var dy = q[1] - p[1]; + var a = (dx * dx - dy * dy) / (dx * dx + dy * dy); + var b = 2 * dx * dy / (dx * dx + dy * dy); - this.icon = attrs.icon; // Optional - shows 'iD-icon-wrench' if not set + for (var i = 0; i < nodes.length; i++) { + var node = nodes[i]; + var c = projection(node.loc); + var c2 = [a * (c[0] - p[0]) + b * (c[1] - p[1]) + p[0], b * (c[0] - p[0]) - a * (c[1] - p[1]) + p[1]]; + var loc2 = projection.invert(c2); + node = node.move(geoVecInterp(node.loc, loc2, t)); + graph = graph.replace(node); + } - this.entityIds = attrs.entityIds || []; // Optional - used for hover-higlighting. + return graph; + }; - this.autoArgs = attrs.autoArgs; // Optional - pass [actions, annotation] arglist if this fix can automatically run + action.useLongAxis = function (val) { + if (!arguments.length) return _useLongAxis; + _useLongAxis = val; + return action; + }; - this.issue = null; // Generated link - added by validationIssue + action.transitionable = true; + return action; } - var buildRuleChecks = function buildRuleChecks() { - return { - equals: function equals(_equals) { - return function (tags) { - return Object.keys(_equals).every(function (k) { - return _equals[k] === tags[k]; - }); - }; - }, - notEquals: function notEquals(_notEquals) { - return function (tags) { - return Object.keys(_notEquals).some(function (k) { - return _notEquals[k] !== tags[k]; - }); - }; - }, - absence: function absence(_absence) { - return function (tags) { - return Object.keys(tags).indexOf(_absence) === -1; - }; - }, - presence: function presence(_presence) { - return function (tags) { - return Object.keys(tags).indexOf(_presence) > -1; - }; - }, - greaterThan: function greaterThan(_greaterThan) { - var key = Object.keys(_greaterThan)[0]; - var value = _greaterThan[key]; - return function (tags) { - return tags[key] > value; - }; - }, - greaterThanEqual: function greaterThanEqual(_greaterThanEqual) { - var key = Object.keys(_greaterThanEqual)[0]; - var value = _greaterThanEqual[key]; - return function (tags) { - return tags[key] >= value; - }; - }, - lessThan: function lessThan(_lessThan) { - var key = Object.keys(_lessThan)[0]; - var value = _lessThan[key]; - return function (tags) { - return tags[key] < value; - }; - }, - lessThanEqual: function lessThanEqual(_lessThanEqual) { - var key = Object.keys(_lessThanEqual)[0]; - var value = _lessThanEqual[key]; - return function (tags) { - return tags[key] <= value; - }; - }, - positiveRegex: function positiveRegex(_positiveRegex) { - var tagKey = Object.keys(_positiveRegex)[0]; + function actionUpgradeTags(entityId, oldTags, replaceTags) { + return function (graph) { + var entity = graph.entity(entityId); + var tags = Object.assign({}, entity.tags); // shallow copy - var expression = _positiveRegex[tagKey].join('|'); + var transferValue; + var semiIndex; - var regex = new RegExp(expression); - return function (tags) { - return regex.test(tags[tagKey]); - }; - }, - negativeRegex: function negativeRegex(_negativeRegex) { - var tagKey = Object.keys(_negativeRegex)[0]; + for (var oldTagKey in oldTags) { + if (!(oldTagKey in tags)) continue; // wildcard match - var expression = _negativeRegex[tagKey].join('|'); + if (oldTags[oldTagKey] === '*') { + // note the value since we might need to transfer it + transferValue = tags[oldTagKey]; + delete tags[oldTagKey]; // exact match + } else if (oldTags[oldTagKey] === tags[oldTagKey]) { + delete tags[oldTagKey]; // match is within semicolon-delimited values + } else { + var vals = tags[oldTagKey].split(';').filter(Boolean); + var oldIndex = vals.indexOf(oldTags[oldTagKey]); - var regex = new RegExp(expression); - return function (tags) { - return !regex.test(tags[tagKey]); - }; - } - }; - }; + if (vals.length === 1 || oldIndex === -1) { + delete tags[oldTagKey]; + } else { + if (replaceTags && replaceTags[oldTagKey]) { + // replacing a value within a semicolon-delimited value, note the index + semiIndex = oldIndex; + } - var buildLineKeys = function buildLineKeys() { - return { - highway: { - rest_area: true, - services: true - }, - railway: { - roundhouse: true, - station: true, - traverser: true, - turntable: true, - wash: true + vals.splice(oldIndex, 1); + tags[oldTagKey] = vals.join(';'); + } + } } - }; - }; - var serviceMapRules = { - init: function init() { - this._ruleChecks = buildRuleChecks(); - this._validationRules = []; - this._areaKeys = osmAreaKeys; - this._lineKeys = buildLineKeys(); - }, - // list of rules only relevant to tag checks... - filterRuleChecks: function filterRuleChecks(selector) { - var _ruleChecks = this._ruleChecks; - return Object.keys(selector).reduce(function (rules, key) { - if (['geometry', 'error', 'warning'].indexOf(key) === -1) { - rules.push(_ruleChecks[key](selector[key])); + if (replaceTags) { + for (var replaceKey in replaceTags) { + var replaceValue = replaceTags[replaceKey]; + + if (replaceValue === '*') { + if (tags[replaceKey] && tags[replaceKey] !== 'no') { + // allow any pre-existing value except `no` (troll tag) + continue; + } else { + // otherwise assume `yes` is okay + tags[replaceKey] = 'yes'; + } + } else if (replaceValue === '$1') { + tags[replaceKey] = transferValue; + } else { + if (tags[replaceKey] && oldTags[replaceKey] && semiIndex !== undefined) { + // don't override preexisting values + var existingVals = tags[replaceKey].split(';').filter(Boolean); + + if (existingVals.indexOf(replaceValue) === -1) { + existingVals.splice(semiIndex, 0, replaceValue); + tags[replaceKey] = existingVals.join(';'); + } + } else { + tags[replaceKey] = replaceValue; + } + } } + } - return rules; - }, []); - }, - // builds tagMap from mapcss-parse selector object... - buildTagMap: function buildTagMap(selector) { - var getRegexValues = function getRegexValues(regexes) { - return regexes.map(function (regex) { - return regex.replace(/\$|\^/g, ''); - }); - }; + return graph.replace(entity.update({ + tags: tags + })); + }; + } - var tagMap = Object.keys(selector).reduce(function (expectedTags, key) { - var values; - var isRegex = /regex/gi.test(key); - var isEqual = /equals/gi.test(key); + function behaviorEdit(context) { + function behavior() { + context.map().minzoom(context.minEditableZoom()); + } - if (isRegex || isEqual) { - Object.keys(selector[key]).forEach(function (selectorKey) { - values = isEqual ? [selector[key][selectorKey]] : getRegexValues(selector[key][selectorKey]); + behavior.off = function () { + context.map().minzoom(0); + }; - if (expectedTags.hasOwnProperty(selectorKey)) { - values = values.concat(expectedTags[selectorKey]); - } + return behavior; + } - expectedTags[selectorKey] = values; - }); - } else if (/(greater|less)Than(Equal)?|presence/g.test(key)) { - var tagKey = /presence/.test(key) ? selector[key] : Object.keys(selector[key])[0]; - values = [selector[key][tagKey]]; + /* + The hover behavior adds the `.hover` class on pointerover to all elements to which + the identical datum is bound, and removes it on pointerout. - if (expectedTags.hasOwnProperty(tagKey)) { - values = values.concat(expectedTags[tagKey]); - } + The :hover pseudo-class is insufficient for iD's purposes because a datum's visual + representation may consist of several elements scattered throughout the DOM hierarchy. + Only one of these elements can have the :hover pseudo-class, but all of them will + have the .hover class. + */ - expectedTags[tagKey] = values; - } + function behaviorHover(context) { + var dispatch = dispatch$8('hover'); - return expectedTags; - }, {}); - return tagMap; - }, - // inspired by osmWay#isArea() - inferGeometry: function inferGeometry(tagMap) { - var _lineKeys = this._lineKeys; - var _areaKeys = this._areaKeys; + var _selection = select(null); - var keyValueDoesNotImplyArea = function keyValueDoesNotImplyArea(key) { - return utilArrayIntersection(tagMap[key], Object.keys(_areaKeys[key])).length > 0; - }; + var _newNodeId = null; + var _initialNodeID = null; - var keyValueImpliesLine = function keyValueImpliesLine(key) { - return utilArrayIntersection(tagMap[key], Object.keys(_lineKeys[key])).length > 0; - }; + var _altDisables; - if (tagMap.hasOwnProperty('area')) { - if (tagMap.area.indexOf('yes') > -1) { - return 'area'; - } + var _ignoreVertex; - if (tagMap.area.indexOf('no') > -1) { - return 'line'; - } - } + var _targets = []; // use pointer events on supported platforms; fallback to mouse events - for (var key in tagMap) { - if (key in _areaKeys && !keyValueDoesNotImplyArea(key)) { - return 'area'; - } + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; - if (key in _lineKeys && keyValueImpliesLine(key)) { - return 'area'; - } - } + function keydown(d3_event) { + if (_altDisables && d3_event.keyCode === utilKeybinding.modifierCodes.alt) { + _selection.selectAll('.hover').classed('hover-suppressed', true).classed('hover', false); - return 'line'; - }, - // adds from mapcss-parse selector check... - addRule: function addRule(selector) { - var rule = { - // checks relevant to mapcss-selector - checks: this.filterRuleChecks(selector), - // true if all conditions for a tag error are true.. - matches: function matches(entity) { - return this.checks.every(function (check) { - return check(entity.tags); - }); - }, - // borrowed from Way#isArea() - inferredGeometry: this.inferGeometry(this.buildTagMap(selector), this._areaKeys), - geometryMatches: function geometryMatches(entity, graph) { - if (entity.type === 'node' || entity.type === 'relation') { - return selector.geometry === entity.type; - } else if (entity.type === 'way') { - return this.inferredGeometry === entity.geometry(graph); - } - }, - // when geometries match and tag matches are present, return a warning... - findIssues: function findIssues(entity, graph, issues) { - if (this.geometryMatches(entity, graph) && this.matches(entity)) { - var severity = Object.keys(selector).indexOf('error') > -1 ? 'error' : 'warning'; - var _message = selector[severity]; - issues.push(new validationIssue({ - type: 'maprules', - severity: severity, - message: function message() { - return _message; - }, - entityIds: [entity.id] - })); - } - } - }; + _selection.classed('hover-disabled', true); - this._validationRules.push(rule); - }, - clearRules: function clearRules() { - this._validationRules = []; - }, - // returns validationRules... - validationRules: function validationRules() { - return this._validationRules; - }, - // returns ruleChecks - ruleChecks: function ruleChecks() { - return this._ruleChecks; + dispatch.call('hover', this, null); + } } - }; - var apibase$1 = 'https://nominatim.openstreetmap.org/'; - var _inflight = {}; - - var _nominatimCache; + function keyup(d3_event) { + if (_altDisables && d3_event.keyCode === utilKeybinding.modifierCodes.alt) { + _selection.selectAll('.hover-suppressed').classed('hover-suppressed', false).classed('hover', true); - var serviceNominatim = { - init: function init() { - _inflight = {}; - _nominatimCache = new RBush(); - }, - reset: function reset() { - Object.values(_inflight).forEach(function (controller) { - controller.abort(); - }); - _inflight = {}; - _nominatimCache = new RBush(); - }, - countryCode: function countryCode(location, callback) { - this.reverse(location, function (err, result) { - if (err) { - return callback(err); - } else if (result.address) { - return callback(null, result.address.country_code); - } else { - return callback('Unable to geocode', null); - } - }); - }, - reverse: function reverse(loc, callback) { - var cached = _nominatimCache.search({ - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1] - }); + _selection.classed('hover-disabled', false); - if (cached.length > 0) { - if (callback) callback(null, cached[0].data); - return; + dispatch.call('hover', this, _targets); } + } - var params = { - zoom: 13, - format: 'json', - addressdetails: 1, - lat: loc[1], - lon: loc[0] - }; - var url = apibase$1 + 'reverse?' + utilQsString(params); - if (_inflight[url]) return; - var controller = new AbortController(); - _inflight[url] = controller; - d3_json(url, { - signal: controller.signal - }).then(function (result) { - delete _inflight[url]; + function behavior(selection) { + _selection = selection; + _targets = []; - if (result && result.error) { - throw new Error(result.error); - } + if (_initialNodeID) { + _newNodeId = _initialNodeID; + _initialNodeID = null; + } else { + _newNodeId = null; + } - var extent = geoExtent(loc).padByMeters(200); + _selection.on(_pointerPrefix + 'over.hover', pointerover).on(_pointerPrefix + 'out.hover', pointerout) // treat pointerdown as pointerover for touch devices + .on(_pointerPrefix + 'down.hover', pointerover); - _nominatimCache.insert(Object.assign(extent.bbox(), { - data: result - })); + select(window).on(_pointerPrefix + 'up.hover pointercancel.hover', pointerout, true).on('keydown.hover', keydown).on('keyup.hover', keyup); - if (callback) callback(null, result); - })["catch"](function (err) { - delete _inflight[url]; - if (err.name === 'AbortError') return; - if (callback) callback(err.message); - }); - }, - search: function search(val, callback) { - var searchVal = encodeURIComponent(val); - var url = apibase$1 + 'search/' + searchVal + '?limit=10&format=json'; - if (_inflight[url]) return; - var controller = new AbortController(); - _inflight[url] = controller; - d3_json(url, { - signal: controller.signal - }).then(function (result) { - delete _inflight[url]; + function eventTarget(d3_event) { + var datum = d3_event.target && d3_event.target.__data__; + if (_typeof(datum) !== 'object') return null; - if (result && result.error) { - throw new Error(result.error); + if (!(datum instanceof osmEntity) && datum.properties && datum.properties.entity instanceof osmEntity) { + return datum.properties.entity; } - if (callback) callback(null, result); - })["catch"](function (err) { - delete _inflight[url]; - if (err.name === 'AbortError') return; - if (callback) callback(err.message); - }); - } - }; - - var apibase$2 = 'https://openstreetcam.org'; - var maxResults$1 = 1000; - var tileZoom$1 = 14; - var tiler$4 = utilTiler().zoomExtent([tileZoom$1, tileZoom$1]).skipNullIsland(true); - var dispatch$5 = dispatch('loadedImages'); - var imgZoom = d3_zoom().extent([[0, 0], [320, 240]]).translateExtent([[0, 0], [320, 240]]).scaleExtent([1, 15]); - - var _oscCache; + return datum; + } - var _oscSelectedImage; + function pointerover(d3_event) { + // ignore mouse hovers with buttons pressed unless dragging + if (context.mode().id.indexOf('drag') === -1 && (!d3_event.pointerType || d3_event.pointerType === 'mouse') && d3_event.buttons) return; + var target = eventTarget(d3_event); - var _loadViewerPromise$1; + if (target && _targets.indexOf(target) === -1) { + _targets.push(target); - function abortRequest$4(controller) { - controller.abort(); - } + updateHover(d3_event, _targets); + } + } - function maxPageAtZoom$1(z) { - if (z < 15) return 2; - if (z === 15) return 5; - if (z === 16) return 10; - if (z === 17) return 20; - if (z === 18) return 40; - if (z > 18) return 80; - } + function pointerout(d3_event) { + var target = eventTarget(d3_event); - function loadTiles$1(which, url, projection) { - var currZoom = Math.floor(geoScaleToZoom(projection.scale())); - var tiles = tiler$4.getTiles(projection); // abort inflight requests that are no longer needed + var index = _targets.indexOf(target); - var cache = _oscCache[which]; - Object.keys(cache.inflight).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k.indexOf(tile.id + ',') === 0; - }); + if (index !== -1) { + _targets.splice(index); - if (!wanted) { - abortRequest$4(cache.inflight[k]); - delete cache.inflight[k]; + updateHover(d3_event, _targets); + } } - }); - tiles.forEach(function (tile) { - loadNextTilePage$1(which, currZoom, url, tile); - }); - } - function loadNextTilePage$1(which, currZoom, url, tile) { - var cache = _oscCache[which]; - var bbox = tile.extent.bbox(); - var maxPages = maxPageAtZoom$1(currZoom); - var nextPage = cache.nextPage[tile.id] || 1; - var params = utilQsString({ - ipp: maxResults$1, - page: nextPage, - // client_id: clientId, - bbTopLeft: [bbox.maxY, bbox.minX].join(','), - bbBottomRight: [bbox.minY, bbox.maxX].join(',') - }, true); - if (nextPage > maxPages) return; - var id = tile.id + ',' + String(nextPage); - if (cache.loaded[id] || cache.inflight[id]) return; - var controller = new AbortController(); - cache.inflight[id] = controller; - var options = { - method: 'POST', - signal: controller.signal, - body: params, - headers: { - 'Content-Type': 'application/x-www-form-urlencoded' + function allowsVertex(d) { + return d.geometry(context.graph()) === 'vertex' || _mainPresetIndex.allowsVertex(d, context.graph()); } - }; - d3_json(url, options).then(function (data) { - cache.loaded[id] = true; - delete cache.inflight[id]; - if (!data || !data.currentPageItems || !data.currentPageItems.length) { - throw new Error('No Data'); + function modeAllowsHover(target) { + var mode = context.mode(); + + if (mode.id === 'add-point') { + return mode.preset.matchGeometry('vertex') || target.type !== 'way' && target.geometry(context.graph()) !== 'vertex'; + } + + return true; } - var features = data.currentPageItems.map(function (item) { - var loc = [+item.lng, +item.lat]; - var d; + function updateHover(d3_event, targets) { + _selection.selectAll('.hover').classed('hover', false); - if (which === 'images') { - d = { - loc: loc, - key: item.id, - ca: +item.heading, - captured_at: item.shot_date || item.date_added, - captured_by: item.username, - imagePath: item.lth_name, - sequence_id: item.sequence_id, - sequence_index: +item.sequence_index - }; // cache sequence info + _selection.selectAll('.hover-suppressed').classed('hover-suppressed', false); - var seq = _oscCache.sequences[d.sequence_id]; + var mode = context.mode(); - if (!seq) { - seq = { - rotation: 0, - images: [] - }; - _oscCache.sequences[d.sequence_id] = seq; + if (!_newNodeId && (mode.id === 'draw-line' || mode.id === 'draw-area')) { + var node = targets.find(function (target) { + return target instanceof osmEntity && target.type === 'node'; + }); + _newNodeId = node && node.id; + } + + targets = targets.filter(function (datum) { + if (datum instanceof osmEntity) { + // If drawing a way, don't hover on a node that was just placed. #3974 + return datum.id !== _newNodeId && (datum.type !== 'node' || !_ignoreVertex || allowsVertex(datum)) && modeAllowsHover(datum); } - seq.images[d.sequence_index] = d; - _oscCache.images.forImageKey[d.key] = d; // cache imageKey -> image + return true; + }); + var selector = ''; + + for (var i in targets) { + var datum = targets[i]; // What are we hovering over? + + if (datum.__featurehash__) { + // hovering custom data + selector += ', .data' + datum.__featurehash__; + } else if (datum instanceof QAItem) { + selector += ', .' + datum.service + '.itemId-' + datum.id; + } else if (datum instanceof osmNote) { + selector += ', .note-' + datum.id; + } else if (datum instanceof osmEntity) { + selector += ', .' + datum.id; + + if (datum.type === 'relation') { + for (var j in datum.members) { + selector += ', .' + datum.members[j].id; + } + } + } } - return { - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1], - data: d - }; - }); - cache.rtree.load(features); + var suppressed = _altDisables && d3_event && d3_event.altKey; - if (data.currentPageItems.length === maxResults$1) { - // more pages to load - cache.nextPage[tile.id] = nextPage + 1; - loadNextTilePage$1(which, currZoom, url, tile); - } else { - cache.nextPage[tile.id] = Infinity; // no more pages to load - } + if (selector.trim().length) { + // remove the first comma + selector = selector.slice(1); - if (which === 'images') { - dispatch$5.call('loadedImages'); + _selection.selectAll(selector).classed(suppressed ? 'hover-suppressed' : 'hover', true); + } + + dispatch.call('hover', this, !suppressed && targets); } - })["catch"](function () { - cache.loaded[id] = true; - delete cache.inflight[id]; - }); - } // partition viewport into higher zoom tiles + } + behavior.off = function (selection) { + selection.selectAll('.hover').classed('hover', false); + selection.selectAll('.hover-suppressed').classed('hover-suppressed', false); + selection.classed('hover-disabled', false); + selection.on(_pointerPrefix + 'over.hover', null).on(_pointerPrefix + 'out.hover', null).on(_pointerPrefix + 'down.hover', null); + select(window).on(_pointerPrefix + 'up.hover pointercancel.hover', null, true).on('keydown.hover', null).on('keyup.hover', null); + }; - function partitionViewport$1(projection) { - var z = geoScaleToZoom(projection.scale()); - var z2 = Math.ceil(z * 2) / 2 + 2.5; // round to next 0.5 and add 2.5 + behavior.altDisables = function (val) { + if (!arguments.length) return _altDisables; + _altDisables = val; + return behavior; + }; - var tiler = utilTiler().zoomExtent([z2, z2]); - return tiler.getTiles(projection).map(function (tile) { - return tile.extent; - }); - } // no more than `limit` results per partition. + behavior.ignoreVertex = function (val) { + if (!arguments.length) return _ignoreVertex; + _ignoreVertex = val; + return behavior; + }; + behavior.initialNodeID = function (nodeId) { + _initialNodeID = nodeId; + return behavior; + }; - function searchLimited$1(limit, projection, rtree) { - limit = limit || 5; - return partitionViewport$1(projection).reduce(function (result, extent) { - var found = rtree.search(extent.bbox()).slice(0, limit).map(function (d) { - return d.data; - }); - return found.length ? result.concat(found) : result; - }, []); + return utilRebind(behavior, dispatch, 'on'); } - var serviceOpenstreetcam = { - init: function init() { - if (!_oscCache) { - this.reset(); - } + var _disableSpace = false; + var _lastSpace = null; + function behaviorDraw(context) { + var dispatch = dispatch$8('move', 'down', 'downcancel', 'click', 'clickWay', 'clickNode', 'undo', 'cancel', 'finish'); + var keybinding = utilKeybinding('draw'); - this.event = utilRebind(this, dispatch$5, 'on'); - }, - reset: function reset() { - if (_oscCache) { - Object.values(_oscCache.images.inflight).forEach(abortRequest$4); - } + var _hover = behaviorHover(context).altDisables(true).ignoreVertex(true).on('hover', context.ui().sidebar.hover); - _oscCache = { - images: { - inflight: {}, - loaded: {}, - nextPage: {}, - rtree: new RBush(), - forImageKey: {} - }, - sequences: {} - }; - _oscSelectedImage = null; - }, - images: function images(projection) { - var limit = 5; - return searchLimited$1(limit, projection, _oscCache.images.rtree); - }, - sequences: function sequences(projection) { - var viewport = projection.clipExtent(); - var min = [viewport[0][0], viewport[1][1]]; - var max = [viewport[1][0], viewport[0][1]]; - var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); - var sequenceKeys = {}; // all sequences for images in viewport + var _edit = behaviorEdit(context); - _oscCache.images.rtree.search(bbox).forEach(function (d) { - sequenceKeys[d.data.sequence_id] = true; - }); // make linestrings from those sequences + var _closeTolerance = 4; + var _tolerance = 12; + var _mouseLeave = false; + var _lastMouse = null; + var _lastPointerUpEvent; - var lineStrings = []; - Object.keys(sequenceKeys).forEach(function (sequenceKey) { - var seq = _oscCache.sequences[sequenceKey]; - var images = seq && seq.images; + var _downPointer; // use pointer events on supported platforms; fallback to mouse events - if (images) { - lineStrings.push({ - type: 'LineString', - coordinates: images.map(function (d) { - return d.loc; - }).filter(Boolean), - properties: { - captured_at: images[0] ? images[0].captured_at : null, - captured_by: images[0] ? images[0].captured_by : null, - key: sequenceKey - } - }); - } - }); - return lineStrings; - }, - cachedImage: function cachedImage(imageKey) { - return _oscCache.images.forImageKey[imageKey]; - }, - loadImages: function loadImages(projection) { - var url = apibase$2 + '/1.0/list/nearby-photos/'; - loadTiles$1('images', url, projection); - }, - ensureViewerLoaded: function ensureViewerLoaded(context) { - if (_loadViewerPromise$1) return _loadViewerPromise$1; // add osc-wrapper - var wrap = context.container().select('.photoviewer').selectAll('.osc-wrapper').data([0]); - var that = this; - var wrapEnter = wrap.enter().append('div').attr('class', 'photo-wrapper osc-wrapper').classed('hide', true).call(imgZoom.on('zoom', zoomPan)).on('dblclick.zoom', null); - wrapEnter.append('div').attr('class', 'photo-attribution fillD'); - var controlsEnter = wrapEnter.append('div').attr('class', 'photo-controls-wrap').append('div').attr('class', 'photo-controls'); - controlsEnter.append('button').on('click.back', step(-1)).html('â'); - controlsEnter.append('button').on('click.rotate-ccw', rotate(-90)).html('⤿'); - controlsEnter.append('button').on('click.rotate-cw', rotate(90)).html('⤾'); - controlsEnter.append('button').on('click.forward', step(1)).html('âº'); - wrapEnter.append('div').attr('class', 'osc-image-wrap'); // Register viewer resize handler + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; // related code + // - `mode/drag_node.js` `datum()` - context.ui().photoviewer.on('resize.openstreetcam', function (dimensions) { - imgZoom = d3_zoom().extent([[0, 0], dimensions]).translateExtent([[0, 0], dimensions]).scaleExtent([1, 15]).on('zoom', zoomPan); - }); - function zoomPan(d3_event) { - var t = d3_event.transform; - context.container().select('.photoviewer .osc-image-wrap').call(utilSetTransform, t.x, t.y, t.k); + function datum(d3_event) { + var mode = context.mode(); + var isNote = mode && mode.id.indexOf('note') !== -1; + if (d3_event.altKey || isNote) return {}; + var element; + + if (d3_event.type === 'keydown') { + element = _lastMouse && _lastMouse.target; + } else { + element = d3_event.target; + } // When drawing, snap only to touch targets.. + // (this excludes area fills and active drawing elements) + + + var d = element.__data__; + return d && d.properties && d.properties.target ? d : {}; + } + + function pointerdown(d3_event) { + if (_downPointer) return; + var pointerLocGetter = utilFastMouse(this); + _downPointer = { + id: d3_event.pointerId || 'mouse', + pointerLocGetter: pointerLocGetter, + downTime: +new Date(), + downLoc: pointerLocGetter(d3_event) + }; + dispatch.call('down', this, d3_event, datum(d3_event)); + } + + function pointerup(d3_event) { + if (!_downPointer || _downPointer.id !== (d3_event.pointerId || 'mouse')) return; + var downPointer = _downPointer; + _downPointer = null; + _lastPointerUpEvent = d3_event; + if (downPointer.isCancelled) return; + var t2 = +new Date(); + var p2 = downPointer.pointerLocGetter(d3_event); + var dist = geoVecLength(downPointer.downLoc, p2); + + if (dist < _closeTolerance || dist < _tolerance && t2 - downPointer.downTime < 500) { + // Prevent a quick second click + select(window).on('click.draw-block', function () { + d3_event.stopPropagation(); + }, true); + context.map().dblclickZoomEnable(false); + window.setTimeout(function () { + context.map().dblclickZoomEnable(true); + select(window).on('click.draw-block', null); + }, 500); + click(d3_event, p2); } + } - function rotate(deg) { - return function () { - if (!_oscSelectedImage) return; - var sequenceKey = _oscSelectedImage.sequence_id; - var sequence = _oscCache.sequences[sequenceKey]; - if (!sequence) return; - var r = sequence.rotation || 0; - r += deg; - if (r > 180) r -= 360; - if (r < -180) r += 360; - sequence.rotation = r; - var wrap = context.container().select('.photoviewer .osc-wrapper'); - wrap.transition().duration(100).call(imgZoom.transform, identity$2); - wrap.selectAll('.osc-image').transition().duration(100).style('transform', 'rotate(' + r + 'deg)'); - }; + function pointermove(d3_event) { + if (_downPointer && _downPointer.id === (d3_event.pointerId || 'mouse') && !_downPointer.isCancelled) { + var p2 = _downPointer.pointerLocGetter(d3_event); + + var dist = geoVecLength(_downPointer.downLoc, p2); + + if (dist >= _closeTolerance) { + _downPointer.isCancelled = true; + dispatch.call('downcancel', this); + } } - function step(stepBy) { - return function () { - if (!_oscSelectedImage) return; - var sequenceKey = _oscSelectedImage.sequence_id; - var sequence = _oscCache.sequences[sequenceKey]; - if (!sequence) return; - var nextIndex = _oscSelectedImage.sequence_index + stepBy; - var nextImage = sequence.images[nextIndex]; - if (!nextImage) return; - context.map().centerEase(nextImage.loc); - that.selectImage(context, nextImage.key); - }; - } // don't need any async loading so resolve immediately + if (d3_event.pointerType && d3_event.pointerType !== 'mouse' || d3_event.buttons || _downPointer) return; // HACK: Mobile Safari likes to send one or more `mouse` type pointermove + // events immediately after non-mouse pointerup events; detect and ignore them. + if (_lastPointerUpEvent && _lastPointerUpEvent.pointerType !== 'mouse' && d3_event.timeStamp - _lastPointerUpEvent.timeStamp < 100) return; + _lastMouse = d3_event; + dispatch.call('move', this, d3_event, datum(d3_event)); + } - _loadViewerPromise$1 = Promise.resolve(); - return _loadViewerPromise$1; - }, - showViewer: function showViewer(context) { - var viewer = context.container().select('.photoviewer').classed('hide', false); - var isHidden = viewer.selectAll('.photo-wrapper.osc-wrapper.hide').size(); + function pointercancel(d3_event) { + if (_downPointer && _downPointer.id === (d3_event.pointerId || 'mouse')) { + if (!_downPointer.isCancelled) { + dispatch.call('downcancel', this); + } - if (isHidden) { - viewer.selectAll('.photo-wrapper:not(.osc-wrapper)').classed('hide', true); - viewer.selectAll('.photo-wrapper.osc-wrapper').classed('hide', false); + _downPointer = null; } + } - return this; - }, - hideViewer: function hideViewer(context) { - _oscSelectedImage = null; - this.updateUrlImage(null); - var viewer = context.container().select('.photoviewer'); - if (!viewer.empty()) viewer.datum(null); - viewer.classed('hide', true).selectAll('.photo-wrapper').classed('hide', true); - context.container().selectAll('.viewfield-group, .sequence, .icon-sign').classed('currentView', false); - return this.setStyles(context, null, true); - }, - selectImage: function selectImage(context, imageKey) { - var d = this.cachedImage(imageKey); - _oscSelectedImage = d; - this.updateUrlImage(imageKey); - var viewer = context.container().select('.photoviewer'); - if (!viewer.empty()) viewer.datum(d); - this.setStyles(context, null, true); - context.container().selectAll('.icon-sign').classed('currentView', false); - if (!d) return this; - var wrap = context.container().select('.photoviewer .osc-wrapper'); - var imageWrap = wrap.selectAll('.osc-image-wrap'); - var attribution = wrap.selectAll('.photo-attribution').html(''); - wrap.transition().duration(100).call(imgZoom.transform, identity$2); - imageWrap.selectAll('.osc-image').remove(); + function mouseenter() { + _mouseLeave = false; + } - if (d) { - var sequence = _oscCache.sequences[d.sequence_id]; - var r = sequence && sequence.rotation || 0; - imageWrap.append('img').attr('class', 'osc-image').attr('src', apibase$2 + '/' + d.imagePath).style('transform', 'rotate(' + r + 'deg)'); + function mouseleave() { + _mouseLeave = true; + } - if (d.captured_by) { - attribution.append('a').attr('class', 'captured_by').attr('target', '_blank').attr('href', 'https://openstreetcam.org/user/' + encodeURIComponent(d.captured_by)).html('@' + d.captured_by); - attribution.append('span').html('|'); - } + function allowsVertex(d) { + return d.geometry(context.graph()) === 'vertex' || _mainPresetIndex.allowsVertex(d, context.graph()); + } // related code + // - `mode/drag_node.js` `doMove()` + // - `behavior/draw.js` `click()` + // - `behavior/draw_way.js` `move()` - if (d.captured_at) { - attribution.append('span').attr('class', 'captured_at').html(localeDateString(d.captured_at)); - attribution.append('span').html('|'); - } - attribution.append('a').attr('class', 'image-link').attr('target', '_blank').attr('href', 'https://openstreetcam.org/details/' + d.sequence_id + '/' + d.sequence_index).html('openstreetcam.org'); - } + function click(d3_event, loc) { + var d = datum(d3_event); + var target = d && d.properties && d.properties.entity; + var mode = context.mode(); - return this; + if (target && target.type === 'node' && allowsVertex(target)) { + // Snap to a node + dispatch.call('clickNode', this, target, d); + return; + } else if (target && target.type === 'way' && (mode.id !== 'add-point' || mode.preset.matchGeometry('vertex'))) { + // Snap to a way + var choice = geoChooseEdge(context.graph().childNodes(target), loc, context.projection, context.activeID()); - function localeDateString(s) { - if (!s) return null; - var options = { - day: 'numeric', - month: 'short', - year: 'numeric' - }; - var d = new Date(s); - if (isNaN(d.getTime())) return null; - return d.toLocaleDateString(_mainLocalizer.localeCode(), options); - } - }, - getSelectedImage: function getSelectedImage() { - return _oscSelectedImage; - }, - getSequenceKeyForImage: function getSequenceKeyForImage(d) { - return d && d.sequence_id; - }, - // Updates the currently highlighted sequence and selected bubble. - // Reset is only necessary when interacting with the viewport because - // this implicitly changes the currently selected bubble/sequence - setStyles: function setStyles(context, hovered, reset) { - if (reset) { - // reset all layers - context.container().selectAll('.viewfield-group').classed('highlighted', false).classed('hovered', false).classed('currentView', false); - context.container().selectAll('.sequence').classed('highlighted', false).classed('currentView', false); + if (choice) { + var edge = [target.nodes[choice.index - 1], target.nodes[choice.index]]; + dispatch.call('clickWay', this, choice.loc, edge, d); + return; + } + } else if (mode.id !== 'add-point' || mode.preset.matchGeometry('point')) { + var locLatLng = context.projection.invert(loc); + dispatch.call('click', this, locLatLng, d); } + } // treat a spacebar press like a click - var hoveredImageKey = hovered && hovered.key; - var hoveredSequenceKey = this.getSequenceKeyForImage(hovered); - var hoveredSequence = hoveredSequenceKey && _oscCache.sequences[hoveredSequenceKey]; - var hoveredImageKeys = hoveredSequence && hoveredSequence.images.map(function (d) { - return d.key; - }) || []; - var viewer = context.container().select('.photoviewer'); - var selected = viewer.empty() ? undefined : viewer.datum(); - var selectedImageKey = selected && selected.key; - var selectedSequenceKey = this.getSequenceKeyForImage(selected); - var selectedSequence = selectedSequenceKey && _oscCache.sequences[selectedSequenceKey]; - var selectedImageKeys = selectedSequence && selectedSequence.images.map(function (d) { - return d.key; - }) || []; // highlight sibling viewfields on either the selected or the hovered sequences - - var highlightedImageKeys = utilArrayUnion(hoveredImageKeys, selectedImageKeys); - context.container().selectAll('.layer-openstreetcam .viewfield-group').classed('highlighted', function (d) { - return highlightedImageKeys.indexOf(d.key) !== -1; - }).classed('hovered', function (d) { - return d.key === hoveredImageKey; - }).classed('currentView', function (d) { - return d.key === selectedImageKey; - }); - context.container().selectAll('.layer-openstreetcam .sequence').classed('highlighted', function (d) { - return d.properties.key === hoveredSequenceKey; - }).classed('currentView', function (d) { - return d.properties.key === selectedSequenceKey; - }); // update viewfields if needed - context.container().selectAll('.viewfield-group .viewfield').attr('d', viewfieldPath); + function space(d3_event) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + var currSpace = context.map().mouse(); - function viewfieldPath() { - var d = this.parentNode.__data__; + if (_disableSpace && _lastSpace) { + var dist = geoVecLength(_lastSpace, currSpace); - if (d.pano && d.key !== selectedImageKey) { - return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; - } else { - return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'; + if (dist > _tolerance) { + _disableSpace = false; } } - return this; - }, - updateUrlImage: function updateUrlImage(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); + if (_disableSpace || _mouseLeave || !_lastMouse) return; // user must move mouse or release space bar to allow another click - if (imageKey) { - hash.photo = 'openstreetcam/' + imageKey; - } else { - delete hash.photo; - } + _lastSpace = currSpace; + _disableSpace = true; + select(window).on('keyup.space-block', function () { + d3_event.preventDefault(); + d3_event.stopPropagation(); + _disableSpace = false; + select(window).on('keyup.space-block', null); + }); // get the current mouse position - window.location.replace('#' + utilQsString(hash, true)); - } - }, - cache: function cache() { - return _oscCache; + var loc = context.map().mouse() || // or the map center if the mouse has never entered the map + context.projection(context.map().center()); + click(d3_event, loc); } - }; - var FORCED$f = fails(function () { - return new Date(NaN).toJSON() !== null - || Date.prototype.toJSON.call({ toISOString: function () { return 1; } }) !== 1; - }); + function backspace(d3_event) { + d3_event.preventDefault(); + dispatch.call('undo'); + } - // `Date.prototype.toJSON` method - // https://tc39.es/ecma262/#sec-date.prototype.tojson - _export({ target: 'Date', proto: true, forced: FORCED$f }, { - // eslint-disable-next-line no-unused-vars -- required for `.length` - toJSON: function toJSON(key) { - var O = toObject(this); - var pv = toPrimitive(O); - return typeof pv == 'number' && !isFinite(pv) ? null : O.toISOString(); + function del(d3_event) { + d3_event.preventDefault(); + dispatch.call('cancel'); } - }); - // `URL.prototype.toJSON` method - // https://url.spec.whatwg.org/#dom-url-tojson - _export({ target: 'URL', proto: true, enumerable: true }, { - toJSON: function toJSON() { - return URL.prototype.toString.call(this); + function ret(d3_event) { + d3_event.preventDefault(); + dispatch.call('finish'); } - }); - /** - * Checks if `value` is the - * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) - * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) - * - * @static - * @memberOf _ - * @since 0.1.0 - * @category Lang - * @param {*} value The value to check. - * @returns {boolean} Returns `true` if `value` is an object, else `false`. - * @example - * - * _.isObject({}); - * // => true - * - * _.isObject([1, 2, 3]); - * // => true - * - * _.isObject(_.noop); - * // => true - * - * _.isObject(null); - * // => false - */ - function isObject$1(value) { - var type = _typeof(value); + function behavior(selection) { + context.install(_hover); + context.install(_edit); + _downPointer = null; + keybinding.on('â«', backspace).on('â¦', del).on('â', ret).on('â©', ret).on('space', space).on('â¥space', space); + selection.on('mouseenter.draw', mouseenter).on('mouseleave.draw', mouseleave).on(_pointerPrefix + 'down.draw', pointerdown).on(_pointerPrefix + 'move.draw', pointermove); + select(window).on(_pointerPrefix + 'up.draw', pointerup, true).on('pointercancel.draw', pointercancel, true); + select(document).call(keybinding); + return behavior; + } - return value != null && (type == 'object' || type == 'function'); - } + behavior.off = function (selection) { + context.ui().sidebar.hover.cancel(); + context.uninstall(_hover); + context.uninstall(_edit); + selection.on('mouseenter.draw', null).on('mouseleave.draw', null).on(_pointerPrefix + 'down.draw', null).on(_pointerPrefix + 'move.draw', null); + select(window).on(_pointerPrefix + 'up.draw', null).on('pointercancel.draw', null); // note: keyup.space-block, click.draw-block should remain - /** Detect free variable `global` from Node.js. */ - var freeGlobal = (typeof global === "undefined" ? "undefined" : _typeof(global)) == 'object' && global && global.Object === Object && global; + select(document).call(keybinding.unbind); + }; - /** Detect free variable `self`. */ + behavior.hover = function () { + return _hover; + }; - var freeSelf = (typeof self === "undefined" ? "undefined" : _typeof(self)) == 'object' && self && self.Object === Object && self; - /** Used as a reference to the global object. */ + return utilRebind(behavior, dispatch, 'on'); + } - var root$1 = freeGlobal || freeSelf || Function('return this')(); + function initRange(domain, range) { + switch (arguments.length) { + case 0: + break; - /** - * Gets the timestamp of the number of milliseconds that have elapsed since - * the Unix epoch (1 January 1970 00:00:00 UTC). - * - * @static - * @memberOf _ - * @since 2.4.0 - * @category Date - * @returns {number} Returns the timestamp. - * @example - * - * _.defer(function(stamp) { - * console.log(_.now() - stamp); - * }, _.now()); - * // => Logs the number of milliseconds it took for the deferred invocation. - */ + case 1: + this.range(domain); + break; - var now$1 = function now() { - return root$1.Date.now(); - }; + default: + this.range(range).domain(domain); + break; + } - /** Used to match a single whitespace character. */ - var reWhitespace = /\s/; - /** - * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace - * character of `string`. - * - * @private - * @param {string} string The string to inspect. - * @returns {number} Returns the index of the last non-whitespace character. - */ + return this; + } - function trimmedEndIndex(string) { - var index = string.length; + function constants(x) { + return function () { + return x; + }; + } - while (index-- && reWhitespace.test(string.charAt(index))) {} + function number(x) { + return +x; + } - return index; + var unit = [0, 1]; + function identity$1(x) { + return x; } - /** Used to match leading whitespace. */ + function normalize(a, b) { + return (b -= a = +a) ? function (x) { + return (x - a) / b; + } : constants(isNaN(b) ? NaN : 0.5); + } - var reTrimStart = /^\s+/; - /** - * The base implementation of `_.trim`. - * - * @private - * @param {string} string The string to trim. - * @returns {string} Returns the trimmed string. - */ + function clamper(a, b) { + var t; + if (a > b) t = a, a = b, b = t; + return function (x) { + return Math.max(a, Math.min(b, x)); + }; + } // normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1]. + // interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b]. - function baseTrim(string) { - return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string; + + function bimap(domain, range, interpolate) { + var d0 = domain[0], + d1 = domain[1], + r0 = range[0], + r1 = range[1]; + if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);else d0 = normalize(d0, d1), r0 = interpolate(r0, r1); + return function (x) { + return r0(d0(x)); + }; } - /** Built-in value references. */ + function polymap(domain, range, interpolate) { + var j = Math.min(domain.length, range.length) - 1, + d = new Array(j), + r = new Array(j), + i = -1; // Reverse descending domains. - var _Symbol = root$1.Symbol; + if (domain[j] < domain[0]) { + domain = domain.slice().reverse(); + range = range.slice().reverse(); + } - /** Used for built-in method references. */ + while (++i < j) { + d[i] = normalize(domain[i], domain[i + 1]); + r[i] = interpolate(range[i], range[i + 1]); + } - var objectProto = Object.prototype; - /** Used to check objects for own properties. */ + return function (x) { + var i = bisectRight(domain, x, 1, j) - 1; + return r[i](d[i](x)); + }; + } - var hasOwnProperty$1 = objectProto.hasOwnProperty; - /** - * Used to resolve the - * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) - * of values. - */ + function copy(source, target) { + return target.domain(source.domain()).range(source.range()).interpolate(source.interpolate()).clamp(source.clamp()).unknown(source.unknown()); + } + function transformer() { + var domain = unit, + range = unit, + interpolate = interpolate$1, + transform, + untransform, + unknown, + clamp = identity$1, + piecewise, + output, + input; - var nativeObjectToString = objectProto.toString; - /** Built-in value references. */ + function rescale() { + var n = Math.min(domain.length, range.length); + if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]); + piecewise = n > 2 ? polymap : bimap; + output = input = null; + return scale; + } - var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined; - /** - * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values. - * - * @private - * @param {*} value The value to query. - * @returns {string} Returns the raw `toStringTag`. - */ + function scale(x) { + return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x))); + } - function getRawTag(value) { - var isOwn = hasOwnProperty$1.call(value, symToStringTag), - tag = value[symToStringTag]; + scale.invert = function (y) { + return clamp(untransform((input || (input = piecewise(range, domain.map(transform), d3_interpolateNumber)))(y))); + }; - try { - value[symToStringTag] = undefined; - var unmasked = true; - } catch (e) {} + scale.domain = function (_) { + return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice(); + }; - var result = nativeObjectToString.call(value); + scale.range = function (_) { + return arguments.length ? (range = Array.from(_), rescale()) : range.slice(); + }; - if (unmasked) { - if (isOwn) { - value[symToStringTag] = tag; - } else { - delete value[symToStringTag]; - } - } + scale.rangeRound = function (_) { + return range = Array.from(_), interpolate = interpolateRound, rescale(); + }; - return result; - } + scale.clamp = function (_) { + return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1; + }; - /** Used for built-in method references. */ - var objectProto$1 = Object.prototype; - /** - * Used to resolve the - * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) - * of values. - */ + scale.interpolate = function (_) { + return arguments.length ? (interpolate = _, rescale()) : interpolate; + }; - var nativeObjectToString$1 = objectProto$1.toString; - /** - * Converts `value` to a string using `Object.prototype.toString`. - * - * @private - * @param {*} value The value to convert. - * @returns {string} Returns the converted string. - */ + scale.unknown = function (_) { + return arguments.length ? (unknown = _, scale) : unknown; + }; - function objectToString$1(value) { - return nativeObjectToString$1.call(value); + return function (t, u) { + transform = t, untransform = u; + return rescale(); + }; + } + function continuous() { + return transformer()(identity$1, identity$1); } - /** `Object#toString` result references. */ + function formatDecimal (x) { + return Math.abs(x = Math.round(x)) >= 1e21 ? x.toLocaleString("en").replace(/,/g, "") : x.toString(10); + } // Computes the decimal coefficient and exponent of the specified number x with + // significant digits p, where x is positive and p is in [1, 21] or undefined. + // For example, formatDecimalParts(1.23) returns ["123", 0]. - var nullTag = '[object Null]', - undefinedTag = '[object Undefined]'; - /** Built-in value references. */ + function formatDecimalParts(x, p) { + if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity - var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined; - /** - * The base implementation of `getTag` without fallbacks for buggy environments. - * - * @private - * @param {*} value The value to query. - * @returns {string} Returns the `toStringTag`. - */ + var i, + coefficient = x.slice(0, i); // The string returned by toExponential either has the form \d\.\d+e[-+]\d+ + // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3). - function baseGetTag(value) { - if (value == null) { - return value === undefined ? undefinedTag : nullTag; - } + return [coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient, +x.slice(i + 1)]; + } - return symToStringTag$1 && symToStringTag$1 in Object(value) ? getRawTag(value) : objectToString$1(value); + function exponent (x) { + return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN; } - /** - * Checks if `value` is object-like. A value is object-like if it's not `null` - * and has a `typeof` result of "object". - * - * @static - * @memberOf _ - * @since 4.0.0 - * @category Lang - * @param {*} value The value to check. - * @returns {boolean} Returns `true` if `value` is object-like, else `false`. - * @example - * - * _.isObjectLike({}); - * // => true - * - * _.isObjectLike([1, 2, 3]); - * // => true - * - * _.isObjectLike(_.noop); - * // => false - * - * _.isObjectLike(null); - * // => false - */ - function isObjectLike(value) { - return value != null && _typeof(value) == 'object'; + function formatGroup (grouping, thousands) { + return function (value, width) { + var i = value.length, + t = [], + j = 0, + g = grouping[0], + length = 0; + + while (i > 0 && g > 0) { + if (length + g + 1 > width) g = Math.max(1, width - length); + t.push(value.substring(i -= g, i + g)); + if ((length += g + 1) > width) break; + g = grouping[j = (j + 1) % grouping.length]; + } + + return t.reverse().join(thousands); + }; } - /** `Object#toString` result references. */ + function formatNumerals (numerals) { + return function (value) { + return value.replace(/[0-9]/g, function (i) { + return numerals[+i]; + }); + }; + } - var symbolTag = '[object Symbol]'; - /** - * Checks if `value` is classified as a `Symbol` primitive or object. - * - * @static - * @memberOf _ - * @since 4.0.0 - * @category Lang - * @param {*} value The value to check. - * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. - * @example - * - * _.isSymbol(Symbol.iterator); - * // => true - * - * _.isSymbol('abc'); - * // => false - */ + // [[fill]align][sign][symbol][0][width][,][.precision][~][type] + var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i; + function formatSpecifier(specifier) { + if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier); + var match; + return new FormatSpecifier({ + fill: match[1], + align: match[2], + sign: match[3], + symbol: match[4], + zero: match[5], + width: match[6], + comma: match[7], + precision: match[8] && match[8].slice(1), + trim: match[9], + type: match[10] + }); + } + formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof - function isSymbol$1(value) { - return _typeof(value) == 'symbol' || isObjectLike(value) && baseGetTag(value) == symbolTag; + function FormatSpecifier(specifier) { + this.fill = specifier.fill === undefined ? " " : specifier.fill + ""; + this.align = specifier.align === undefined ? ">" : specifier.align + ""; + this.sign = specifier.sign === undefined ? "-" : specifier.sign + ""; + this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + ""; + this.zero = !!specifier.zero; + this.width = specifier.width === undefined ? undefined : +specifier.width; + this.comma = !!specifier.comma; + this.precision = specifier.precision === undefined ? undefined : +specifier.precision; + this.trim = !!specifier.trim; + this.type = specifier.type === undefined ? "" : specifier.type + ""; } - /** Used as references for various `Number` constants. */ + FormatSpecifier.prototype.toString = function () { + return this.fill + this.align + this.sign + this.symbol + (this.zero ? "0" : "") + (this.width === undefined ? "" : Math.max(1, this.width | 0)) + (this.comma ? "," : "") + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0)) + (this.trim ? "~" : "") + this.type; + }; - var NAN = 0 / 0; - /** Used to detect bad signed hexadecimal string values. */ + // Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k. + function formatTrim (s) { + out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) { + switch (s[i]) { + case ".": + i0 = i1 = i; + break; - var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; - /** Used to detect binary string values. */ + case "0": + if (i0 === 0) i0 = i; + i1 = i; + break; - var reIsBinary = /^0b[01]+$/i; - /** Used to detect octal string values. */ + default: + if (!+s[i]) break out; + if (i0 > 0) i0 = 0; + break; + } + } - var reIsOctal = /^0o[0-7]+$/i; - /** Built-in method references without a dependency on `root`. */ + return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s; + } - var freeParseInt = parseInt; - /** - * Converts `value` to a number. - * - * @static - * @memberOf _ - * @since 4.0.0 - * @category Lang - * @param {*} value The value to process. - * @returns {number} Returns the number. - * @example - * - * _.toNumber(3.2); - * // => 3.2 - * - * _.toNumber(Number.MIN_VALUE); - * // => 5e-324 - * - * _.toNumber(Infinity); - * // => Infinity - * - * _.toNumber('3.2'); - * // => 3.2 - */ + var nativeToPrecision = 1.0.toPrecision; - function toNumber$1(value) { - if (typeof value == 'number') { - return value; - } + var FORCED$1 = fails(function () { + // IE7- + return nativeToPrecision.call(1, undefined) !== '1'; + }) || !fails(function () { + // V8 ~ Android 4.3- + nativeToPrecision.call({}); + }); - if (isSymbol$1(value)) { - return NAN; + // `Number.prototype.toPrecision` method + // https://tc39.es/ecma262/#sec-number.prototype.toprecision + _export({ target: 'Number', proto: true, forced: FORCED$1 }, { + toPrecision: function toPrecision(precision) { + return precision === undefined + ? nativeToPrecision.call(thisNumberValue(this)) + : nativeToPrecision.call(thisNumberValue(this), precision); } + }); - if (isObject$1(value)) { - var other = typeof value.valueOf == 'function' ? value.valueOf() : value; - value = isObject$1(other) ? other + '' : other; - } + var prefixExponent; + function formatPrefixAuto (x, p) { + var d = formatDecimalParts(x, p); + if (!d) return x + ""; + var coefficient = d[0], + exponent = d[1], + i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1, + n = coefficient.length; + return i === n ? coefficient : i > n ? coefficient + new Array(i - n + 1).join("0") : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i) : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y! + } - if (typeof value != 'string') { - return value === 0 ? value : +value; + function formatRounded (x, p) { + var d = formatDecimalParts(x, p); + if (!d) return x + ""; + var coefficient = d[0], + exponent = d[1]; + return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1) : coefficient + new Array(exponent - coefficient.length + 2).join("0"); + } + + var formatTypes = { + "%": function _(x, p) { + return (x * 100).toFixed(p); + }, + "b": function b(x) { + return Math.round(x).toString(2); + }, + "c": function c(x) { + return x + ""; + }, + "d": formatDecimal, + "e": function e(x, p) { + return x.toExponential(p); + }, + "f": function f(x, p) { + return x.toFixed(p); + }, + "g": function g(x, p) { + return x.toPrecision(p); + }, + "o": function o(x) { + return Math.round(x).toString(8); + }, + "p": function p(x, _p) { + return formatRounded(x * 100, _p); + }, + "r": formatRounded, + "s": formatPrefixAuto, + "X": function X(x) { + return Math.round(x).toString(16).toUpperCase(); + }, + "x": function x(_x) { + return Math.round(_x).toString(16); } + }; - value = baseTrim(value); - var isBinary = reIsBinary.test(value); - return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value; + function identity (x) { + return x; } - /** Error message constants. */ + var map$1 = Array.prototype.map, + prefixes = ["y", "z", "a", "f", "p", "n", "µ", "m", "", "k", "M", "G", "T", "P", "E", "Z", "Y"]; + function formatLocale (locale) { + var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map$1.call(locale.grouping, Number), locale.thousands + ""), + currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "", + currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "", + decimal = locale.decimal === undefined ? "." : locale.decimal + "", + numerals = locale.numerals === undefined ? identity : formatNumerals(map$1.call(locale.numerals, String)), + percent = locale.percent === undefined ? "%" : locale.percent + "", + minus = locale.minus === undefined ? "â" : locale.minus + "", + nan = locale.nan === undefined ? "NaN" : locale.nan + ""; - var FUNC_ERROR_TEXT = 'Expected a function'; - /* Built-in method references for those with the same name as other `lodash` methods. */ + function newFormat(specifier) { + specifier = formatSpecifier(specifier); + var fill = specifier.fill, + align = specifier.align, + sign = specifier.sign, + symbol = specifier.symbol, + zero = specifier.zero, + width = specifier.width, + comma = specifier.comma, + precision = specifier.precision, + trim = specifier.trim, + type = specifier.type; // The "n" type is an alias for ",g". - var nativeMax = Math.max, - nativeMin = Math.min; - /** - * Creates a debounced function that delays invoking `func` until after `wait` - * milliseconds have elapsed since the last time the debounced function was - * invoked. The debounced function comes with a `cancel` method to cancel - * delayed `func` invocations and a `flush` method to immediately invoke them. - * Provide `options` to indicate whether `func` should be invoked on the - * leading and/or trailing edge of the `wait` timeout. The `func` is invoked - * with the last arguments provided to the debounced function. Subsequent - * calls to the debounced function return the result of the last `func` - * invocation. - * - * **Note:** If `leading` and `trailing` options are `true`, `func` is - * invoked on the trailing edge of the timeout only if the debounced function - * is invoked more than once during the `wait` timeout. - * - * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred - * until to the next tick, similar to `setTimeout` with a timeout of `0`. - * - * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) - * for details over the differences between `_.debounce` and `_.throttle`. - * - * @static - * @memberOf _ - * @since 0.1.0 - * @category Function - * @param {Function} func The function to debounce. - * @param {number} [wait=0] The number of milliseconds to delay. - * @param {Object} [options={}] The options object. - * @param {boolean} [options.leading=false] - * Specify invoking on the leading edge of the timeout. - * @param {number} [options.maxWait] - * The maximum time `func` is allowed to be delayed before it's invoked. - * @param {boolean} [options.trailing=true] - * Specify invoking on the trailing edge of the timeout. - * @returns {Function} Returns the new debounced function. - * @example - * - * // Avoid costly calculations while the window size is in flux. - * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); - * - * // Invoke `sendMail` when clicked, debouncing subsequent calls. - * jQuery(element).on('click', _.debounce(sendMail, 300, { - * 'leading': true, - * 'trailing': false - * })); - * - * // Ensure `batchLog` is invoked once after 1 second of debounced calls. - * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); - * var source = new EventSource('/stream'); - * jQuery(source).on('message', debounced); - * - * // Cancel the trailing debounced invocation. - * jQuery(window).on('popstate', debounced.cancel); - */ + if (type === "n") comma = true, type = "g"; // The "" type, and any invalid type, is an alias for ".12~g". + else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g"; // If zero fill is specified, padding goes after sign and before digits. - function debounce(func, wait, options) { - var lastArgs, - lastThis, - maxWait, - result, - timerId, - lastCallTime, - lastInvokeTime = 0, - leading = false, - maxing = false, - trailing = true; + if (zero || fill === "0" && align === "=") zero = true, fill = "0", align = "="; // Compute the prefix and suffix. + // For SI-prefix, the suffix is lazily computed. - if (typeof func != 'function') { - throw new TypeError(FUNC_ERROR_TEXT); - } + var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "", + suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : ""; // What format function should we use? + // Is this an integer type? + // Can this type generate exponential notation? - wait = toNumber$1(wait) || 0; + var formatType = formatTypes[type], + maybeSuffix = /[defgprs%]/.test(type); // Set the default precision if not specified, + // or clamp the specified precision to the supported range. + // For significant precision, it must be in [1, 21]. + // For fixed precision, it must be in [0, 20]. - if (isObject$1(options)) { - leading = !!options.leading; - maxing = 'maxWait' in options; - maxWait = maxing ? nativeMax(toNumber$1(options.maxWait) || 0, wait) : maxWait; - trailing = 'trailing' in options ? !!options.trailing : trailing; - } + precision = precision === undefined ? 6 : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision)) : Math.max(0, Math.min(20, precision)); - function invokeFunc(time) { - var args = lastArgs, - thisArg = lastThis; - lastArgs = lastThis = undefined; - lastInvokeTime = time; - result = func.apply(thisArg, args); - return result; - } + function format(value) { + var valuePrefix = prefix, + valueSuffix = suffix, + i, + n, + c; - function leadingEdge(time) { - // Reset any `maxWait` timer. - lastInvokeTime = time; // Start the timer for the trailing edge. + if (type === "c") { + valueSuffix = formatType(value) + valueSuffix; + value = ""; + } else { + value = +value; // Determine the sign. -0 is not less than 0, but 1 / -0 is! - timerId = setTimeout(timerExpired, wait); // Invoke the leading edge. + var valueNegative = value < 0 || 1 / value < 0; // Perform the initial formatting. - return leading ? invokeFunc(time) : result; - } + value = isNaN(value) ? nan : formatType(Math.abs(value), precision); // Trim insignificant zeros. - function remainingWait(time) { - var timeSinceLastCall = time - lastCallTime, - timeSinceLastInvoke = time - lastInvokeTime, - timeWaiting = wait - timeSinceLastCall; - return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting; - } + if (trim) value = formatTrim(value); // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign. - function shouldInvoke(time) { - var timeSinceLastCall = time - lastCallTime, - timeSinceLastInvoke = time - lastInvokeTime; // Either this is the first call, activity has stopped and we're at the - // trailing edge, the system time has gone backwards and we're treating - // it as the trailing edge, or we've hit the `maxWait` limit. + if (valueNegative && +value === 0 && sign !== "+") valueNegative = false; // Compute the prefix and suffix. - return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait; - } + valuePrefix = (valueNegative ? sign === "(" ? sign : minus : sign === "-" || sign === "(" ? "" : sign) + valuePrefix; + valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : ""); // Break the formatted value into the integer âvalueâ part that can be + // grouped, and fractional or exponential âsuffixâ part that is not. - function timerExpired() { - var time = now$1(); + if (maybeSuffix) { + i = -1, n = value.length; - if (shouldInvoke(time)) { - return trailingEdge(time); - } // Restart the timer. + while (++i < n) { + if (c = value.charCodeAt(i), 48 > c || c > 57) { + valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix; + value = value.slice(0, i); + break; + } + } + } + } // If the fill character is not "0", grouping is applied before padding. - timerId = setTimeout(timerExpired, remainingWait(time)); - } + if (comma && !zero) value = group(value, Infinity); // Compute the padding. - function trailingEdge(time) { - timerId = undefined; // Only invoke if we have `lastArgs` which means `func` has been - // debounced at least once. + var length = valuePrefix.length + value.length + valueSuffix.length, + padding = length < width ? new Array(width - length + 1).join(fill) : ""; // If the fill character is "0", grouping is applied after padding. - if (trailing && lastArgs) { - return invokeFunc(time); - } + if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = ""; // Reconstruct the final output based on the desired alignment. - lastArgs = lastThis = undefined; - return result; - } + switch (align) { + case "<": + value = valuePrefix + value + valueSuffix + padding; + break; - function cancel() { - if (timerId !== undefined) { - clearTimeout(timerId); + case "=": + value = valuePrefix + padding + value + valueSuffix; + break; + + case "^": + value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); + break; + + default: + value = padding + valuePrefix + value + valueSuffix; + break; + } + + return numerals(value); } - lastInvokeTime = 0; - lastArgs = lastCallTime = lastThis = timerId = undefined; + format.toString = function () { + return specifier + ""; + }; + + return format; } - function flush() { - return timerId === undefined ? result : trailingEdge(now$1()); + function formatPrefix(specifier, value) { + var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)), + e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3, + k = Math.pow(10, -e), + prefix = prefixes[8 + e / 3]; + return function (value) { + return f(k * value) + prefix; + }; } - function debounced() { - var time = now$1(), - isInvoking = shouldInvoke(time); - lastArgs = arguments; - lastThis = this; - lastCallTime = time; + return { + format: newFormat, + formatPrefix: formatPrefix + }; + } - if (isInvoking) { - if (timerId === undefined) { - return leadingEdge(lastCallTime); - } + var locale; + var format; + var formatPrefix; + defaultLocale({ + thousands: ",", + grouping: [3], + currency: ["$", ""] + }); + function defaultLocale(definition) { + locale = formatLocale(definition); + format = locale.format; + formatPrefix = locale.formatPrefix; + return locale; + } - if (maxing) { - // Handle invocations in a tight loop. - clearTimeout(timerId); - timerId = setTimeout(timerExpired, wait); - return invokeFunc(lastCallTime); + function precisionFixed (step) { + return Math.max(0, -exponent(Math.abs(step))); + } + + function precisionPrefix (step, value) { + return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step))); + } + + function precisionRound (step, max) { + step = Math.abs(step), max = Math.abs(max) - step; + return Math.max(0, exponent(max) - exponent(step)) + 1; + } + + function tickFormat(start, stop, count, specifier) { + var step = tickStep(start, stop, count), + precision; + specifier = formatSpecifier(specifier == null ? ",f" : specifier); + + switch (specifier.type) { + case "s": + { + var value = Math.max(Math.abs(start), Math.abs(stop)); + if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision; + return formatPrefix(specifier, value); } - } - if (timerId === undefined) { - timerId = setTimeout(timerExpired, wait); - } + case "": + case "e": + case "g": + case "p": + case "r": + { + if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e"); + break; + } - return result; + case "f": + case "%": + { + if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2; + break; + } } - debounced.cancel = cancel; - debounced.flush = flush; - return debounced; + return format(specifier); } - /** Error message constants. */ - - var FUNC_ERROR_TEXT$1 = 'Expected a function'; - /** - * Creates a throttled function that only invokes `func` at most once per - * every `wait` milliseconds. The throttled function comes with a `cancel` - * method to cancel delayed `func` invocations and a `flush` method to - * immediately invoke them. Provide `options` to indicate whether `func` - * should be invoked on the leading and/or trailing edge of the `wait` - * timeout. The `func` is invoked with the last arguments provided to the - * throttled function. Subsequent calls to the throttled function return the - * result of the last `func` invocation. - * - * **Note:** If `leading` and `trailing` options are `true`, `func` is - * invoked on the trailing edge of the timeout only if the throttled function - * is invoked more than once during the `wait` timeout. - * - * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred - * until to the next tick, similar to `setTimeout` with a timeout of `0`. - * - * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) - * for details over the differences between `_.throttle` and `_.debounce`. - * - * @static - * @memberOf _ - * @since 0.1.0 - * @category Function - * @param {Function} func The function to throttle. - * @param {number} [wait=0] The number of milliseconds to throttle invocations to. - * @param {Object} [options={}] The options object. - * @param {boolean} [options.leading=true] - * Specify invoking on the leading edge of the timeout. - * @param {boolean} [options.trailing=true] - * Specify invoking on the trailing edge of the timeout. - * @returns {Function} Returns the new throttled function. - * @example - * - * // Avoid excessively updating the position while scrolling. - * jQuery(window).on('scroll', _.throttle(updatePosition, 100)); - * - * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. - * var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); - * jQuery(element).on('click', throttled); - * - * // Cancel the trailing throttled invocation. - * jQuery(window).on('popstate', throttled.cancel); - */ + function linearish(scale) { + var domain = scale.domain; - function throttle(func, wait, options) { - var leading = true, - trailing = true; + scale.ticks = function (count) { + var d = domain(); + return ticks(d[0], d[d.length - 1], count == null ? 10 : count); + }; - if (typeof func != 'function') { - throw new TypeError(FUNC_ERROR_TEXT$1); - } + scale.tickFormat = function (count, specifier) { + var d = domain(); + return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier); + }; - if (isObject$1(options)) { - leading = 'leading' in options ? !!options.leading : leading; - trailing = 'trailing' in options ? !!options.trailing : trailing; - } + scale.nice = function (count) { + if (count == null) count = 10; + var d = domain(); + var i0 = 0; + var i1 = d.length - 1; + var start = d[i0]; + var stop = d[i1]; + var prestep; + var step; + var maxIter = 10; - return debounce(func, wait, { - 'leading': leading, - 'maxWait': wait, - 'trailing': trailing - }); - } + if (stop < start) { + step = start, start = stop, stop = step; + step = i0, i0 = i1, i1 = step; + } - var hashes = createCommonjsModule(function (module, exports) { - /** - * jshashes - https://github.com/h2non/jshashes - * Released under the "New BSD" license - * - * Algorithms specification: - * - * MD5 - http://www.ietf.org/rfc/rfc1321.txt - * RIPEMD-160 - http://homes.esat.kuleuven.be/~bosselae/ripemd160.html - * SHA1 - http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf - * SHA256 - http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf - * SHA512 - http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf - * HMAC - http://www.ietf.org/rfc/rfc2104.txt - */ - (function () { - var Hashes; + while (maxIter-- > 0) { + step = tickIncrement(start, stop, count); - function utf8Encode(str) { - var x, - y, - output = '', - i = -1, - l; + if (step === prestep) { + d[i0] = start; + d[i1] = stop; + return domain(d); + } else if (step > 0) { + start = Math.floor(start / step) * step; + stop = Math.ceil(stop / step) * step; + } else if (step < 0) { + start = Math.ceil(start * step) / step; + stop = Math.floor(stop * step) / step; + } else { + break; + } - if (str && str.length) { - l = str.length; + prestep = step; + } - while ((i += 1) < l) { - /* Decode utf-16 surrogate pairs */ - x = str.charCodeAt(i); - y = i + 1 < l ? str.charCodeAt(i + 1) : 0; + return scale; + }; - if (0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF) { - x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF); - i += 1; - } - /* Encode output as utf-8 */ + return scale; + } + function linear() { + var scale = continuous(); + scale.copy = function () { + return copy(scale, linear()); + }; - if (x <= 0x7F) { - output += String.fromCharCode(x); - } else if (x <= 0x7FF) { - output += String.fromCharCode(0xC0 | x >>> 6 & 0x1F, 0x80 | x & 0x3F); - } else if (x <= 0xFFFF) { - output += String.fromCharCode(0xE0 | x >>> 12 & 0x0F, 0x80 | x >>> 6 & 0x3F, 0x80 | x & 0x3F); - } else if (x <= 0x1FFFFF) { - output += String.fromCharCode(0xF0 | x >>> 18 & 0x07, 0x80 | x >>> 12 & 0x3F, 0x80 | x >>> 6 & 0x3F, 0x80 | x & 0x3F); - } - } - } + initRange.apply(scale, arguments); + return linearish(scale); + } - return output; - } + // eslint-disable-next-line es/no-math-expm1 -- safe + var $expm1 = Math.expm1; + var exp$1 = Math.exp; - function utf8Decode(str) { - var i, - ac, - c1, - c2, - c3, - arr = [], - l; - i = ac = c1 = c2 = c3 = 0; + // `Math.expm1` method implementation + // https://tc39.es/ecma262/#sec-math.expm1 + var mathExpm1 = (!$expm1 + // Old FF bug + || $expm1(10) > 22025.465794806719 || $expm1(10) < 22025.4657948067165168 + // Tor Browser bug + || $expm1(-2e-17) != -2e-17 + ) ? function expm1(x) { + return (x = +x) == 0 ? x : x > -1e-6 && x < 1e-6 ? x + x * x / 2 : exp$1(x) - 1; + } : $expm1; - if (str && str.length) { - l = str.length; - str += ''; + function quantize() { + var x0 = 0, + x1 = 1, + n = 1, + domain = [0.5], + range = [0, 1], + unknown; - while (i < l) { - c1 = str.charCodeAt(i); - ac += 1; + function scale(x) { + return x != null && x <= x ? range[bisectRight(domain, x, 0, n)] : unknown; + } - if (c1 < 128) { - arr[ac] = String.fromCharCode(c1); - i += 1; - } else if (c1 > 191 && c1 < 224) { - c2 = str.charCodeAt(i + 1); - arr[ac] = String.fromCharCode((c1 & 31) << 6 | c2 & 63); - i += 2; - } else { - c2 = str.charCodeAt(i + 1); - c3 = str.charCodeAt(i + 2); - arr[ac] = String.fromCharCode((c1 & 15) << 12 | (c2 & 63) << 6 | c3 & 63); - i += 3; - } - } - } + function rescale() { + var i = -1; + domain = new Array(n); - return arr.join(''); + while (++i < n) { + domain[i] = ((i + 1) * x1 - (i - n) * x0) / (n + 1); } - /** - * Add integers, wrapping at 2^32. This uses 16-bit operations internally - * to work around bugs in some JS interpreters. - */ + return scale; + } - function safe_add(x, y) { - var lsw = (x & 0xFFFF) + (y & 0xFFFF), - msw = (x >> 16) + (y >> 16) + (lsw >> 16); - return msw << 16 | lsw & 0xFFFF; - } - /** - * Bitwise rotate a 32-bit number to the left. - */ + scale.domain = function (_) { + var _ref, _ref2; + return arguments.length ? ((_ref = _, _ref2 = _slicedToArray(_ref, 2), x0 = _ref2[0], x1 = _ref2[1], _ref), x0 = +x0, x1 = +x1, rescale()) : [x0, x1]; + }; - function bit_rol(num, cnt) { - return num << cnt | num >>> 32 - cnt; - } - /** - * Convert a raw string to a hex string - */ + scale.range = function (_) { + return arguments.length ? (n = (range = Array.from(_)).length - 1, rescale()) : range.slice(); + }; + scale.invertExtent = function (y) { + var i = range.indexOf(y); + return i < 0 ? [NaN, NaN] : i < 1 ? [x0, domain[0]] : i >= n ? [domain[n - 1], x1] : [domain[i - 1], domain[i]]; + }; - function rstr2hex(input, hexcase) { - var hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef', - output = '', - x, - i = 0, - l = input.length; + scale.unknown = function (_) { + return arguments.length ? (unknown = _, scale) : scale; + }; - for (; i < l; i += 1) { - x = input.charCodeAt(i); - output += hex_tab.charAt(x >>> 4 & 0x0F) + hex_tab.charAt(x & 0x0F); - } + scale.thresholds = function () { + return domain.slice(); + }; - return output; - } - /** - * Convert an array of big-endian words to a string - */ + scale.copy = function () { + return quantize().domain([x0, x1]).range(range).unknown(unknown); + }; + return initRange.apply(linearish(scale), arguments); + } - function binb2rstr(input) { - var i, - l = input.length * 32, - output = ''; + // https://github.com/tc39/proposal-string-pad-start-end - for (i = 0; i < l; i += 8) { - output += String.fromCharCode(input[i >> 5] >>> 24 - i % 32 & 0xFF); - } - return output; - } - /** - * Convert an array of little-endian words to a string - */ - function binl2rstr(input) { - var i, - l = input.length * 32, - output = ''; + var ceil = Math.ceil; - for (i = 0; i < l; i += 8) { - output += String.fromCharCode(input[i >> 5] >>> i % 32 & 0xFF); - } + // `String.prototype.{ padStart, padEnd }` methods implementation + var createMethod = function (IS_END) { + return function ($this, maxLength, fillString) { + var S = String(requireObjectCoercible($this)); + var stringLength = S.length; + var fillStr = fillString === undefined ? ' ' : String(fillString); + var intMaxLength = toLength(maxLength); + var fillLen, stringFiller; + if (intMaxLength <= stringLength || fillStr == '') return S; + fillLen = intMaxLength - stringLength; + stringFiller = stringRepeat.call(fillStr, ceil(fillLen / fillStr.length)); + if (stringFiller.length > fillLen) stringFiller = stringFiller.slice(0, fillLen); + return IS_END ? S + stringFiller : stringFiller + S; + }; + }; - return output; - } - /** - * Convert a raw string to an array of little-endian words - * Characters >255 have their high-byte silently ignored. - */ + var stringPad = { + // `String.prototype.padStart` method + // https://tc39.es/ecma262/#sec-string.prototype.padstart + start: createMethod(false), + // `String.prototype.padEnd` method + // https://tc39.es/ecma262/#sec-string.prototype.padend + end: createMethod(true) + }; + var padStart = stringPad.start; - function rstr2binl(input) { - var i, - l = input.length * 8, - output = Array(input.length >> 2), - lo = output.length; + var abs$1 = Math.abs; + var DatePrototype = Date.prototype; + var getTime = DatePrototype.getTime; + var nativeDateToISOString = DatePrototype.toISOString; - for (i = 0; i < lo; i += 1) { - output[i] = 0; - } + // `Date.prototype.toISOString` method implementation + // https://tc39.es/ecma262/#sec-date.prototype.toisostring + // PhantomJS / old WebKit fails here: + var dateToIsoString = (fails(function () { + return nativeDateToISOString.call(new Date(-5e13 - 1)) != '0385-07-25T07:06:39.999Z'; + }) || !fails(function () { + nativeDateToISOString.call(new Date(NaN)); + })) ? function toISOString() { + if (!isFinite(getTime.call(this))) throw RangeError('Invalid time value'); + var date = this; + var year = date.getUTCFullYear(); + var milliseconds = date.getUTCMilliseconds(); + var sign = year < 0 ? '-' : year > 9999 ? '+' : ''; + return sign + padStart(abs$1(year), sign ? 6 : 4, 0) + + '-' + padStart(date.getUTCMonth() + 1, 2, 0) + + '-' + padStart(date.getUTCDate(), 2, 0) + + 'T' + padStart(date.getUTCHours(), 2, 0) + + ':' + padStart(date.getUTCMinutes(), 2, 0) + + ':' + padStart(date.getUTCSeconds(), 2, 0) + + '.' + padStart(milliseconds, 3, 0) + + 'Z'; + } : nativeDateToISOString; - for (i = 0; i < l; i += 8) { - output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << i % 32; - } + // `Date.prototype.toISOString` method + // https://tc39.es/ecma262/#sec-date.prototype.toisostring + // PhantomJS / old WebKit has a broken implementations + _export({ target: 'Date', proto: true, forced: Date.prototype.toISOString !== dateToIsoString }, { + toISOString: dateToIsoString + }); - return output; - } - /** - * Convert a raw string to an array of big-endian words - * Characters >255 have their high-byte silently ignored. - */ + function behaviorBreathe() { + var duration = 800; + var steps = 4; + var selector = '.selected.shadow, .selected .shadow'; + var _selected = select(null); - function rstr2binb(input) { - var i, - l = input.length * 8, - output = Array(input.length >> 2), - lo = output.length; + var _classed = ''; + var _params = {}; + var _done = false; - for (i = 0; i < lo; i += 1) { - output[i] = 0; - } + var _timer; - for (i = 0; i < l; i += 8) { - output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << 24 - i % 32; - } + function ratchetyInterpolator(a, b, steps, units) { + a = parseFloat(a); + b = parseFloat(b); + var sample = quantize().domain([0, 1]).range(d3_quantize(d3_interpolateNumber(a, b), steps)); + return function (t) { + return String(sample(t)) + (units || ''); + }; + } - return output; - } - /** - * Convert a raw string to an arbitrary string encoding - */ + function reset(selection) { + selection.style('stroke-opacity', null).style('stroke-width', null).style('fill-opacity', null).style('r', null); + } + function setAnimationParams(transition, fromTo) { + var toFrom = fromTo === 'from' ? 'to' : 'from'; + transition.styleTween('stroke-opacity', function (d) { + return ratchetyInterpolator(_params[d.id][toFrom].opacity, _params[d.id][fromTo].opacity, steps); + }).styleTween('stroke-width', function (d) { + return ratchetyInterpolator(_params[d.id][toFrom].width, _params[d.id][fromTo].width, steps, 'px'); + }).styleTween('fill-opacity', function (d) { + return ratchetyInterpolator(_params[d.id][toFrom].opacity, _params[d.id][fromTo].opacity, steps); + }).styleTween('r', function (d) { + return ratchetyInterpolator(_params[d.id][toFrom].width, _params[d.id][fromTo].width, steps, 'px'); + }); + } - function rstr2any(input, encoding) { - var divisor = encoding.length, - remainders = Array(), - i, - q, - x, - ld, - quotient, - dividend, - output, - full_length; - /* Convert to an array of 16-bit big-endian values, forming the dividend */ + function calcAnimationParams(selection) { + selection.call(reset).each(function (d) { + var s = select(this); + var tag = s.node().tagName; + var p = { + 'from': {}, + 'to': {} + }; + var opacity; + var width; // determine base opacity and width - dividend = Array(Math.ceil(input.length / 2)); - ld = dividend.length; + if (tag === 'circle') { + opacity = parseFloat(s.style('fill-opacity') || 0.5); + width = parseFloat(s.style('r') || 15.5); + } else { + opacity = parseFloat(s.style('stroke-opacity') || 0.7); + width = parseFloat(s.style('stroke-width') || 10); + } // calculate from/to interpolation params.. - for (i = 0; i < ld; i += 1) { - dividend[i] = input.charCodeAt(i * 2) << 8 | input.charCodeAt(i * 2 + 1); - } - /** - * Repeatedly perform a long division. The binary array forms the dividend, - * the length of the encoding is the divisor. Once computed, the quotient - * forms the dividend for the next step. We stop when the dividend is zerHashes. - * All remainders are stored for later use. - */ + p.tag = tag; + p.from.opacity = opacity * 0.6; + p.to.opacity = opacity * 1.25; + p.from.width = width * 0.7; + p.to.width = width * (tag === 'circle' ? 1.5 : 1); + _params[d.id] = p; + }); + } - while (dividend.length > 0) { - quotient = Array(); - x = 0; + function run(surface, fromTo) { + var toFrom = fromTo === 'from' ? 'to' : 'from'; + var currSelected = surface.selectAll(selector); + var currClassed = surface.attr('class'); - for (i = 0; i < dividend.length; i += 1) { - x = (x << 16) + dividend[i]; - q = Math.floor(x / divisor); - x -= q * divisor; + if (_done || currSelected.empty()) { + _selected.call(reset); - if (quotient.length > 0 || q > 0) { - quotient[quotient.length] = q; - } - } + _selected = select(null); + return; + } - remainders[remainders.length] = x; - dividend = quotient; - } - /* Convert the remainders to the output string */ + if (!fastDeepEqual(currSelected.data(), _selected.data()) || currClassed !== _classed) { + _selected.call(reset); + _classed = currClassed; + _selected = currSelected.call(calcAnimationParams); + } - output = ''; + var didCallNextRun = false; - for (i = remainders.length - 1; i >= 0; i--) { - output += encoding.charAt(remainders[i]); - } - /* Append leading zero equivalents */ + _selected.transition().duration(duration).call(setAnimationParams, fromTo).on('end', function () { + // `end` event is called for each selected element, but we want + // it to run only once + if (!didCallNextRun) { + surface.call(run, toFrom); + didCallNextRun = true; + } // if entity was deselected, remove breathe styling - full_length = Math.ceil(input.length * 8 / (Math.log(encoding.length) / Math.log(2))); + if (!select(this).classed('selected')) { + reset(select(this)); + } + }); + } - for (i = output.length; i < full_length; i += 1) { - output = encoding[0] + output; + function behavior(surface) { + _done = false; + _timer = timer(function () { + // wait for elements to actually become selected + if (surface.selectAll(selector).empty()) { + return false; } - return output; - } - /** - * Convert a raw string to a base-64 string - */ + surface.call(run, 'from'); + _timer.stop(); - function rstr2b64(input, b64pad) { - var tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', - output = '', - len = input.length, - i, - j, - triplet; - b64pad = b64pad || '='; + return true; + }, 20); + } - for (i = 0; i < len; i += 3) { - triplet = input.charCodeAt(i) << 16 | (i + 1 < len ? input.charCodeAt(i + 1) << 8 : 0) | (i + 2 < len ? input.charCodeAt(i + 2) : 0); + behavior.restartIfNeeded = function (surface) { + if (_selected.empty()) { + surface.call(run, 'from'); - for (j = 0; j < 4; j += 1) { - if (i * 8 + j * 6 > input.length * 8) { - output += b64pad; - } else { - output += tab.charAt(triplet >>> 6 * (3 - j) & 0x3F); - } - } + if (_timer) { + _timer.stop(); } + } + }; - return output; + behavior.off = function () { + _done = true; + + if (_timer) { + _timer.stop(); } - Hashes = { - /** - * @property {String} version - * @readonly - */ - VERSION: '1.0.6', + _selected.interrupt().call(reset); + }; - /** - * @member Hashes - * @class Base64 - * @constructor - */ - Base64: function Base64() { - // private properties - var tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', - pad = '=', - // URL encoding support @todo - utf8 = true; // by default enable UTF-8 support encoding - // public method for encoding + return behavior; + } - this.encode = function (input) { - var i, - j, - triplet, - output = '', - len = input.length; - pad = pad || '='; - input = utf8 ? utf8Encode(input) : input; + /* Creates a keybinding behavior for an operation */ + function behaviorOperation(context) { + var _operation; - for (i = 0; i < len; i += 3) { - triplet = input.charCodeAt(i) << 16 | (i + 1 < len ? input.charCodeAt(i + 1) << 8 : 0) | (i + 2 < len ? input.charCodeAt(i + 2) : 0); + function keypress(d3_event) { + // prevent operations during low zoom selection + if (!context.map().withinEditableZoom()) return; + if (_operation.availableForKeypress && !_operation.availableForKeypress()) return; + d3_event.preventDefault(); - for (j = 0; j < 4; j += 1) { - if (i * 8 + j * 6 > len * 8) { - output += pad; - } else { - output += tab.charAt(triplet >>> 6 * (3 - j) & 0x3F); - } - } - } + var disabled = _operation.disabled(); - return output; - }; // public method for decoding + if (disabled) { + context.ui().flash.duration(4000).iconName('#iD-operation-' + _operation.id).iconClass('operation disabled').label(_operation.tooltip)(); + } else { + context.ui().flash.duration(2000).iconName('#iD-operation-' + _operation.id).iconClass('operation').label(_operation.annotation() || _operation.title)(); + if (_operation.point) _operation.point(null); + _operation(); + } + } - this.decode = function (input) { - // var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; - var i, - o1, - o2, - o3, - h1, - h2, - h3, - h4, - bits, - ac, - dec = '', - arr = []; + function behavior() { + if (_operation && _operation.available()) { + context.keybinding().on(_operation.keys, keypress); + } - if (!input) { - return input; - } + return behavior; + } - i = ac = 0; - input = input.replace(new RegExp('\\' + pad, 'gi'), ''); // use '=' - //input += ''; + behavior.off = function () { + context.keybinding().off(_operation.keys); + }; - do { - // unpack four hexets into three octets using index points in b64 - h1 = tab.indexOf(input.charAt(i += 1)); - h2 = tab.indexOf(input.charAt(i += 1)); - h3 = tab.indexOf(input.charAt(i += 1)); - h4 = tab.indexOf(input.charAt(i += 1)); - bits = h1 << 18 | h2 << 12 | h3 << 6 | h4; - o1 = bits >> 16 & 0xff; - o2 = bits >> 8 & 0xff; - o3 = bits & 0xff; - ac += 1; + behavior.which = function (_) { + if (!arguments.length) return _operation; + _operation = _; + return behavior; + }; - if (h3 === 64) { - arr[ac] = String.fromCharCode(o1); - } else if (h4 === 64) { - arr[ac] = String.fromCharCode(o1, o2); - } else { - arr[ac] = String.fromCharCode(o1, o2, o3); - } - } while (i < input.length); + return behavior; + } - dec = arr.join(''); - dec = utf8 ? utf8Decode(dec) : dec; - return dec; - }; // set custom pad string + function operationCircularize(context, selectedIDs) { + var _extent; + var _actions = selectedIDs.map(getAction).filter(Boolean); - this.setPad = function (str) { - pad = str || pad; - return this; - }; // set custom tab string characters + var _amount = _actions.length === 1 ? 'single' : 'multiple'; + var _coords = utilGetAllNodes(selectedIDs, context.graph()).map(function (n) { + return n.loc; + }); - this.setTab = function (str) { - tab = str || tab; - return this; - }; + function getAction(entityID) { + var entity = context.entity(entityID); + if (entity.type !== 'way' || new Set(entity.nodes).size <= 1) return null; - this.setUTF8 = function (bool) { - if (typeof bool === 'boolean') { - utf8 = bool; - } + if (!_extent) { + _extent = entity.extent(context.graph()); + } else { + _extent = _extent.extend(entity.extent(context.graph())); + } - return this; - }; - }, + return actionCircularize(entityID, context.projection); + } - /** - * CRC-32 calculation - * @member Hashes - * @method CRC32 - * @static - * @param {String} str Input String - * @return {String} - */ - CRC32: function CRC32(str) { - var crc = 0, - x = 0, - y = 0, - table, - i, - iTop; - str = utf8Encode(str); - table = ['00000000 77073096 EE0E612C 990951BA 076DC419 706AF48F E963A535 9E6495A3 0EDB8832 ', '79DCB8A4 E0D5E91E 97D2D988 09B64C2B 7EB17CBD E7B82D07 90BF1D91 1DB71064 6AB020F2 F3B97148 ', '84BE41DE 1ADAD47D 6DDDE4EB F4D4B551 83D385C7 136C9856 646BA8C0 FD62F97A 8A65C9EC 14015C4F ', '63066CD9 FA0F3D63 8D080DF5 3B6E20C8 4C69105E D56041E4 A2677172 3C03E4D1 4B04D447 D20D85FD ', 'A50AB56B 35B5A8FA 42B2986C DBBBC9D6 ACBCF940 32D86CE3 45DF5C75 DCD60DCF ABD13D59 26D930AC ', '51DE003A C8D75180 BFD06116 21B4F4B5 56B3C423 CFBA9599 B8BDA50F 2802B89E 5F058808 C60CD9B2 ', 'B10BE924 2F6F7C87 58684C11 C1611DAB B6662D3D 76DC4190 01DB7106 98D220BC EFD5102A 71B18589 ', '06B6B51F 9FBFE4A5 E8B8D433 7807C9A2 0F00F934 9609A88E E10E9818 7F6A0DBB 086D3D2D 91646C97 ', 'E6635C01 6B6B51F4 1C6C6162 856530D8 F262004E 6C0695ED 1B01A57B 8208F4C1 F50FC457 65B0D9C6 ', '12B7E950 8BBEB8EA FCB9887C 62DD1DDF 15DA2D49 8CD37CF3 FBD44C65 4DB26158 3AB551CE A3BC0074 ', 'D4BB30E2 4ADFA541 3DD895D7 A4D1C46D D3D6F4FB 4369E96A 346ED9FC AD678846 DA60B8D0 44042D73 ', '33031DE5 AA0A4C5F DD0D7CC9 5005713C 270241AA BE0B1010 C90C2086 5768B525 206F85B3 B966D409 ', 'CE61E49F 5EDEF90E 29D9C998 B0D09822 C7D7A8B4 59B33D17 2EB40D81 B7BD5C3B C0BA6CAD EDB88320 ', '9ABFB3B6 03B6E20C 74B1D29A EAD54739 9DD277AF 04DB2615 73DC1683 E3630B12 94643B84 0D6D6A3E ', '7A6A5AA8 E40ECF0B 9309FF9D 0A00AE27 7D079EB1 F00F9344 8708A3D2 1E01F268 6906C2FE F762575D ', '806567CB 196C3671 6E6B06E7 FED41B76 89D32BE0 10DA7A5A 67DD4ACC F9B9DF6F 8EBEEFF9 17B7BE43 ', '60B08ED5 D6D6A3E8 A1D1937E 38D8C2C4 4FDFF252 D1BB67F1 A6BC5767 3FB506DD 48B2364B D80D2BDA ', 'AF0A1B4C 36034AF6 41047A60 DF60EFC3 A867DF55 316E8EEF 4669BE79 CB61B38C BC66831A 256FD2A0 ', '5268E236 CC0C7795 BB0B4703 220216B9 5505262F C5BA3BBE B2BD0B28 2BB45A92 5CB36A04 C2D7FFA7 ', 'B5D0CF31 2CD99E8B 5BDEAE1D 9B64C2B0 EC63F226 756AA39C 026D930A 9C0906A9 EB0E363F 72076785 ', '05005713 95BF4A82 E2B87A14 7BB12BAE 0CB61B38 92D28E9B E5D5BE0D 7CDCEFB7 0BDBDF21 86D3D2D4 ', 'F1D4E242 68DDB3F8 1FDA836E 81BE16CD F6B9265B 6FB077E1 18B74777 88085AE6 FF0F6A70 66063BCA ', '11010B5C 8F659EFF F862AE69 616BFFD3 166CCF45 A00AE278 D70DD2EE 4E048354 3903B3C2 A7672661 ', 'D06016F7 4969474D 3E6E77DB AED16A4A D9D65ADC 40DF0B66 37D83BF0 A9BCAE53 DEBB9EC5 47B2CF7F ', '30B5FFE9 BDBDF21C CABAC28A 53B39330 24B4A3A6 BAD03605 CDD70693 54DE5729 23D967BF B3667A2E ', 'C4614AB8 5D681B02 2A6F2B94 B40BBE37 C30C8EA1 5A05DF1B 2D02EF8D'].join(''); - crc = crc ^ -1; + var operation = function operation() { + if (!_actions.length) return; - for (i = 0, iTop = str.length; i < iTop; i += 1) { - y = (crc ^ str.charCodeAt(i)) & 0xFF; - x = '0x' + table.substr(y * 9, 8); - crc = crc >>> 8 ^ x; - } // always return a positive number (that's what >>> 0 does) + var combinedAction = function combinedAction(graph, t) { + _actions.forEach(function (action) { + if (!action.disabled(graph)) { + graph = action(graph, t); + } + }); + return graph; + }; - return (crc ^ -1) >>> 0; - }, + combinedAction.transitionable = true; + context.perform(combinedAction, operation.annotation()); + window.setTimeout(function () { + context.validator().validate(); + }, 300); // after any transition + }; - /** - * @member Hashes - * @class MD5 - * @constructor - * @param {Object} [config] - * - * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message - * Digest Algorithm, as defined in RFC 1321. - * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009 - * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet - * See
')); - } else { - var localeID = false; - Object.values(d.entities).forEach(function (res) { - if (res.missing !== '') { - var title = res.sitelinks.wiki.title; + continue; + } // code - if (title === rtypeSitelink) { - _wikibaseCache[rtypeSitelink] = res; - result.rtype = res; - } else if (title === keySitelink) { - _wikibaseCache[keySitelink] = res; - result.key = res; - } else if (title === tagSitelink) { - _wikibaseCache[tagSitelink] = res; - result.tag = res; - } else if (title === localeSitelink) { - localeID = res.id; - } else { - console.log('Unexpected title ' + title); // eslint-disable-line no-console - } + + if (token = this.tokenizer.code(src)) { + src = src.substring(token.raw.length); + lastToken = tokens[tokens.length - 1]; // An indented code block cannot interrupt a paragraph. + + if (lastToken && lastToken.type === 'paragraph') { + lastToken.raw += '\n' + token.raw; + lastToken.text += '\n' + token.text; + } else { + tokens.push(token); } - }); - if (localeSitelink) { - // If locale ID is not found, store false to prevent repeated queries - that.addLocale(params.langCodes[0], localeID); - } + continue; + } // fences - callback(null, result); - } - }); - }, - // - // Pass params object of the form: - // { - // key: 'string', // required - // value: 'string' // optional - // } - // - // Get an result object used to display tag documentation - // { - // title: 'string', - // description: 'string', - // editURL: 'string', - // imageURL: 'string', - // wiki: { title: 'string', text: 'string', url: 'string' } - // } - // - getDocs: function getDocs(params, callback) { - var that = this; - var langCodes = _mainLocalizer.localeCodes().map(function (code) { - return code.toLowerCase(); - }); - params.langCodes = langCodes; - this.getEntity(params, function (err, data) { - if (err) { - callback(err); - return; - } - var entity = data.rtype || data.tag || data.key; + if (token = this.tokenizer.fences(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // heading - if (!entity) { - callback('No entity'); - return; - } - var i; - var description; + if (token = this.tokenizer.heading(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // table no leading pipe (gfm) - for (i in langCodes) { - var _code = langCodes[i]; - if (entity.descriptions[_code] && entity.descriptions[_code].language === _code) { - description = entity.descriptions[_code]; - break; - } - } + if (token = this.tokenizer.nptable(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // hr - if (!description && Object.values(entity.descriptions).length) description = Object.values(entity.descriptions)[0]; // prepare result - var result = { - title: entity.title, - description: description ? description.value : '', - descriptionLocaleCode: description ? description.language : '', - editURL: 'https://wiki.openstreetmap.org/wiki/' + entity.title - }; // add image + if (token = this.tokenizer.hr(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // blockquote - if (entity.claims) { - var imageroot; - var image = that.claimToValue(entity, 'P4', langCodes[0]); - if (image) { - imageroot = 'https://commons.wikimedia.org/w/index.php'; - } else { - image = that.claimToValue(entity, 'P28', langCodes[0]); + if (token = this.tokenizer.blockquote(src)) { + src = src.substring(token.raw.length); + token.tokens = this.blockTokens(token.text, [], top); + tokens.push(token); + continue; + } // list - if (image) { - imageroot = 'https://wiki.openstreetmap.org/w/index.php'; + + if (token = this.tokenizer.list(src)) { + src = src.substring(token.raw.length); + l = token.items.length; + + for (i = 0; i < l; i++) { + token.items[i].tokens = this.blockTokens(token.items[i].text, [], false); } - } - if (imageroot && image) { - result.imageURL = imageroot + '?' + utilQsString({ - title: 'Special:Redirect/file/' + image, - width: 400 - }); - } - } // Try to get a wiki page from tag data item first, followed by the corresponding key data item. - // If neither tag nor key data item contain a wiki page in the needed language nor English, - // get the first found wiki page from either the tag or the key item. + tokens.push(token); + continue; + } // html - var rtypeWiki = that.monolingualClaimToValueObj(data.rtype, 'P31'); - var tagWiki = that.monolingualClaimToValueObj(data.tag, 'P31'); - var keyWiki = that.monolingualClaimToValueObj(data.key, 'P31'); - var wikis = [rtypeWiki, tagWiki, keyWiki]; + if (token = this.tokenizer.html(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // def - for (i in wikis) { - var wiki = wikis[i]; - for (var j in langCodes) { - var code = langCodes[j]; - var referenceId = langCodes[0].split('-')[0] !== 'en' && code.split('-')[0] === 'en' ? 'inspector.wiki_en_reference' : 'inspector.wiki_reference'; - var info = getWikiInfo(wiki, code, referenceId); + if (top && (token = this.tokenizer.def(src))) { + src = src.substring(token.raw.length); - if (info) { - result.wiki = info; - break; + if (!this.tokens.links[token.tag]) { + this.tokens.links[token.tag] = { + href: token.href, + title: token.title + }; } - } - if (result.wiki) break; - } + continue; + } // table (gfm) - callback(null, result); // Helper method to get wiki info if a given language exists - function getWikiInfo(wiki, langCode, tKey) { - if (wiki && wiki[langCode]) { - return { - title: wiki[langCode], - text: tKey, - url: 'https://wiki.openstreetmap.org/wiki/' + wiki[langCode] - }; + if (token = this.tokenizer.table(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // lheading + + + if (token = this.tokenizer.lheading(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // top-level paragraph + + + if (top && (token = this.tokenizer.paragraph(src))) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // text + + + if (token = this.tokenizer.text(src)) { + src = src.substring(token.raw.length); + lastToken = tokens[tokens.length - 1]; + + if (lastToken && lastToken.type === 'text') { + lastToken.raw += '\n' + token.raw; + lastToken.text += '\n' + token.text; + } else { + tokens.push(token); + } + + continue; } - } - }); - }, - addLocale: function addLocale(langCode, qid) { - // Makes it easier to unit test - _localeIDs[langCode] = qid; - }, - apibase: function apibase(val) { - if (!arguments.length) return _apibase; - _apibase = val; - return this; - } - }; - var jsonpCache = {}; - window.jsonpCache = jsonpCache; - function jsonpRequest(url, callback) { - var request = { - abort: function abort() {} - }; + if (src) { + var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0); - if (window.JSONP_FIX) { - if (window.JSONP_DELAY === 0) { - callback(window.JSONP_FIX); - } else { - var t = window.setTimeout(function () { - callback(window.JSONP_FIX); - }, window.JSONP_DELAY || 0); + if (this.options.silent) { + console.error(errMsg); + break; + } else { + throw new Error(errMsg); + } + } + } - request.abort = function () { - window.clearTimeout(t); - }; + return tokens; } + }, { + key: "inline", + value: function inline(tokens) { + var i, j, k, l2, row, token; + var l = tokens.length; - return request; - } + for (i = 0; i < l; i++) { + token = tokens[i]; - function rand() { - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; - var c = ''; - var i = -1; + switch (token.type) { + case 'paragraph': + case 'text': + case 'heading': + { + token.tokens = []; + this.inlineTokens(token.text, token.tokens); + break; + } - while (++i < 15) { - c += chars.charAt(Math.floor(Math.random() * 52)); - } + case 'table': + { + token.tokens = { + header: [], + cells: [] + }; // header - return c; - } + l2 = token.header.length; - function create(url) { - var e = url.match(/callback=(\w+)/); - var c = e ? e[1] : rand(); + for (j = 0; j < l2; j++) { + token.tokens.header[j] = []; + this.inlineTokens(token.header[j], token.tokens.header[j]); + } // cells - jsonpCache[c] = function (data) { - if (jsonpCache[c]) { - callback(data); - } - finalize(); - }; + l2 = token.cells.length; - function finalize() { - delete jsonpCache[c]; - script.remove(); - } + for (j = 0; j < l2; j++) { + row = token.cells[j]; + token.tokens.cells[j] = []; - request.abort = finalize; - return 'jsonpCache.' + c; - } + for (k = 0; k < row.length; k++) { + token.tokens.cells[j][k] = []; + this.inlineTokens(row[k], token.tokens.cells[j][k]); + } + } - var cb = create(url); - var script = select('head').append('script').attr('type', 'text/javascript').attr('src', url.replace(/(\{|%7B)callback(\}|%7D)/, cb)); - return request; - } + break; + } + + case 'blockquote': + { + this.inline(token.tokens); + break; + } + + case 'list': + { + l2 = token.items.length; + + for (j = 0; j < l2; j++) { + this.inline(token.items[j].tokens); + } + + break; + } + } + } - var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?'; - var streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/'; - var bubbleAppKey = 'AuftgJsO0Xs8Ts4M1xZUQJQXJNsvmh3IV8DkNieCiy3tCwCUMq76-WpkrBtNAuEm'; - var pannellumViewerCSS = 'pannellum-streetside/pannellum.css'; - var pannellumViewerJS = 'pannellum-streetside/pannellum.js'; - var maxResults$2 = 2000; - var tileZoom$2 = 16.5; - var tiler$6 = utilTiler().zoomExtent([tileZoom$2, tileZoom$2]).skipNullIsland(true); - var dispatch$7 = dispatch('loadedImages', 'viewerChanged'); - var minHfov = 10; // zoom in degrees: 20, 10, 5 + return tokens; + } + /** + * Lexing/Compiling + */ - var maxHfov = 90; // zoom out degrees + }, { + key: "inlineTokens", + value: function inlineTokens(src) { + var tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; + var inLink = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + var inRawBlock = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + var token, lastToken; // String with links masked to avoid interference with em and strong - var defaultHfov = 45; - var _hires = false; - var _resolution = 512; // higher numbers are slower - 512, 1024, 2048, 4096 + var maskedSrc = src; + var match; + var keepPrevChar, prevChar; // Mask out reflinks - var _currScene = 0; + if (this.tokens.links) { + var links = Object.keys(this.tokens.links); - var _ssCache; + if (links.length > 0) { + while ((match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) != null) { + if (links.includes(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) { + maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex); + } + } + } + } // Mask out other blocks - var _pannellumViewer; - var _sceneOptions = { - showFullscreenCtrl: false, - autoLoad: true, - compass: true, - yaw: 0, - minHfov: minHfov, - maxHfov: maxHfov, - hfov: defaultHfov, - type: 'cubemap', - cubeMap: [] - }; + while ((match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null) { + maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex); + } // Mask out escaped em & strong delimiters - var _loadViewerPromise$2; - /** - * abortRequest(). - */ + while ((match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null) { + maskedSrc = maskedSrc.slice(0, match.index) + '++' + maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex); + } - function abortRequest$6(i) { - i.abort(); - } - /** - * localeTimeStamp(). - */ + while (src) { + if (!keepPrevChar) { + prevChar = ''; + } + keepPrevChar = false; // escape - function localeTimestamp(s) { - if (!s) return null; - var options = { - day: 'numeric', - month: 'short', - year: 'numeric' - }; - var d = new Date(s); - if (isNaN(d.getTime())) return null; - return d.toLocaleString(_mainLocalizer.localeCode(), options); - } - /** - * loadTiles() wraps the process of generating tiles and then fetching image points for each tile. - */ + if (token = this.tokenizer.escape(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // tag - function loadTiles$2(which, url, projection, margin) { - var tiles = tiler$6.margin(margin).getTiles(projection); // abort inflight requests that are no longer needed + if (token = this.tokenizer.tag(src, inLink, inRawBlock)) { + src = src.substring(token.raw.length); + inLink = token.inLink; + inRawBlock = token.inRawBlock; + var _lastToken = tokens[tokens.length - 1]; - var cache = _ssCache[which]; - Object.keys(cache.inflight).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k.indexOf(tile.id + ',') === 0; - }); + if (_lastToken && token.type === 'text' && _lastToken.type === 'text') { + _lastToken.raw += token.raw; + _lastToken.text += token.text; + } else { + tokens.push(token); + } - if (!wanted) { - abortRequest$6(cache.inflight[k]); - delete cache.inflight[k]; - } - }); - tiles.forEach(function (tile) { - return loadNextTilePage$2(which, url, tile); - }); - } - /** - * loadNextTilePage() load data for the next tile page in line. - */ + continue; + } // link - function loadNextTilePage$2(which, url, tile) { - var cache = _ssCache[which]; - var nextPage = cache.nextPage[tile.id] || 0; - var id = tile.id + ',' + String(nextPage); - if (cache.loaded[id] || cache.inflight[id]) return; - cache.inflight[id] = getBubbles(url, tile, function (bubbles) { - cache.loaded[id] = true; - delete cache.inflight[id]; - if (!bubbles) return; // [].shift() removes the first element, some statistics info, not a bubble point + if (token = this.tokenizer.link(src)) { + src = src.substring(token.raw.length); - bubbles.shift(); - var features = bubbles.map(function (bubble) { - if (cache.points[bubble.id]) return null; // skip duplicates + if (token.type === 'link') { + token.tokens = this.inlineTokens(token.text, [], true, inRawBlock); + } - var loc = [bubble.lo, bubble.la]; - var d = { - loc: loc, - key: bubble.id, - ca: bubble.he, - captured_at: bubble.cd, - captured_by: 'microsoft', - // nbn: bubble.nbn, - // pbn: bubble.pbn, - // ad: bubble.ad, - // rn: bubble.rn, - pr: bubble.pr, - // previous - ne: bubble.ne, - // next - pano: true, - sequenceKey: null - }; - cache.points[bubble.id] = d; // a sequence starts here + tokens.push(token); + continue; + } // reflink, nolink - if (bubble.pr === undefined) { - cache.leaders.push(bubble.id); - } - return { - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1], - data: d - }; - }).filter(Boolean); - cache.rtree.load(features); - connectSequences(); + if (token = this.tokenizer.reflink(src, this.tokens.links)) { + src = src.substring(token.raw.length); + var _lastToken2 = tokens[tokens.length - 1]; - if (which === 'bubbles') { - dispatch$7.call('loadedImages'); - } - }); - } // call this sometimes to connect the bubbles into sequences + if (token.type === 'link') { + token.tokens = this.inlineTokens(token.text, [], true, inRawBlock); + tokens.push(token); + } else if (_lastToken2 && token.type === 'text' && _lastToken2.type === 'text') { + _lastToken2.raw += token.raw; + _lastToken2.text += token.text; + } else { + tokens.push(token); + } + continue; + } // em & strong - function connectSequences() { - var cache = _ssCache.bubbles; - var keepLeaders = []; - for (var i = 0; i < cache.leaders.length; i++) { - var bubble = cache.points[cache.leaders[i]]; - var seen = {}; // try to make a sequence.. use the key of the leader bubble. + if (token = this.tokenizer.emStrong(src, maskedSrc, prevChar)) { + src = src.substring(token.raw.length); + token.tokens = this.inlineTokens(token.text, [], inLink, inRawBlock); + tokens.push(token); + continue; + } // code - var sequence = { - key: bubble.key, - bubbles: [] - }; - var complete = false; - do { - sequence.bubbles.push(bubble); - seen[bubble.key] = true; + if (token = this.tokenizer.codespan(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // br - if (bubble.ne === undefined) { - complete = true; - } else { - bubble = cache.points[bubble.ne]; // advance to next - } - } while (bubble && !seen[bubble.key] && !complete); - if (complete) { - _ssCache.sequences[sequence.key] = sequence; // assign bubbles to the sequence + if (token = this.tokenizer.br(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // del (gfm) - for (var j = 0; j < sequence.bubbles.length; j++) { - sequence.bubbles[j].sequenceKey = sequence.key; - } // create a GeoJSON LineString + if (token = this.tokenizer.del(src)) { + src = src.substring(token.raw.length); + token.tokens = this.inlineTokens(token.text, [], inLink, inRawBlock); + tokens.push(token); + continue; + } // autolink - sequence.geojson = { - type: 'LineString', - properties: { - captured_at: sequence.bubbles[0] ? sequence.bubbles[0].captured_at : null, - captured_by: sequence.bubbles[0] ? sequence.bubbles[0].captured_by : null, - key: sequence.key - }, - coordinates: sequence.bubbles.map(function (d) { - return d.loc; - }) - }; - } else { - keepLeaders.push(cache.leaders[i]); - } - } // couldn't complete these, save for later + if (token = this.tokenizer.autolink(src, mangle)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // url (gfm) - cache.leaders = keepLeaders; - } - /** - * getBubbles() handles the request to the server for a tile extent of 'bubbles' (streetside image locations). - */ + if (!inLink && (token = this.tokenizer.url(src, mangle))) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // text - function getBubbles(url, tile, callback) { - var rect = tile.extent.rectangle(); - var urlForRequest = url + utilQsString({ - n: rect[3], - s: rect[1], - e: rect[2], - w: rect[0], - c: maxResults$2, - appkey: bubbleAppKey, - jsCallback: '{callback}' - }); - return jsonpRequest(urlForRequest, function (data) { - if (!data || data.error) { - callback(null); - } else { - callback(data); - } - }); - } // partition viewport into higher zoom tiles + if (token = this.tokenizer.inlineText(src, inRawBlock, smartypants)) { + src = src.substring(token.raw.length); - function partitionViewport$2(projection) { - var z = geoScaleToZoom(projection.scale()); - var z2 = Math.ceil(z * 2) / 2 + 2.5; // round to next 0.5 and add 2.5 + if (token.raw.slice(-1) !== '_') { + // Track prevChar before string of ____ started + prevChar = token.raw.slice(-1); + } - var tiler = utilTiler().zoomExtent([z2, z2]); - return tiler.getTiles(projection).map(function (tile) { - return tile.extent; - }); - } // no more than `limit` results per partition. + keepPrevChar = true; + lastToken = tokens[tokens.length - 1]; + if (lastToken && lastToken.type === 'text') { + lastToken.raw += token.raw; + lastToken.text += token.text; + } else { + tokens.push(token); + } - function searchLimited$2(limit, projection, rtree) { - limit = limit || 5; - return partitionViewport$2(projection).reduce(function (result, extent) { - var found = rtree.search(extent.bbox()).slice(0, limit).map(function (d) { - return d.data; - }); - return found.length ? result.concat(found) : result; - }, []); - } - /** - * loadImage() - */ + continue; + } + if (src) { + var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0); - function loadImage(imgInfo) { - return new Promise(function (resolve) { - var img = new Image(); + if (this.options.silent) { + console.error(errMsg); + break; + } else { + throw new Error(errMsg); + } + } + } - img.onload = function () { - var canvas = document.getElementById('ideditor-canvas' + imgInfo.face); - var ctx = canvas.getContext('2d'); - ctx.drawImage(img, imgInfo.x, imgInfo.y); - resolve({ - imgInfo: imgInfo, - status: 'ok' - }); - }; + return tokens; + } + }], [{ + key: "rules", + get: function get() { + return { + block: block, + inline: inline + }; + } + /** + * Static Lex Method + */ - img.onerror = function () { - resolve({ - data: imgInfo, - status: 'error' - }); - }; + }, { + key: "lex", + value: function lex(src, options) { + var lexer = new Lexer(options); + return lexer.lex(src); + } + /** + * Static Lex Inline Method + */ - img.setAttribute('crossorigin', ''); - img.src = imgInfo.url; - }); - } - /** - * loadCanvas() - */ + }, { + key: "lexInline", + value: function lexInline(src, options) { + var lexer = new Lexer(options); + return lexer.inlineTokens(src); + } + }]); + return Lexer; + }(); - function loadCanvas(imageGroup) { - return Promise.all(imageGroup.map(loadImage)).then(function (data) { - var canvas = document.getElementById('ideditor-canvas' + data[0].imgInfo.face); - var which = { - '01': 0, - '02': 1, - '03': 2, - '10': 3, - '11': 4, - '12': 5 - }; - var face = data[0].imgInfo.face; - _sceneOptions.cubeMap[which[face]] = canvas.toDataURL('image/jpeg', 1.0); - return { - status: 'loadCanvas for face ' + data[0].imgInfo.face + 'ok' - }; - }); - } + var defaults$2 = defaults$5.defaults; + var cleanUrl = helpers.cleanUrl, + escape$2 = helpers.escape; /** - * loadFaces() + * Renderer */ + var Renderer_1 = /*#__PURE__*/function () { + function Renderer(options) { + _classCallCheck$1(this, Renderer); - function loadFaces(faceGroup) { - return Promise.all(faceGroup.map(loadCanvas)).then(function () { - return { - status: 'loadFaces done' - }; - }); - } + this.options = options || defaults$2; + } - function setupCanvas(selection, reset) { - if (reset) { - selection.selectAll('#ideditor-stitcher-canvases').remove(); - } // Add the Streetside working canvases. These are used for 'stitching', or combining, - // multiple images for each of the six faces, before passing to the Pannellum control as DataUrls + _createClass$1(Renderer, [{ + key: "code", + value: function code(_code, infostring, escaped) { + var lang = (infostring || '').match(/\S*/)[0]; + if (this.options.highlight) { + var out = this.options.highlight(_code, lang); - selection.selectAll('#ideditor-stitcher-canvases').data([0]).enter().append('div').attr('id', 'ideditor-stitcher-canvases').attr('display', 'none').selectAll('canvas').data(['canvas01', 'canvas02', 'canvas03', 'canvas10', 'canvas11', 'canvas12']).enter().append('canvas').attr('id', function (d) { - return 'ideditor-' + d; - }).attr('width', _resolution).attr('height', _resolution); - } + if (out != null && out !== _code) { + escaped = true; + _code = out; + } + } - function qkToXY(qk) { - var x = 0; - var y = 0; - var scale = 256; + _code = _code.replace(/\n$/, '') + '\n'; - for (var i = qk.length; i > 0; i--) { - var key = qk[i - 1]; - x += +(key === '1' || key === '3') * scale; - y += +(key === '2' || key === '3') * scale; - scale *= 2; - } + if (!lang) { + return '
' + (escaped ? _code : escape$2(_code, true)) + '' + (escaped ? _code : escape$2(_code, true)) + '\n' + quote + '\n'; + } + }, { + key: "html", + value: function html(_html) { + return _html; + } + }, { + key: "heading", + value: function heading(text, level, raw, slugger) { + if (this.options.headerIds) { + return '
\n' : '
\n'; + } + }, { + key: "list", + value: function list(body, ordered, start) { + var type = ordered ? 'ol' : 'ul', + startatt = ordered && start !== 1 ? ' start="' + start + '"' : ''; + return '<' + type + startatt + '>\n' + body + '\n'; + } + }, { + key: "listitem", + value: function listitem(text) { + return '
' + text + '
\n'; + } + }, { + key: "table", + value: function table(header, body) { + if (body) body = '' + body + ''; + return '' + text + '';
+ }
+ }, {
+ key: "br",
+ value: function br() {
+ return this.options.xhtml ? '' : '
'; + } + }, { + key: "del", + value: function del(text) { + return '
An error occurred:
' + escape$1(e.message + '', true) + ''; + } + + throw e; } + } + /** + * Options + */ + + + marked.options = marked.setOptions = function (opt) { + merge(marked.defaults, opt); + changeDefaults(marked.defaults); + return marked; }; + marked.getDefaults = getDefaults; + marked.defaults = defaults; /** - * Wraps a GeoJSON {@link Geometry} in a GeoJSON {@link Feature}. - * - * @name feature - * @param {Geometry} geometry input geometry - * @param {Object} [properties={}] an Object of key-value pairs to add as properties - * @param {Object} [options={}] Optional Parameters - * @param {Array
An error occurred:
' + escape$1(e.message + '', true) + ''; + } + throw e; + } + }; /** - * Get Geometry from Feature or Geometry Object - * - * @param {Feature|Geometry} geojson GeoJSON Feature or Geometry Object - * @returns {Geometry|null} GeoJSON Geometry Object - * @throws {Error} if geojson is not a Feature or Geometry Object - * @example - * var point = { - * "type": "Feature", - * "properties": {}, - * "geometry": { - * "type": "Point", - * "coordinates": [110, 40] - * } - * } - * var geom = turf.getGeom(point) - * //={"type": "Point", "coordinates": [110, 40]} + * Expose */ - function getGeom(geojson) { - if (geojson.type === "Feature") { - return geojson.geometry; - } - - return geojson; - } - // Cohen-Sutherland line clippign algorithm, adapted to efficiently - // handle polylines rather than just segments - function lineclip(points, bbox, result) { - var len = points.length, - codeA = bitCode(points[0], bbox), - part = [], - i, - a, - b, - codeB, - lastCode; - if (!result) result = []; + marked.Parser = Parser_1; + marked.parser = Parser_1.parse; + marked.Renderer = Renderer_1; + marked.TextRenderer = TextRenderer_1; + marked.Lexer = Lexer_1; + marked.lexer = Lexer_1.lex; + marked.Tokenizer = Tokenizer_1; + marked.Slugger = Slugger_1; + marked.parse = marked; + var marked_1 = marked; - for (i = 1; i < len; i++) { - a = points[i - 1]; - b = points[i]; - codeB = lastCode = bitCode(b, bbox); + var tiler$4 = utilTiler(); + var dispatch$5 = dispatch$8('loaded'); + var _tileZoom$1 = 14; + var _osmoseUrlRoot = 'https://osmose.openstreetmap.fr/api/0.3'; + var _osmoseData = { + icons: {}, + items: [] + }; // This gets reassigned if reset - while (true) { - if (!(codeA | codeB)) { - // accept - part.push(a); + var _cache; - if (codeB !== lastCode) { - // segment went outside - part.push(b); + function abortRequest$4(controller) { + if (controller) { + controller.abort(); + } + } - if (i < len - 1) { - // start a new line - result.push(part); - part = []; - } - } else if (i === len - 1) { - part.push(b); - } + function abortUnwantedRequests$1(cache, tiles) { + Object.keys(cache.inflightTile).forEach(function (k) { + var wanted = tiles.find(function (tile) { + return k === tile.id; + }); - break; - } else if (codeA & codeB) { - // trivial reject - break; - } else if (codeA) { - // a outside, intersect with clip edge - a = intersect(a, b, codeA, bbox); - codeA = bitCode(a, bbox); - } else { - // b outside - b = intersect(a, b, codeB, bbox); - codeB = bitCode(b, bbox); - } + if (!wanted) { + abortRequest$4(cache.inflightTile[k]); + delete cache.inflightTile[k]; } + }); + } - codeA = lastCode; - } + function encodeIssueRtree(d) { + return { + minX: d.loc[0], + minY: d.loc[1], + maxX: d.loc[0], + maxY: d.loc[1], + data: d + }; + } // Replace or remove QAItem from rtree - if (part.length) result.push(part); - return result; - } // Sutherland-Hodgeman polygon clipping algorithm - function polygonclip(points, bbox) { - var result, edge, prev, prevInside, i, p, inside; // clip against each side of the clip rectangle + function updateRtree$1(item, replace) { + _cache.rtree.remove(item, function (a, b) { + return a.data.id === b.data.id; + }); - for (edge = 1; edge <= 8; edge *= 2) { - result = []; - prev = points[points.length - 1]; - prevInside = !(bitCode(prev, bbox) & edge); + if (replace) { + _cache.rtree.insert(item); + } + } // Issues shouldn't obscure each other - for (i = 0; i < points.length; i++) { - p = points[i]; - inside = !(bitCode(p, bbox) & edge); // if segment goes through the clip window, add an intersection - if (inside !== prevInside) result.push(intersect(prev, p, edge, bbox)); - if (inside) result.push(p); // add a point if it's inside + function preventCoincident(loc) { + var coincident = false; - prev = p; - prevInside = inside; - } + do { + // first time, move marker up. after that, move marker right. + var delta = coincident ? [0.00001, 0] : [0, 0.00001]; + loc = geoVecAdd(loc, delta); + var bbox = geoExtent(loc).bbox(); + coincident = _cache.rtree.search(bbox).length; + } while (coincident); - points = result; - if (!points.length) break; - } + return loc; + } - return result; - } // intersect a segment against one of the 4 lines that make up the bbox + var serviceOsmose = { + title: 'osmose', + init: function init() { + _mainFileFetcher.get('qa_data').then(function (d) { + _osmoseData = d.osmose; + _osmoseData.items = Object.keys(d.osmose.icons).map(function (s) { + return s.split('-')[0]; + }).reduce(function (unique, item) { + return unique.indexOf(item) !== -1 ? unique : [].concat(_toConsumableArray(unique), [item]); + }, []); + }); - function intersect(a, b, edge, bbox) { - return edge & 8 ? [a[0] + (b[0] - a[0]) * (bbox[3] - a[1]) / (b[1] - a[1]), bbox[3]] // top - : edge & 4 ? [a[0] + (b[0] - a[0]) * (bbox[1] - a[1]) / (b[1] - a[1]), bbox[1]] // bottom - : edge & 2 ? [bbox[2], a[1] + (b[1] - a[1]) * (bbox[2] - a[0]) / (b[0] - a[0])] // right - : edge & 1 ? [bbox[0], a[1] + (b[1] - a[1]) * (bbox[0] - a[0]) / (b[0] - a[0])] // left - : null; - } // bit code reflects the point position relative to the bbox: - // left mid right - // top 1001 1000 1010 - // mid 0001 0000 0010 - // bottom 0101 0100 0110 + if (!_cache) { + this.reset(); + } + this.event = utilRebind(this, dispatch$5, 'on'); + }, + reset: function reset() { + var _strings = {}; + var _colors = {}; - function bitCode(p, bbox) { - var code = 0; - if (p[0] < bbox[0]) code |= 1; // left - else if (p[0] > bbox[2]) code |= 2; // right + if (_cache) { + Object.values(_cache.inflightTile).forEach(abortRequest$4); // Strings and colors are static and should not be re-populated - if (p[1] < bbox[1]) code |= 4; // bottom - else if (p[1] > bbox[3]) code |= 8; // top + _strings = _cache.strings; + _colors = _cache.colors; + } - return code; - } + _cache = { + data: {}, + loadedTile: {}, + inflightTile: {}, + inflightPost: {}, + closed: {}, + rtree: new RBush(), + strings: _strings, + colors: _colors + }; + }, + loadIssues: function loadIssues(projection) { + var _this = this; - /** - * Takes a {@link Feature} and a bbox and clips the feature to the bbox using - * [lineclip](https://github.com/mapbox/lineclip). - * May result in degenerate edges when clipping Polygons. - * - * @name bboxClip - * @param {Feature
'); + }); + selection.append('a').attr('class', 'chip').attr('href', '#').html(_t.html('feature_info.hidden_warning', { + count: count + })).call(tooltipBehavior).on('click', function (d3_event) { + tooltipBehavior.hide(); + d3_event.preventDefault(); // open the Map Data pane - case '!': - // start) { - start = end; - } else { - //TODO: è¿éæå¯è½saxåéï¼æä½ç½®é误é£é© - appendText(Math.max(tagStart, start) + 1); + function getExitFullScreenFn() { + if (document.exitFullscreen) { + return document.exitFullscreen; + } else if (document.msExitFullscreen) { + return document.msExitFullscreen; + } else if (document.mozCancelFullScreen) { + return document.mozCancelFullScreen; + } else if (document.webkitExitFullscreen) { + return document.webkitExitFullscreen; } } - } - - function copyLocator(f, t) { - t.lineNumber = f.lineNumber; - t.columnNumber = f.columnNumber; - return t; - } - /** - * @see #appendElement(source,elStartEnd,el,selfClosed,entityReplacer,domBuilder,parseStack); - * @return end of the elementStartPart(end of elementEndPart for selfClosed el) - */ + function isFullScreen() { + return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; + } - function parseElementStartPart(source, start, el, currentNSMap, entityReplacer, errorHandler) { - var attrName; - var value; - var p = ++start; - var s = S_TAG; //status + function isSupported() { + return !!getFullScreenFn(); + } - while (true) { - var c = source.charAt(p); - - switch (c) { - case '=': - if (s === S_ATTR) { - //attrName - attrName = source.slice(start, p); - s = S_EQ; - } else if (s === S_ATTR_SPACE) { - s = S_EQ; - } else { - //fatalError: equal must after attrName or space after attrName - throw new Error('attribute equal must after attrName'); - } + function fullScreen(d3_event) { + d3_event.preventDefault(); - break; + if (!isFullScreen()) { + // button.classed('active', true); + getFullScreenFn().apply(element); + } else { + // button.classed('active', false); + getExitFullScreenFn().apply(document); + } + } - case '\'': - case '"': - if (s === S_EQ || s === S_ATTR //|| s == S_ATTR_SPACE - ) { - //equal - if (s === S_ATTR) { - errorHandler.warning('attribute value must after "="'); - attrName = source.slice(start, p); - } + return function () { + // selection) { + if (!isSupported()) return; // button = selection.append('button') + // .attr('title', t('full_screen')) + // .on('click', fullScreen) + // .call(tooltip); + // button.append('span') + // .attr('class', 'icon full-screen'); - start = p + 1; - p = source.indexOf(c, start); + var detected = utilDetect(); + var keys = detected.os === 'mac' ? [uiCmd('ââF'), 'f11'] : ['f11']; + context.keybinding().on(keys, fullScreen); + }; + } - if (p > 0) { - value = source.slice(start, p).replace(/&#?\w+;/g, entityReplacer); - el.add(attrName, value, start - 1); - s = S_ATTR_END; - } else { - //fatalError: no end quot match - throw new Error('attribute value no end \'' + c + '\' match'); - } - } else if (s == S_ATTR_NOQUOT_VALUE) { - value = source.slice(start, p).replace(/&#?\w+;/g, entityReplacer); //console.log(attrName,value,start,p) + function uiGeolocate(context) { + var _geolocationOptions = { + // prioritize speed and power usage over precision + enableHighAccuracy: false, + // don't hang indefinitely getting the location + timeout: 6000 // 6sec - el.add(attrName, value, start); //console.dir(el) + }; - errorHandler.warning('attribute "' + attrName + '" missed start quot(' + c + ')!!'); - start = p + 1; - s = S_ATTR_END; - } else { - //fatalError: no equal before - throw new Error('attribute value must after "="'); - } + var _locating = uiLoading(context).message(_t.html('geolocate.locating')).blocking(true); - break; + var _layer = context.layers().layer('geolocate'); - case '/': - switch (s) { - case S_TAG: - el.setTagName(source.slice(start, p)); + var _position; - case S_ATTR_END: - case S_TAG_SPACE: - case S_TAG_CLOSE: - s = S_TAG_CLOSE; - el.closed = true; + var _extent; - case S_ATTR_NOQUOT_VALUE: - case S_ATTR: - case S_ATTR_SPACE: - break; - //case S_EQ: + var _timeoutID; - default: - throw new Error("attribute invalid close char('/')"); - } + var _button = select(null); - break; + function click() { + if (context.inIntro()) return; - case '': - //end document - //throw new Error('unexpected end of input') - errorHandler.error('unexpected end of input'); + if (!_layer.enabled() && !_locating.isShown()) { + // This timeout ensures that we still call finish() even if + // the user declines to share their location in Firefox + _timeoutID = setTimeout(error, 10000 + /* 10sec */ + ); + context.container().call(_locating); // get the latest position even if we already have one - if (s == S_TAG) { - el.setTagName(source.slice(start, p)); - } + navigator.geolocation.getCurrentPosition(success, error, _geolocationOptions); + } else { + _locating.close(); - return p; + _layer.enabled(null, false); - case '>': - switch (s) { - case S_TAG: - el.setTagName(source.slice(start, p)); + updateButtonState(); + } + } - case S_ATTR_END: - case S_TAG_SPACE: - case S_TAG_CLOSE: - break; - //normal + function zoomTo() { + context.enter(modeBrowse(context)); + var map = context.map(); - case S_ATTR_NOQUOT_VALUE: //Compatible state + _layer.enabled(_position, true); - case S_ATTR: - value = source.slice(start, p); + updateButtonState(); + map.centerZoomEase(_extent.center(), Math.min(20, map.extentZoom(_extent))); + } - if (value.slice(-1) === '/') { - el.closed = true; - value = value.slice(0, -1); - } + function success(geolocation) { + _position = geolocation; + var coords = _position.coords; + _extent = geoExtent([coords.longitude, coords.latitude]).padByMeters(coords.accuracy); + zoomTo(); + finish(); + } - case S_ATTR_SPACE: - if (s === S_ATTR_SPACE) { - value = attrName; - } + function error() { + if (_position) { + // use the position from a previous call if we have one + zoomTo(); + } else { + context.ui().flash.label(_t.html('geolocate.location_unavailable')).iconName('#iD-icon-geolocate')(); + } - if (s == S_ATTR_NOQUOT_VALUE) { - errorHandler.warning('attribute "' + value + '" missed quot(")!!'); - el.add(attrName, value.replace(/&#?\w+;/g, entityReplacer), start); - } else { - if (currentNSMap[''] !== 'http://www.w3.org/1999/xhtml' || !value.match(/^(?:disabled|checked|selected)$/i)) { - errorHandler.warning('attribute "' + value + '" missed value!! "' + value + '" instead!!'); - } + finish(); + } - el.add(value, value, start); - } + function finish() { + _locating.close(); // unblock ui - break; - case S_EQ: - throw new Error('attribute value missed!!'); - } // console.log(tagName,tagNamePattern,tagNamePattern.test(tagName)) + if (_timeoutID) { + clearTimeout(_timeoutID); + } + _timeoutID = undefined; + } - return p; + function updateButtonState() { + _button.classed('active', _layer.enabled()); + } - /*xml space '\x20' | #x9 | #xD | #xA; */ + return function (selection) { + if (!navigator.geolocation || !navigator.geolocation.getCurrentPosition) return; + _button = selection.append('button').on('click', click).call(svgIcon('#iD-icon-geolocate', 'light')).call(uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(_t.html('geolocate.title')).keys([_t('geolocate.key')])); + context.keybinding().on(_t('geolocate.key'), click); + }; + } - case "\x80": - c = ' '; + function uiPanelBackground(context) { + var background = context.background(); + var _currSourceName = null; + var _metadata = {}; + var _metadataKeys = ['zoom', 'vintage', 'source', 'description', 'resolution', 'accuracy']; - default: - if (c <= ' ') { - //space - switch (s) { - case S_TAG: - el.setTagName(source.slice(start, p)); //tagName + var debouncedRedraw = debounce(redraw, 250); - s = S_TAG_SPACE; - break; + function redraw(selection) { + var source = background.baseLayerSource(); + if (!source) return; + var isDG = source.id.match(/^DigitalGlobe/i) !== null; + var sourceLabel = source.label(); - case S_ATTR: - attrName = source.slice(start, p); - s = S_ATTR_SPACE; - break; + if (_currSourceName !== sourceLabel) { + _currSourceName = sourceLabel; + _metadata = {}; + } - case S_ATTR_NOQUOT_VALUE: - var value = source.slice(start, p).replace(/&#?\w+;/g, entityReplacer); - errorHandler.warning('attribute "' + value + '" missed quot(")!!'); - el.add(attrName, value, start); + selection.html(''); + var list = selection.append('ul').attr('class', 'background-info'); + list.append('li').html(_currSourceName); - case S_ATTR_END: - s = S_TAG_SPACE; - break; - //case S_TAG_SPACE: - //case S_EQ: - //case S_ATTR_SPACE: - // void();break; - //case S_TAG_CLOSE: - //ignore warning - } - } else { - //not space - //S_TAG, S_ATTR, S_EQ, S_ATTR_NOQUOT_VALUE - //S_ATTR_SPACE, S_ATTR_END, S_TAG_SPACE, S_TAG_CLOSE - switch (s) { - //case S_TAG:void();break; - //case S_ATTR:void();break; - //case S_ATTR_NOQUOT_VALUE:void();break; - case S_ATTR_SPACE: - var tagName = el.tagName; - - if (currentNSMap[''] !== 'http://www.w3.org/1999/xhtml' || !attrName.match(/^(?:disabled|checked|selected)$/i)) { - errorHandler.warning('attribute "' + attrName + '" missed value!! "' + attrName + '" instead2!!'); - } + _metadataKeys.forEach(function (k) { + // DigitalGlobe vintage is available in raster layers for now. + if (isDG && k === 'vintage') return; + list.append('li').attr('class', 'background-info-list-' + k).classed('hide', !_metadata[k]).html(_t.html('info_panels.background.' + k) + ':').append('span').attr('class', 'background-info-span-' + k).html(_metadata[k]); + }); - el.add(attrName, attrName, start); - start = p; - s = S_ATTR; - break; + debouncedGetMetadata(selection); + var toggleTiles = context.getDebug('tile') ? 'hide_tiles' : 'show_tiles'; + selection.append('a').html(_t.html('info_panels.background.' + toggleTiles)).attr('href', '#').attr('class', 'button button-toggle-tiles').on('click', function (d3_event) { + d3_event.preventDefault(); + context.setDebug('tile', !context.getDebug('tile')); + selection.call(redraw); + }); - case S_ATTR_END: - errorHandler.warning('attribute space is required"' + attrName + '"!!'); + if (isDG) { + var key = source.id + '-vintage'; + var sourceVintage = context.background().findSource(key); + var showsVintage = context.background().showsLayer(sourceVintage); + var toggleVintage = showsVintage ? 'hide_vintage' : 'show_vintage'; + selection.append('a').html(_t.html('info_panels.background.' + toggleVintage)).attr('href', '#').attr('class', 'button button-toggle-vintage').on('click', function (d3_event) { + d3_event.preventDefault(); + context.background().toggleOverlayLayer(sourceVintage); + selection.call(redraw); + }); + } // disable if necessary - case S_TAG_SPACE: - s = S_ATTR; - start = p; - break; - case S_EQ: - s = S_ATTR_NOQUOT_VALUE; - start = p; - break; + ['DigitalGlobe-Premium', 'DigitalGlobe-Standard'].forEach(function (layerId) { + if (source.id !== layerId) { + var key = layerId + '-vintage'; + var sourceVintage = context.background().findSource(key); - case S_TAG_CLOSE: - throw new Error("elements closed character '/' and '>' must be connected to"); - } + if (context.background().showsLayer(sourceVintage)) { + context.background().toggleOverlayLayer(sourceVintage); } - - } //end outer switch - //console.log('p++',p) - - - p++; + } + }); } - } - /** - * @return true if has new namespace define - */ + var debouncedGetMetadata = debounce(getMetadata, 250); - function appendElement(el, domBuilder, currentNSMap) { - var tagName = el.tagName; - var localNSMap = null; //var currentNSMap = parseStack[parseStack.length-1].currentNSMap; - - var i = el.length; - - while (i--) { - var a = el[i]; - var qName = a.qName; - var value = a.value; - var nsp = qName.indexOf(':'); - - if (nsp > 0) { - var prefix = a.prefix = qName.slice(0, nsp); - var localName = qName.slice(nsp + 1); - var nsPrefix = prefix === 'xmlns' && localName; - } else { - localName = qName; - prefix = null; - nsPrefix = qName === 'xmlns' && ''; - } //can not set prefix,because prefix !== '' - + function getMetadata(selection) { + var tile = context.container().select('.layer-background img.tile-center'); // tile near viewport center - a.localName = localName; //prefix == null for no ns prefix attribute + if (tile.empty()) return; + var sourceName = _currSourceName; + var d = tile.datum(); + var zoom = d && d.length >= 3 && d[2] || Math.floor(context.map().zoom()); + var center = context.map().center(); // update zoom - if (nsPrefix !== false) { - //hack!! - if (localNSMap == null) { - localNSMap = {}; //console.log(currentNSMap,0) + _metadata.zoom = String(zoom); + selection.selectAll('.background-info-list-zoom').classed('hide', false).selectAll('.background-info-span-zoom').html(_metadata.zoom); + if (!d || !d.length >= 3) return; + background.baseLayerSource().getMetadata(center, d, function (err, result) { + if (err || _currSourceName !== sourceName) return; // update vintage - _copy(currentNSMap, currentNSMap = {}); //console.log(currentNSMap,1) + var vintage = result.vintage; + _metadata.vintage = vintage && vintage.range || _t('info_panels.background.unknown'); + selection.selectAll('.background-info-list-vintage').classed('hide', false).selectAll('.background-info-span-vintage').html(_metadata.vintage); // update other _metadata - } + _metadataKeys.forEach(function (k) { + if (k === 'zoom' || k === 'vintage') return; // done already - currentNSMap[nsPrefix] = localNSMap[nsPrefix] = value; - a.uri = 'http://www.w3.org/2000/xmlns/'; - domBuilder.startPrefixMapping(nsPrefix, value); - } + var val = result[k]; + _metadata[k] = val; + selection.selectAll('.background-info-list-' + k).classed('hide', !val).selectAll('.background-info-span-' + k).html(val); + }); + }); } - var i = el.length; + var panel = function panel(selection) { + selection.call(redraw); + context.map().on('drawn.info-background', function () { + selection.call(debouncedRedraw); + }).on('move.info-background', function () { + selection.call(debouncedGetMetadata); + }); + }; - while (i--) { - a = el[i]; - var prefix = a.prefix; + panel.off = function () { + context.map().on('drawn.info-background', null).on('move.info-background', null); + }; - if (prefix) { - //no prefix attribute has no namespace - if (prefix === 'xml') { - a.uri = 'http://www.w3.org/XML/1998/namespace'; - } + panel.id = 'background'; + panel.label = _t.html('info_panels.background.title'); + panel.key = _t('info_panels.background.key'); + return panel; + } - if (prefix !== 'xmlns') { - a.uri = currentNSMap[prefix || '']; //{console.log('###'+a.qName,domBuilder.locator.systemId+'',currentNSMap,a.uri)} - } - } + function uiPanelHistory(context) { + var osm; + + function displayTimestamp(timestamp) { + if (!timestamp) return _t('info_panels.history.unknown'); + var options = { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric' + }; + var d = new Date(timestamp); + if (isNaN(d.getTime())) return _t('info_panels.history.unknown'); + return d.toLocaleString(_mainLocalizer.localeCode(), options); } - var nsp = tagName.indexOf(':'); + function displayUser(selection, userName) { + if (!userName) { + selection.append('span').html(_t.html('info_panels.history.unknown')); + return; + } - if (nsp > 0) { - prefix = el.prefix = tagName.slice(0, nsp); - localName = el.localName = tagName.slice(nsp + 1); - } else { - prefix = null; //important!! + selection.append('span').attr('class', 'user-name').html(userName); + var links = selection.append('div').attr('class', 'links'); - localName = el.localName = tagName; - } //no prefix element has default namespace + if (osm) { + links.append('a').attr('class', 'user-osm-link').attr('href', osm.userURL(userName)).attr('target', '_blank').html('OSM'); + } + links.append('a').attr('class', 'user-hdyc-link').attr('href', 'https://hdyc.neis-one.org/?' + userName).attr('target', '_blank').attr('tabindex', -1).html('HDYC'); + } - var ns = el.uri = currentNSMap[prefix || '']; - domBuilder.startElement(ns, localName, tagName, el); //endPrefixMapping and startPrefixMapping have not any help for dom builder - //localNSMap = null + function displayChangeset(selection, changeset) { + if (!changeset) { + selection.append('span').html(_t.html('info_panels.history.unknown')); + return; + } - if (el.closed) { - domBuilder.endElement(ns, localName, tagName); + selection.append('span').attr('class', 'changeset-id').html(changeset); + var links = selection.append('div').attr('class', 'links'); - if (localNSMap) { - for (prefix in localNSMap) { - domBuilder.endPrefixMapping(prefix); - } + if (osm) { + links.append('a').attr('class', 'changeset-osm-link').attr('href', osm.changesetURL(changeset)).attr('target', '_blank').html('OSM'); } - } else { - el.currentNSMap = currentNSMap; - el.localNSMap = localNSMap; //parseStack.push(el); - return true; + links.append('a').attr('class', 'changeset-osmcha-link').attr('href', 'https://osmcha.org/changesets/' + changeset).attr('target', '_blank').html('OSMCha'); + links.append('a').attr('class', 'changeset-achavi-link').attr('href', 'https://overpass-api.de/achavi/?changeset=' + changeset).attr('target', '_blank').html('Achavi'); } - } - function parseHtmlSpecialContent(source, elStartEnd, tagName, entityReplacer, domBuilder) { - if (/^(?:script|textarea)$/i.test(tagName)) { - var elEndStart = source.indexOf('', elStartEnd); - var text = source.substring(elStartEnd + 1, elEndStart); + function redraw(selection) { + var selectedNoteID = context.selectedNoteID(); + osm = context.connection(); + var selected, note, entity; - if (/[&<]/.test(text)) { - if (/^script$/i.test(tagName)) { - //if(!/\]\]>/.test(text)){ - //lexHandler.startCDATA(); - domBuilder.characters(text, 0, text.length); //lexHandler.endCDATA(); + if (selectedNoteID && osm) { + // selected 1 note + selected = [_t('note.note') + ' ' + selectedNoteID]; + note = osm.getNote(selectedNoteID); + } else { + // selected 1..n entities + selected = context.selectedIDs().filter(function (e) { + return context.hasEntity(e); + }); - return elEndStart; //} - } //}else{//text area + if (selected.length) { + entity = context.entity(selected[0]); + } + } + var singular = selected.length === 1 ? selected[0] : null; + selection.html(''); + selection.append('h4').attr('class', 'history-heading').html(singular || _t.html('info_panels.selected', { + n: selected.length + })); + if (!singular) return; - text = text.replace(/&#?\w+;/g, entityReplacer); - domBuilder.characters(text, 0, text.length); - return elEndStart; //} + if (entity) { + selection.call(redrawEntity, entity); + } else if (note) { + selection.call(redrawNote, note); } } - return elStartEnd + 1; - } - - function fixSelfClosed(source, elStartEnd, tagName, closeMap) { - //if(tagName in closeMap){ - var pos = closeMap[tagName]; - - if (pos == null) { - //console.log(tagName) - pos = source.lastIndexOf(''); - - if (pos < elStartEnd) { - //å¿è®°éå - pos = source.lastIndexOf('', start + 4); //append comment source.substring(4,end)//"); - - case DOCUMENT_TYPE_NODE: - var pubid = node.publicId; - var sysid = node.systemId; - buf.push(''); - } else if (sysid && sysid != '.') { - buf.push(' SYSTEM "', sysid, '">'); - } else { - var sub = node.internalSubset; + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } + } - if (sub) { - buf.push(" [", sub, "]"); - } + function pointsLinesAreas() { + var onClick = function onClick() { + continueTo(nodesWays); + }; - buf.push(">"); - } + reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { + buttonText: _t.html('intro.ok'), + buttonCallback: onClick + }); + context.map().on('drawn.intro', function () { + reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { + duration: 0, + buttonText: _t.html('intro.ok'), + buttonCallback: onClick + }); + }); - return; + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } + } - case PROCESSING_INSTRUCTION_NODE: - return buf.push(""); + function nodesWays() { + var onClick = function onClick() { + continueTo(clickTownHall); + }; - case ENTITY_REFERENCE_NODE: - return buf.push('&', node.nodeName, ';'); - //case ENTITY_NODE: - //case NOTATION_NODE: + reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { + buttonText: _t.html('intro.ok'), + buttonCallback: onClick + }); + context.map().on('drawn.intro', function () { + reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { + duration: 0, + buttonText: _t.html('intro.ok'), + buttonCallback: onClick + }); + }); - default: - buf.push('??', node.nodeName); + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } } - } - - function _importNode(doc, node, deep) { - var node2; - switch (node.nodeType) { - case ELEMENT_NODE: - node2 = node.cloneNode(false); - node2.ownerDocument = doc; - //var attrs = node2.attributes; - //var len = attrs.length; - //for(var i=0;i
'); - }); - selection.append('a').attr('class', 'chip').attr('href', '#').html(_t.html('feature_info.hidden_warning', { - count: count - })).call(tooltipBehavior).on('click', function (d3_event) { - tooltipBehavior.hide(); - d3_event.preventDefault(); // open the Map Data pane - - context.ui().togglePanes(context.container().select('.map-panes .map-data-pane')); - }); - } - - selection.classed('hide', !hiddenList.length); + if (callback) callback(data); + }); } - return function (selection) { - update(selection); - context.features().on('change.feature_info', function () { - update(selection); - }); - }; - } + function change() { + var syncTags = {}; + syncTags[field.key] = _qid; + dispatch.call('change', this, syncTags); // attempt asynchronous update of wikidata tag.. - function uiFlash(context) { - var _flashTimer; + var initGraph = context.graph(); + var initEntityIDs = _entityIDs; + wikidata.entityByQID(_qid, function (err, entity) { + if (err) return; // If graph has changed, we can't apply this update. - var _duration = 2000; - var _iconName = '#iD-icon-no'; - var _iconClass = 'disabled'; - var _label = ''; + if (context.graph() !== initGraph) return; + if (!entity.sitelinks) return; + var langs = wikidata.languagesToQuery(); // use the label and description languages as fallbacks - function flash() { - if (_flashTimer) { - _flashTimer.stop(); - } + ['labels', 'descriptions'].forEach(function (key) { + if (!entity[key]) return; + var valueLangs = Object.keys(entity[key]); + if (valueLangs.length === 0) return; + var valueLang = valueLangs[0]; - context.container().select('.main-footer-wrap').classed('footer-hide', true).classed('footer-show', false); - context.container().select('.flash-wrap').classed('footer-hide', false).classed('footer-show', true); - var content = context.container().select('.flash-wrap').selectAll('.flash-content').data([0]); // Enter + if (langs.indexOf(valueLang) === -1) { + langs.push(valueLang); + } + }); + var newWikipediaValue; - var contentEnter = content.enter().append('div').attr('class', 'flash-content'); - var iconEnter = contentEnter.append('svg').attr('class', 'flash-icon icon').append('g').attr('transform', 'translate(10,10)'); - iconEnter.append('circle').attr('r', 9); - iconEnter.append('use').attr('transform', 'translate(-7,-7)').attr('width', '14').attr('height', '14'); - contentEnter.append('div').attr('class', 'flash-text'); // Update + if (_wikipediaKey) { + var foundPreferred; - content = content.merge(contentEnter); - content.selectAll('.flash-icon').attr('class', 'icon flash-icon ' + (_iconClass || '')); - content.selectAll('.flash-icon use').attr('xlink:href', _iconName); - content.selectAll('.flash-text').attr('class', 'flash-text').html(_label); - _flashTimer = d3_timeout(function () { - _flashTimer = null; - context.container().select('.main-footer-wrap').classed('footer-hide', false).classed('footer-show', true); - context.container().select('.flash-wrap').classed('footer-hide', true).classed('footer-show', false); - }, _duration); - return content; - } + for (var i in langs) { + var lang = langs[i]; + var siteID = lang.replace('-', '_') + 'wiki'; - flash.duration = function (_) { - if (!arguments.length) return _duration; - _duration = _; - return flash; - }; + if (entity.sitelinks[siteID]) { + foundPreferred = true; + newWikipediaValue = lang + ':' + entity.sitelinks[siteID].title; // use the first match - flash.label = function (_) { - if (!arguments.length) return _label; - _label = _; - return flash; - }; + break; + } + } - flash.iconName = function (_) { - if (!arguments.length) return _iconName; - _iconName = _; - return flash; - }; + if (!foundPreferred) { + // No wikipedia sites available in the user's language or the fallback languages, + // default to any wikipedia sitelink + var wikiSiteKeys = Object.keys(entity.sitelinks).filter(function (site) { + return site.endsWith('wiki'); + }); - flash.iconClass = function (_) { - if (!arguments.length) return _iconClass; - _iconClass = _; - return flash; - }; + if (wikiSiteKeys.length === 0) { + // if no wikipedia pages are linked to this wikidata entity, delete that tag + newWikipediaValue = null; + } else { + var wikiLang = wikiSiteKeys[0].slice(0, -4).replace('_', '-'); + var wikiTitle = entity.sitelinks[wikiSiteKeys[0]].title; + newWikipediaValue = wikiLang + ':' + wikiTitle; + } + } + } - return flash; - } + if (newWikipediaValue) { + newWikipediaValue = context.cleanTagValue(newWikipediaValue); + } - function uiFullScreen(context) { - var element = context.container().node(); // var button = d3_select(null); + if (typeof newWikipediaValue === 'undefined') return; + var actions = initEntityIDs.map(function (entityID) { + var entity = context.hasEntity(entityID); + if (!entity) return null; + var currTags = Object.assign({}, entity.tags); // shallow copy - function getFullScreenFn() { - if (element.requestFullscreen) { - return element.requestFullscreen; - } else if (element.msRequestFullscreen) { - return element.msRequestFullscreen; - } else if (element.mozRequestFullScreen) { - return element.mozRequestFullScreen; - } else if (element.webkitRequestFullscreen) { - return element.webkitRequestFullscreen; - } - } + if (newWikipediaValue === null) { + if (!currTags[_wikipediaKey]) return null; + delete currTags[_wikipediaKey]; + } else { + currTags[_wikipediaKey] = newWikipediaValue; + } - function getExitFullScreenFn() { - if (document.exitFullscreen) { - return document.exitFullscreen; - } else if (document.msExitFullscreen) { - return document.msExitFullscreen; - } else if (document.mozCancelFullScreen) { - return document.mozCancelFullScreen; - } else if (document.webkitExitFullscreen) { - return document.webkitExitFullscreen; - } - } + return actionChangeTags(entityID, currTags); + }).filter(Boolean); + if (!actions.length) return; // Coalesce the update of wikidata tag into the previous tag change - function isFullScreen() { - return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; + context.overwrite(function actionUpdateWikipediaTags(graph) { + actions.forEach(function (action) { + graph = action(graph); + }); + return graph; + }, context.history().undoAnnotation()); // do not dispatch.call('change') here, because entity_editor + // changeTags() is not intended to be called asynchronously + }); } - function isSupported() { - return !!getFullScreenFn(); - } + function setLabelForEntity() { + var label = ''; - function fullScreen(d3_event) { - d3_event.preventDefault(); + if (_wikidataEntity) { + label = entityPropertyForDisplay(_wikidataEntity, 'labels'); - if (!isFullScreen()) { - // button.classed('active', true); - getFullScreenFn().apply(element); - } else { - // button.classed('active', false); - getExitFullScreenFn().apply(document); + if (label.length === 0) { + label = _wikidataEntity.id.toString(); + } } - } - - return function () { - // selection) { - if (!isSupported()) return; // button = selection.append('button') - // .attr('title', t('full_screen')) - // .on('click', fullScreen) - // .call(tooltip); - // button.append('span') - // .attr('class', 'icon full-screen'); - var detected = utilDetect(); - var keys = detected.os === 'mac' ? [uiCmd('ââF'), 'f11'] : ['f11']; - context.keybinding().on(keys, fullScreen); - }; - } - - function uiGeolocate(context) { - var _geolocationOptions = { - // prioritize speed and power usage over precision - enableHighAccuracy: false, - // don't hang indefinitely getting the location - timeout: 6000 // 6sec - - }; - - var _locating = uiLoading(context).message(_t.html('geolocate.locating')).blocking(true); + utilGetSetValue(_searchInput, label); + } - var _layer = context.layers().layer('geolocate'); + wiki.tags = function (tags) { + var isMixed = Array.isArray(tags[field.key]); - var _position; + _searchInput.attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : null).attr('placeholder', isMixed ? _t('inspector.multiple_values') : '').classed('mixed', isMixed); - var _extent; + _qid = typeof tags[field.key] === 'string' && tags[field.key] || ''; - var _timeoutID; + if (!/^Q[0-9]*$/.test(_qid)) { + // not a proper QID + unrecognized(); + return; + } // QID value in correct format - var _button = select(null); - function click() { - if (context.inIntro()) return; + _wikiURL = 'https://wikidata.org/wiki/' + _qid; + wikidata.entityByQID(_qid, function (err, entity) { + if (err) { + unrecognized(); + return; + } - if (!_layer.enabled() && !_locating.isShown()) { - // This timeout ensures that we still call finish() even if - // the user declines to share their location in Firefox - _timeoutID = setTimeout(error, 10000 - /* 10sec */ - ); - context.container().call(_locating); // get the latest position even if we already have one + _wikidataEntity = entity; + setLabelForEntity(); + var description = entityPropertyForDisplay(entity, 'descriptions'); - navigator.geolocation.getCurrentPosition(success, error, _geolocationOptions); - } else { - _locating.close(); + _selection.select('button.wiki-link').classed('disabled', false); - _layer.enabled(null, false); + _selection.select('.preset-wikidata-description').style('display', function () { + return description.length > 0 ? 'flex' : 'none'; + }).select('input').attr('value', description); - updateButtonState(); - } - } + _selection.select('.preset-wikidata-identifier').style('display', function () { + return entity.id ? 'flex' : 'none'; + }).select('input').attr('value', entity.id); + }); // not a proper QID - function zoomTo() { - context.enter(modeBrowse(context)); - var map = context.map(); + function unrecognized() { + _wikidataEntity = null; + setLabelForEntity(); - _layer.enabled(_position, true); + _selection.select('.preset-wikidata-description').style('display', 'none'); - updateButtonState(); - map.centerZoomEase(_extent.center(), Math.min(20, map.extentZoom(_extent))); - } + _selection.select('.preset-wikidata-identifier').style('display', 'none'); - function success(geolocation) { - _position = geolocation; - var coords = _position.coords; - _extent = geoExtent([coords.longitude, coords.latitude]).padByMeters(coords.accuracy); - zoomTo(); - finish(); - } + _selection.select('button.wiki-link').classed('disabled', true); - function error() { - if (_position) { - // use the position from a previous call if we have one - zoomTo(); - } else { - context.ui().flash.label(_t.html('geolocate.location_unavailable')).iconName('#iD-icon-geolocate')(); + if (_qid && _qid !== '') { + _wikiURL = 'https://wikidata.org/wiki/Special:Search?search=' + _qid; + } else { + _wikiURL = ''; + } } + }; - finish(); - } - - function finish() { - _locating.close(); // unblock ui + function entityPropertyForDisplay(wikidataEntity, propKey) { + if (!wikidataEntity[propKey]) return ''; + var propObj = wikidataEntity[propKey]; + var langKeys = Object.keys(propObj); + if (langKeys.length === 0) return ''; // sorted by priority, since we want to show the user's language first if possible + var langs = wikidata.languagesToQuery(); - if (_timeoutID) { - clearTimeout(_timeoutID); - } + for (var i in langs) { + var lang = langs[i]; + var valueObj = propObj[lang]; + if (valueObj && valueObj.value && valueObj.value.length > 0) return valueObj.value; + } // default to any available value - _timeoutID = undefined; - } - function updateButtonState() { - _button.classed('active', _layer.enabled()); + return propObj[langKeys[0]].value; } - return function (selection) { - if (!navigator.geolocation || !navigator.geolocation.getCurrentPosition) return; - _button = selection.append('button').on('click', click).call(svgIcon('#iD-icon-geolocate', 'light')).call(uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(_t.html('geolocate.title')).keys([_t('geolocate.key')])); - context.keybinding().on(_t('geolocate.key'), click); + wiki.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return wiki; }; - } - function uiPanelBackground(context) { - var background = context.background(); - var _currSourceName = null; - var _metadata = {}; - var _metadataKeys = ['zoom', 'vintage', 'source', 'description', 'resolution', 'accuracy']; + wiki.focus = function () { + _searchInput.node().focus(); + }; - var debouncedRedraw = debounce(redraw, 250); + return utilRebind(wiki, dispatch, 'on'); + } - function redraw(selection) { - var source = background.baseLayerSource(); - if (!source) return; - var isDG = source.id.match(/^DigitalGlobe/i) !== null; - var sourceLabel = source.label(); + function uiFieldWikipedia(field, context) { + var _arguments = arguments; + var dispatch = dispatch$8('change'); + var wikipedia = services.wikipedia; + var wikidata = services.wikidata; - if (_currSourceName !== sourceLabel) { - _currSourceName = sourceLabel; - _metadata = {}; - } + var _langInput = select(null); - selection.html(''); - var list = selection.append('ul').attr('class', 'background-info'); - list.append('li').html(_currSourceName); + var _titleInput = select(null); - _metadataKeys.forEach(function (k) { - // DigitalGlobe vintage is available in raster layers for now. - if (isDG && k === 'vintage') return; - list.append('li').attr('class', 'background-info-list-' + k).classed('hide', !_metadata[k]).html(_t.html('info_panels.background.' + k) + ':').append('span').attr('class', 'background-info-span-' + k).html(_metadata[k]); - }); + var _wikiURL = ''; - debouncedGetMetadata(selection); - var toggleTiles = context.getDebug('tile') ? 'hide_tiles' : 'show_tiles'; - selection.append('a').html(_t.html('info_panels.background.' + toggleTiles)).attr('href', '#').attr('class', 'button button-toggle-tiles').on('click', function (d3_event) { - d3_event.preventDefault(); - context.setDebug('tile', !context.getDebug('tile')); - selection.call(redraw); - }); + var _entityIDs; - if (isDG) { - var key = source.id + '-vintage'; - var sourceVintage = context.background().findSource(key); - var showsVintage = context.background().showsLayer(sourceVintage); - var toggleVintage = showsVintage ? 'hide_vintage' : 'show_vintage'; - selection.append('a').html(_t.html('info_panels.background.' + toggleVintage)).attr('href', '#').attr('class', 'button button-toggle-vintage').on('click', function (d3_event) { - d3_event.preventDefault(); - context.background().toggleOverlayLayer(sourceVintage); - selection.call(redraw); - }); - } // disable if necessary + var _tags; + var _dataWikipedia = []; + _mainFileFetcher.get('wmf_sitematrix').then(function (d) { + _dataWikipedia = d; + if (_tags) updateForTags(_tags); + })["catch"](function () { + /* ignore */ + }); + var langCombo = uiCombobox(context, 'wikipedia-lang').fetcher(function (value, callback) { + var v = value.toLowerCase(); + callback(_dataWikipedia.filter(function (d) { + return d[0].toLowerCase().indexOf(v) >= 0 || d[1].toLowerCase().indexOf(v) >= 0 || d[2].toLowerCase().indexOf(v) >= 0; + }).map(function (d) { + return { + value: d[1] + }; + })); + }); + var titleCombo = uiCombobox(context, 'wikipedia-title').fetcher(function (value, callback) { + if (!value) { + value = ''; - ['DigitalGlobe-Premium', 'DigitalGlobe-Standard'].forEach(function (layerId) { - if (source.id !== layerId) { - var key = layerId + '-vintage'; - var sourceVintage = context.background().findSource(key); + for (var i in _entityIDs) { + var entity = context.hasEntity(_entityIDs[i]); - if (context.background().showsLayer(sourceVintage)) { - context.background().toggleOverlayLayer(sourceVintage); + if (entity.tags.name) { + value = entity.tags.name; + break; } } - }); - } - - var debouncedGetMetadata = debounce(getMetadata, 250); + } - function getMetadata(selection) { - var tile = context.container().select('.layer-background img.tile-center'); // tile near viewport center + var searchfn = value.length > 7 ? wikipedia.search : wikipedia.suggestions; + searchfn(language()[2], value, function (query, data) { + callback(data.map(function (d) { + return { + value: d + }; + })); + }); + }); - if (tile.empty()) return; - var sourceName = _currSourceName; - var d = tile.datum(); - var zoom = d && d.length >= 3 && d[2] || Math.floor(context.map().zoom()); - var center = context.map().center(); // update zoom + function wiki(selection) { + var wrap = selection.selectAll('.form-field-input-wrap').data([0]); + wrap = wrap.enter().append('div').attr('class', "form-field-input-wrap form-field-input-".concat(field.type)).merge(wrap); + var langContainer = wrap.selectAll('.wiki-lang-container').data([0]); + langContainer = langContainer.enter().append('div').attr('class', 'wiki-lang-container').merge(langContainer); + _langInput = langContainer.selectAll('input.wiki-lang').data([0]); + _langInput = _langInput.enter().append('input').attr('type', 'text').attr('class', 'wiki-lang').attr('placeholder', _t('translate.localized_translation_language')).call(utilNoAuto).call(langCombo).merge(_langInput); - _metadata.zoom = String(zoom); - selection.selectAll('.background-info-list-zoom').classed('hide', false).selectAll('.background-info-span-zoom').html(_metadata.zoom); - if (!d || !d.length >= 3) return; - background.baseLayerSource().getMetadata(center, d, function (err, result) { - if (err || _currSourceName !== sourceName) return; // update vintage + _langInput.on('blur', changeLang).on('change', changeLang); - var vintage = result.vintage; - _metadata.vintage = vintage && vintage.range || _t('info_panels.background.unknown'); - selection.selectAll('.background-info-list-vintage').classed('hide', false).selectAll('.background-info-span-vintage').html(_metadata.vintage); // update other _metadata + var titleContainer = wrap.selectAll('.wiki-title-container').data([0]); + titleContainer = titleContainer.enter().append('div').attr('class', 'wiki-title-container').merge(titleContainer); + _titleInput = titleContainer.selectAll('input.wiki-title').data([0]); + _titleInput = _titleInput.enter().append('input').attr('type', 'text').attr('class', 'wiki-title').attr('id', field.domId).call(utilNoAuto).call(titleCombo).merge(_titleInput); - _metadataKeys.forEach(function (k) { - if (k === 'zoom' || k === 'vintage') return; // done already + _titleInput.on('blur', function () { + change(true); + }).on('change', function () { + change(false); + }); - var val = result[k]; - _metadata[k] = val; - selection.selectAll('.background-info-list-' + k).classed('hide', !val).selectAll('.background-info-span-' + k).html(val); - }); + var link = titleContainer.selectAll('.wiki-link').data([0]); + link = link.enter().append('button').attr('class', 'form-field-button wiki-link').attr('title', _t('icons.view_on', { + domain: 'wikipedia.org' + })).call(svgIcon('#iD-icon-out-link')).merge(link); + link.on('click', function (d3_event) { + d3_event.preventDefault(); + if (_wikiURL) window.open(_wikiURL, '_blank'); }); } - var panel = function panel(selection) { - selection.call(redraw); - context.map().on('drawn.info-background', function () { - selection.call(debouncedRedraw); - }).on('move.info-background', function () { - selection.call(debouncedGetMetadata); - }); - }; + function defaultLanguageInfo(skipEnglishFallback) { + var langCode = _mainLocalizer.languageCode().toLowerCase(); - panel.off = function () { - context.map().on('drawn.info-background', null).on('move.info-background', null); - }; + for (var i in _dataWikipedia) { + var d = _dataWikipedia[i]; // default to the language of iD's current locale - panel.id = 'background'; - panel.label = _t.html('info_panels.background.title'); - panel.key = _t('info_panels.background.key'); - return panel; - } + if (d[2] === langCode) return d; + } // fallback to English - function uiPanelHistory(context) { - var osm; - function displayTimestamp(timestamp) { - if (!timestamp) return _t('info_panels.history.unknown'); - var options = { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric' - }; - var d = new Date(timestamp); - if (isNaN(d.getTime())) return _t('info_panels.history.unknown'); - return d.toLocaleString(_mainLocalizer.localeCode(), options); + return skipEnglishFallback ? ['', '', ''] : ['English', 'English', 'en']; } - function displayUser(selection, userName) { - if (!userName) { - selection.append('span').html(_t.html('info_panels.history.unknown')); - return; - } + function language(skipEnglishFallback) { + var value = utilGetSetValue(_langInput).toLowerCase(); - selection.append('span').attr('class', 'user-name').html(userName); - var links = selection.append('div').attr('class', 'links'); + for (var i in _dataWikipedia) { + var d = _dataWikipedia[i]; // return the language already set in the UI, if supported - if (osm) { - links.append('a').attr('class', 'user-osm-link').attr('href', osm.userURL(userName)).attr('target', '_blank').html('OSM'); - } + if (d[0].toLowerCase() === value || d[1].toLowerCase() === value || d[2] === value) return d; + } // fallback to English - links.append('a').attr('class', 'user-hdyc-link').attr('href', 'https://hdyc.neis-one.org/?' + userName).attr('target', '_blank').attr('tabindex', -1).html('HDYC'); + + return defaultLanguageInfo(skipEnglishFallback); } - function displayChangeset(selection, changeset) { - if (!changeset) { - selection.append('span').html(_t.html('info_panels.history.unknown')); - return; - } + function changeLang() { + utilGetSetValue(_langInput, language()[1]); + change(true); + } - selection.append('span').attr('class', 'changeset-id').html(changeset); - var links = selection.append('div').attr('class', 'links'); + function change(skipWikidata) { + var value = utilGetSetValue(_titleInput); + var m = value.match(/https?:\/\/([-a-z]+)\.wikipedia\.org\/(?:wiki|\1-[-a-z]+)\/([^#]+)(?:#(.+))?/); - if (osm) { - links.append('a').attr('class', 'changeset-osm-link').attr('href', osm.changesetURL(changeset)).attr('target', '_blank').html('OSM'); - } + var langInfo = m && _dataWikipedia.find(function (d) { + return m[1] === d[2]; + }); - links.append('a').attr('class', 'changeset-osmcha-link').attr('href', 'https://osmcha.org/changesets/' + changeset).attr('target', '_blank').html('OSMCha'); - links.append('a').attr('class', 'changeset-achavi-link').attr('href', 'https://overpass-api.de/achavi/?changeset=' + changeset).attr('target', '_blank').html('Achavi'); - } + var syncTags = {}; - function redraw(selection) { - var selectedNoteID = context.selectedNoteID(); - osm = context.connection(); - var selected, note, entity; + if (langInfo) { + var nativeLangName = langInfo[1]; // Normalize title http://www.mediawiki.org/wiki/API:Query#Title_normalization - if (selectedNoteID && osm) { - // selected 1 note - selected = [_t('note.note') + ' ' + selectedNoteID]; - note = osm.getNote(selectedNoteID); - } else { - // selected 1..n entities - selected = context.selectedIDs().filter(function (e) { - return context.hasEntity(e); - }); + value = decodeURIComponent(m[2]).replace(/_/g, ' '); - if (selected.length) { - entity = context.entity(selected[0]); - } - } + if (m[3]) { + var anchor; // try { + // leave this out for now - #6232 + // Best-effort `anchordecode:` implementation + // anchor = decodeURIComponent(m[3].replace(/\.([0-9A-F]{2})/g, '%$1')); + // } catch (e) { - var singular = selected.length === 1 ? selected[0] : null; - selection.html(''); - selection.append('h4').attr('class', 'history-heading').html(singular || _t.html('info_panels.selected', { - n: selected.length - })); - if (!singular) return; + anchor = decodeURIComponent(m[3]); // } - if (entity) { - selection.call(redrawEntity, entity); - } else if (note) { - selection.call(redrawNote, note); - } - } + value += '#' + anchor.replace(/_/g, ' '); + } - function redrawNote(selection, note) { - if (!note || note.isNew()) { - selection.append('div').html(_t.html('info_panels.history.note_no_history')); - return; + value = value.slice(0, 1).toUpperCase() + value.slice(1); + utilGetSetValue(_langInput, nativeLangName); + utilGetSetValue(_titleInput, value); } - var list = selection.append('ul'); - list.append('li').html(_t.html('info_panels.history.note_comments') + ':').append('span').html(note.comments.length); - - if (note.comments.length) { - list.append('li').html(_t.html('info_panels.history.note_created_date') + ':').append('span').html(displayTimestamp(note.comments[0].date)); - list.append('li').html(_t.html('info_panels.history.note_created_user') + ':').call(displayUser, note.comments[0].user); + if (value) { + syncTags.wikipedia = context.cleanTagValue(language()[2] + ':' + value); + } else { + syncTags.wikipedia = undefined; } - if (osm) { - selection.append('a').attr('class', 'view-history-on-osm').attr('target', '_blank').attr('href', osm.noteURL(note)).call(svgIcon('#iD-icon-out-link', 'inline')).append('span').html(_t.html('info_panels.history.note_link_text')); - } - } + dispatch.call('change', this, syncTags); + if (skipWikidata || !value || !language()[2]) return; // attempt asynchronous update of wikidata tag.. - function redrawEntity(selection, entity) { - if (!entity || entity.isNew()) { - selection.append('div').html(_t.html('info_panels.history.no_history')); - return; - } + var initGraph = context.graph(); + var initEntityIDs = _entityIDs; + wikidata.itemsByTitle(language()[2], value, function (err, data) { + if (err || !data || !Object.keys(data).length) return; // If graph has changed, we can't apply this update. - var links = selection.append('div').attr('class', 'links'); + if (context.graph() !== initGraph) return; + var qids = Object.keys(data); + var value = qids && qids.find(function (id) { + return id.match(/^Q\d+$/); + }); + var actions = initEntityIDs.map(function (entityID) { + var entity = context.entity(entityID).tags; + var currTags = Object.assign({}, entity); // shallow copy - if (osm) { - links.append('a').attr('class', 'view-history-on-osm').attr('href', osm.historyURL(entity)).attr('target', '_blank').attr('title', _t('info_panels.history.link_text')).html('OSM'); - } + if (currTags.wikidata !== value) { + currTags.wikidata = value; + return actionChangeTags(entityID, currTags); + } - links.append('a').attr('class', 'pewu-history-viewer-link').attr('href', 'https://pewu.github.io/osm-history/#/' + entity.type + '/' + entity.osmId()).attr('target', '_blank').attr('tabindex', -1).html('PeWu'); - var list = selection.append('ul'); - list.append('li').html(_t.html('info_panels.history.version') + ':').append('span').html(entity.version); - list.append('li').html(_t.html('info_panels.history.last_edit') + ':').append('span').html(displayTimestamp(entity.timestamp)); - list.append('li').html(_t.html('info_panels.history.edited_by') + ':').call(displayUser, entity.user); - list.append('li').html(_t.html('info_panels.history.changeset') + ':').call(displayChangeset, entity.changeset); - } + return null; + }).filter(Boolean); + if (!actions.length) return; // Coalesce the update of wikidata tag into the previous tag change - var panel = function panel(selection) { - selection.call(redraw); - context.map().on('drawn.info-history', function () { - selection.call(redraw); - }); - context.on('enter.info-history', function () { - selection.call(redraw); + context.overwrite(function actionUpdateWikidataTags(graph) { + actions.forEach(function (action) { + graph = action(graph); + }); + return graph; + }, context.history().undoAnnotation()); // do not dispatch.call('change') here, because entity_editor + // changeTags() is not intended to be called asynchronously }); - }; + } - panel.off = function () { - context.map().on('drawn.info-history', null); - context.on('enter.info-history', null); + wiki.tags = function (tags) { + _tags = tags; + updateForTags(tags); }; - panel.id = 'history'; - panel.label = _t.html('info_panels.history.title'); - panel.key = _t('info_panels.history.key'); - return panel; - } - - var OSM_PRECISION = 7; - /** - * Returns a localized representation of the given length measurement. - * - * @param {Number} m area in meters - * @param {Boolean} isImperial true for U.S. customary units; false for metric - */ + function updateForTags(tags) { + var value = typeof tags[field.key] === 'string' ? tags[field.key] : ''; // Expect tag format of `tagLang:tagArticleTitle`, e.g. `fr:Paris`, with + // optional suffix of `#anchor` - function displayLength(m, isImperial) { - var d = m * (isImperial ? 3.28084 : 1); - var unit; + var m = value.match(/([^:]+):([^#]+)(?:#(.+))?/); + var tagLang = m && m[1]; + var tagArticleTitle = m && m[2]; + var anchor = m && m[3]; - if (isImperial) { - if (d >= 5280) { - d /= 5280; - unit = 'miles'; - } else { - unit = 'feet'; - } - } else { - if (d >= 1000) { - d /= 1000; - unit = 'kilometers'; - } else { - unit = 'meters'; - } - } + var tagLangInfo = tagLang && _dataWikipedia.find(function (d) { + return tagLang === d[2]; + }); // value in correct format - return _t('units.' + unit, { - quantity: d.toLocaleString(_mainLocalizer.localeCode(), { - maximumSignificantDigits: 4 - }) - }); - } - /** - * Returns a localized representation of the given area measurement. - * - * @param {Number} m2 area in square meters - * @param {Boolean} isImperial true for U.S. customary units; false for metric - */ - function displayArea(m2, isImperial) { - var locale = _mainLocalizer.localeCode(); - var d = m2 * (isImperial ? 10.7639111056 : 1); - var d1, d2, area; - var unit1 = ''; - var unit2 = ''; + if (tagLangInfo) { + var nativeLangName = tagLangInfo[1]; + utilGetSetValue(_langInput, nativeLangName); + utilGetSetValue(_titleInput, tagArticleTitle + (anchor ? '#' + anchor : '')); - if (isImperial) { - if (d >= 6969600) { - // > 0.25mi² show mi² - d1 = d / 27878400; - unit1 = 'square_miles'; - } else { - d1 = d; - unit1 = 'square_feet'; - } + if (anchor) { + try { + // Best-effort `anchorencode:` implementation + anchor = encodeURIComponent(anchor.replace(/ /g, '_')).replace(/%/g, '.'); + } catch (e) { + anchor = anchor.replace(/ /g, '_'); + } + } - if (d > 4356 && d < 43560000) { - // 0.1 - 1000 acres - d2 = d / 43560; - unit2 = 'acres'; - } - } else { - if (d >= 250000) { - // > 0.25km² show km² - d1 = d / 1000000; - unit1 = 'square_kilometers'; + _wikiURL = 'https://' + tagLang + '.wikipedia.org/wiki/' + tagArticleTitle.replace(/ /g, '_') + (anchor ? '#' + anchor : ''); // unrecognized value format } else { - d1 = d; - unit1 = 'square_meters'; - } + utilGetSetValue(_titleInput, value); - if (d > 1000 && d < 10000000) { - // 0.1 - 1000 hectares - d2 = d / 10000; - unit2 = 'hectares'; + if (value && value !== '') { + utilGetSetValue(_langInput, ''); + var defaultLangInfo = defaultLanguageInfo(); + _wikiURL = "https://".concat(defaultLangInfo[2], ".wikipedia.org/w/index.php?fulltext=1&search=").concat(value); + } else { + var shownOrDefaultLangInfo = language(true + /* skipEnglishFallback */ + ); + utilGetSetValue(_langInput, shownOrDefaultLangInfo[1]); + _wikiURL = ''; + } } } - area = _t('units.' + unit1, { - quantity: d1.toLocaleString(locale, { - maximumSignificantDigits: 4 - }) - }); - - if (d2) { - return _t('units.area_pair', { - area1: area, - area2: _t('units.' + unit2, { - quantity: d2.toLocaleString(locale, { - maximumSignificantDigits: 2 - }) - }) - }); - } else { - return area; - } - } + wiki.entityIDs = function (val) { + if (!_arguments.length) return _entityIDs; + _entityIDs = val; + return wiki; + }; - function wrap$2(x, min, max) { - var d = max - min; - return ((x - min) % d + d) % d + min; - } + wiki.focus = function () { + _titleInput.node().focus(); + }; - function clamp$1(x, min, max) { - return Math.max(min, Math.min(x, max)); + return utilRebind(wiki, dispatch, 'on'); } + uiFieldWikipedia.supportsMultiselection = false; - function displayCoordinate(deg, pos, neg) { - var locale = _mainLocalizer.localeCode(); - var min = (Math.abs(deg) - Math.floor(Math.abs(deg))) * 60; - var sec = (min - Math.floor(min)) * 60; - var displayDegrees = _t('units.arcdegrees', { - quantity: Math.floor(Math.abs(deg)).toLocaleString(locale) - }); - var displayCoordinate; - - if (Math.floor(sec) > 0) { - displayCoordinate = displayDegrees + _t('units.arcminutes', { - quantity: Math.floor(min).toLocaleString(locale) - }) + _t('units.arcseconds', { - quantity: Math.round(sec).toLocaleString(locale) - }); - } else if (Math.floor(min) > 0) { - displayCoordinate = displayDegrees + _t('units.arcminutes', { - quantity: Math.round(min).toLocaleString(locale) - }); - } else { - displayCoordinate = _t('units.arcdegrees', { - quantity: Math.round(Math.abs(deg)).toLocaleString(locale) - }); - } + var uiFields = { + access: uiFieldAccess, + address: uiFieldAddress, + check: uiFieldCheck, + combo: uiFieldCombo, + cycleway: uiFieldCycleway, + defaultCheck: uiFieldCheck, + email: uiFieldText, + identifier: uiFieldText, + lanes: uiFieldLanes, + localized: uiFieldLocalized, + roadspeed: uiFieldRoadspeed, + roadheight: uiFieldText, + manyCombo: uiFieldCombo, + multiCombo: uiFieldCombo, + networkCombo: uiFieldCombo, + number: uiFieldText, + onewayCheck: uiFieldCheck, + radio: uiFieldRadio, + restrictions: uiFieldRestrictions, + semiCombo: uiFieldCombo, + structureRadio: uiFieldRadio, + tel: uiFieldText, + text: uiFieldText, + textarea: uiFieldTextarea, + typeCombo: uiFieldCombo, + url: uiFieldText, + wikidata: uiFieldWikidata, + wikipedia: uiFieldWikipedia + }; - if (deg === 0) { - return displayCoordinate; - } else { - return _t('units.coordinate', { - coordinate: displayCoordinate, - direction: _t('units.' + (deg > 0 ? pos : neg)) - }); - } - } - /** - * Returns given coordinate pair in degree-minute-second format. - * - * @param {Array
'); // linebreak + if (taginfo) { + wrapEnter.each(bindTypeahead); + } // update - if (options.buttonText && options.buttonCallback) { - html += ''; - } - var classes = 'curtain-tooltip popover tooltip arrowed in ' + (options.tooltipClass || ''); - tooltip.classed(classes, true).selectAll('.popover-inner').html(html); + items = items.merge(itemsEnter).order(); + items.select('input.member-role').property('value', function (d) { + return d.role; + }).on('blur', changeRole).on('change', changeRole); + items.select('button.member-delete').on('click', deleteMember); + var dragOrigin, targetIndex; + items.call(d3_drag().on('start', function (d3_event) { + dragOrigin = { + x: d3_event.x, + y: d3_event.y + }; + targetIndex = null; + }).on('drag', function (d3_event) { + var x = d3_event.x - dragOrigin.x, + y = d3_event.y - dragOrigin.y; + if (!select(this).classed('dragging') && // don't display drag until dragging beyond a distance threshold + Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) <= 5) return; + var index = items.nodes().indexOf(this); + select(this).classed('dragging', true); + targetIndex = null; + selection.selectAll('li.member-row').style('transform', function (d2, index2) { + var node = select(this).node(); - if (options.buttonText && options.buttonCallback) { - var button = tooltip.selectAll('.button-section .button.action'); - button.on('click', function (d3_event) { - d3_event.preventDefault(); - options.buttonCallback(); - }); - } + if (index === index2) { + return 'translate(' + x + 'px, ' + y + 'px)'; + } else if (index2 > index && d3_event.y > node.offsetTop) { + if (targetIndex === null || index2 > targetIndex) { + targetIndex = index2; + } - var tip = copyBox(tooltip.node().getBoundingClientRect()), - w = containerNode.clientWidth, - h = containerNode.clientHeight, - tooltipWidth = 200, - tooltipArrow = 5, - side, - pos; // hack: this will have bottom placement, - // so need to reserve extra space for the tooltip illustration. + return 'translateY(-100%)'; + } else if (index2 < index && d3_event.y < node.offsetTop + node.offsetHeight) { + if (targetIndex === null || index2 < targetIndex) { + targetIndex = index2; + } - if (options.tooltipClass === 'intro-mouse') { - tip.height += 80; - } // trim box dimensions to just the portion that fits in the container.. + return 'translateY(100%)'; + } + return null; + }); + }).on('end', function (d3_event, d) { + if (!select(this).classed('dragging')) return; + var index = items.nodes().indexOf(this); + select(this).classed('dragging', false); + selection.selectAll('li.member-row').style('transform', null); - if (tooltipBox.top + tooltipBox.height > h) { - tooltipBox.height -= tooltipBox.top + tooltipBox.height - h; + if (targetIndex !== null) { + // dragged to a new position, reorder + context.perform(actionMoveMember(d.relation.id, index, targetIndex), _t('operations.reorder_members.annotation')); + context.validator().validate(); } + })); - if (tooltipBox.left + tooltipBox.width > w) { - tooltipBox.width -= tooltipBox.left + tooltipBox.width - w; - } // determine tooltip placement.. - + function bindTypeahead(d) { + var row = select(this); + var role = row.selectAll('input.member-role'); + var origValue = role.property('value'); - if (tooltipBox.top + tooltipBox.height < 100) { - // tooltip below box.. - side = 'bottom'; - pos = [tooltipBox.left + tooltipBox.width / 2 - tip.width / 2, tooltipBox.top + tooltipBox.height]; - } else if (tooltipBox.top > h - 140) { - // tooltip above box.. - side = 'top'; - pos = [tooltipBox.left + tooltipBox.width / 2 - tip.width / 2, tooltipBox.top - tip.height]; - } else { - // tooltip to the side of the tooltipBox.. - var tipY = tooltipBox.top + tooltipBox.height / 2 - tip.height / 2; + function sort(value, data) { + var sameletter = []; + var other = []; - if (_mainLocalizer.textDirection() === 'rtl') { - if (tooltipBox.left - tooltipWidth - tooltipArrow < 70) { - side = 'right'; - pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY]; - } else { - side = 'left'; - pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY]; - } - } else { - if (tooltipBox.left + tooltipBox.width + tooltipArrow + tooltipWidth > w - 70) { - side = 'left'; - pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY]; + for (var i = 0; i < data.length; i++) { + if (data[i].value.substring(0, value.length) === value) { + sameletter.push(data[i]); } else { - side = 'right'; - pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY]; + other.push(data[i]); } } - } - - if (options.duration !== 0 || !tooltip.classed(side)) { - tooltip.call(uiToggle(true)); - } - tooltip.style('top', pos[1] + 'px').style('left', pos[0] + 'px').attr('class', classes + ' ' + side); // shift popover-inner if it is very close to the top or bottom edge - // (doesn't affect the placement of the popover-arrow) + return sameletter.concat(other); + } - var shiftY = 0; + role.call(uiCombobox(context, 'member-role').fetcher(function (role, callback) { + // The `geometry` param is used in the `taginfo.js` interface for + // filtering results, as a key into the `tag_members_fractions` + // object. If we don't know the geometry because the member is + // not yet downloaded, it's ok to guess based on type. + var geometry; - if (side === 'left' || side === 'right') { - if (pos[1] < 60) { - shiftY = 60 - pos[1]; - } else if (pos[1] + tip.height > h - 100) { - shiftY = h - pos[1] - tip.height - 100; + if (d.member) { + geometry = context.graph().geometry(d.member.id); + } else if (d.type === 'relation') { + geometry = 'relation'; + } else if (d.type === 'way') { + geometry = 'line'; + } else { + geometry = 'point'; } - } - tooltip.selectAll('.popover-inner').style('top', shiftY + 'px'); - } else { - tooltip.classed('in', false).call(uiToggle(false)); + var rtype = entity.tags.type; + taginfo.roles({ + debounce: true, + rtype: rtype || '', + geometry: geometry, + query: role + }, function (err, data) { + if (!err) callback(sort(role, data)); + }); + }).on('cancel', function () { + role.property('value', origValue); + })); } - curtain.cut(box, options.duration); - return tooltip; - }; - - curtain.cut = function (datum, duration) { - darkness.datum(datum).interrupt(); - var selection; - - if (duration === 0) { - selection = darkness; - } else { - selection = darkness.transition().duration(duration || 600).ease(linear$1); + function unbind() { + var row = select(this); + row.selectAll('input.member-role').call(uiCombobox.off, context); } + } - selection.attr('d', function (d) { - var containerWidth = containerNode.clientWidth; - var containerHeight = containerNode.clientHeight; - var string = 'M 0,0 L 0,' + containerHeight + ' L ' + containerWidth + ',' + containerHeight + 'L' + containerWidth + ',0 Z'; - if (!d) return string; - return string + 'M' + d.left + ',' + d.top + 'L' + d.left + ',' + (d.top + d.height) + 'L' + (d.left + d.width) + ',' + (d.top + d.height) + 'L' + (d.left + d.width) + ',' + d.top + 'Z'; - }); + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return section; }; - curtain.remove = function () { - surface.remove(); - tooltip.remove(); - select(window).on('resize.curtain', null); - }; // ClientRects are immutable, so copy them to an object, - // in case we need to trim the height/width. - + return section; + } - function copyBox(src) { - return { - top: src.top, - right: src.right, - bottom: src.bottom, - left: src.left, - width: src.width, - height: src.height - }; - } + function actionDeleteMembers(relationId, memberIndexes) { + return function (graph) { + // Remove the members in descending order so removals won't shift what members + // are at the remaining indexes + memberIndexes.sort(function (a, b) { + return b - a; + }); - return curtain; - } + for (var i in memberIndexes) { + graph = actionDeleteMember(relationId, memberIndexes[i])(graph); + } - function uiIntroWelcome(context, reveal) { - var dispatch$1 = dispatch('done'); - var chapter = { - title: 'intro.welcome.title' + return graph; }; + } - function welcome() { - context.map().centerZoom([-85.63591, 41.94285], 19); - reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.welcome'), { - buttonText: _t.html('intro.ok'), - buttonCallback: practice + function uiSectionRawMembershipEditor(context) { + var section = uiSection('raw-membership-editor', context).shouldDisplay(function () { + return _entityIDs && _entityIDs.length; + }).label(function () { + var parents = getSharedParentRelations(); + var gt = parents.length > _maxMemberships ? '>' : ''; + var count = gt + parents.slice(0, _maxMemberships).length; + return _t('inspector.title_count', { + title: _t.html('inspector.relations'), + count: count }); - } + }).disclosureContent(renderDisclosureContent); + var taginfo = services.taginfo; + var nearbyCombo = uiCombobox(context, 'parent-relation').minItems(1).fetcher(fetchNearbyRelations).itemsMouseEnter(function (d3_event, d) { + if (d.relation) utilHighlightEntities([d.relation.id], true, context); + }).itemsMouseLeave(function (d3_event, d) { + if (d.relation) utilHighlightEntities([d.relation.id], false, context); + }); + var _inChange = false; + var _entityIDs = []; - function practice() { - reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.practice'), { - buttonText: _t.html('intro.ok'), - buttonCallback: words - }); - } + var _showBlank; - function words() { - reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.words'), { - buttonText: _t.html('intro.ok'), - buttonCallback: chapters - }); - } + var _maxMemberships = 1000; - function chapters() { - dispatch$1.call('done'); - reveal('.intro-nav-wrap .chapter-navigation', helpHtml('intro.welcome.chapters', { - next: _t('intro.navigation.title') - })); - } + function getSharedParentRelations() { + var parents = []; - chapter.enter = function () { - welcome(); - }; + for (var i = 0; i < _entityIDs.length; i++) { + var entity = context.graph().hasEntity(_entityIDs[i]); + if (!entity) continue; - chapter.exit = function () { - context.container().select('.curtain-tooltip.intro-mouse').selectAll('.counter').remove(); - }; + if (i === 0) { + parents = context.graph().parentRelations(entity); + } else { + parents = utilArrayIntersection(parents, context.graph().parentRelations(entity)); + } - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + if (!parents.length) break; + } - return utilRebind(chapter, dispatch$1, 'on'); - } + return parents; + } - function uiIntroNavigation(context, reveal) { - var dispatch$1 = dispatch('done'); - var timeouts = []; - var hallId = 'n2061'; - var townHall = [-85.63591, 41.94285]; - var springStreetId = 'w397'; - var springStreetEndId = 'n1834'; - var springStreet = [-85.63582, 41.94255]; - var onewayField = _mainPresetIndex.field('oneway'); - var maxspeedField = _mainPresetIndex.field('maxspeed'); - var chapter = { - title: 'intro.navigation.title' - }; + function getMemberships() { + var memberships = []; + var relations = getSharedParentRelations().slice(0, _maxMemberships); + var isMultiselect = _entityIDs.length > 1; + var i, relation, membership, index, member, indexedMember; - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + for (i = 0; i < relations.length; i++) { + relation = relations[i]; + membership = { + relation: relation, + members: [], + hash: osmEntity.key(relation) + }; - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + for (index = 0; index < relation.members.length; index++) { + member = relation.members[index]; - function isTownHallSelected() { - var ids = context.selectedIDs(); - return ids.length === 1 && ids[0] === hallId; - } + if (_entityIDs.indexOf(member.id) !== -1) { + indexedMember = Object.assign({}, member, { + index: index + }); + membership.members.push(indexedMember); + membership.hash += ',' + index.toString(); - function dragMap() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(townHall, context.map().center()); + if (!isMultiselect) { + // For single selections, list one entry per membership per relation. + // For multiselections, list one entry per relation. + memberships.push(membership); + membership = { + relation: relation, + members: [], + hash: osmEntity.key(relation) + }; + } + } + } - if (msec) { - reveal(null, null, { - duration: 0 - }); + if (membership.members.length) memberships.push(membership); } - context.map().centerZoomEase(townHall, 19, msec); - timeout(function () { - var centerStart = context.map().center(); - var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch'; - var dragString = helpHtml('intro.navigation.map_info') + '{br}' + helpHtml('intro.navigation.' + textId); - reveal('.surface', dragString); - context.map().on('drawn.intro', function () { - reveal('.surface', dragString, { - duration: 0 - }); + memberships.forEach(function (membership) { + membership.domId = utilUniqueDomId('membership-' + membership.relation.id); + var roles = []; + membership.members.forEach(function (member) { + if (roles.indexOf(member.role) === -1) roles.push(member.role); }); - context.map().on('move.intro', function () { - var centerNow = context.map().center(); + membership.role = roles.length === 1 ? roles[0] : roles; + }); + return memberships; + } - if (centerStart[0] !== centerNow[0] || centerStart[1] !== centerNow[1]) { - context.map().on('move.intro', null); - timeout(function () { - continueTo(zoomMap); - }, 3000); - } - }); - }, msec + 100); + function selectRelation(d3_event, d) { + d3_event.preventDefault(); // remove the hover-highlight styling - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } + utilHighlightEntities([d.relation.id], false, context); + context.enter(modeSelect(context, [d.relation.id])); } - function zoomMap() { - var zoomStart = context.map().zoom(); - var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch'; - var zoomString = helpHtml('intro.navigation.' + textId); - reveal('.surface', zoomString); - context.map().on('drawn.intro', function () { - reveal('.surface', zoomString, { - duration: 0 - }); - }); - context.map().on('move.intro', function () { - if (context.map().zoom() !== zoomStart) { - context.map().on('move.intro', null); - timeout(function () { - continueTo(features); - }, 3000); - } - }); + function zoomToRelation(d3_event, d) { + d3_event.preventDefault(); + var entity = context.entity(d.relation.id); + context.map().zoomToEase(entity); // highlight the relation in case it wasn't previously on-screen - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } + utilHighlightEntities([d.relation.id], true, context); } - function features() { - var onClick = function onClick() { - continueTo(pointsLinesAreas); - }; + function changeRole(d3_event, d) { + if (d === 0) return; // called on newrow (shouldn't happen) - reveal('.surface', helpHtml('intro.navigation.features'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.map().on('drawn.intro', function () { - reveal('.surface', helpHtml('intro.navigation.features'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); + if (_inChange) return; // avoid accidental recursive call #5731 + + var newRole = context.cleanRelationRole(select(this).property('value')); + if (!newRole.trim() && typeof d.role !== 'string') return; + var membersToUpdate = d.members.filter(function (member) { + return member.role !== newRole; }); - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); + if (membersToUpdate.length) { + _inChange = true; + context.perform(function actionChangeMemberRoles(graph) { + membersToUpdate.forEach(function (member) { + var newMember = Object.assign({}, member, { + role: newRole + }); + delete newMember.index; + graph = actionChangeMember(d.relation.id, newMember, member.index)(graph); + }); + return graph; + }, _t('operations.change_role.annotation', { + n: membersToUpdate.length + })); + context.validator().validate(); } + + _inChange = false; } - function pointsLinesAreas() { - var onClick = function onClick() { - continueTo(nodesWays); - }; + function addMembership(d, role) { + this.blur(); // avoid keeping focus on the button - reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.map().on('drawn.intro', function () { - reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - }); + _showBlank = false; - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); - } - } + function actionAddMembers(relationId, ids, role) { + return function (graph) { + for (var i in ids) { + var member = { + id: ids[i], + type: graph.entity(ids[i]).type, + role: role + }; + graph = actionAddMember(relationId, member)(graph); + } - function nodesWays() { - var onClick = function onClick() { - continueTo(clickTownHall); - }; + return graph; + }; + } - reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.map().on('drawn.intro', function () { - reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - }); + if (d.relation) { + context.perform(actionAddMembers(d.relation.id, _entityIDs, role), _t('operations.add_member.annotation', { + n: _entityIDs.length + })); + context.validator().validate(); + } else { + var relation = osmRelation(); + context.perform(actionAddEntity(relation), actionAddMembers(relation.id, _entityIDs, role), _t('operations.add.annotation.relation')); // changing the mode also runs `validate` - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); + context.enter(modeSelect(context, [relation.id]).newFeature(true)); } } - function clickTownHall() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var entity = context.hasEntity(hallId); - if (!entity) return; - reveal(null, null, { - duration: 0 - }); - context.map().centerZoomEase(entity.loc, 19, 500); - timeout(function () { - var entity = context.hasEntity(hallId); - if (!entity) return; - var box = pointBox(entity.loc, context); - var textId = context.lastPointerType() === 'mouse' ? 'click_townhall' : 'tap_townhall'; - reveal(box, helpHtml('intro.navigation.' + textId)); - context.map().on('move.intro drawn.intro', function () { - var entity = context.hasEntity(hallId); - if (!entity) return; - var box = pointBox(entity.loc, context); - reveal(box, helpHtml('intro.navigation.' + textId), { - duration: 0 - }); - }); - context.on('enter.intro', function () { - if (isTownHallSelected()) continueTo(selectedTownHall); - }); - }, 550); // after centerZoomEase + function deleteMembership(d3_event, d) { + this.blur(); // avoid keeping focus on the button - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } - }); + if (d === 0) return; // called on newrow (shouldn't happen) + // remove the hover-highlight styling - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + utilHighlightEntities([d.relation.id], false, context); + var indexes = d.members.map(function (member) { + return member.index; + }); + context.perform(actionDeleteMembers(d.relation.id, indexes), _t('operations.delete_member.annotation', { + n: _entityIDs.length + })); + context.validator().validate(); } - function selectedTownHall() { - if (!isTownHallSelected()) return clickTownHall(); - var entity = context.hasEntity(hallId); - if (!entity) return clickTownHall(); - var box = pointBox(entity.loc, context); - - var onClick = function onClick() { - continueTo(editorTownHall); + function fetchNearbyRelations(q, callback) { + var newRelation = { + relation: null, + value: _t('inspector.new_relation'), + display: _t.html('inspector.new_relation') }; + var entityID = _entityIDs[0]; + var result = []; + var graph = context.graph(); - reveal(box, helpHtml('intro.navigation.selected_townhall'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.map().on('move.intro drawn.intro', function () { - var entity = context.hasEntity(hallId); - if (!entity) return; - var box = pointBox(entity.loc, context); - reveal(box, helpHtml('intro.navigation.selected_townhall'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick + function baseDisplayLabel(entity) { + var matched = _mainPresetIndex.match(entity, graph); + var presetName = matched && matched.name() || _t('inspector.relation'); + var entityName = utilDisplayName(entity) || ''; + return presetName + ' ' + entityName; + } + + var explicitRelation = q && context.hasEntity(q.toLowerCase()); + + if (explicitRelation && explicitRelation.type === 'relation' && explicitRelation.id !== entityID) { + // loaded relation is specified explicitly, only show that + result.push({ + relation: explicitRelation, + value: baseDisplayLabel(explicitRelation) + ' ' + explicitRelation.id }); - }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } - }); + } else { + context.history().intersects(context.map().extent()).forEach(function (entity) { + if (entity.type !== 'relation' || entity.id === entityID) return; + var value = baseDisplayLabel(entity); + if (q && (value + ' ' + entity.id).toLowerCase().indexOf(q.toLowerCase()) === -1) return; + result.push({ + relation: entity, + value: value + }); + }); + result.sort(function (a, b) { + return osmRelation.creationOrder(a.relation, b.relation); + }); // Dedupe identical names by appending relation id - see #2891 - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); + var dupeGroups = Object.values(utilArrayGroupBy(result, 'value')).filter(function (v) { + return v.length > 1; + }); + dupeGroups.forEach(function (group) { + group.forEach(function (obj) { + obj.value += ' ' + obj.relation.id; + }); + }); } - } - function editorTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // disallow scrolling + result.forEach(function (obj) { + obj.title = obj.value; + }); + result.unshift(newRelation); + callback(result); + } - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); + function renderDisclosureContent(selection) { + var memberships = getMemberships(); + var list = selection.selectAll('.member-list').data([0]); + list = list.enter().append('ul').attr('class', 'member-list').merge(list); + var items = list.selectAll('li.member-row-normal').data(memberships, function (d) { + return d.hash; + }); + items.exit().each(unbind).remove(); // Enter - var onClick = function onClick() { - continueTo(presetTownHall); - }; + var itemsEnter = items.enter().append('li').attr('class', 'member-row member-row-normal form-field'); // highlight the relation in the map while hovering on the list item - reveal('.entity-editor-pane', helpHtml('intro.navigation.editor_townhall'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick + itemsEnter.on('mouseover', function (d3_event, d) { + utilHighlightEntities([d.relation.id], true, context); + }).on('mouseout', function (d3_event, d) { + utilHighlightEntities([d.relation.id], false, context); }); - context.on('exit.intro', function () { - continueTo(clickTownHall); + var labelEnter = itemsEnter.append('label').attr('class', 'field-label').attr('for', function (d) { + return d.domId; }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } + var labelLink = labelEnter.append('span').attr('class', 'label-text').append('a').attr('href', '#').on('click', selectRelation); + labelLink.append('span').attr('class', 'member-entity-type').html(function (d) { + var matched = _mainPresetIndex.match(d.relation, context.graph()); + return matched && matched.name() || _t('inspector.relation'); + }); + labelLink.append('span').attr('class', 'member-entity-name').html(function (d) { + return utilDisplayName(d.relation); }); + labelEnter.append('button').attr('class', 'remove member-delete').call(svgIcon('#iD-operation-delete')).on('click', deleteMembership); + labelEnter.append('button').attr('class', 'member-zoom').attr('title', _t('icons.zoom_to')).call(svgIcon('#iD-icon-framed-dot', 'monochrome')).on('click', zoomToRelation); + var wrapEnter = itemsEnter.append('div').attr('class', 'form-field-input-wrap form-field-input-member'); + wrapEnter.append('input').attr('class', 'member-role').attr('id', function (d) { + return d.domId; + }).property('type', 'text').property('value', function (d) { + return typeof d.role === 'string' ? d.role : ''; + }).attr('title', function (d) { + return Array.isArray(d.role) ? d.role.filter(Boolean).join('\n') : d.role; + }).attr('placeholder', function (d) { + return Array.isArray(d.role) ? _t('inspector.multiple_roles') : _t('inspector.role'); + }).classed('mixed', function (d) { + return Array.isArray(d.role); + }).call(utilNoAuto).on('blur', changeRole).on('change', changeRole); - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - nextStep(); + if (taginfo) { + wrapEnter.each(bindTypeahead); } - } - - function presetTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. - - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // disallow scrolling - - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); // preset match, in case the user happened to change it. - var entity = context.entity(context.selectedIDs()[0]); - var preset = _mainPresetIndex.match(entity, context.graph()); + var newMembership = list.selectAll('.member-row-new').data(_showBlank ? [0] : []); // Exit - var onClick = function onClick() { - continueTo(fieldsTownHall); - }; + newMembership.exit().remove(); // Enter - reveal('.entity-editor-pane .section-feature-type', helpHtml('intro.navigation.preset_townhall', { - preset: preset.name() - }), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.on('exit.intro', function () { - continueTo(clickTownHall); - }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } + var newMembershipEnter = newMembership.enter().append('li').attr('class', 'member-row member-row-new form-field'); + var newLabelEnter = newMembershipEnter.append('label').attr('class', 'field-label'); + newLabelEnter.append('input').attr('placeholder', _t('inspector.choose_relation')).attr('type', 'text').attr('class', 'member-entity-input').call(utilNoAuto); + newLabelEnter.append('button').attr('class', 'remove member-delete').call(svgIcon('#iD-operation-delete')).on('click', function () { + list.selectAll('.member-row-new').remove(); }); + var newWrapEnter = newMembershipEnter.append('div').attr('class', 'form-field-input-wrap form-field-input-member'); + newWrapEnter.append('input').attr('class', 'member-role').property('type', 'text').attr('placeholder', _t('inspector.role')).call(utilNoAuto); // Update - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - nextStep(); - } - } - - function fieldsTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. + newMembership = newMembership.merge(newMembershipEnter); + newMembership.selectAll('.member-entity-input').on('blur', cancelEntity) // if it wasn't accepted normally, cancel it + .call(nearbyCombo.on('accept', acceptEntity).on('cancel', cancelEntity)); // Container for the Add button - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // disallow scrolling + var addRow = selection.selectAll('.add-row').data([0]); // enter - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); + var addRowEnter = addRow.enter().append('div').attr('class', 'add-row'); + var addRelationButton = addRowEnter.append('button').attr('class', 'add-relation'); + addRelationButton.call(svgIcon('#iD-icon-plus', 'light')); + addRelationButton.call(uiTooltip().title(_t.html('inspector.add_to_relation')).placement(_mainLocalizer.textDirection() === 'ltr' ? 'right' : 'left')); + addRowEnter.append('div').attr('class', 'space-value'); // preserve space - var onClick = function onClick() { - continueTo(closeTownHall); - }; + addRowEnter.append('div').attr('class', 'space-buttons'); // preserve space + // update - reveal('.entity-editor-pane .section-preset-fields', helpHtml('intro.navigation.fields_townhall'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.on('exit.intro', function () { - continueTo(clickTownHall); - }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } + addRow = addRow.merge(addRowEnter); + addRow.select('.add-relation').on('click', function () { + _showBlank = true; + section.reRender(); + list.selectAll('.member-entity-input').node().focus(); }); - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - nextStep(); - } - } + function acceptEntity(d) { + if (!d) { + cancelEntity(); + return; + } // remove hover-higlighting - function closeTownHall() { - if (!isTownHallSelected()) return clickTownHall(); - var selector = '.entity-editor-pane button.close svg use'; - var href = select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', helpHtml('intro.navigation.close_townhall', { - button: icon(href, 'inline') - })); - context.on('exit.intro', function () { - continueTo(searchStreet); - }); - context.history().on('change.intro', function () { - // update the close icon in the tooltip if the user edits something. - var selector = '.entity-editor-pane button.close svg use'; - var href = select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', helpHtml('intro.navigation.close_townhall', { - button: icon(href, 'inline') - }), { - duration: 0 - }); - }); - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); + if (d.relation) utilHighlightEntities([d.relation.id], false, context); + var role = context.cleanRelationRole(list.selectAll('.member-row-new .member-role').property('value')); + addMembership(d, role); } - } - - function searchStreet() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); // ensure spring street exists - var msec = transitionTime(springStreet, context.map().center()); + function cancelEntity() { + var input = newMembership.selectAll('.member-entity-input'); + input.property('value', ''); // remove hover-higlighting - if (msec) { - reveal(null, null, { - duration: 0 - }); + context.surface().selectAll('.highlighted').classed('highlighted', false); } - context.map().centerZoomEase(springStreet, 19, msec); // ..and user can see it + function bindTypeahead(d) { + var row = select(this); + var role = row.selectAll('input.member-role'); + var origValue = role.property('value'); - timeout(function () { - reveal('.search-header input', helpHtml('intro.navigation.search_street', { - name: _t('intro.graph.name.spring-street') - })); - context.container().select('.search-header input').on('keyup.intro', checkSearchResult); - }, msec + 100); - } + function sort(value, data) { + var sameletter = []; + var other = []; - function checkSearchResult() { - var first = context.container().select('.feature-list-item:nth-child(0n+2)'); // skip "No Results" item + for (var i = 0; i < data.length; i++) { + if (data[i].value.substring(0, value.length) === value) { + sameletter.push(data[i]); + } else { + other.push(data[i]); + } + } - var firstName = first.select('.entity-name'); - var name = _t('intro.graph.name.spring-street'); + return sameletter.concat(other); + } - if (!firstName.empty() && firstName.html() === name) { - reveal(first.node(), helpHtml('intro.navigation.choose_street', { - name: name - }), { - duration: 300 - }); - context.on('exit.intro', function () { - continueTo(selectedStreet); - }); - context.container().select('.search-header input').on('keydown.intro', eventCancel, true).on('keyup.intro', null); + role.call(uiCombobox(context, 'member-role').fetcher(function (role, callback) { + var rtype = d.relation.tags.type; + taginfo.roles({ + debounce: true, + rtype: rtype || '', + geometry: context.graph().geometry(_entityIDs[0]), + query: role + }, function (err, data) { + if (!err) callback(sort(role, data)); + }); + }).on('cancel', function () { + role.property('value', origValue); + })); } - function continueTo(nextStep) { - context.on('exit.intro', null); - context.container().select('.search-header input').on('keydown.intro', null).on('keyup.intro', null); - nextStep(); + function unbind() { + var row = select(this); + row.selectAll('input.member-role').call(uiCombobox.off, context); } } - function selectedStreet() { - if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) { - return searchStreet(); - } + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + _showBlank = false; + return section; + }; - var onClick = function onClick() { - continueTo(editorStreet); - }; + return section; + } - var entity = context.entity(springStreetEndId); - var box = pointBox(entity.loc, context); - box.height = 500; - reveal(box, helpHtml('intro.navigation.selected_street', { - name: _t('intro.graph.name.spring-street') - }), { - duration: 600, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick + function uiSectionSelectionList(context) { + var _selectedIDs = []; + var section = uiSection('selected-features', context).shouldDisplay(function () { + return _selectedIDs.length > 1; + }).label(function () { + return _t('inspector.title_count', { + title: _t.html('inspector.features'), + count: _selectedIDs.length }); - timeout(function () { - context.map().on('move.intro drawn.intro', function () { - var entity = context.hasEntity(springStreetEndId); - if (!entity) return; - var box = pointBox(entity.loc, context); - box.height = 500; - reveal(box, helpHtml('intro.navigation.selected_street', { - name: _t('intro.graph.name.spring-street') - }), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - }); - }, 600); // after reveal. + }).disclosureContent(renderDisclosureContent); + context.history().on('change.selectionList', function (difference) { + if (difference) { + section.reRender(); + } + }); - context.on('enter.intro', function (mode) { - if (!context.hasEntity(springStreetId)) { - return continueTo(searchStreet); - } + section.entityIDs = function (val) { + if (!arguments.length) return _selectedIDs; + _selectedIDs = val; + return section; + }; - var ids = context.selectedIDs(); + function selectEntity(d3_event, entity) { + context.enter(modeSelect(context, [entity.id])); + } - if (mode.id !== 'select' || !ids.length || ids[0] !== springStreetId) { - // keep Spring Street selected.. - context.enter(modeSelect(context, [springStreetId])); - } - }); - context.history().on('change.intro', function () { - if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) { - timeout(function () { - continueTo(searchStreet); - }, 300); // after any transition (e.g. if user deleted intersection) - } - }); + function deselectEntity(d3_event, entity) { + var selectedIDs = _selectedIDs.slice(); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); + var index = selectedIDs.indexOf(entity.id); + + if (index > -1) { + selectedIDs.splice(index, 1); + context.enter(modeSelect(context, selectedIDs)); } } - function editorStreet() { - var selector = '.entity-editor-pane button.close svg use'; - var href = select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', helpHtml('intro.navigation.street_different_fields') + '{br}' + helpHtml('intro.navigation.editor_street', { - button: icon(href, 'inline'), - field1: onewayField.label(), - field2: maxspeedField.label() - })); - context.on('exit.intro', function () { - continueTo(play); - }); - context.history().on('change.intro', function () { - // update the close icon in the tooltip if the user edits something. - var selector = '.entity-editor-pane button.close svg use'; - var href = select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', helpHtml('intro.navigation.street_different_fields') + '{br}' + helpHtml('intro.navigation.editor_street', { - button: icon(href, 'inline'), - field1: onewayField.label(), - field2: maxspeedField.label() - }), { - duration: 0 + function renderDisclosureContent(selection) { + var list = selection.selectAll('.feature-list').data([0]); + list = list.enter().append('ul').attr('class', 'feature-list').merge(list); + + var entities = _selectedIDs.map(function (id) { + return context.hasEntity(id); + }).filter(Boolean); + + var items = list.selectAll('.feature-list-item').data(entities, osmEntity.key); + items.exit().remove(); // Enter + + var enter = items.enter().append('li').attr('class', 'feature-list-item').each(function (d) { + select(this).on('mouseover', function () { + utilHighlightEntities([d.id], true, context); + }).on('mouseout', function () { + utilHighlightEntities([d.id], false, context); }); }); + var label = enter.append('button').attr('class', 'label').on('click', selectEntity); + label.append('span').attr('class', 'entity-geom-icon').call(svgIcon('', 'pre-text')); + label.append('span').attr('class', 'entity-type'); + label.append('span').attr('class', 'entity-name'); + enter.append('button').attr('class', 'close').attr('title', _t('icons.deselect')).on('click', deselectEntity).call(svgIcon('#iD-icon-close')); // Update - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } - - function play() { - dispatch$1.call('done'); - reveal('.ideditor', helpHtml('intro.navigation.play', { - next: _t('intro.points.title') - }), { - tooltipBox: '.intro-nav-wrap .chapter-point', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - reveal('.ideditor'); - } + items = items.merge(enter); + items.selectAll('.entity-geom-icon use').attr('href', function () { + var entity = this.parentNode.parentNode.__data__; + return '#iD-icon-' + entity.geometry(context.graph()); + }); + items.selectAll('.entity-type').html(function (entity) { + return _mainPresetIndex.match(entity, context.graph()).name(); + }); + items.selectAll('.entity-name').html(function (d) { + // fetch latest entity + var entity = context.entity(d.id); + return utilDisplayName(entity); }); } - chapter.enter = function () { - dragMap(); - }; - - chapter.exit = function () { - timeouts.forEach(window.clearTimeout); - context.on('enter.intro exit.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.search-header input').on('keydown.intro keyup.intro', null); - }; + return section; + } - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + function uiEntityEditor(context) { + var dispatch = dispatch$8('choose'); + var _state = 'select'; + var _coalesceChanges = false; + var _modified = false; - return utilRebind(chapter, dispatch$1, 'on'); - } + var _base; - function uiIntroPoint(context, reveal) { - var dispatch$1 = dispatch('done'); - var timeouts = []; - var intersection = [-85.63279, 41.94394]; - var building = [-85.632422, 41.944045]; - var cafePreset = _mainPresetIndex.item('amenity/cafe'); - var _pointID = null; - var chapter = { - title: 'intro.points.title' - }; + var _entityIDs; - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + var _activePresets = []; - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + var _newFeature; - function addPoint() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(intersection, context.map().center()); + var _sections; - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + function entityEditor(selection) { + var combinedTags = utilCombinedTags(_entityIDs, context.graph()); // Header - context.map().centerZoomEase(intersection, 19, msec); - timeout(function () { - var tooltip = reveal('button.add-point', helpHtml('intro.points.points_info') + '{br}' + helpHtml('intro.points.add_point')); - _pointID = null; - tooltip.selectAll('.popover-inner').insert('svg', 'span').attr('class', 'tooltip-illustration').append('use').attr('xlink:href', '#iD-graphic-points'); - context.on('enter.intro', function (mode) { - if (mode.id !== 'add-point') return; - continueTo(placePoint); - }); - }, msec + 100); + var header = selection.selectAll('.header').data([0]); // Enter - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } - } + var headerEnter = header.enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'preset-reset preset-choose').call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-forward' : '#iD-icon-backward')); + headerEnter.append('button').attr('class', 'close').on('click', function () { + context.enter(modeBrowse(context)); + }).call(svgIcon(_modified ? '#iD-icon-apply' : '#iD-icon-close')); + headerEnter.append('h3'); // Update - function placePoint() { - if (context.mode().id !== 'add-point') { - return chapter.restart(); - } + header = header.merge(headerEnter); + header.selectAll('h3').html(_entityIDs.length === 1 ? _t.html('inspector.edit') : _t.html('inspector.edit_features')); + header.selectAll('.preset-reset').on('click', function () { + dispatch.call('choose', this, _activePresets); + }); // Body - var pointBox = pad(building, 150, context); - var textId = context.lastPointerType() === 'mouse' ? 'place_point' : 'place_point_touch'; - reveal(pointBox, helpHtml('intro.points.' + textId)); - context.map().on('move.intro drawn.intro', function () { - pointBox = pad(building, 150, context); - reveal(pointBox, helpHtml('intro.points.' + textId), { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return chapter.restart(); - _pointID = context.mode().selectedIDs()[0]; - continueTo(searchPreset); - }); + var body = selection.selectAll('.inspector-body').data([0]); // Enter - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + var bodyEnter = body.enter().append('div').attr('class', 'entity-editor inspector-body sep-top'); // Update - function searchPreset() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return addPoint(); - } // disallow scrolling + body = body.merge(bodyEnter); + if (!_sections) { + _sections = [uiSectionSelectionList(context), uiSectionFeatureType(context).on('choose', function (presets) { + dispatch.call('choose', this, presets); + }), uiSectionEntityIssues(context), uiSectionPresetFields(context).on('change', changeTags).on('revert', revertTags), uiSectionRawTagEditor('raw-tag-editor', context).on('change', changeTags), uiSectionRawMemberEditor(context), uiSectionRawMembershipEditor(context)]; + } - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.points.search_cafe', { - preset: cafePreset.name() - })); - context.on('enter.intro', function (mode) { - if (!_pointID || !context.hasEntity(_pointID)) { - return continueTo(addPoint); + _sections.forEach(function (section) { + if (section.entityIDs) { + section.entityIDs(_entityIDs); } - var ids = context.selectedIDs(); + if (section.presets) { + section.presets(_activePresets); + } - if (mode.id !== 'select' || !ids.length || ids[0] !== _pointID) { - // keep the user's point selected.. - context.enter(modeSelect(context, [_pointID])); // disallow scrolling + if (section.tags) { + section.tags(combinedTags); + } - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.points.search_cafe', { - preset: cafePreset.name() - })); - context.history().on('change.intro', null); + if (section.state) { + section.state(_state); } + + body.call(section.render); }); - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + context.history().on('change.entity-editor', historyChanged); - if (first.classed('preset-amenity-cafe')) { - context.container().select('.preset-search-input').on('keydown.intro', eventCancel, true).on('keyup.intro', null); - reveal(first.select('.preset-list-button').node(), helpHtml('intro.points.choose_cafe', { - preset: cafePreset.name() - }), { - duration: 300 - }); - context.history().on('change.intro', function () { - continueTo(aboutFeatureEditor); - }); + function historyChanged(difference) { + if (selection.selectAll('.entity-editor').empty()) return; + if (_state === 'hide') return; + var significant = !difference || difference.didChange.properties || difference.didChange.addition || difference.didChange.deletion; + if (!significant) return; + _entityIDs = _entityIDs.filter(context.hasEntity); + if (!_entityIDs.length) return; + var priorActivePreset = _activePresets.length === 1 && _activePresets[0]; + loadActivePresets(); + var graph = context.graph(); + entityEditor.modified(_base !== graph); + entityEditor(selection); + + if (priorActivePreset && _activePresets.length === 1 && priorActivePreset !== _activePresets[0]) { + // flash the button to indicate the preset changed + context.container().selectAll('.entity-editor button.preset-reset .label').style('background-color', '#fff').transition().duration(750).style('background-color', null); } } + } // Tag changes that fire on input can all get coalesced into a single + // history operation when the user leaves the field. #2342 + // Use explicit entityIDs in case the selection changes before the event is fired. - function continueTo(nextStep) { - context.on('enter.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - nextStep(); - } - } - function aboutFeatureEditor() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return addPoint(); - } + function changeTags(entityIDs, changed, onInput) { + var actions = []; - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.points.feature_editor'), { - tooltipClass: 'intro-points-describe', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(addName); - } - }); - }, 400); - context.on('exit.intro', function () { - // if user leaves select mode here, just continue with the tutorial. - continueTo(reselectPoint); - }); + for (var i in entityIDs) { + var entityID = entityIDs[i]; + var entity = context.entity(entityID); + var tags = Object.assign({}, entity.tags); // shallow copy - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + for (var k in changed) { + if (!k) continue; + var v = changed[k]; - function addName() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return addPoint(); - } // reset pane, in case user happened to change it.. + if (v !== undefined || tags.hasOwnProperty(k)) { + tags[k] = v; + } + } + if (!onInput) { + tags = utilCleanTags(tags); + } - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - var addNameString = helpHtml('intro.points.fields_info') + '{br}' + helpHtml('intro.points.add_name'); - timeout(function () { - // It's possible for the user to add a name in a previous step.. - // If so, don't tell them to add the name in this step. - // Give them an OK button instead. - var entity = context.entity(_pointID); + if (!fastDeepEqual(entity.tags, tags)) { + actions.push(actionChangeTags(entityID, tags)); + } + } - if (entity.tags.name) { - var tooltip = reveal('.entity-editor-pane', addNameString, { - tooltipClass: 'intro-points-describe', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(addCloseEditor); - } + if (actions.length) { + var combinedAction = function combinedAction(graph) { + actions.forEach(function (action) { + graph = action(graph); }); - tooltip.select('.instruction').style('display', 'none'); + return graph; + }; + + var annotation = _t('operations.change_tags.annotation'); + + if (_coalesceChanges) { + context.overwrite(combinedAction, annotation); } else { - reveal('.entity-editor-pane', addNameString, { - tooltipClass: 'intro-points-describe' - }); + context.perform(combinedAction, annotation); + _coalesceChanges = !!onInput; } - }, 400); - context.history().on('change.intro', function () { - continueTo(addCloseEditor); - }); - context.on('exit.intro', function () { - // if user leaves select mode here, just continue with the tutorial. - continueTo(reselectPoint); - }); + } // if leaving field (blur event), rerun validation - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); + + if (!onInput) { + context.validator().validate(); } } - function addCloseEditor() { - // reset pane, in case user happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - var selector = '.entity-editor-pane button.close svg use'; - var href = select(selector).attr('href') || '#iD-icon-close'; - context.on('exit.intro', function () { - continueTo(reselectPoint); - }); - reveal('.entity-editor-pane', helpHtml('intro.points.add_close', { - button: icon(href, 'inline') - })); + function revertTags(keys) { + var actions = []; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + for (var i in _entityIDs) { + var entityID = _entityIDs[i]; + var original = context.graph().base().entities[entityID]; + var changed = {}; - function reselectPoint() { - if (!_pointID) return chapter.restart(); - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); // make sure it's still a cafe, in case user somehow changed it.. + for (var j in keys) { + var key = keys[j]; + changed[key] = original ? original.tags[key] : undefined; + } - var oldPreset = _mainPresetIndex.match(entity, context.graph()); - context.replace(actionChangePreset(_pointID, oldPreset, cafePreset)); - context.enter(modeBrowse(context)); - var msec = transitionTime(entity.loc, context.map().center()); + var entity = context.entity(entityID); + var tags = Object.assign({}, entity.tags); // shallow copy - if (msec) { - reveal(null, null, { - duration: 0 - }); + for (var k in changed) { + if (!k) continue; + var v = changed[k]; + + if (v !== undefined || tags.hasOwnProperty(k)) { + tags[k] = v; + } + } + + tags = utilCleanTags(tags); + + if (!fastDeepEqual(entity.tags, tags)) { + actions.push(actionChangeTags(entityID, tags)); + } } - context.map().centerEase(entity.loc, msec); - timeout(function () { - var box = pointBox(entity.loc, context); - reveal(box, helpHtml('intro.points.reselect'), { - duration: 600 - }); - timeout(function () { - context.map().on('move.intro drawn.intro', function () { - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); - var box = pointBox(entity.loc, context); - reveal(box, helpHtml('intro.points.reselect'), { - duration: 0 - }); + if (actions.length) { + var combinedAction = function combinedAction(graph) { + actions.forEach(function (action) { + graph = action(graph); }); - }, 600); // after reveal.. + return graph; + }; - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - continueTo(updatePoint); - }); - }, msec + 100); + var annotation = _t('operations.change_tags.annotation'); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + if (_coalesceChanges) { + context.overwrite(combinedAction, annotation); + } else { + context.perform(combinedAction, annotation); + _coalesceChanges = false; + } } + + context.validator().validate(); } - function updatePoint() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return continueTo(reselectPoint); - } // reset pane, in case user happened to untag the point.. + entityEditor.modified = function (val) { + if (!arguments.length) return _modified; + _modified = val; + return entityEditor; + }; + entityEditor.state = function (val) { + if (!arguments.length) return _state; + _state = val; + return entityEditor; + }; - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - context.on('exit.intro', function () { - continueTo(reselectPoint); - }); - context.history().on('change.intro', function () { - continueTo(updateCloseEditor); - }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.points.update'), { - tooltipClass: 'intro-points-describe' - }); - }, 400); + entityEditor.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; // always reload these even if the entityIDs are unchanged, since we + // could be reselecting after something like dragging a node - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + _base = context.graph(); + _coalesceChanges = false; + if (val && _entityIDs && utilArrayIdentical(_entityIDs, val)) return entityEditor; // exit early if no change - function updateCloseEditor() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return continueTo(reselectPoint); - } // reset pane, in case user happened to change it.. + _entityIDs = val; + loadActivePresets(true); + return entityEditor.modified(false); + }; + entityEditor.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return entityEditor; + }; - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - context.on('exit.intro', function () { - continueTo(rightClickPoint); - }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.points.update_close', { - button: icon('#iD-icon-close', 'inline') - })); - }, 500); + function loadActivePresets(isForNewSelection) { + var graph = context.graph(); + var counts = {}; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); + for (var i in _entityIDs) { + var entity = graph.hasEntity(_entityIDs[i]); + if (!entity) return; + var match = _mainPresetIndex.match(entity, graph); + if (!counts[match.id]) counts[match.id] = 0; + counts[match.id] += 1; } - } - function rightClickPoint() { - if (!_pointID) return chapter.restart(); - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); - context.enter(modeBrowse(context)); - var box = pointBox(entity.loc, context); - var textId = context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch'; - reveal(box, helpHtml('intro.points.' + textId), { - duration: 600 + var matches = Object.keys(counts).sort(function (p1, p2) { + return counts[p2] - counts[p1]; + }).map(function (pID) { + return _mainPresetIndex.item(pID); }); - timeout(function () { - context.map().on('move.intro', function () { - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); - var box = pointBox(entity.loc, context); - reveal(box, helpHtml('intro.points.' + textId), { - duration: 0 - }); - }); - }, 600); // after reveal - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - var ids = context.selectedIDs(); - if (ids.length !== 1 || ids[0] !== _pointID) return; - timeout(function () { - var node = selectMenuItem(context, 'delete').node(); - if (!node) return; - continueTo(enterDelete); - }, 50); // after menu visible - }); + if (!isForNewSelection) { + // A "weak" preset doesn't set any tags. (e.g. "Address") + var weakPreset = _activePresets.length === 1 && !_activePresets[0].isFallback() && Object.keys(_activePresets[0].addTags || {}).length === 0; // Don't replace a weak preset with a fallback preset (e.g. "Point") - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - nextStep(); + if (weakPreset && matches.length === 1 && matches[0].isFallback()) return; } + + entityEditor.presets(matches); } - function enterDelete() { - if (!_pointID) return chapter.restart(); - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); - var node = selectMenuItem(context, 'delete').node(); + entityEditor.presets = function (val) { + if (!arguments.length) return _activePresets; // don't reload the same preset - if (!node) { - return continueTo(rightClickPoint); + if (!utilArrayIdentical(val, _activePresets)) { + _activePresets = val; } - reveal('.edit-menu', helpHtml('intro.points.delete'), { - padding: 50 - }); - timeout(function () { - context.map().on('move.intro', function () { - reveal('.edit-menu', helpHtml('intro.points.delete'), { - duration: 0, - padding: 50 - }); - }); - }, 300); // after menu visible - - context.on('exit.intro', function () { - if (!_pointID) return chapter.restart(); - var entity = context.hasEntity(_pointID); - if (entity) return continueTo(rightClickPoint); // point still exists - }); - context.history().on('change.intro', function (changed) { - if (changed.deleted().length) { - continueTo(undo); - } - }); - - function continueTo(nextStep) { - context.map().on('move.intro', null); - context.history().on('change.intro', null); - context.on('exit.intro', null); - nextStep(); - } - } + return entityEditor; + }; - function undo() { - context.history().on('change.intro', function () { - continueTo(play); - }); - reveal('.top-toolbar button.undo-button', helpHtml('intro.points.undo')); + return utilRebind(entityEditor, dispatch, 'on'); + } - function continueTo(nextStep) { - context.history().on('change.intro', null); - nextStep(); - } - } + function uiPresetList(context) { + var dispatch = dispatch$8('cancel', 'choose'); - function play() { - dispatch$1.call('done'); - reveal('.ideditor', helpHtml('intro.points.play', { - next: _t('intro.areas.title') - }), { - tooltipBox: '.intro-nav-wrap .chapter-area', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - reveal('.ideditor'); - } - }); - } + var _entityIDs; - chapter.enter = function () { - addPoint(); - }; + var _currLoc; - chapter.exit = function () { - timeouts.forEach(window.clearTimeout); - context.on('enter.intro exit.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - }; + var _currentPresets; - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + var _autofocus = false; - return utilRebind(chapter, dispatch$1, 'on'); - } + function presetList(selection) { + if (!_entityIDs) return; + var presets = _mainPresetIndex.matchAllGeometry(entityGeometries()); + selection.html(''); + var messagewrap = selection.append('div').attr('class', 'header fillL'); + var message = messagewrap.append('h3').html(_t.html('inspector.choose')); + messagewrap.append('button').attr('class', 'preset-choose').on('click', function () { + dispatch.call('cancel', this); + }).call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward')); - function uiIntroArea(context, reveal) { - var dispatch$1 = dispatch('done'); - var playground = [-85.63552, 41.94159]; - var playgroundPreset = _mainPresetIndex.item('leisure/playground'); - var nameField = _mainPresetIndex.field('name'); - var descriptionField = _mainPresetIndex.field('description'); - var timeouts = []; + function initialKeydown(d3_event) { + // hack to let delete shortcut work when search is autofocused + if (search.property('value').length === 0 && (d3_event.keyCode === utilKeybinding.keyCodes['â«'] || d3_event.keyCode === utilKeybinding.keyCodes['â¦'])) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + operationDelete(context, _entityIDs)(); // hack to let undo work when search is autofocused + } else if (search.property('value').length === 0 && (d3_event.ctrlKey || d3_event.metaKey) && d3_event.keyCode === utilKeybinding.keyCodes.z) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + context.undo(); + } else if (!d3_event.ctrlKey && !d3_event.metaKey) { + // don't check for delete/undo hack on future keydown events + select(this).on('keydown', keydown); + keydown.call(this, d3_event); + } + } - var _areaID; + function keydown(d3_event) { + // down arrow + if (d3_event.keyCode === utilKeybinding.keyCodes['â'] && // if insertion point is at the end of the string + search.node().selectionStart === search.property('value').length) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // move focus to the first item in the preset list - var chapter = { - title: 'intro.areas.title' - }; + var buttons = list.selectAll('.preset-list-button'); + if (!buttons.empty()) buttons.nodes()[0].focus(); + } + } - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + function keypress(d3_event) { + // enter + var value = search.property('value'); - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + if (d3_event.keyCode === 13 && // â© Return + value.length) { + list.selectAll('.preset-list-item:first-child').each(function (d) { + d.choose.call(this); + }); + } + } - function revealPlayground(center, text, options) { - var padding = 180 * Math.pow(2, context.map().zoom() - 19.5); - var box = pad(center, padding, context); - reveal(box, text, options); - } + function inputevent() { + var value = search.property('value'); + list.classed('filtered', value.length); + var results, messageText; - function addArea() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - _areaID = null; - var msec = transitionTime(playground, context.map().center()); + if (value.length) { + results = presets.search(value, entityGeometries()[0], _currLoc); + messageText = _t('inspector.results', { + n: results.collection.length, + search: value + }); + } else { + results = _mainPresetIndex.defaults(entityGeometries()[0], 36, !context.inIntro(), _currLoc); + messageText = _t('inspector.choose'); + } - if (msec) { - reveal(null, null, { - duration: 0 - }); + list.call(drawList, results); + message.html(messageText); } - context.map().centerZoomEase(playground, 19, msec); - timeout(function () { - var tooltip = reveal('button.add-area', helpHtml('intro.areas.add_playground')); - tooltip.selectAll('.popover-inner').insert('svg', 'span').attr('class', 'tooltip-illustration').append('use').attr('xlink:href', '#iD-graphic-areas'); - context.on('enter.intro', function (mode) { - if (mode.id !== 'add-area') return; - continueTo(startPlayground); - }); - }, msec + 100); + var searchWrap = selection.append('div').attr('class', 'search-header'); + searchWrap.call(svgIcon('#iD-icon-search', 'pre-text')); + var search = searchWrap.append('input').attr('class', 'preset-search-input').attr('placeholder', _t('inspector.search')).attr('type', 'search').call(utilNoAuto).on('keydown', initialKeydown).on('keypress', keypress).on('input', inputevent); - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); + if (_autofocus) { + search.node().focus(); // Safari 14 doesn't always like to focus immediately, + // so try again on the next pass + + setTimeout(function () { + search.node().focus(); + }, 0); } + + var listWrap = selection.append('div').attr('class', 'inspector-body'); + var list = listWrap.append('div').attr('class', 'preset-list').call(drawList, _mainPresetIndex.defaults(entityGeometries()[0], 36, !context.inIntro(), _currLoc)); + context.features().on('change.preset-list', updateForFeatureHiddenState); } - function startPlayground() { - if (context.mode().id !== 'add-area') { - return chapter.restart(); - } + function drawList(list, presets) { + presets = presets.matchAllGeometry(entityGeometries()); + var collection = presets.collection.reduce(function (collection, preset) { + if (!preset) return collection; - _areaID = null; - context.map().zoomEase(19.5, 500); - timeout(function () { - var textId = context.lastPointerType() === 'mouse' ? 'starting_node_click' : 'starting_node_tap'; - var startDrawString = helpHtml('intro.areas.start_playground') + helpHtml('intro.areas.' + textId); - revealPlayground(playground, startDrawString, { - duration: 250 - }); - timeout(function () { - context.map().on('move.intro drawn.intro', function () { - revealPlayground(playground, startDrawString, { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'draw-area') return chapter.restart(); - continueTo(continuePlayground); - }); - }, 250); // after reveal - }, 550); // after easing + if (preset.members) { + if (preset.members.collection.filter(function (preset) { + return preset.addable(); + }).length > 1) { + collection.push(CategoryItem(preset)); + } + } else if (preset.addable()) { + collection.push(PresetItem(preset)); + } - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } + return collection; + }, []); + var items = list.selectAll('.preset-list-item').data(collection, function (d) { + return d.preset.id; + }); + items.order(); + items.exit().remove(); + items.enter().append('div').attr('class', function (item) { + return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); + }).classed('current', function (item) { + return _currentPresets.indexOf(item.preset) !== -1; + }).each(function (item) { + select(this).call(item); + }).style('opacity', 0).transition().style('opacity', 1); + updateForFeatureHiddenState(); } - function continuePlayground() { - if (context.mode().id !== 'draw-area') { - return chapter.restart(); - } + function itemKeydown(d3_event) { + // the actively focused item + var item = select(this.closest('.preset-list-item')); + var parentItem = select(item.node().parentNode.closest('.preset-list-item')); // arrow down, move focus to the next, lower item - _areaID = null; - revealPlayground(playground, helpHtml('intro.areas.continue_playground'), { - duration: 250 - }); - timeout(function () { - context.map().on('move.intro drawn.intro', function () { - revealPlayground(playground, helpHtml('intro.areas.continue_playground'), { - duration: 0 - }); - }); - }, 250); // after reveal + if (d3_event.keyCode === utilKeybinding.keyCodes['â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // the next item in the list at the same level - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-area') { - var entity = context.hasEntity(context.selectedIDs()[0]); + var nextItem = select(item.node().nextElementSibling); // if there is no next item in this list - if (entity && entity.nodes.length >= 6) { - return continueTo(finishPlayground); - } else { - return; - } - } else if (mode.id === 'select') { - _areaID = context.selectedIDs()[0]; - return continueTo(searchPresets); - } else { - return chapter.restart(); + if (nextItem.empty()) { + // if there is a parent item + if (!parentItem.empty()) { + // the item is the last item of a sublist, + // select the next item at the parent level + nextItem = select(parentItem.node().nextElementSibling); + } // if the focused item is expanded + + } else if (select(this).classed('expanded')) { + // select the first subitem instead + nextItem = item.select('.subgrid .preset-list-item:first-child'); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + if (!nextItem.empty()) { + // focus on the next item + nextItem.select('.preset-list-button').node().focus(); + } // arrow up, move focus to the previous, higher item - function finishPlayground() { - if (context.mode().id !== 'draw-area') { - return chapter.restart(); - } + } else if (d3_event.keyCode === utilKeybinding.keyCodes['â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // the previous item in the list at the same level - _areaID = null; - var finishString = helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + helpHtml('intro.areas.finish_playground'); - revealPlayground(playground, finishString, { - duration: 250 - }); - timeout(function () { - context.map().on('move.intro drawn.intro', function () { - revealPlayground(playground, finishString, { - duration: 0 - }); - }); - }, 250); // after reveal + var previousItem = select(item.node().previousElementSibling); // if there is no previous item in this list - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-area') { - return; - } else if (mode.id === 'select') { - _areaID = context.selectedIDs()[0]; - return continueTo(searchPresets); - } else { - return chapter.restart(); + if (previousItem.empty()) { + // if there is a parent item + if (!parentItem.empty()) { + // the item is the first subitem of a sublist select the parent item + previousItem = parentItem; + } // if the previous item is expanded + + } else if (previousItem.select('.preset-list-button').classed('expanded')) { + // select the last subitem of the sublist of the previous item + previousItem = previousItem.select('.subgrid .preset-list-item:last-child'); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + if (!previousItem.empty()) { + // focus on the previous item + previousItem.select('.preset-list-button').node().focus(); + } else { + // the focus is at the top of the list, move focus back to the search field + var search = select(this.closest('.preset-list-pane')).select('.preset-search-input'); + search.node().focus(); + } // arrow left, move focus to the parent item if there is one - function searchPresets() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + } else if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // if there is a parent item, focus on the parent item - var ids = context.selectedIDs(); + if (!parentItem.empty()) { + parentItem.select('.preset-list-button').node().focus(); + } // arrow right, choose this item - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - context.enter(modeSelect(context, [_areaID])); - } // disallow scrolling + } else if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + item.datum().choose.call(select(this).node()); + } + } + function CategoryItem(preset) { + var box, + sublist, + shown = false; - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.areas.search_playground', { - preset: playgroundPreset.name() - })); - }, 400); // after preset list pane visible.. + function item(selection) { + var wrap = selection.append('div').attr('class', 'preset-list-button-wrap category'); - context.on('enter.intro', function (mode) { - if (!_areaID || !context.hasEntity(_areaID)) { - return continueTo(addArea); + function click() { + var isExpanded = select(this).classed('expanded'); + var iconName = isExpanded ? _mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward' : '#iD-icon-down'; + select(this).classed('expanded', !isExpanded); + select(this).selectAll('div.label-inner svg.icon use').attr('href', iconName); + item.choose(); } - var ids = context.selectedIDs(); + var geometries = entityGeometries(); + var button = wrap.append('button').attr('class', 'preset-list-button').classed('expanded', false).call(uiPresetIcon().geometry(geometries.length === 1 && geometries[0]).preset(preset)).on('click', click).on('keydown', function (d3_event) { + // right arrow, expand the focused item + if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // if the item isn't expanded - if (mode.id !== 'select' || !ids.length || ids[0] !== _areaID) { - // keep the user's area selected.. - context.enter(modeSelect(context, [_areaID])); // reset pane, in case user somehow happened to change it.. + if (!select(this).classed('expanded')) { + // toggle expansion (expand the item) + click.call(this, d3_event); + } // left arrow, collapse the focused item - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling + } else if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // if the item is expanded - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.areas.search_playground', { - preset: playgroundPreset.name() - })); - context.history().on('change.intro', null); - } - }); + if (select(this).classed('expanded')) { + // toggle expansion (collapse the item) + click.call(this, d3_event); + } + } else { + itemKeydown.call(this, d3_event); + } + }); + var label = button.append('div').attr('class', 'label').append('div').attr('class', 'label-inner'); + label.append('div').attr('class', 'namepart').call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward', 'inline')).append('span').html(function () { + return preset.nameLabel() + '…'; + }); + box = selection.append('div').attr('class', 'subgrid').style('max-height', '0px').style('opacity', 0); + box.append('div').attr('class', 'arrow'); + sublist = box.append('div').attr('class', 'preset-list fillL3'); + } - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + item.choose = function () { + if (!box || !sublist) return; - if (first.classed('preset-leisure-playground')) { - reveal(first.select('.preset-list-button').node(), helpHtml('intro.areas.choose_playground', { - preset: playgroundPreset.name() - }), { - duration: 300 - }); - context.container().select('.preset-search-input').on('keydown.intro', eventCancel, true).on('keyup.intro', null); - context.history().on('change.intro', function () { - continueTo(clickAddField); - }); + if (shown) { + shown = false; + box.transition().duration(200).style('opacity', '0').style('max-height', '0px').style('padding-bottom', '0px'); + } else { + shown = true; + var members = preset.members.matchAllGeometry(entityGeometries()); + sublist.call(drawList, members); + box.transition().duration(200).style('opacity', '1').style('max-height', 200 + members.collection.length * 190 + 'px').style('padding-bottom', '10px'); } - } + }; - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - nextStep(); - } + item.preset = preset; + return item; } - function clickAddField() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); + function PresetItem(preset) { + function item(selection) { + var wrap = selection.append('div').attr('class', 'preset-list-button-wrap'); + var geometries = entityGeometries(); + var button = wrap.append('button').attr('class', 'preset-list-button').call(uiPresetIcon().geometry(geometries.length === 1 && geometries[0]).preset(preset)).on('click', item.choose).on('keydown', itemKeydown); + var label = button.append('div').attr('class', 'label').append('div').attr('class', 'label-inner'); + var nameparts = [preset.nameLabel(), preset.subtitleLabel()].filter(Boolean); + label.selectAll('.namepart').data(nameparts).enter().append('div').attr('class', 'namepart').html(function (d) { + return d; + }); + wrap.call(item.reference.button); + selection.call(item.reference.body); } - var ids = context.selectedIDs(); + item.choose = function () { + if (select(this).classed('disabled')) return; - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } + if (!context.inIntro()) { + _mainPresetIndex.setMostRecent(preset, entityGeometries()[0]); + } - if (!context.container().select('.form-field-description').empty()) { - return continueTo(describePlayground); - } // disallow scrolling + context.perform(function (graph) { + for (var i in _entityIDs) { + var entityID = _entityIDs[i]; + var oldPreset = _mainPresetIndex.match(graph.entity(entityID), graph); + graph = actionChangePreset(entityID, oldPreset, preset)(graph); + } + return graph; + }, _t('operations.change_tags.annotation')); + context.validator().validate(); // rerun validation - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // It's possible for the user to add a description in a previous step.. - // If they did this already, just continue to next step. + dispatch.call('choose', this, preset); + }; - var entity = context.entity(_areaID); + item.help = function (d3_event) { + d3_event.stopPropagation(); + item.reference.toggle(); + }; - if (entity.tags.description) { - return continueTo(play); - } // scroll "Add field" into view + item.preset = preset; + item.reference = uiTagReference(preset.reference()); + return item; + } + function updateForFeatureHiddenState() { + if (!_entityIDs.every(context.hasEntity)) return; + var geometries = entityGeometries(); + var button = context.container().selectAll('.preset-list .preset-list-button'); // remove existing tooltips - var box = context.container().select('.more-fields').node().getBoundingClientRect(); + button.call(uiTooltip().destroyAny); + button.each(function (item, index) { + var hiddenPresetFeaturesId; - if (box.top > 300) { - var pane = context.container().select('.entity-editor-pane .inspector-body'); - var start = pane.node().scrollTop; - var end = start + (box.top - 300); - pane.transition().duration(250).tween('scroll.inspector', function () { - var node = this; - var i = d3_interpolateNumber(start, end); - return function (t) { - node.scrollTop = i(t); - }; - }); + for (var i in geometries) { + hiddenPresetFeaturesId = context.features().isHiddenPreset(item.preset, geometries[i]); + if (hiddenPresetFeaturesId) break; } - timeout(function () { - reveal('.more-fields .combobox-input', helpHtml('intro.areas.add_field', { - name: nameField.label(), - description: descriptionField.label() - }), { - duration: 300 - }); - context.container().select('.more-fields .combobox-input').on('click.intro', function () { - // Watch for the combobox to appear... - var watcher; - watcher = window.setInterval(function () { - if (!context.container().select('div.combobox').empty()) { - window.clearInterval(watcher); - continueTo(chooseDescriptionField); - } - }, 300); - }); - }, 300); // after "Add Field" visible - }, 400); // after editor pane visible + var isHiddenPreset = !context.inIntro() && !!hiddenPresetFeaturesId && (_currentPresets.length !== 1 || item.preset !== _currentPresets[0]); + select(this).classed('disabled', isHiddenPreset); - context.on('exit.intro', function () { - return continueTo(searchPresets); + if (isHiddenPreset) { + var isAutoHidden = context.features().autoHidden(hiddenPresetFeaturesId); + select(this).call(uiTooltip().title(_t.html('inspector.hidden_preset.' + (isAutoHidden ? 'zoom' : 'manual'), { + features: _t.html('feature.' + hiddenPresetFeaturesId + '.description') + })).placement(index < 2 ? 'bottom' : 'top')); + } }); - - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.more-fields .combobox-input').on('click.intro', null); - context.on('exit.intro', null); - nextStep(); - } } - function chooseDescriptionField() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + presetList.autofocus = function (val) { + if (!arguments.length) return _autofocus; + _autofocus = val; + return presetList; + }; - var ids = context.selectedIDs(); + presetList.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + _currLoc = null; + + if (_entityIDs && _entityIDs.length) { + // calculate current location + var extent = _entityIDs.reduce(function (extent, entityID) { + var entity = context.graph().entity(entityID); + return extent.extend(entity.extent(context.graph())); + }, geoExtent()); + + _currLoc = extent.center(); // match presets + + var presets = _entityIDs.map(function (entityID) { + return _mainPresetIndex.match(context.entity(entityID), context.graph()); + }); - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); + presetList.presets(presets); } - if (!context.container().select('.form-field-description').empty()) { - return continueTo(describePlayground); - } // Make sure combobox is ready.. + return presetList; + }; + presetList.presets = function (val) { + if (!arguments.length) return _currentPresets; + _currentPresets = val; + return presetList; + }; - if (context.container().select('div.combobox').empty()) { - return continueTo(clickAddField); - } // Watch for the combobox to go away.. + function entityGeometries() { + var counts = {}; + for (var i in _entityIDs) { + var entityID = _entityIDs[i]; + var entity = context.entity(entityID); + var geometry = entity.geometry(context.graph()); // Treat entities on addr:interpolation lines as points, not vertices (#3241) - var watcher; - watcher = window.setInterval(function () { - if (context.container().select('div.combobox').empty()) { - window.clearInterval(watcher); - timeout(function () { - if (context.container().select('.form-field-description').empty()) { - continueTo(retryChooseDescription); - } else { - continueTo(describePlayground); - } - }, 300); // after description field added. + if (geometry === 'vertex' && entity.isOnAddressLine(context.graph())) { + geometry = 'point'; } - }, 300); - reveal('div.combobox', helpHtml('intro.areas.choose_field', { - field: descriptionField.label() - }), { - duration: 300 - }); - context.on('exit.intro', function () { - return continueTo(searchPresets); - }); - function continueTo(nextStep) { - if (watcher) window.clearInterval(watcher); - context.on('exit.intro', null); - nextStep(); + if (!counts[geometry]) counts[geometry] = 0; + counts[geometry] += 1; } - } - function describePlayground() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + return Object.keys(counts).sort(function (geom1, geom2) { + return counts[geom2] - counts[geom1]; + }); + } - var ids = context.selectedIDs(); + return utilRebind(presetList, dispatch, 'on'); + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } // reset pane, in case user happened to change it.. + function uiViewOnOSM(context) { + var _what; // an osmEntity or osmNote - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); + function viewOnOSM(selection) { + var url; - if (context.container().select('.form-field-description').empty()) { - return continueTo(retryChooseDescription); + if (_what instanceof osmEntity) { + url = context.connection().entityURL(_what); + } else if (_what instanceof osmNote) { + url = context.connection().noteURL(_what); } - context.on('exit.intro', function () { - continueTo(play); - }); - reveal('.entity-editor-pane', helpHtml('intro.areas.describe_playground', { - button: icon('#iD-icon-close', 'inline') - }), { - duration: 300 - }); + var data = !_what || _what.isNew() ? [] : [_what]; + var link = selection.selectAll('.view-on-osm').data(data, function (d) { + return d.id; + }); // exit - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + link.exit().remove(); // enter - function retryChooseDescription() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + var linkEnter = link.enter().append('a').attr('class', 'view-on-osm').attr('target', '_blank').attr('href', url).call(svgIcon('#iD-icon-out-link', 'inline')); + linkEnter.append('span').html(_t.html('inspector.view_on_osm')); + } - var ids = context.selectedIDs(); + viewOnOSM.what = function (_) { + if (!arguments.length) return _what; + _what = _; + return viewOnOSM; + }; - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } // reset pane, in case user happened to change it.. + return viewOnOSM; + } + function uiInspector(context) { + var presetList = uiPresetList(context); + var entityEditor = uiEntityEditor(context); + var wrap = select(null), + presetPane = select(null), + editorPane = select(null); + var _state = 'select'; - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - reveal('.entity-editor-pane', helpHtml('intro.areas.retry_add_field', { - field: descriptionField.label() - }), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(clickAddField); - } - }); - context.on('exit.intro', function () { - return continueTo(searchPresets); - }); + var _entityIDs; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + var _newFeature = false; - function play() { - dispatch$1.call('done'); - reveal('.ideditor', helpHtml('intro.areas.play', { - next: _t('intro.lines.title') - }), { - tooltipBox: '.intro-nav-wrap .chapter-line', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - reveal('.ideditor'); - } + function inspector(selection) { + presetList.entityIDs(_entityIDs).autofocus(_newFeature).on('choose', inspector.setPreset).on('cancel', function () { + inspector.setPreset(); }); - } + entityEditor.state(_state).entityIDs(_entityIDs).on('choose', inspector.showList); + wrap = selection.selectAll('.panewrap').data([0]); + var enter = wrap.enter().append('div').attr('class', 'panewrap'); + enter.append('div').attr('class', 'preset-list-pane pane'); + enter.append('div').attr('class', 'entity-editor-pane pane'); + wrap = wrap.merge(enter); + presetPane = wrap.selectAll('.preset-list-pane'); + editorPane = wrap.selectAll('.entity-editor-pane'); - chapter.enter = function () { - addArea(); - }; + function shouldDefaultToPresetList() { + // always show the inspector on hover + if (_state !== 'select') return false; // can only change preset on single selection - chapter.exit = function () { - timeouts.forEach(window.clearTimeout); - context.on('enter.intro exit.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - context.container().select('.more-fields .combobox-input').on('click.intro', null); - }; + if (_entityIDs.length !== 1) return false; + var entityID = _entityIDs[0]; + var entity = context.hasEntity(entityID); + if (!entity) return false; // default to inspector if there are already tags - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + if (entity.hasNonGeometryTags()) return false; // prompt to select preset if feature is new and untagged - return utilRebind(chapter, dispatch$1, 'on'); - } + if (_newFeature) return true; // all existing features except vertices should default to inspector - function uiIntroLine(context, reveal) { - var dispatch$1 = dispatch('done'); - var timeouts = []; - var _tulipRoadID = null; - var flowerRoadID = 'w646'; - var tulipRoadStart = [-85.6297754121684, 41.95805253325314]; - var tulipRoadMidpoint = [-85.62975395449628, 41.95787501510204]; - var tulipRoadIntersection = [-85.62974496187628, 41.95742515554585]; - var roadCategory = _mainPresetIndex.item('category-road_minor'); - var residentialPreset = _mainPresetIndex.item('highway/residential'); - var woodRoadID = 'w525'; - var woodRoadEndID = 'n2862'; - var woodRoadAddNode = [-85.62390110349587, 41.95397111462291]; - var woodRoadDragEndpoint = [-85.623867390213, 41.95466987786487]; - var woodRoadDragMidpoint = [-85.62386254803509, 41.95430395953872]; - var washingtonStreetID = 'w522'; - var twelfthAvenueID = 'w1'; - var eleventhAvenueEndID = 'n3550'; - var twelfthAvenueEndID = 'n5'; - var _washingtonSegmentID = null; - var eleventhAvenueEnd = context.entity(eleventhAvenueEndID).loc; - var twelfthAvenueEnd = context.entity(twelfthAvenueEndID).loc; - var deleteLinesLoc = [-85.6219395542764, 41.95228033922477]; - var twelfthAvenue = [-85.62219310052491, 41.952505413152956]; - var chapter = { - title: 'intro.lines.title' - }; + if (entity.geometry(context.graph()) !== 'vertex') return false; // show vertex relations if any - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + if (context.graph().parentRelations(entity).length) return false; // show vertex issues if there are any - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + if (context.validator().getEntityIssues(entityID).length) return false; // show turn retriction editor for junction vertices - function addLine() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(tulipRoadStart, context.map().center()); + if (entity.isHighwayIntersection(context.graph())) return false; // otherwise show preset list for uninteresting vertices - if (msec) { - reveal(null, null, { - duration: 0 - }); + return true; } - context.map().centerZoomEase(tulipRoadStart, 18.5, msec); - timeout(function () { - var tooltip = reveal('button.add-line', helpHtml('intro.lines.add_line')); - tooltip.selectAll('.popover-inner').insert('svg', 'span').attr('class', 'tooltip-illustration').append('use').attr('xlink:href', '#iD-graphic-lines'); - context.on('enter.intro', function (mode) { - if (mode.id !== 'add-line') return; - continueTo(startLine); - }); - }, msec + 100); - - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); + if (shouldDefaultToPresetList()) { + wrap.style('right', '-100%'); + editorPane.classed('hide', true); + presetPane.classed('hide', false).call(presetList); + } else { + wrap.style('right', '0%'); + presetPane.classed('hide', true); + editorPane.classed('hide', false).call(entityEditor); } + + var footer = selection.selectAll('.footer').data([0]); + footer = footer.enter().append('div').attr('class', 'footer').merge(footer); + footer.call(uiViewOnOSM(context).what(context.hasEntity(_entityIDs.length === 1 && _entityIDs[0]))); } - function startLine() { - if (context.mode().id !== 'add-line') return chapter.restart(); - _tulipRoadID = null; - var padding = 70 * Math.pow(2, context.map().zoom() - 18); - var box = pad(tulipRoadStart, padding, context); - box.height = box.height + 100; - var textId = context.lastPointerType() === 'mouse' ? 'start_line' : 'start_line_tap'; - var startLineString = helpHtml('intro.lines.missing_road') + '{br}' + helpHtml('intro.lines.line_draw_info') + helpHtml('intro.lines.' + textId); - reveal(box, startLineString); - context.map().on('move.intro drawn.intro', function () { - padding = 70 * Math.pow(2, context.map().zoom() - 18); - box = pad(tulipRoadStart, padding, context); - box.height = box.height + 100; - reveal(box, startLineString, { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'draw-line') return chapter.restart(); - continueTo(drawLine); + inspector.showList = function (presets) { + presetPane.classed('hide', false); + wrap.transition().styleTween('right', function () { + return interpolate$1('0%', '-100%'); + }).on('end', function () { + editorPane.classed('hide', true); }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + if (presets) { + presetList.presets(presets); } - } - function drawLine() { - if (context.mode().id !== 'draw-line') return chapter.restart(); - _tulipRoadID = context.mode().selectedIDs()[0]; - context.map().centerEase(tulipRoadMidpoint, 500); - timeout(function () { - var padding = 200 * Math.pow(2, context.map().zoom() - 18.5); - var box = pad(tulipRoadMidpoint, padding, context); - box.height = box.height * 2; - reveal(box, helpHtml('intro.lines.intersect', { - name: _t('intro.graph.name.flower-street') - })); - context.map().on('move.intro drawn.intro', function () { - padding = 200 * Math.pow(2, context.map().zoom() - 18.5); - box = pad(tulipRoadMidpoint, padding, context); - box.height = box.height * 2; - reveal(box, helpHtml('intro.lines.intersect', { - name: _t('intro.graph.name.flower-street') - }), { - duration: 0 - }); + presetPane.call(presetList.autofocus(true)); + }; + + inspector.setPreset = function (preset) { + // upon setting multipolygon, go to the area preset list instead of the editor + if (preset && preset.id === 'type/multipolygon') { + presetPane.call(presetList.autofocus(true)); + } else { + editorPane.classed('hide', false); + wrap.transition().styleTween('right', function () { + return interpolate$1('-100%', '0%'); + }).on('end', function () { + presetPane.classed('hide', true); }); - }, 550); // after easing.. - context.history().on('change.intro', function () { - if (isLineConnected()) { - continueTo(continueLine); - } - }); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-line') { - return; - } else if (mode.id === 'select') { - continueTo(retryIntersect); - return; - } else { - return chapter.restart(); + if (preset) { + entityEditor.presets([preset]); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); + editorPane.call(entityEditor); } - } + }; - function isLineConnected() { - var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); + inspector.state = function (val) { + if (!arguments.length) return _state; + _state = val; + entityEditor.state(_state); // remove any old field help overlay that might have gotten attached to the inspector - if (!entity) return false; - var drawNodes = context.graph().childNodes(entity); - return drawNodes.some(function (node) { - return context.graph().parentWays(node).some(function (parent) { - return parent.id === flowerRoadID; - }); - }); - } + context.container().selectAll('.field-help-body').remove(); + return inspector; + }; - function retryIntersect() { - select(window).on('pointerdown.intro mousedown.intro', eventCancel, true); - var box = pad(tulipRoadIntersection, 80, context); - reveal(box, helpHtml('intro.lines.retry_intersect', { - name: _t('intro.graph.name.flower-street') - })); - timeout(chapter.restart, 3000); - } + inspector.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return inspector; + }; - function continueLine() { - if (context.mode().id !== 'draw-line') return chapter.restart(); + inspector.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return inspector; + }; - var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); + return inspector; + } - if (!entity) return chapter.restart(); - context.map().centerEase(tulipRoadIntersection, 500); - var continueLineText = helpHtml('intro.lines.continue_line') + '{br}' + helpHtml('intro.lines.finish_line_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + helpHtml('intro.lines.finish_road'); - reveal('.surface', continueLineText); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-line') return;else if (mode.id === 'select') return continueTo(chooseCategoryRoad);else return chapter.restart(); - }); + function uiImproveOsmComments() { + var _qaItem; - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } - } + function issueComments(selection) { + // make the div immediately so it appears above the buttons + var comments = selection.selectAll('.comments-container').data([0]); + comments = comments.enter().append('div').attr('class', 'comments-container').merge(comments); // must retrieve comments from API before they can be displayed - function chooseCategoryRoad() { - if (context.mode().id !== 'select') return chapter.restart(); - context.on('exit.intro', function () { - return chapter.restart(); - }); - var button = context.container().select('.preset-category-road_minor .preset-list-button'); - if (button.empty()) return chapter.restart(); // disallow scrolling + services.improveOSM.getComments(_qaItem).then(function (d) { + if (!d.comments) return; // nothing to do here - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); - reveal(button.node(), helpHtml('intro.lines.choose_category_road', { - category: roadCategory.name() - })); - button.on('click.intro', function () { - continueTo(choosePresetResidential); - }); - }, 400); // after editor pane visible + var commentEnter = comments.selectAll('.comment').data(d.comments).enter().append('div').attr('class', 'comment'); + commentEnter.append('div').attr('class', 'comment-avatar').call(svgIcon('#iD-icon-avatar', 'comment-avatar-icon')); + var mainEnter = commentEnter.append('div').attr('class', 'comment-main'); + var metadataEnter = mainEnter.append('div').attr('class', 'comment-metadata'); + metadataEnter.append('div').attr('class', 'comment-author').each(function (d) { + var osm = services.osm; + var selection = select(this); - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-list-button').on('click.intro', null); - context.on('exit.intro', null); - nextStep(); - } - } + if (osm && d.username) { + selection = selection.append('a').attr('class', 'comment-author-link').attr('href', osm.userURL(d.username)).attr('target', '_blank'); + } - function choosePresetResidential() { - if (context.mode().id !== 'select') return chapter.restart(); - context.on('exit.intro', function () { - return chapter.restart(); - }); - var subgrid = context.container().select('.preset-category-road_minor .subgrid'); - if (subgrid.empty()) return chapter.restart(); - subgrid.selectAll(':not(.preset-highway-residential) .preset-list-button').on('click.intro', function () { - continueTo(retryPresetResidential); - }); - subgrid.selectAll('.preset-highway-residential .preset-list-button').on('click.intro', function () { - continueTo(nameRoad); - }); - timeout(function () { - reveal(subgrid.node(), helpHtml('intro.lines.choose_preset_residential', { - preset: residentialPreset.name() - }), { - tooltipBox: '.preset-highway-residential .preset-list-button', - duration: 300 + selection.html(function (d) { + return d.username; + }); }); - }, 300); - - function continueTo(nextStep) { - context.container().select('.preset-list-button').on('click.intro', null); - context.on('exit.intro', null); - nextStep(); - } - } // selected wrong road type + metadataEnter.append('div').attr('class', 'comment-date').html(function (d) { + return _t.html('note.status.commented', { + when: localeDateString(d.timestamp) + }); + }); + mainEnter.append('div').attr('class', 'comment-text').append('p').html(function (d) { + return d.text; + }); + })["catch"](function (err) { + console.log(err); // eslint-disable-line no-console + }); + } + function localeDateString(s) { + if (!s) return null; + var options = { + day: 'numeric', + month: 'short', + year: 'numeric' + }; + var d = new Date(s * 1000); // timestamp is served in seconds, date takes ms - function retryPresetResidential() { - if (context.mode().id !== 'select') return chapter.restart(); - context.on('exit.intro', function () { - return chapter.restart(); - }); // disallow scrolling + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(_mainLocalizer.localeCode(), options); + } - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - var button = context.container().select('.entity-editor-pane .preset-list-button'); - reveal(button.node(), helpHtml('intro.lines.retry_preset_residential', { - preset: residentialPreset.name() - })); - button.on('click.intro', function () { - continueTo(chooseCategoryRoad); - }); - }, 500); + issueComments.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return issueComments; + }; - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-list-button').on('click.intro', null); - context.on('exit.intro', null); - nextStep(); - } + return issueComments; + } + + function uiImproveOsmDetails(context) { + var _qaItem; + + function issueDetail(d) { + if (d.desc) return d.desc; + var issueKey = d.issueKey; + d.replacements = d.replacements || {}; + d.replacements["default"] = _t.html('inspector.unknown'); // special key `default` works as a fallback string + + return _t.html("QA.improveOSM.error_types.".concat(issueKey, ".description"), d.replacements); } - function nameRoad() { - context.on('exit.intro', function () { - continueTo(didNameRoad); + function improveOsmDetails(selection) { + var details = selection.selectAll('.error-details').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.lines.name_road', { - button: icon('#iD-icon-close', 'inline') - }), { - tooltipClass: 'intro-lines-name_road' - }); - }, 500); + details.exit().remove(); + var detailsEnter = details.enter().append('div').attr('class', 'error-details qa-details-container'); // description - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + var descriptionEnter = detailsEnter.append('div').attr('class', 'qa-details-subsection'); + descriptionEnter.append('h4').html(_t.html('QA.keepRight.detail_description')); + descriptionEnter.append('div').attr('class', 'qa-details-description-text').html(issueDetail); // If there are entity links in the error message.. - function didNameRoad() { - context.history().checkpoint('doneAddLine'); - timeout(function () { - reveal('.surface', helpHtml('intro.lines.did_name_road'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(updateLine); + var relatedEntities = []; + descriptionEnter.selectAll('.error_entity_link, .error_object_link').attr('href', '#').each(function () { + var link = select(this); + var isObjectLink = link.classed('error_object_link'); + var entityID = isObjectLink ? utilEntityRoot(_qaItem.objectType) + _qaItem.objectId : this.textContent; + var entity = context.hasEntity(entityID); + relatedEntities.push(entityID); // Add click handler + + link.on('mouseenter', function () { + utilHighlightEntities([entityID], true, context); + }).on('mouseleave', function () { + utilHighlightEntities([entityID], false, context); + }).on('click', function (d3_event) { + d3_event.preventDefault(); + utilHighlightEntities([entityID], false, context); + var osmlayer = context.layers().layer('osm'); + + if (!osmlayer.enabled()) { + osmlayer.enabled(true); } - }); - }, 500); - function continueTo(nextStep) { - nextStep(); - } - } + context.map().centerZoom(_qaItem.loc, 20); - function updateLine() { - context.history().reset('doneAddLine'); + if (entity) { + context.enter(modeSelect(context, [entityID])); + } else { + context.loadEntity(entityID, function (err, result) { + if (err) return; + var entity = result.data.find(function (e) { + return e.id === entityID; + }); + if (entity) context.enter(modeSelect(context, [entityID])); + }); + } + }); // Replace with friendly name if possible + // (The entity may not yet be loaded into the graph) - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return chapter.restart(); - } + if (entity) { + var name = utilDisplayName(entity); // try to use common name - var msec = transitionTime(woodRoadDragMidpoint, context.map().center()); + if (!name && !isObjectLink) { + var preset = _mainPresetIndex.match(entity, context.graph()); + name = preset && !preset.isFallback() && preset.name(); // fallback to preset name + } - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + if (name) { + this.innerText = name; + } + } + }); // Don't hide entities related to this error - #5880 - context.map().centerZoomEase(woodRoadDragMidpoint, 19, msec); - timeout(function () { - var padding = 250 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragMidpoint, padding, context); + context.features().forceVisible(relatedEntities); + context.map().pan([0, 0]); // trigger a redraw + } - var advance = function advance() { - continueTo(addNode); - }; + improveOsmDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmDetails; + }; - reveal(box, helpHtml('intro.lines.update_line'), { - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - context.map().on('move.intro drawn.intro', function () { - var padding = 250 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragMidpoint, padding, context); - reveal(box, helpHtml('intro.lines.update_line'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - }); - }, msec + 100); + return improveOsmDetails; + } - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } + function uiImproveOsmHeader() { + var _qaItem; - function addNode() { - context.history().reset('doneAddLine'); + function issueTitle(d) { + var issueKey = d.issueKey; + d.replacements = d.replacements || {}; + d.replacements["default"] = _t.html('inspector.unknown'); // special key `default` works as a fallback string - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return chapter.restart(); - } + return _t.html("QA.improveOSM.error_types.".concat(issueKey, ".title"), d.replacements); + } - var padding = 40 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadAddNode, padding, context); - var addNodeString = helpHtml('intro.lines.add_node' + (context.lastPointerType() === 'mouse' ? '' : '_touch')); - reveal(box, addNodeString); - context.map().on('move.intro drawn.intro', function () { - var padding = 40 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadAddNode, padding, context); - reveal(box, addNodeString, { - duration: 0 - }); + function improveOsmHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - context.history().on('change.intro', function (changed) { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } - - if (changed.created().length === 1) { - timeout(function () { - continueTo(startDragEndpoint); - }, 500); - } + header.exit().remove(); + var headerEnter = header.enter().append('div').attr('class', 'qa-header'); + var svgEnter = headerEnter.append('div').attr('class', 'qa-header-icon').classed('new', function (d) { + return d.id < 0; + }).append('svg').attr('width', '20px').attr('height', '30px').attr('viewbox', '0 0 20 30').attr('class', function (d) { + return "preset-icon-28 qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.itemType); }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') { - continueTo(updateLine); + svgEnter.append('polygon').attr('fill', 'currentColor').attr('class', 'qaItem-fill').attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6'); + svgEnter.append('use').attr('class', 'icon-annotation').attr('width', '13px').attr('height', '13px').attr('transform', 'translate(3.5, 5)').attr('xlink:href', function (d) { + var picon = d.icon; + + if (!picon) { + return ''; + } else { + var isMaki = /^maki-/.test(picon); + return "#".concat(picon).concat(isMaki ? '-11' : ''); } }); - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); - } + headerEnter.append('div').attr('class', 'qa-header-label').html(issueTitle); } - function startDragEndpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + improveOsmHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmHeader; + }; - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - var startDragString = helpHtml('intro.lines.start_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')) + helpHtml('intro.lines.drag_to_intersection'); - reveal(box, startDragString); - context.map().on('move.intro drawn.intro', function () { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + return improveOsmHeader; + } - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, startDragString, { - duration: 0 - }); - var entity = context.entity(woodRoadEndID); + function uiImproveOsmEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiImproveOsmDetails(context); + var qaComments = uiImproveOsmComments(); + var qaHeader = uiImproveOsmHeader(); - if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) { - continueTo(finishDragEndpoint); - } - }); + var _qaItem; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } + function improveOsmEditor(selection) { + var headerEnter = selection.selectAll('.header').data([0]).enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'close').on('click', function () { + return context.enter(modeBrowse(context)); + }).call(svgIcon('#iD-icon-close')); + headerEnter.append('h3').html(_t.html('QA.improveOSM.title')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); + var editor = body.selectAll('.qa-editor').data([0]); + editor.enter().append('div').attr('class', 'modal-section qa-editor').merge(editor).call(qaHeader.issue(_qaItem)).call(qaDetails.issue(_qaItem)).call(qaComments.issue(_qaItem)).call(improveOsmSaveSection); } - function finishDragEndpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + function improveOsmSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - var finishDragString = helpHtml('intro.lines.spot_looks_good') + helpHtml('intro.lines.finish_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')); - reveal(box, finishDragString); - context.map().on('move.intro drawn.intro', function () { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + var isShown = _qaItem && (isSelected || _qaItem.newComment || _qaItem.comment); + var saveSection = selection.selectAll('.qa-save').data(isShown ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); // exit - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, finishDragString, { - duration: 0 - }); - var entity = context.entity(woodRoadEndID); + saveSection.exit().remove(); // enter - if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) { - continueTo(startDragEndpoint); - } - }); - context.on('enter.intro', function () { - continueTo(startDragMidpoint); - }); + var saveSectionEnter = saveSection.enter().append('div').attr('class', 'qa-save save-section cf'); + saveSectionEnter.append('h4').attr('class', '.qa-save-header').html(_t.html('note.newComment')); + saveSectionEnter.append('textarea').attr('class', 'new-comment-input').attr('placeholder', _t('QA.keepRight.comment_placeholder')).attr('maxlength', 1000).property('value', function (d) { + return d.newComment; + }).call(utilNoAuto).on('input', changeInput).on('blur', changeInput); // update - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); - function startDragMidpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + function changeInput() { + var input = select(this); + var val = input.property('value').trim(); - if (context.selectedIDs().indexOf(woodRoadID) === -1) { - context.enter(modeSelect(context, [woodRoadID])); - } + if (val === '') { + val = undefined; + } // store the unsaved comment with the issue itself - var padding = 80 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragMidpoint, padding, context); - reveal(box, helpHtml('intro.lines.start_drag_midpoint')); - context.map().on('move.intro drawn.intro', function () { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } - var padding = 80 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragMidpoint, padding, context); - reveal(box, helpHtml('intro.lines.start_drag_midpoint'), { - duration: 0 + _qaItem = _qaItem.update({ + newComment: val }); - }); - context.history().on('change.intro', function (changed) { - if (changed.created().length === 1) { - continueTo(continueDragMidpoint); - } - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') { - // keep Wood Road selected so midpoint triangles are drawn.. - context.enter(modeSelect(context, [woodRoadID])); + var qaService = services.improveOSM; + + if (qaService) { + qaService.replaceItem(_qaItem); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); + saveSection.call(qaSaveButtons); } } - function continueDragMidpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } - - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - box.height += 400; - - var advance = function advance() { - context.history().checkpoint('doneUpdateLine'); - continueTo(deleteLines); - }; + function qaSaveButtons(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - reveal(box, helpHtml('intro.lines.continue_drag_midpoint'), { - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - context.map().on('move.intro drawn.intro', function () { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_qaItem] : [], function (d) { + return d.status + d.id; + }); // exit - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - box.height += 400; - reveal(box, helpHtml('intro.lines.continue_drag_midpoint'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - }); + buttonSection.exit().remove(); // enter - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons'); + buttonEnter.append('button').attr('class', 'button comment-button action').html(_t.html('QA.keepRight.save_comment')); + buttonEnter.append('button').attr('class', 'button close-button action'); + buttonEnter.append('button').attr('class', 'button ignore-button action'); // update - function deleteLines() { - context.history().reset('doneUpdateLine'); - context.enter(modeBrowse(context)); + buttonSection = buttonSection.merge(buttonEnter); + buttonSection.select('.comment-button').attr('disabled', function (d) { + return d.newComment ? null : true; + }).on('click.comment', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return chapter.restart(); - } + var qaService = services.improveOSM; - var msec = transitionTime(deleteLinesLoc, context.map().center()); + if (qaService) { + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); + } + }); + buttonSection.select('.close-button').html(function (d) { + var andComment = d.newComment ? '_comment' : ''; + return _t.html("QA.keepRight.close".concat(andComment)); + }).on('click.close', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + var qaService = services.improveOSM; - context.map().centerZoomEase(deleteLinesLoc, 18, msec); - timeout(function () { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(deleteLinesLoc, padding, context); - box.top -= 200; - box.height += 400; + if (qaService) { + d.newStatus = 'SOLVED'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); + } + }); + buttonSection.select('.ignore-button').html(function (d) { + var andComment = d.newComment ? '_comment' : ''; + return _t.html("QA.keepRight.ignore".concat(andComment)); + }).on('click.ignore', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - var advance = function advance() { - continueTo(rightClickIntersection); - }; + var qaService = services.improveOSM; - reveal(box, helpHtml('intro.lines.delete_lines', { - street: _t('intro.graph.name.12th-avenue') - }), { - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - context.map().on('move.intro drawn.intro', function () { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(deleteLinesLoc, padding, context); - box.top -= 200; - box.height += 400; - reveal(box, helpHtml('intro.lines.delete_lines', { - street: _t('intro.graph.name.12th-avenue') - }), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: advance + if (qaService) { + d.newStatus = 'INVALID'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); }); - }); - context.history().on('change.intro', function () { - timeout(function () { - continueTo(deleteLines); - }, 500); // after any transition (e.g. if user deleted intersection) - }); - }, msec + 100); + } + }); + } // NOTE: Don't change method name until UI v3 is merged - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } - function rightClickIntersection() { - context.history().reset('doneUpdateLine'); - context.enter(modeBrowse(context)); - context.map().centerZoomEase(eleventhAvenueEnd, 18, 500); - var rightClickString = helpHtml('intro.lines.split_street', { - street1: _t('intro.graph.name.11th-avenue'), - street2: _t('intro.graph.name.washington-street') - }) + helpHtml('intro.lines.' + (context.lastPointerType() === 'mouse' ? 'rightclick_intersection' : 'edit_menu_intersection_touch')); - timeout(function () { - var padding = 60 * Math.pow(2, context.map().zoom() - 18); - var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, rightClickString); - context.map().on('move.intro drawn.intro', function () { - var padding = 60 * Math.pow(2, context.map().zoom() - 18); - var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, rightClickString, { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - var ids = context.selectedIDs(); - if (ids.length !== 1 || ids[0] !== eleventhAvenueEndID) return; - timeout(function () { - var node = selectMenuItem(context, 'split').node(); - if (!node) return; - continueTo(splitIntersection); - }, 50); // after menu visible - }); - context.history().on('change.intro', function () { - timeout(function () { - continueTo(deleteLines); - }, 300); // after any transition (e.g. if user deleted intersection) - }); - }, 600); + improveOsmEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmEditor; + }; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + return utilRebind(improveOsmEditor, dispatch, 'on'); + } - function splitIntersection() { - if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(deleteLines); - } + function uiKeepRightDetails(context) { + var _qaItem; - var node = selectMenuItem(context, 'split').node(); + function issueDetail(d) { + var itemType = d.itemType, + parentIssueType = d.parentIssueType; + var unknown = _t.html('inspector.unknown'); + var replacements = d.replacements || {}; + replacements["default"] = unknown; // special key `default` works as a fallback string - if (!node) { - return continueTo(rightClickIntersection); + var detail = _t.html("QA.keepRight.errorTypes.".concat(itemType, ".description"), replacements); + + if (detail === unknown) { + detail = _t.html("QA.keepRight.errorTypes.".concat(parentIssueType, ".description"), replacements); } - var wasChanged = false; - _washingtonSegmentID = null; - reveal('.edit-menu', helpHtml('intro.lines.split_intersection', { - street: _t('intro.graph.name.washington-street') - }), { - padding: 50 + return detail; + } + + function keepRightDetails(selection) { + var details = selection.selectAll('.error-details').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - context.map().on('move.intro drawn.intro', function () { - var node = selectMenuItem(context, 'split').node(); + details.exit().remove(); + var detailsEnter = details.enter().append('div').attr('class', 'error-details qa-details-container'); // description - if (!wasChanged && !node) { - return continueTo(rightClickIntersection); - } + var descriptionEnter = detailsEnter.append('div').attr('class', 'qa-details-subsection'); + descriptionEnter.append('h4').html(_t.html('QA.keepRight.detail_description')); + descriptionEnter.append('div').attr('class', 'qa-details-description-text').html(issueDetail); // If there are entity links in the error message.. - reveal('.edit-menu', helpHtml('intro.lines.split_intersection', { - street: _t('intro.graph.name.washington-street') - }), { - duration: 0, - padding: 50 - }); - }); - context.history().on('change.intro', function (changed) { - wasChanged = true; - timeout(function () { - if (context.history().undoAnnotation() === _t('operations.split.annotation.line', { - n: 1 - })) { - _washingtonSegmentID = changed.created()[0].id; - continueTo(didSplit); + var relatedEntities = []; + descriptionEnter.selectAll('.error_entity_link, .error_object_link').attr('href', '#').each(function () { + var link = select(this); + var isObjectLink = link.classed('error_object_link'); + var entityID = isObjectLink ? utilEntityRoot(_qaItem.objectType) + _qaItem.objectId : this.textContent; + var entity = context.hasEntity(entityID); + relatedEntities.push(entityID); // Add click handler + + link.on('mouseenter', function () { + utilHighlightEntities([entityID], true, context); + }).on('mouseleave', function () { + utilHighlightEntities([entityID], false, context); + }).on('click', function (d3_event) { + d3_event.preventDefault(); + utilHighlightEntities([entityID], false, context); + var osmlayer = context.layers().layer('osm'); + + if (!osmlayer.enabled()) { + osmlayer.enabled(true); + } + + context.map().centerZoomEase(_qaItem.loc, 20); + + if (entity) { + context.enter(modeSelect(context, [entityID])); } else { - _washingtonSegmentID = null; - continueTo(retrySplit); + context.loadEntity(entityID, function (err, result) { + if (err) return; + var entity = result.data.find(function (e) { + return e.id === entityID; + }); + if (entity) context.enter(modeSelect(context, [entityID])); + }); } - }, 300); // after any transition (e.g. if user deleted intersection) - }); + }); // Replace with friendly name if possible + // (The entity may not yet be loaded into the graph) - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + if (entity) { + var name = utilDisplayName(entity); // try to use common name + + if (!name && !isObjectLink) { + var preset = _mainPresetIndex.match(entity, context.graph()); + name = preset && !preset.isFallback() && preset.name(); // fallback to preset name + } + + if (name) { + this.innerText = name; + } + } + }); // Don't hide entities related to this issue - #5880 + + context.features().forceVisible(relatedEntities); + context.map().pan([0, 0]); // trigger a redraw } - function retrySplit() { - context.enter(modeBrowse(context)); - context.map().centerZoomEase(eleventhAvenueEnd, 18, 500); + keepRightDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightDetails; + }; - var advance = function advance() { - continueTo(rightClickIntersection); - }; + return keepRightDetails; + } - var padding = 60 * Math.pow(2, context.map().zoom() - 18); - var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, helpHtml('intro.lines.retry_split'), { - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - context.map().on('move.intro drawn.intro', function () { - var padding = 60 * Math.pow(2, context.map().zoom() - 18); - var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, helpHtml('intro.lines.retry_split'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: advance - }); - }); + function uiKeepRightHeader() { + var _qaItem; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } + function issueTitle(d) { + var itemType = d.itemType, + parentIssueType = d.parentIssueType; + var unknown = _t.html('inspector.unknown'); + var replacements = d.replacements || {}; + replacements["default"] = unknown; // special key `default` works as a fallback string - function didSplit() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + var title = _t.html("QA.keepRight.errorTypes.".concat(itemType, ".title"), replacements); - var ids = context.selectedIDs(); - var string = 'intro.lines.did_split_' + (ids.length > 1 ? 'multi' : 'single'); - var street = _t('intro.graph.name.washington-street'); - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - box.width = box.width / 2; - reveal(box, helpHtml(string, { - street1: street, - street2: street - }), { - duration: 500 - }); - timeout(function () { - context.map().centerZoomEase(twelfthAvenue, 18, 500); - context.map().on('move.intro drawn.intro', function () { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - box.width = box.width / 2; - reveal(box, helpHtml(string, { - street1: street, - street2: street - }), { - duration: 0 - }); - }); - }, 600); // after initial reveal and curtain cut + if (title === unknown) { + title = _t.html("QA.keepRight.errorTypes.".concat(parentIssueType, ".title"), replacements); + } - context.on('enter.intro', function () { - var ids = context.selectedIDs(); + return title; + } - if (ids.length === 1 && ids[0] === _washingtonSegmentID) { - continueTo(multiSelect); - } + function keepRightHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - context.history().on('change.intro', function () { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + header.exit().remove(); + var headerEnter = header.enter().append('div').attr('class', 'qa-header'); + var iconEnter = headerEnter.append('div').attr('class', 'qa-header-icon').classed('new', function (d) { + return d.id < 0; }); - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + iconEnter.append('div').attr('class', function (d) { + return "preset-icon-28 qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.parentIssueType); + }).call(svgIcon('#iD-icon-bolt', 'qaItem-fill')); + headerEnter.append('div').attr('class', 'qa-header-label').html(issueTitle); } - function multiSelect() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + keepRightHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightHeader; + }; - var ids = context.selectedIDs(); - var hasWashington = ids.indexOf(_washingtonSegmentID) !== -1; - var hasTwelfth = ids.indexOf(twelfthAvenueID) !== -1; + return keepRightHeader; + } - if (hasWashington && hasTwelfth) { - return continueTo(multiRightClick); - } else if (!hasWashington && !hasTwelfth) { - return continueTo(didSplit); + function uiViewOnKeepRight() { + var _qaItem; + + function viewOnKeepRight(selection) { + var url; + + if (services.keepRight && _qaItem instanceof QAItem) { + url = services.keepRight.issueURL(_qaItem); } - context.map().centerZoomEase(twelfthAvenue, 18, 500); - timeout(function () { - var selected, other, padding, box; + var link = selection.selectAll('.view-on-keepRight').data(url ? [url] : []); // exit - if (hasWashington) { - selected = _t('intro.graph.name.washington-street'); - other = _t('intro.graph.name.12th-avenue'); - padding = 60 * Math.pow(2, context.map().zoom() - 18); - box = pad(twelfthAvenueEnd, padding, context); - box.width *= 3; - } else { - selected = _t('intro.graph.name.12th-avenue'); - other = _t('intro.graph.name.washington-street'); - padding = 200 * Math.pow(2, context.map().zoom() - 18); - box = pad(twelfthAvenue, padding, context); - box.width /= 2; - } + link.exit().remove(); // enter - reveal(box, helpHtml('intro.lines.multi_select', { - selected: selected, - other1: other - }) + ' ' + helpHtml('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'), { - selected: selected, - other2: other - })); - context.map().on('move.intro drawn.intro', function () { - if (hasWashington) { - selected = _t('intro.graph.name.washington-street'); - other = _t('intro.graph.name.12th-avenue'); - padding = 60 * Math.pow(2, context.map().zoom() - 18); - box = pad(twelfthAvenueEnd, padding, context); - box.width *= 3; - } else { - selected = _t('intro.graph.name.12th-avenue'); - other = _t('intro.graph.name.washington-street'); - padding = 200 * Math.pow(2, context.map().zoom() - 18); - box = pad(twelfthAvenue, padding, context); - box.width /= 2; - } + var linkEnter = link.enter().append('a').attr('class', 'view-on-keepRight').attr('target', '_blank').attr('rel', 'noopener') // security measure + .attr('href', function (d) { + return d; + }).call(svgIcon('#iD-icon-out-link', 'inline')); + linkEnter.append('span').html(_t.html('inspector.view_on_keepRight')); + } - reveal(box, helpHtml('intro.lines.multi_select', { - selected: selected, - other1: other - }) + ' ' + helpHtml('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'), { - selected: selected, - other2: other - }), { - duration: 0 - }); - }); - context.on('enter.intro', function () { - continueTo(multiSelect); - }); - context.history().on('change.intro', function () { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } - }); - }, 600); + viewOnKeepRight.what = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return viewOnKeepRight; + }; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + return viewOnKeepRight; + } + + function uiKeepRightEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiKeepRightDetails(context); + var qaHeader = uiKeepRightHeader(); + + var _qaItem; + + function keepRightEditor(selection) { + var headerEnter = selection.selectAll('.header').data([0]).enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'close').on('click', function () { + return context.enter(modeBrowse(context)); + }).call(svgIcon('#iD-icon-close')); + headerEnter.append('h3').html(_t.html('QA.keepRight.title')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); + var editor = body.selectAll('.qa-editor').data([0]); + editor.enter().append('div').attr('class', 'modal-section qa-editor').merge(editor).call(qaHeader.issue(_qaItem)).call(qaDetails.issue(_qaItem)).call(keepRightSaveSection); + var footer = selection.selectAll('.footer').data([0]); + footer.enter().append('div').attr('class', 'footer').merge(footer).call(uiViewOnKeepRight().what(_qaItem)); } - function multiRightClick() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + function keepRightSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - var rightClickString = helpHtml('intro.lines.multi_select_success') + helpHtml('intro.lines.multi_' + (context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch')); - reveal(box, rightClickString); - context.map().on('move.intro drawn.intro', function () { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - reveal(box, rightClickString, { - duration: 0 + var isShown = _qaItem && (isSelected || _qaItem.newComment || _qaItem.comment); + var saveSection = selection.selectAll('.qa-save').data(isShown ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); // exit + + saveSection.exit().remove(); // enter + + var saveSectionEnter = saveSection.enter().append('div').attr('class', 'qa-save save-section cf'); + saveSectionEnter.append('h4').attr('class', '.qa-save-header').html(_t.html('QA.keepRight.comment')); + saveSectionEnter.append('textarea').attr('class', 'new-comment-input').attr('placeholder', _t('QA.keepRight.comment_placeholder')).attr('maxlength', 1000).property('value', function (d) { + return d.newComment || d.comment; + }).call(utilNoAuto).on('input', changeInput).on('blur', changeInput); // update + + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); + + function changeInput() { + var input = select(this); + var val = input.property('value').trim(); + + if (val === _qaItem.comment) { + val = undefined; + } // store the unsaved comment with the issue itself + + + _qaItem = _qaItem.update({ + newComment: val }); - }); - context.ui().editMenu().on('toggled.intro', function (open) { - if (!open) return; - timeout(function () { - var ids = context.selectedIDs(); + var qaService = services.keepRight; - if (ids.length === 2 && ids.indexOf(twelfthAvenueID) !== -1 && ids.indexOf(_washingtonSegmentID) !== -1) { - var node = selectMenuItem(context, 'delete').node(); - if (!node) return; - continueTo(multiDelete); - } else if (ids.length === 1 && ids.indexOf(_washingtonSegmentID) !== -1) { - return continueTo(multiSelect); - } else { - return continueTo(didSplit); - } - }, 300); // after edit menu visible - }); - context.history().on('change.intro', function () { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); + if (qaService) { + qaService.replaceItem(_qaItem); // update keepright cache } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.ui().editMenu().on('toggled.intro', null); - context.history().on('change.intro', null); - nextStep(); + saveSection.call(qaSaveButtons); } } - function multiDelete() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + function qaSaveButtons(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - var node = selectMenuItem(context, 'delete').node(); - if (!node) return continueTo(multiRightClick); - reveal('.edit-menu', helpHtml('intro.lines.multi_delete'), { - padding: 50 - }); - context.map().on('move.intro drawn.intro', function () { - reveal('.edit-menu', helpHtml('intro.lines.multi_delete'), { - duration: 0, - padding: 50 - }); - }); - context.on('exit.intro', function () { - if (context.hasEntity(_washingtonSegmentID) || context.hasEntity(twelfthAvenueID)) { - return continueTo(multiSelect); // left select mode but roads still exist - } - }); - context.history().on('change.intro', function () { - if (context.hasEntity(_washingtonSegmentID) || context.hasEntity(twelfthAvenueID)) { - continueTo(retryDelete); // changed something but roads still exist - } else { - continueTo(play); + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_qaItem] : [], function (d) { + return d.status + d.id; + }); // exit + + buttonSection.exit().remove(); // enter + + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons'); + buttonEnter.append('button').attr('class', 'button comment-button action').html(_t.html('QA.keepRight.save_comment')); + buttonEnter.append('button').attr('class', 'button close-button action'); + buttonEnter.append('button').attr('class', 'button ignore-button action'); // update + + buttonSection = buttonSection.merge(buttonEnter); + buttonSection.select('.comment-button') // select and propagate data + .attr('disabled', function (d) { + return d.newComment ? null : true; + }).on('click.comment', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 + + var qaService = services.keepRight; + + if (qaService) { + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); } }); + buttonSection.select('.close-button') // select and propagate data + .html(function (d) { + var andComment = d.newComment ? '_comment' : ''; + return _t.html("QA.keepRight.close".concat(andComment)); + }).on('click.close', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + var qaService = services.keepRight; - function retryDelete() { - context.enter(modeBrowse(context)); - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - reveal(box, helpHtml('intro.lines.retry_delete'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(multiSelect); + if (qaService) { + d.newStatus = 'ignore_t'; // ignore temporarily (item fixed) + + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); } }); + buttonSection.select('.ignore-button') // select and propagate data + .html(function (d) { + var andComment = d.newComment ? '_comment' : ''; + return _t.html("QA.keepRight.ignore".concat(andComment)); + }).on('click.ignore', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - function continueTo(nextStep) { - nextStep(); - } - } + var qaService = services.keepRight; - function play() { - dispatch$1.call('done'); - reveal('.ideditor', helpHtml('intro.lines.play', { - next: _t('intro.buildings.title') - }), { - tooltipBox: '.intro-nav-wrap .chapter-building', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - reveal('.ideditor'); + if (qaService) { + d.newStatus = 'ignore'; // ignore permanently (false positive) + + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); } }); - } - - chapter.enter = function () { - addLine(); - }; + } // NOTE: Don't change method name until UI v3 is merged - chapter.exit = function () { - timeouts.forEach(window.clearTimeout); - select(window).on('pointerdown.intro mousedown.intro', null, true); - context.on('enter.intro exit.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-list-button').on('click.intro', null); - }; - chapter.restart = function () { - chapter.exit(); - chapter.enter(); + keepRightEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightEditor; }; - return utilRebind(chapter, dispatch$1, 'on'); + return utilRebind(keepRightEditor, dispatch, 'on'); } - function uiIntroBuilding(context, reveal) { - var dispatch$1 = dispatch('done'); - var house = [-85.62815, 41.95638]; - var tank = [-85.62732, 41.95347]; - var buildingCatetory = _mainPresetIndex.item('category-building'); - var housePreset = _mainPresetIndex.item('building/house'); - var tankPreset = _mainPresetIndex.item('man_made/storage_tank'); - var timeouts = []; - var _houseID = null; - var _tankID = null; - var chapter = { - title: 'intro.buildings.title' - }; + function uiOsmoseDetails(context) { + var _qaItem; - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + function issueString(d, type) { + if (!d) return ''; // Issue strings are cached from Osmose API - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); + var s = services.osmose.getStrings(d.itemType); + return type in s ? s[type] : ''; } - function revealHouse(center, text, options) { - var padding = 160 * Math.pow(2, context.map().zoom() - 20); - var box = pad(center, padding, context); - reveal(box, text, options); - } + function osmoseDetails(selection) { + var details = selection.selectAll('.error-details').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); + details.exit().remove(); + var detailsEnter = details.enter().append('div').attr('class', 'error-details qa-details-container'); // Description - function revealTank(center, text, options) { - var padding = 190 * Math.pow(2, context.map().zoom() - 19.5); - var box = pad(center, padding, context); - reveal(box, text, options); - } + if (issueString(_qaItem, 'detail')) { + var div = detailsEnter.append('div').attr('class', 'qa-details-subsection'); + div.append('h4').html(_t.html('QA.keepRight.detail_description')); + div.append('p').attr('class', 'qa-details-description-text').html(function (d) { + return issueString(d, 'detail'); + }).selectAll('a').attr('rel', 'noopener').attr('target', '_blank'); + } // Elements (populated later as data is requested) - function addHouse() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - _houseID = null; - var msec = transitionTime(house, context.map().center()); - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + var detailsDiv = detailsEnter.append('div').attr('class', 'qa-details-subsection'); + var elemsDiv = detailsEnter.append('div').attr('class', 'qa-details-subsection'); // Suggested Fix (mustn't exist for every issue type) - context.map().centerZoomEase(house, 19, msec); - timeout(function () { - var tooltip = reveal('button.add-area', helpHtml('intro.buildings.add_building')); - tooltip.selectAll('.popover-inner').insert('svg', 'span').attr('class', 'tooltip-illustration').append('use').attr('xlink:href', '#iD-graphic-buildings'); - context.on('enter.intro', function (mode) { - if (mode.id !== 'add-area') return; - continueTo(startHouse); - }); - }, msec + 100); + if (issueString(_qaItem, 'fix')) { + var _div = detailsEnter.append('div').attr('class', 'qa-details-subsection'); - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } - } + _div.append('h4').html(_t.html('QA.osmose.fix_title')); - function startHouse() { - if (context.mode().id !== 'add-area') { - return continueTo(addHouse); - } + _div.append('p').html(function (d) { + return issueString(d, 'fix'); + }).selectAll('a').attr('rel', 'noopener').attr('target', '_blank'); + } // Common Pitfalls (mustn't exist for every issue type) - _houseID = null; - context.map().zoomEase(20, 500); - timeout(function () { - var startString = helpHtml('intro.buildings.start_building') + helpHtml('intro.buildings.building_corner_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')); - revealHouse(house, startString); - context.map().on('move.intro drawn.intro', function () { - revealHouse(house, startString, { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'draw-area') return chapter.restart(); - continueTo(continueHouse); - }); - }, 550); // after easing - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + if (issueString(_qaItem, 'trap')) { + var _div2 = detailsEnter.append('div').attr('class', 'qa-details-subsection'); - function continueHouse() { - if (context.mode().id !== 'draw-area') { - return continueTo(addHouse); - } + _div2.append('h4').html(_t.html('QA.osmose.trap_title')); - _houseID = null; - var continueString = helpHtml('intro.buildings.continue_building') + '{br}' + helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + helpHtml('intro.buildings.finish_building'); - revealHouse(house, continueString); - context.map().on('move.intro drawn.intro', function () { - revealHouse(house, continueString, { - duration: 0 - }); - }); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-area') { - return; - } else if (mode.id === 'select') { - var graph = context.graph(); - var way = context.entity(context.selectedIDs()[0]); - var nodes = graph.childNodes(way); - var points = utilArrayUniq(nodes).map(function (n) { - return context.projection(n.loc); - }); + _div2.append('p').html(function (d) { + return issueString(d, 'trap'); + }).selectAll('a').attr('rel', 'noopener').attr('target', '_blank'); + } // Save current item to check if UI changed by time request resolves - if (isMostlySquare(points)) { - _houseID = way.id; - return continueTo(chooseCategoryBuilding); - } else { - return continueTo(retryHouse); - } - } else { - return chapter.restart(); - } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + var thisItem = _qaItem; + services.osmose.loadIssueDetail(_qaItem).then(function (d) { + // No details to add if there are no associated issue elements + if (!d.elems || d.elems.length === 0) return; // Do nothing if UI has moved on by the time this resolves - function retryHouse() { - var onClick = function onClick() { - continueTo(addHouse); - }; + if (context.selectedErrorID() !== thisItem.id && context.container().selectAll(".qaItem.osmose.hover.itemId-".concat(thisItem.id)).empty()) return; // Things like keys and values are dynamically added to a subtitle string - revealHouse(house, helpHtml('intro.buildings.retry_building'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - context.map().on('move.intro drawn.intro', function () { - revealHouse(house, helpHtml('intro.buildings.retry_building'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); - }); + if (d.detail) { + detailsDiv.append('h4').html(_t.html('QA.osmose.detail_title')); + detailsDiv.append('p').html(function (d) { + return d.detail; + }).selectAll('a').attr('rel', 'noopener').attr('target', '_blank'); + } // Create list of linked issue elements - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } - function chooseCategoryBuilding() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } + elemsDiv.append('h4').html(_t.html('QA.osmose.elems_title')); + elemsDiv.append('ul').selectAll('li').data(d.elems).enter().append('li').append('a').attr('href', '#').attr('class', 'error_entity_link').html(function (d) { + return d; + }).each(function () { + var link = select(this); + var entityID = this.textContent; + var entity = context.hasEntity(entityID); // Add click handler - var ids = context.selectedIDs(); + link.on('mouseenter', function () { + utilHighlightEntities([entityID], true, context); + }).on('mouseleave', function () { + utilHighlightEntities([entityID], false, context); + }).on('click', function (d3_event) { + d3_event.preventDefault(); + utilHighlightEntities([entityID], false, context); + var osmlayer = context.layers().layer('osm'); - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { - context.enter(modeSelect(context, [_houseID])); - } // disallow scrolling + if (!osmlayer.enabled()) { + osmlayer.enabled(true); + } + context.map().centerZoom(d.loc, 20); - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); - var button = context.container().select('.preset-category-building .preset-list-button'); - reveal(button.node(), helpHtml('intro.buildings.choose_category_building', { - category: buildingCatetory.name() - })); - button.on('click.intro', function () { - button.on('click.intro', null); - continueTo(choosePresetHouse); - }); - }, 400); // after preset list pane visible.. + if (entity) { + context.enter(modeSelect(context, [entityID])); + } else { + context.loadEntity(entityID, function (err, result) { + if (err) return; + var entity = result.data.find(function (e) { + return e.id === entityID; + }); + if (entity) context.enter(modeSelect(context, [entityID])); + }); + } + }); // Replace with friendly name if possible + // (The entity may not yet be loaded into the graph) - context.on('enter.intro', function (mode) { - if (!_houseID || !context.hasEntity(_houseID)) { - return continueTo(addHouse); - } + if (entity) { + var name = utilDisplayName(entity); // try to use common name - var ids = context.selectedIDs(); + if (!name) { + var preset = _mainPresetIndex.match(entity, context.graph()); + name = preset && !preset.isFallback() && preset.name(); // fallback to preset name + } - if (mode.id !== 'select' || !ids.length || ids[0] !== _houseID) { - return continueTo(chooseCategoryBuilding); - } - }); + if (name) { + this.innerText = name; + } + } + }); // Don't hide entities related to this issue - #5880 - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-list-button').on('click.intro', null); - context.on('enter.intro', null); - nextStep(); - } + context.features().forceVisible(d.elems); + context.map().pan([0, 0]); // trigger a redraw + })["catch"](function (err) { + console.log(err); // eslint-disable-line no-console + }); } - function choosePresetHouse() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } - - var ids = context.selectedIDs(); + osmoseDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseDetails; + }; - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { - context.enter(modeSelect(context, [_houseID])); - } // disallow scrolling + return osmoseDetails; + } + function uiOsmoseHeader() { + var _qaItem; - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); - var button = context.container().select('.preset-building-house .preset-list-button'); - reveal(button.node(), helpHtml('intro.buildings.choose_preset_house', { - preset: housePreset.name() - }), { - duration: 300 - }); - button.on('click.intro', function () { - button.on('click.intro', null); - continueTo(closeEditorHouse); - }); - }, 400); // after preset list pane visible.. + function issueTitle(d) { + var unknown = _t('inspector.unknown'); + if (!d) return unknown; // Issue titles supplied by Osmose - context.on('enter.intro', function (mode) { - if (!_houseID || !context.hasEntity(_houseID)) { - return continueTo(addHouse); - } + var s = services.osmose.getStrings(d.itemType); + return 'title' in s ? s.title : unknown; + } - var ids = context.selectedIDs(); + function osmoseHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); + header.exit().remove(); + var headerEnter = header.enter().append('div').attr('class', 'qa-header'); + var svgEnter = headerEnter.append('div').attr('class', 'qa-header-icon').classed('new', function (d) { + return d.id < 0; + }).append('svg').attr('width', '20px').attr('height', '30px').attr('viewbox', '0 0 20 30').attr('class', function (d) { + return "preset-icon-28 qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.itemType); + }); + svgEnter.append('polygon').attr('fill', function (d) { + return services.osmose.getColor(d.item); + }).attr('class', 'qaItem-fill').attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6'); + svgEnter.append('use').attr('class', 'icon-annotation').attr('width', '13px').attr('height', '13px').attr('transform', 'translate(3.5, 5)').attr('xlink:href', function (d) { + var picon = d.icon; - if (mode.id !== 'select' || !ids.length || ids[0] !== _houseID) { - return continueTo(chooseCategoryBuilding); + if (!picon) { + return ''; + } else { + var isMaki = /^maki-/.test(picon); + return "#".concat(picon).concat(isMaki ? '-11' : ''); } }); - - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-list-button').on('click.intro', null); - context.on('enter.intro', null); - nextStep(); - } + headerEnter.append('div').attr('class', 'qa-header-label').html(issueTitle); } - function closeEditorHouse() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } + osmoseHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseHeader; + }; - var ids = context.selectedIDs(); + return osmoseHeader; + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { - context.enter(modeSelect(context, [_houseID])); - } + function uiViewOnOsmose() { + var _qaItem; - context.history().checkpoint('hasHouse'); - context.on('exit.intro', function () { - continueTo(rightClickHouse); - }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.buildings.close', { - button: icon('#iD-icon-close', 'inline') - })); - }, 500); + function viewOnOsmose(selection) { + var url; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); + if (services.osmose && _qaItem instanceof QAItem) { + url = services.osmose.itemURL(_qaItem); } - } - - function rightClickHouse() { - if (!_houseID) return chapter.restart(); - context.enter(modeBrowse(context)); - context.history().reset('hasHouse'); - var zoom = context.map().zoom(); - if (zoom < 20) { - zoom = 20; - } + var link = selection.selectAll('.view-on-osmose').data(url ? [url] : []); // exit - context.map().centerZoomEase(house, zoom, 500); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - var ids = context.selectedIDs(); - if (ids.length !== 1 || ids[0] !== _houseID) return; - timeout(function () { - var node = selectMenuItem(context, 'orthogonalize').node(); - if (!node) return; - continueTo(clickSquare); - }, 50); // after menu visible - }); - context.map().on('move.intro drawn.intro', function () { - var rightclickString = helpHtml('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_building' : 'edit_menu_building_touch')); - revealHouse(house, rightclickString, { - duration: 0 - }); - }); - context.history().on('change.intro', function () { - continueTo(rightClickHouse); - }); + link.exit().remove(); // enter - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + var linkEnter = link.enter().append('a').attr('class', 'view-on-osmose').attr('target', '_blank').attr('rel', 'noopener') // security measure + .attr('href', function (d) { + return d; + }).call(svgIcon('#iD-icon-out-link', 'inline')); + linkEnter.append('span').html(_t.html('inspector.view_on_osmose')); } - function clickSquare() { - if (!_houseID) return chapter.restart(); - var entity = context.hasEntity(_houseID); - if (!entity) return continueTo(rightClickHouse); - var node = selectMenuItem(context, 'orthogonalize').node(); + viewOnOsmose.what = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return viewOnOsmose; + }; - if (!node) { - return continueTo(rightClickHouse); - } + return viewOnOsmose; + } - var wasChanged = false; - reveal('.edit-menu', helpHtml('intro.buildings.square_building'), { - padding: 50 - }); - context.on('enter.intro', function (mode) { - if (mode.id === 'browse') { - continueTo(rightClickHouse); - } else if (mode.id === 'move' || mode.id === 'rotate') { - continueTo(retryClickSquare); - } - }); - context.map().on('move.intro', function () { - var node = selectMenuItem(context, 'orthogonalize').node(); + function uiOsmoseEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiOsmoseDetails(context); + var qaHeader = uiOsmoseHeader(); - if (!wasChanged && !node) { - return continueTo(rightClickHouse); - } + var _qaItem; - reveal('.edit-menu', helpHtml('intro.buildings.square_building'), { - duration: 0, - padding: 50 - }); - }); - context.history().on('change.intro', function () { - wasChanged = true; - context.history().on('change.intro', null); // Something changed. Wait for transition to complete and check undo annotation. + function osmoseEditor(selection) { + var header = selection.selectAll('.header').data([0]); + var headerEnter = header.enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'close').on('click', function () { + return context.enter(modeBrowse(context)); + }).call(svgIcon('#iD-icon-close')); + headerEnter.append('h3').html(_t.html('QA.osmose.title')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); + var editor = body.selectAll('.qa-editor').data([0]); + editor.enter().append('div').attr('class', 'modal-section qa-editor').merge(editor).call(qaHeader.issue(_qaItem)).call(qaDetails.issue(_qaItem)).call(osmoseSaveSection); + var footer = selection.selectAll('.footer').data([0]); + footer.enter().append('div').attr('class', 'footer').merge(footer).call(uiViewOnOsmose().what(_qaItem)); + } - timeout(function () { - if (context.history().undoAnnotation() === _t('operations.orthogonalize.annotation.feature', { - n: 1 - })) { - continueTo(doneSquare); - } else { - continueTo(retryClickSquare); - } - }, 500); // after transitioned actions - }); + function osmoseSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); + + var isShown = _qaItem && isSelected; + var saveSection = selection.selectAll('.qa-save').data(isShown ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); // exit + + saveSection.exit().remove(); // enter - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + var saveSectionEnter = saveSection.enter().append('div').attr('class', 'qa-save save-section cf'); // update + + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); } - function retryClickSquare() { - context.enter(modeBrowse(context)); - revealHouse(house, helpHtml('intro.buildings.retry_square'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(rightClickHouse); + function qaSaveButtons(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); + + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_qaItem] : [], function (d) { + return d.status + d.id; + }); // exit + + buttonSection.exit().remove(); // enter + + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons'); + buttonEnter.append('button').attr('class', 'button close-button action'); + buttonEnter.append('button').attr('class', 'button ignore-button action'); // update + + buttonSection = buttonSection.merge(buttonEnter); + buttonSection.select('.close-button').html(_t.html('QA.keepRight.close')).on('click.close', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 + + var qaService = services.osmose; + + if (qaService) { + d.newStatus = 'done'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); } }); + buttonSection.select('.ignore-button').html(_t.html('QA.keepRight.ignore')).on('click.ignore', function (d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - function continueTo(nextStep) { - nextStep(); - } - } + var qaService = services.osmose; - function doneSquare() { - context.history().checkpoint('doneSquare'); - revealHouse(house, helpHtml('intro.buildings.done_square'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(addTank); + if (qaService) { + d.newStatus = 'false'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); } }); + } // NOTE: Don't change method name until UI v3 is merged - function continueTo(nextStep) { - nextStep(); - } - } - function addTank() { - context.enter(modeBrowse(context)); - context.history().reset('doneSquare'); - _tankID = null; - var msec = transitionTime(tank, context.map().center()); + osmoseEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseEditor; + }; - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + return utilRebind(osmoseEditor, dispatch, 'on'); + } - context.map().centerZoomEase(tank, 19.5, msec); - timeout(function () { - reveal('button.add-area', helpHtml('intro.buildings.add_tank')); - context.on('enter.intro', function (mode) { - if (mode.id !== 'add-area') return; - continueTo(startTank); - }); - }, msec + 100); + function uiNoteComments() { + var _note; - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } - } + function noteComments(selection) { + if (_note.isNew()) return; // don't draw .comments-container - function startTank() { - if (context.mode().id !== 'add-area') { - return continueTo(addTank); - } + var comments = selection.selectAll('.comments-container').data([0]); + comments = comments.enter().append('div').attr('class', 'comments-container').merge(comments); + var commentEnter = comments.selectAll('.comment').data(_note.comments).enter().append('div').attr('class', 'comment'); + commentEnter.append('div').attr('class', function (d) { + return 'comment-avatar user-' + d.uid; + }).call(svgIcon('#iD-icon-avatar', 'comment-avatar-icon')); + var mainEnter = commentEnter.append('div').attr('class', 'comment-main'); + var metadataEnter = mainEnter.append('div').attr('class', 'comment-metadata'); + metadataEnter.append('div').attr('class', 'comment-author').each(function (d) { + var selection = select(this); + var osm = services.osm; - _tankID = null; - timeout(function () { - var startString = helpHtml('intro.buildings.start_tank') + helpHtml('intro.buildings.tank_edge_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')); - revealTank(tank, startString); - context.map().on('move.intro drawn.intro', function () { - revealTank(tank, startString, { - duration: 0 - }); + if (osm && d.user) { + selection = selection.append('a').attr('class', 'comment-author-link').attr('href', osm.userURL(d.user)).attr('target', '_blank'); + } + + selection.html(function (d) { + return d.user || _t.html('note.anonymous'); }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'draw-area') return chapter.restart(); - continueTo(continueTank); + }); + metadataEnter.append('div').attr('class', 'comment-date').html(function (d) { + return _t('note.status.' + d.action, { + when: localeDateString(d.date) }); - }, 550); // after easing - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } + }); + mainEnter.append('div').attr('class', 'comment-text').html(function (d) { + return d.html; + }).selectAll('a').attr('rel', 'noopener nofollow').attr('target', '_blank'); + comments.call(replaceAvatars); } - function continueTank() { - if (context.mode().id !== 'draw-area') { - return continueTo(addTank); - } + function replaceAvatars(selection) { + var showThirdPartyIcons = corePreferences('preferences.privacy.thirdpartyicons') || 'true'; + var osm = services.osm; + if (showThirdPartyIcons !== 'true' || !osm) return; + var uids = {}; // gather uids in the comment thread - _tankID = null; - var continueString = helpHtml('intro.buildings.continue_tank') + '{br}' + helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + helpHtml('intro.buildings.finish_tank'); - revealTank(tank, continueString); - context.map().on('move.intro drawn.intro', function () { - revealTank(tank, continueString, { - duration: 0 - }); + _note.comments.forEach(function (d) { + if (d.uid) uids[d.uid] = true; }); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-area') { - return; - } else if (mode.id === 'select') { - _tankID = context.selectedIDs()[0]; - return continueTo(searchPresetTank); - } else { - return continueTo(addTank); - } + + Object.keys(uids).forEach(function (uid) { + osm.loadUser(uid, function (err, user) { + if (!user || !user.image_url) return; + selection.selectAll('.comment-avatar.user-' + uid).html('').append('img').attr('class', 'icon comment-avatar-icon').attr('src', user.image_url).attr('alt', user.display_name); + }); }); + } - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } + function localeDateString(s) { + if (!s) return null; + var options = { + day: 'numeric', + month: 'short', + year: 'numeric' + }; + s = s.replace(/-/g, '/'); // fix browser-specific Date() issues + + var d = new Date(s); + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(_mainLocalizer.localeCode(), options); } - function searchPresetTank() { - if (!_tankID || !context.hasEntity(_tankID)) { - return addTank(); - } + noteComments.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteComments; + }; - var ids = context.selectedIDs(); + return noteComments; + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { - context.enter(modeSelect(context, [_tankID])); - } // disallow scrolling + function uiNoteHeader() { + var _note; + function noteHeader(selection) { + var header = selection.selectAll('.note-header').data(_note ? [_note] : [], function (d) { + return d.status + d.id; + }); + header.exit().remove(); + var headerEnter = header.enter().append('div').attr('class', 'note-header'); + var iconEnter = headerEnter.append('div').attr('class', function (d) { + return 'note-header-icon ' + d.status; + }).classed('new', function (d) { + return d.id < 0; + }); + iconEnter.append('div').attr('class', 'preset-icon-28').call(svgIcon('#iD-icon-note', 'note-fill')); + iconEnter.each(function (d) { + var statusIcon; - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - timeout(function () { - // reset pane, in case user somehow happened to change it.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.buildings.search_tank', { - preset: tankPreset.name() - })); - }, 400); // after preset list pane visible.. + if (d.id < 0) { + statusIcon = '#iD-icon-plus'; + } else if (d.status === 'open') { + statusIcon = '#iD-icon-close'; + } else { + statusIcon = '#iD-icon-apply'; + } - context.on('enter.intro', function (mode) { - if (!_tankID || !context.hasEntity(_tankID)) { - return continueTo(addTank); + iconEnter.append('div').attr('class', 'note-icon-annotation').call(svgIcon(statusIcon, 'icon-annotation')); + }); + headerEnter.append('div').attr('class', 'note-header-label').html(function (d) { + if (_note.isNew()) { + return _t('note.new'); } - var ids = context.selectedIDs(); + return _t('note.note') + ' ' + d.id + ' ' + (d.status === 'closed' ? _t('note.closed') : ''); + }); + } - if (mode.id !== 'select' || !ids.length || ids[0] !== _tankID) { - // keep the user's area selected.. - context.enter(modeSelect(context, [_tankID])); // reset pane, in case user somehow happened to change it.. + noteHeader.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteHeader; + }; - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling + return noteHeader; + } - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - context.container().select('.preset-search-input').on('keydown.intro', null).on('keyup.intro', checkPresetSearch); - reveal('.preset-search-input', helpHtml('intro.buildings.search_tank', { - preset: tankPreset.name() - })); - context.history().on('change.intro', null); - } - }); + function uiNoteReport() { + var _note; - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + function noteReport(selection) { + var url; - if (first.classed('preset-man_made-storage_tank')) { - reveal(first.select('.preset-list-button').node(), helpHtml('intro.buildings.choose_tank', { - preset: tankPreset.name() - }), { - duration: 300 - }); - context.container().select('.preset-search-input').on('keydown.intro', eventCancel, true).on('keyup.intro', null); - context.history().on('change.intro', function () { - continueTo(closeEditorTank); - }); - } + if (services.osm && _note instanceof osmNote && !_note.isNew()) { + url = services.osm.noteReportURL(_note); } - function continueTo(nextStep) { - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - nextStep(); - } + var link = selection.selectAll('.note-report').data(url ? [url] : []); // exit + + link.exit().remove(); // enter + + var linkEnter = link.enter().append('a').attr('class', 'note-report').attr('target', '_blank').attr('href', function (d) { + return d; + }).call(svgIcon('#iD-icon-out-link', 'inline')); + linkEnter.append('span').html(_t.html('note.report')); } - function closeEditorTank() { - if (!_tankID || !context.hasEntity(_tankID)) { - return addTank(); - } + noteReport.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteReport; + }; - var ids = context.selectedIDs(); + return noteReport; + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { - context.enter(modeSelect(context, [_tankID])); - } + function uiNoteEditor(context) { + var dispatch = dispatch$8('change'); + var noteComments = uiNoteComments(); + var noteHeader = uiNoteHeader(); // var formFields = uiFormFields(context); - context.history().checkpoint('hasTank'); - context.on('exit.intro', function () { - continueTo(rightClickTank); - }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.buildings.close', { - button: icon('#iD-icon-close', 'inline') - })); - }, 500); + var _note; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + var _newNote; // var _fieldsArr; - function rightClickTank() { - if (!_tankID) return continueTo(addTank); - context.enter(modeBrowse(context)); - context.history().reset('hasTank'); - context.map().centerEase(tank, 500); - timeout(function () { - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - var ids = context.selectedIDs(); - if (ids.length !== 1 || ids[0] !== _tankID) return; - timeout(function () { - var node = selectMenuItem(context, 'circularize').node(); - if (!node) return; - continueTo(clickCircle); - }, 50); // after menu visible - }); - var rightclickString = helpHtml('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_tank' : 'edit_menu_tank_touch')); - revealTank(tank, rightclickString); - context.map().on('move.intro drawn.intro', function () { - revealTank(tank, rightclickString, { - duration: 0 - }); - }); - context.history().on('change.intro', function () { - continueTo(rightClickTank); - }); - }, 600); - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); + function noteEditor(selection) { + var header = selection.selectAll('.header').data([0]); + var headerEnter = header.enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'close').on('click', function () { + context.enter(modeBrowse(context)); + }).call(svgIcon('#iD-icon-close')); + headerEnter.append('h3').html(_t.html('note.title')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); + var editor = body.selectAll('.note-editor').data([0]); + editor.enter().append('div').attr('class', 'modal-section note-editor').merge(editor).call(noteHeader.note(_note)).call(noteComments.note(_note)).call(noteSaveSection); + var footer = selection.selectAll('.footer').data([0]); + footer.enter().append('div').attr('class', 'footer').merge(footer).call(uiViewOnOSM(context).what(_note)).call(uiNoteReport().note(_note)); // rerender the note editor on any auth change + + var osm = services.osm; + + if (osm) { + osm.on('change.note-save', function () { + selection.call(noteEditor); + }); } } - function clickCircle() { - if (!_tankID) return chapter.restart(); - var entity = context.hasEntity(_tankID); - if (!entity) return continueTo(rightClickTank); - var node = selectMenuItem(context, 'circularize').node(); + function noteSaveSection(selection) { + var isSelected = _note && _note.id === context.selectedNoteID(); - if (!node) { - return continueTo(rightClickTank); - } + var noteSave = selection.selectAll('.note-save').data(isSelected ? [_note] : [], function (d) { + return d.status + d.id; + }); // exit - var wasChanged = false; - reveal('.edit-menu', helpHtml('intro.buildings.circle_tank'), { - padding: 50 - }); - context.on('enter.intro', function (mode) { - if (mode.id === 'browse') { - continueTo(rightClickTank); - } else if (mode.id === 'move' || mode.id === 'rotate') { - continueTo(retryClickCircle); - } - }); - context.map().on('move.intro', function () { - var node = selectMenuItem(context, 'circularize').node(); + noteSave.exit().remove(); // enter - if (!wasChanged && !node) { - return continueTo(rightClickTank); - } + var noteSaveEnter = noteSave.enter().append('div').attr('class', 'note-save save-section cf'); // // if new note, show categories to pick from + // if (_note.isNew()) { + // var presets = presetManager; + // // NOTE: this key isn't a age and therefore there is no documentation (yet) + // _fieldsArr = [ + // uiField(context, presets.field('category'), null, { show: true, revert: false }), + // ]; + // _fieldsArr.forEach(function(field) { + // field + // .on('change', changeCategory); + // }); + // noteSaveEnter + // .append('div') + // .attr('class', 'note-category') + // .call(formFields.fieldsArr(_fieldsArr)); + // } + // function changeCategory() { + // // NOTE: perhaps there is a better way to get value + // var val = context.container().select('input[name=\'category\']:checked').property('__data__') || undefined; + // // store the unsaved category with the note itself + // _note = _note.update({ newCategory: val }); + // var osm = services.osm; + // if (osm) { + // osm.replaceNote(_note); // update note cache + // } + // noteSave + // .call(noteSaveButtons); + // } - reveal('.edit-menu', helpHtml('intro.buildings.circle_tank'), { - duration: 0, - padding: 50 - }); + noteSaveEnter.append('h4').attr('class', '.note-save-header').html(function () { + return _note.isNew() ? _t('note.newDescription') : _t('note.newComment'); }); - context.history().on('change.intro', function () { - wasChanged = true; - context.history().on('change.intro', null); // Something changed. Wait for transition to complete and check undo annotation. + var commentTextarea = noteSaveEnter.append('textarea').attr('class', 'new-comment-input').attr('placeholder', _t('note.inputPlaceholder')).attr('maxlength', 1000).property('value', function (d) { + return d.newComment; + }).call(utilNoAuto).on('keydown.note-input', keydown).on('input.note-input', changeInput).on('blur.note-input', changeInput); - timeout(function () { - if (context.history().undoAnnotation() === _t('operations.circularize.annotation.feature', { - n: 1 - })) { - continueTo(play); + if (!commentTextarea.empty() && _newNote) { + // autofocus the comment field for new notes + commentTextarea.node().focus(); + } // update + + + noteSave = noteSaveEnter.merge(noteSave).call(userDetails).call(noteSaveButtons); // fast submit if user presses cmd+enter + + function keydown(d3_event) { + if (!(d3_event.keyCode === 13 && // â© Return + d3_event.metaKey)) return; + var osm = services.osm; + if (!osm) return; + var hasAuth = osm.authenticated(); + if (!hasAuth) return; + if (!_note.newComment) return; + d3_event.preventDefault(); + select(this).on('keydown.note-input', null); // focus on button and submit + + window.setTimeout(function () { + if (_note.isNew()) { + noteSave.selectAll('.save-button').node().focus(); + clickSave(); } else { - continueTo(retryClickCircle); + noteSave.selectAll('.comment-button').node().focus(); + clickComment(); } - }, 500); // after transitioned actions - }); - - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - context.history().on('change.intro', null); - nextStep(); + }, 10); } - } - function retryClickCircle() { - context.enter(modeBrowse(context)); - revealTank(tank, helpHtml('intro.buildings.retry_circle'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(rightClickTank); + function changeInput() { + var input = select(this); + var val = input.property('value').trim() || undefined; // store the unsaved comment with the note itself + + _note = _note.update({ + newComment: val + }); + var osm = services.osm; + + if (osm) { + osm.replaceNote(_note); // update note cache } - }); - function continueTo(nextStep) { - nextStep(); + noteSave.call(noteSaveButtons); } } - function play() { - dispatch$1.call('done'); - reveal('.ideditor', helpHtml('intro.buildings.play', { - next: _t('intro.startediting.title') - }), { - tooltipBox: '.intro-nav-wrap .chapter-startEditing', - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - reveal('.ideditor'); - } + function userDetails(selection) { + var detailSection = selection.selectAll('.detail-section').data([0]); + detailSection = detailSection.enter().append('div').attr('class', 'detail-section').merge(detailSection); + var osm = services.osm; + if (!osm) return; // Add warning if user is not logged in + + var hasAuth = osm.authenticated(); + var authWarning = detailSection.selectAll('.auth-warning').data(hasAuth ? [] : [0]); + authWarning.exit().transition().duration(200).style('opacity', 0).remove(); + var authEnter = authWarning.enter().insert('div', '.tag-reference-body').attr('class', 'field-warning auth-warning').style('opacity', 0); + authEnter.call(svgIcon('#iD-icon-alert', 'inline')); + authEnter.append('span').html(_t.html('note.login')); + authEnter.append('a').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).append('span').html(_t.html('login')).on('click.note-login', function (d3_event) { + d3_event.preventDefault(); + osm.authenticate(); }); - } + authEnter.transition().duration(200).style('opacity', 1); + var prose = detailSection.selectAll('.note-save-prose').data(hasAuth ? [0] : []); + prose.exit().remove(); + prose = prose.enter().append('p').attr('class', 'note-save-prose').html(_t.html('note.upload_explanation')).merge(prose); + osm.userDetails(function (err, user) { + if (err) return; + var userLink = select(document.createElement('div')); - chapter.enter = function () { - addHouse(); - }; + if (user.image_url) { + userLink.append('img').attr('src', user.image_url).attr('class', 'icon pre-text user-icon'); + } - chapter.exit = function () { - timeouts.forEach(window.clearTimeout); - context.on('enter.intro exit.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null); - context.container().select('.more-fields .combobox-input').on('click.intro', null); - }; + userLink.append('a').attr('class', 'user-info').html(user.display_name).attr('href', osm.userURL(user.display_name)).attr('target', '_blank'); + prose.html(_t.html('note.upload_explanation_with_user', { + user: userLink.html() + })); + }); + } - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + function noteSaveButtons(selection) { + var osm = services.osm; + var hasAuth = osm && osm.authenticated(); - return utilRebind(chapter, dispatch$1, 'on'); - } + var isSelected = _note && _note.id === context.selectedNoteID(); - function uiIntroStartEditing(context, reveal) { - var dispatch$1 = dispatch('done', 'startEditing'); - var modalSelection = select(null); - var chapter = { - title: 'intro.startediting.title' - }; + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_note] : [], function (d) { + return d.status + d.id; + }); // exit - function showHelp() { - reveal('.map-control.help-control', helpHtml('intro.startediting.help'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - shortcuts(); - } - }); - } + buttonSection.exit().remove(); // enter - function shortcuts() { - reveal('.map-control.help-control', helpHtml('intro.startediting.shortcuts'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - showSave(); - } - }); - } + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons'); - function showSave() { - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + if (_note.isNew()) { + buttonEnter.append('button').attr('class', 'button cancel-button secondary-action').html(_t.html('confirm.cancel')); + buttonEnter.append('button').attr('class', 'button save-button action').html(_t.html('note.save')); + } else { + buttonEnter.append('button').attr('class', 'button status-button action'); + buttonEnter.append('button').attr('class', 'button comment-button action').html(_t.html('note.comment')); + } // update - reveal('.top-toolbar button.save', helpHtml('intro.startediting.save'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - showStart(); - } - }); - } - function showStart() { - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + buttonSection = buttonSection.merge(buttonEnter); + buttonSection.select('.cancel-button') // select and propagate data + .on('click.cancel', clickCancel); + buttonSection.select('.save-button') // select and propagate data + .attr('disabled', isSaveDisabled).on('click.save', clickSave); + buttonSection.select('.status-button') // select and propagate data + .attr('disabled', hasAuth ? null : true).html(function (d) { + var action = d.status === 'open' ? 'close' : 'open'; + var andComment = d.newComment ? '_comment' : ''; + return _t('note.' + action + andComment); + }).on('click.status', clickStatus); + buttonSection.select('.comment-button') // select and propagate data + .attr('disabled', isSaveDisabled).on('click.comment', clickComment); - modalSelection = uiModal(context.container()); - modalSelection.select('.modal').attr('class', 'modal-splash modal'); - modalSelection.selectAll('.close').remove(); - var startbutton = modalSelection.select('.content').attr('class', 'fillL').append('button').attr('class', 'modal-section huge-modal-button').on('click', function () { - modalSelection.remove(); - }); - startbutton.append('svg').attr('class', 'illustration').append('use').attr('xlink:href', '#iD-logo-walkthrough'); - startbutton.append('h2').html(_t.html('intro.startediting.start')); - dispatch$1.call('startEditing'); + function isSaveDisabled(d) { + return hasAuth && d.status === 'open' && d.newComment ? null : true; + } } - chapter.enter = function () { - showHelp(); - }; + function clickCancel(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - chapter.exit = function () { - modalSelection.remove(); - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts - }; + var osm = services.osm; - return utilRebind(chapter, dispatch$1, 'on'); - } + if (osm) { + osm.removeNote(d); + } - var chapterUi = { - welcome: uiIntroWelcome, - navigation: uiIntroNavigation, - point: uiIntroPoint, - area: uiIntroArea, - line: uiIntroLine, - building: uiIntroBuilding, - startEditing: uiIntroStartEditing - }; - var chapterFlow = ['welcome', 'navigation', 'point', 'area', 'line', 'building', 'startEditing']; - function uiIntro(context) { - var INTRO_IMAGERY = 'EsriWorldImageryClarity'; - var _introGraph = {}; + context.enter(modeBrowse(context)); + dispatch.call('change'); + } - var _currChapter; + function clickSave(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - function intro(selection) { - _mainFileFetcher.get('intro_graph').then(function (dataIntroGraph) { - // create entities for intro graph and localize names - for (var id in dataIntroGraph) { - if (!_introGraph[id]) { - _introGraph[id] = osmEntity(localize(dataIntroGraph[id])); - } - } + var osm = services.osm; - selection.call(startIntro); - })["catch"](function () { - /* ignore */ - }); + if (osm) { + osm.postNoteCreate(d, function (err, note) { + dispatch.call('change', note); + }); + } } - function startIntro(selection) { - context.enter(modeBrowse(context)); // Save current map state - - var osm = context.connection(); - var history = context.history().toJSON(); - var hash = window.location.hash; - var center = context.map().center(); - var zoom = context.map().zoom(); - var background = context.background().baseLayerSource(); - var overlays = context.background().overlayLayerSources(); - var opacity = context.container().selectAll('.main-map .layer-background').style('opacity'); - var caches = osm && osm.caches(); - var baseEntities = context.history().graph().base().entities; // Show sidebar and disable the sidebar resizing button - // (this needs to be before `context.inIntro(true)`) - - context.ui().sidebar.expand(); - context.container().selectAll('button.sidebar-toggle').classed('disabled', true); // Block saving + function clickStatus(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - context.inIntro(true); // Load semi-real data used in intro + var osm = services.osm; if (osm) { - osm.toggle(false).reset(); + var setStatus = d.status === 'open' ? 'closed' : 'open'; + osm.postNoteUpdate(d, setStatus, function (err, note) { + dispatch.call('change', note); + }); } + } - context.history().reset(); - context.history().merge(Object.values(coreGraph().load(_introGraph).entities)); - context.history().checkpoint('initial'); // Setup imagery + function clickComment(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - var imagery = context.background().findSource(INTRO_IMAGERY); + var osm = services.osm; - if (imagery) { - context.background().baseLayerSource(imagery); - } else { - context.background().bing(); + if (osm) { + osm.postNoteUpdate(d, d.status, function (err, note) { + dispatch.call('change', note); + }); } + } - overlays.forEach(function (d) { - return context.background().toggleOverlayLayer(d); - }); // Setup data layers (only OSM) + noteEditor.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteEditor; + }; - var layers = context.layers(); - layers.all().forEach(function (item) { - // if the layer has the function `enabled` - if (typeof item.layer.enabled === 'function') { - item.layer.enabled(item.id === 'osm'); - } - }); - context.container().selectAll('.main-map .layer-background').style('opacity', 1); - var curtain = uiCurtain(context.container().node()); - selection.call(curtain); // Store that the user started the walkthrough.. + noteEditor.newNote = function (val) { + if (!arguments.length) return _newNote; + _newNote = val; + return noteEditor; + }; - corePreferences('walkthrough_started', 'yes'); // Restore previous walkthrough progress.. + return utilRebind(noteEditor, dispatch, 'on'); + } - var storedProgress = corePreferences('walkthrough_progress') || ''; - var progress = storedProgress.split(';').filter(Boolean); - var chapters = chapterFlow.map(function (chapter, i) { - var s = chapterUi[chapter](context, curtain.reveal).on('done', function () { - buttons.filter(function (d) { - return d.title === s.title; - }).classed('finished', true); + function uiSidebar(context) { + var inspector = uiInspector(context); + var dataEditor = uiDataEditor(context); + var noteEditor = uiNoteEditor(context); + var improveOsmEditor = uiImproveOsmEditor(context); + var keepRightEditor = uiKeepRightEditor(context); + var osmoseEditor = uiOsmoseEditor(context); - if (i < chapterFlow.length - 1) { - var next = chapterFlow[i + 1]; - context.container().select("button.chapter-".concat(next)).classed('next', true); - } // Store walkthrough progress.. + var _current; + var _wasData = false; + var _wasNote = false; + var _wasQaItem = false; // use pointer events on supported platforms; fallback to mouse events - progress.push(chapter); - corePreferences('walkthrough_progress', utilArrayUniq(progress).join(';')); - }); - return s; - }); - chapters[chapters.length - 1].on('startEditing', function () { - // Store walkthrough progress.. - progress.push('startEditing'); - corePreferences('walkthrough_progress', utilArrayUniq(progress).join(';')); // Store if walkthrough is completed.. + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; - var incomplete = utilArrayDifference(chapterFlow, progress); + function sidebar(selection) { + var container = context.container(); + var minWidth = 240; + var sidebarWidth; + var containerWidth; + var dragOffset; // Set the initial width constraints - if (!incomplete.length) { - corePreferences('walkthrough_completed', 'yes'); - } + selection.style('min-width', minWidth + 'px').style('max-width', '400px').style('width', '33.3333%'); + var resizer = selection.append('div').attr('class', 'sidebar-resizer').on(_pointerPrefix + 'down.sidebar-resizer', pointerdown); + var downPointerId, lastClientX, containerLocGetter; - curtain.remove(); - navwrap.remove(); - context.container().selectAll('.main-map .layer-background').style('opacity', opacity); - context.container().selectAll('button.sidebar-toggle').classed('disabled', false); + function pointerdown(d3_event) { + if (downPointerId) return; + if ('button' in d3_event && d3_event.button !== 0) return; + downPointerId = d3_event.pointerId || 'mouse'; + lastClientX = d3_event.clientX; + containerLocGetter = utilFastMouse(container.node()); // offset from edge of sidebar-resizer - if (osm) { - osm.toggle(true).reset().caches(caches); - } + dragOffset = utilFastMouse(resizer.node())(d3_event)[0] - 1; + sidebarWidth = selection.node().getBoundingClientRect().width; + containerWidth = container.node().getBoundingClientRect().width; + var widthPct = sidebarWidth / containerWidth * 100; + selection.style('width', widthPct + '%') // lock in current width + .style('max-width', '85%'); // but allow larger widths - context.history().reset().merge(Object.values(baseEntities)); - context.background().baseLayerSource(background); - overlays.forEach(function (d) { - return context.background().toggleOverlayLayer(d); - }); + resizer.classed('dragging', true); + select(window).on('touchmove.sidebar-resizer', function (d3_event) { + // disable page scrolling while resizing on touch input + d3_event.preventDefault(); + }, { + passive: false + }).on(_pointerPrefix + 'move.sidebar-resizer', pointermove).on(_pointerPrefix + 'up.sidebar-resizer pointercancel.sidebar-resizer', pointerup); + } - if (history) { - context.history().fromJSON(history, false); - } + function pointermove(d3_event) { + if (downPointerId !== (d3_event.pointerId || 'mouse')) return; + d3_event.preventDefault(); + var dx = d3_event.clientX - lastClientX; + lastClientX = d3_event.clientX; + var isRTL = _mainLocalizer.textDirection() === 'rtl'; + var scaleX = isRTL ? 0 : 1; + var xMarginProperty = isRTL ? 'margin-right' : 'margin-left'; + var x = containerLocGetter(d3_event)[0] - dragOffset; + sidebarWidth = isRTL ? containerWidth - x : x; + var isCollapsed = selection.classed('collapsed'); + var shouldCollapse = sidebarWidth < minWidth; + selection.classed('collapsed', shouldCollapse); - context.map().centerZoom(center, zoom); - window.location.replace(hash); - context.inIntro(false); - }); - var navwrap = selection.append('div').attr('class', 'intro-nav-wrap fillD'); - navwrap.append('svg').attr('class', 'intro-nav-wrap-logo').append('use').attr('xlink:href', '#iD-logo-walkthrough'); - var buttonwrap = navwrap.append('div').attr('class', 'joined').selectAll('button.chapter'); - var buttons = buttonwrap.data(chapters).enter().append('button').attr('class', function (d, i) { - return "chapter chapter-".concat(chapterFlow[i]); - }).on('click', enterChapter); - buttons.append('span').html(function (d) { - return _t.html(d.title); - }); - buttons.append('span').attr('class', 'status').call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward', 'inline')); - enterChapter(null, chapters[0]); + if (shouldCollapse) { + if (!isCollapsed) { + selection.style(xMarginProperty, '-400px').style('width', '400px'); + context.ui().onResize([(sidebarWidth - dx) * scaleX, 0]); + } + } else { + var widthPct = sidebarWidth / containerWidth * 100; + selection.style(xMarginProperty, null).style('width', widthPct + '%'); - function enterChapter(d3_event, newChapter) { - if (_currChapter) { - _currChapter.exit(); + if (isCollapsed) { + context.ui().onResize([-sidebarWidth * scaleX, 0]); + } else { + context.ui().onResize([-dx * scaleX, 0]); + } } + } - context.enter(modeBrowse(context)); - _currChapter = newChapter; + function pointerup(d3_event) { + if (downPointerId !== (d3_event.pointerId || 'mouse')) return; + downPointerId = null; + resizer.classed('dragging', false); + select(window).on('touchmove.sidebar-resizer', null).on(_pointerPrefix + 'move.sidebar-resizer', null).on(_pointerPrefix + 'up.sidebar-resizer pointercancel.sidebar-resizer', null); + } - _currChapter.enter(); + var featureListWrap = selection.append('div').attr('class', 'feature-list-pane').call(uiFeatureList(context)); + var inspectorWrap = selection.append('div').attr('class', 'inspector-hidden inspector-wrap'); - buttons.classed('next', false).classed('active', function (d) { - return d.title === _currChapter.title; - }); - } - } + var hoverModeSelect = function hoverModeSelect(targets) { + context.container().selectAll('.feature-list-item button').classed('hover', false); - return intro; - } + if (context.selectedIDs().length > 1 && targets && targets.length) { + var elements = context.container().selectAll('.feature-list-item button').filter(function (node) { + return targets.indexOf(node) !== -1; + }); - function uiIssuesInfo(context) { - var warningsItem = { - id: 'warnings', - count: 0, - iconID: 'iD-icon-alert', - descriptionID: 'issues.warnings_and_errors' - }; - var resolvedItem = { - id: 'resolved', - count: 0, - iconID: 'iD-icon-apply', - descriptionID: 'issues.user_resolved_issues' - }; + if (!elements.empty()) { + elements.classed('hover', true); + } + } + }; - function update(selection) { - var shownItems = []; - var liveIssues = context.validator().getIssues({ - what: corePreferences('validate-what') || 'edited', - where: corePreferences('validate-where') || 'all' - }); + sidebar.hoverModeSelect = throttle(hoverModeSelect, 200); - if (liveIssues.length) { - warningsItem.count = liveIssues.length; - shownItems.push(warningsItem); - } + function hover(targets) { + var datum = targets && targets.length && targets[0]; - if (corePreferences('validate-what') === 'all') { - var resolvedIssues = context.validator().getResolvedIssues(); + if (datum && datum.__featurehash__) { + // hovering on data + _wasData = true; + sidebar.show(dataEditor.datum(datum)); + selection.selectAll('.sidebar-component').classed('inspector-hover', true); + } else if (datum instanceof osmNote) { + if (context.mode().id === 'drag-note') return; + _wasNote = true; + var osm = services.osm; - if (resolvedIssues.length) { - resolvedItem.count = resolvedIssues.length; - shownItems.push(resolvedItem); - } - } + if (osm) { + datum = osm.getNote(datum.id); // marker may contain stale data - get latest + } - var chips = selection.selectAll('.chip').data(shownItems, function (d) { - return d.id; - }); - chips.exit().remove(); - var enter = chips.enter().append('a').attr('class', function (d) { - return 'chip ' + d.id + '-count'; - }).attr('href', '#').each(function (d) { - var chipSelection = select(this); - var tooltipBehavior = uiTooltip().placement('top').title(_t.html(d.descriptionID)); - chipSelection.call(tooltipBehavior).on('click', function (d3_event) { - d3_event.preventDefault(); - tooltipBehavior.hide(select(this)); // open the Issues pane + sidebar.show(noteEditor.note(datum)); + selection.selectAll('.sidebar-component').classed('inspector-hover', true); + } else if (datum instanceof QAItem) { + _wasQaItem = true; + var errService = services[datum.service]; - context.ui().togglePanes(context.container().select('.map-panes .issues-pane')); - }); - chipSelection.call(svgIcon('#' + d.iconID)); - }); - enter.append('span').attr('class', 'count'); - enter.merge(chips).selectAll('span.count').html(function (d) { - return d.count.toString(); - }); - } + if (errService) { + // marker may contain stale data - get latest + datum = errService.getError(datum.id); + } // Currently only three possible services - return function (selection) { - update(selection); - context.validator().on('validated.infobox', function () { - update(selection); - }); - }; - } - function uiMapInMap(context) { - function mapInMap(selection) { - var backgroundLayer = rendererTileLayer(context); - var overlayLayers = {}; - var projection = geoRawMercator(); - var dataLayer = svgData(projection, context).showLabels(false); - var debugLayer = svgDebug(projection, context); - var zoom = d3_zoom().scaleExtent([geoZoomToScale(0.5), geoZoomToScale(24)]).on('start', zoomStarted).on('zoom', zoomed).on('end', zoomEnded); - var wrap = select(null); - var tiles = select(null); - var viewport = select(null); - var _isTransformed = false; - var _isHidden = true; - var _skipEvents = false; - var _gesture = null; - var _zDiff = 6; // by default, minimap renders at (main zoom - 6) + var errEditor; - var _dMini; // dimensions of minimap + if (datum.service === 'keepRight') { + errEditor = keepRightEditor; + } else if (datum.service === 'osmose') { + errEditor = osmoseEditor; + } else { + errEditor = improveOsmEditor; + } + context.container().selectAll('.qaItem.' + datum.service).classed('hover', function (d) { + return d.id === datum.id; + }); + sidebar.show(errEditor.error(datum)); + selection.selectAll('.sidebar-component').classed('inspector-hover', true); + } else if (!_current && datum instanceof osmEntity) { + featureListWrap.classed('inspector-hidden', true); + inspectorWrap.classed('inspector-hidden', false).classed('inspector-hover', true); - var _cMini; // center pixel of minimap + if (!inspector.entityIDs() || !utilArrayIdentical(inspector.entityIDs(), [datum.id]) || inspector.state() !== 'hover') { + inspector.state('hover').entityIDs([datum.id]).newFeature(false); + inspectorWrap.call(inspector); + } + } else if (!_current) { + featureListWrap.classed('inspector-hidden', false); + inspectorWrap.classed('inspector-hidden', true); + inspector.state('hide'); + } else if (_wasData || _wasNote || _wasQaItem) { + _wasNote = false; + _wasData = false; + _wasQaItem = false; + context.container().selectAll('.note').classed('hover', false); + context.container().selectAll('.qaItem').classed('hover', false); + sidebar.hide(); + } + } + sidebar.hover = throttle(hover, 200); - var _tStart; // transform at start of gesture + sidebar.intersects = function (extent) { + var rect = selection.node().getBoundingClientRect(); + return extent.intersects([context.projection.invert([0, rect.height]), context.projection.invert([rect.width, 0])]); + }; + sidebar.select = function (ids, newFeature) { + sidebar.hide(); - var _tCurr; // transform at most recent event + if (ids && ids.length) { + var entity = ids.length === 1 && context.entity(ids[0]); + if (entity && newFeature && selection.classed('collapsed')) { + // uncollapse the sidebar + var extent = entity.extent(context.graph()); + sidebar.expand(sidebar.intersects(extent)); + } - var _timeoutID; + featureListWrap.classed('inspector-hidden', true); + inspectorWrap.classed('inspector-hidden', false).classed('inspector-hover', false); // reload the UI even if the ids are the same since the entities + // themselves may have changed - function zoomStarted() { - if (_skipEvents) return; - _tStart = _tCurr = projection.transform(); - _gesture = null; - } + inspector.state('select').entityIDs(ids).newFeature(newFeature); + inspectorWrap.call(inspector); + } else { + inspector.state('hide'); + } + }; - function zoomed(d3_event) { - if (_skipEvents) return; - var x = d3_event.transform.x; - var y = d3_event.transform.y; - var k = d3_event.transform.k; - var isZooming = k !== _tStart.k; - var isPanning = x !== _tStart.x || y !== _tStart.y; + sidebar.showPresetList = function () { + inspector.showList(); + }; - if (!isZooming && !isPanning) { - return; // no change - } // lock in either zooming or panning, don't allow both in minimap. + sidebar.show = function (component, element) { + featureListWrap.classed('inspector-hidden', true); + inspectorWrap.classed('inspector-hidden', true); + if (_current) _current.remove(); + _current = selection.append('div').attr('class', 'sidebar-component').call(component, element); + }; + sidebar.hide = function () { + featureListWrap.classed('inspector-hidden', false); + inspectorWrap.classed('inspector-hidden', true); + if (_current) _current.remove(); + _current = null; + }; - if (!_gesture) { - _gesture = isZooming ? 'zoom' : 'pan'; + sidebar.expand = function (moveMap) { + if (selection.classed('collapsed')) { + sidebar.toggle(moveMap); } + }; - var tMini = projection.transform(); - var tX, tY, scale; - - if (_gesture === 'zoom') { - scale = k / tMini.k; - tX = (_cMini[0] / scale - _cMini[0]) * scale; - tY = (_cMini[1] / scale - _cMini[1]) * scale; - } else { - k = tMini.k; - scale = 1; - tX = x - tMini.x; - tY = y - tMini.y; + sidebar.collapse = function (moveMap) { + if (!selection.classed('collapsed')) { + sidebar.toggle(moveMap); } + }; - utilSetTransform(tiles, tX, tY, scale); - utilSetTransform(viewport, 0, 0, scale); - _isTransformed = true; - _tCurr = identity$2.translate(x, y).scale(k); - var zMain = geoScaleToZoom(context.projection.scale()); - var zMini = geoScaleToZoom(k); - _zDiff = zMain - zMini; - queueRedraw(); - } - - function zoomEnded() { - if (_skipEvents) return; - if (_gesture !== 'pan') return; - updateProjection(); - _gesture = null; - context.map().center(projection.invert(_cMini)); // recenter main map.. - } + sidebar.toggle = function (moveMap) { + // Don't allow sidebar to toggle when the user is in the walkthrough. + if (context.inIntro()) return; + var isCollapsed = selection.classed('collapsed'); + var isCollapsing = !isCollapsed; + var isRTL = _mainLocalizer.textDirection() === 'rtl'; + var scaleX = isRTL ? 0 : 1; + var xMarginProperty = isRTL ? 'margin-right' : 'margin-left'; + sidebarWidth = selection.node().getBoundingClientRect().width; // switch from % to px - function updateProjection() { - var loc = context.map().center(); - var tMain = context.projection.transform(); - var zMain = geoScaleToZoom(tMain.k); - var zMini = Math.max(zMain - _zDiff, 0.5); - var kMini = geoZoomToScale(zMini); - projection.translate([tMain.x, tMain.y]).scale(kMini); - var point = projection(loc); - var mouse = _gesture === 'pan' ? geoVecSubtract([_tCurr.x, _tCurr.y], [_tStart.x, _tStart.y]) : [0, 0]; - var xMini = _cMini[0] - point[0] + tMain.x + mouse[0]; - var yMini = _cMini[1] - point[1] + tMain.y + mouse[1]; - projection.translate([xMini, yMini]).clipExtent([[0, 0], _dMini]); - _tCurr = projection.transform(); + selection.style('width', sidebarWidth + 'px'); + var startMargin, endMargin, lastMargin; - if (_isTransformed) { - utilSetTransform(tiles, 0, 0); - utilSetTransform(viewport, 0, 0); - _isTransformed = false; + if (isCollapsing) { + startMargin = lastMargin = 0; + endMargin = -sidebarWidth; + } else { + startMargin = lastMargin = -sidebarWidth; + endMargin = 0; } - zoom.scaleExtent([geoZoomToScale(0.5), geoZoomToScale(zMain - 3)]); - _skipEvents = true; - wrap.call(zoom.transform, _tCurr); - _skipEvents = false; - } - - function redraw() { - clearTimeout(_timeoutID); - if (_isHidden) return; - updateProjection(); - var zMini = geoScaleToZoom(projection.scale()); // setup tile container - - tiles = wrap.selectAll('.map-in-map-tiles').data([0]); - tiles = tiles.enter().append('div').attr('class', 'map-in-map-tiles').merge(tiles); // redraw background + if (!isCollapsing) { + // unhide the sidebar's content before it transitions onscreen + selection.classed('collapsed', isCollapsing); + } - backgroundLayer.source(context.background().baseLayerSource()).projection(projection).dimensions(_dMini); - var background = tiles.selectAll('.map-in-map-background').data([0]); - background.enter().append('div').attr('class', 'map-in-map-background').merge(background).call(backgroundLayer); // redraw overlay + selection.transition().style(xMarginProperty, endMargin + 'px').tween('panner', function () { + var i = d3_interpolateNumber(startMargin, endMargin); + return function (t) { + var dx = lastMargin - Math.round(i(t)); + lastMargin = lastMargin - dx; + context.ui().onResize(moveMap ? undefined : [dx * scaleX, 0]); + }; + }).on('end', function () { + if (isCollapsing) { + // hide the sidebar's content after it transitions offscreen + selection.classed('collapsed', isCollapsing); + } // switch back from px to % - var overlaySources = context.background().overlayLayerSources(); - var activeOverlayLayers = []; - for (var i = 0; i < overlaySources.length; i++) { - if (overlaySources[i].validZoom(zMini)) { - if (!overlayLayers[i]) overlayLayers[i] = rendererTileLayer(context); - activeOverlayLayers.push(overlayLayers[i].source(overlaySources[i]).projection(projection).dimensions(_dMini)); + if (!isCollapsing) { + var containerWidth = container.node().getBoundingClientRect().width; + var widthPct = sidebarWidth / containerWidth * 100; + selection.style(xMarginProperty, null).style('width', widthPct + '%'); } - } - - var overlay = tiles.selectAll('.map-in-map-overlay').data([0]); - overlay = overlay.enter().append('div').attr('class', 'map-in-map-overlay').merge(overlay); - var overlays = overlay.selectAll('div').data(activeOverlayLayers, function (d) { - return d.source().name(); - }); - overlays.exit().remove(); - overlays = overlays.enter().append('div').merge(overlays).each(function (layer) { - select(this).call(layer); }); - var dataLayers = tiles.selectAll('.map-in-map-data').data([0]); - dataLayers.exit().remove(); - dataLayers = dataLayers.enter().append('svg').attr('class', 'map-in-map-data').merge(dataLayers).call(dataLayer).call(debugLayer); // redraw viewport bounding box - - if (_gesture !== 'pan') { - var getPath = d3_geoPath(projection); - var bbox = { - type: 'Polygon', - coordinates: [context.map().extent().polygon()] - }; - viewport = wrap.selectAll('.map-in-map-viewport').data([0]); - viewport = viewport.enter().append('svg').attr('class', 'map-in-map-viewport').merge(viewport); - var path = viewport.selectAll('.map-in-map-bbox').data([bbox]); - path.enter().append('path').attr('class', 'map-in-map-bbox').merge(path).attr('d', getPath).classed('thick', function (d) { - return getPath.area(d) < 30; - }); - } - } + }; // toggle the sidebar collapse when double-clicking the resizer - function queueRedraw() { - clearTimeout(_timeoutID); - _timeoutID = setTimeout(function () { - redraw(); - }, 750); - } - function toggle(d3_event) { - if (d3_event) d3_event.preventDefault(); - _isHidden = !_isHidden; - context.container().select('.minimap-toggle-item').classed('active', !_isHidden).select('input').property('checked', !_isHidden); + resizer.on('dblclick', function (d3_event) { + d3_event.preventDefault(); - if (_isHidden) { - wrap.style('display', 'block').style('opacity', '1').transition().duration(200).style('opacity', '0').on('end', function () { - selection.selectAll('.map-in-map').style('display', 'none'); - }); - } else { - wrap.style('display', 'block').style('opacity', '0').transition().duration(200).style('opacity', '1').on('end', function () { - redraw(); - }); + if (d3_event.sourceEvent) { + d3_event.sourceEvent.preventDefault(); } - } - - uiMapInMap.toggle = toggle; - wrap = selection.selectAll('.map-in-map').data([0]); - wrap = wrap.enter().append('div').attr('class', 'map-in-map').style('display', _isHidden ? 'none' : 'block').call(zoom).on('dblclick.zoom', null).merge(wrap); // reflow warning: Hardcode dimensions - currently can't resize it anyway.. - _dMini = [200, 150]; //utilGetDimensions(wrap); + sidebar.toggle(); + }); // ensure hover sidebar is closed when zooming out beyond editable zoom - _cMini = geoVecScale(_dMini, 0.5); - context.map().on('drawn.map-in-map', function (drawn) { - if (drawn.full === true) { - redraw(); + context.map().on('crossEditableZoom.sidebar', function (within) { + if (!within && !selection.select('.inspector-hover').empty()) { + hover([]); } }); - redraw(); - context.keybinding().on(_t('background.minimap.key'), toggle); } - return mapInMap; - } - - function uiNotice(context) { - return function (selection) { - var div = selection.append('div').attr('class', 'notice'); - var button = div.append('button').attr('class', 'zoom-to notice fillD').on('click', function () { - context.map().zoomEase(context.minEditableZoom()); - }).on('wheel', function (d3_event) { - // let wheel events pass through #4482 - var e2 = new WheelEvent(d3_event.type, d3_event); - context.surface().node().dispatchEvent(e2); - }); - button.call(svgIcon('#iD-icon-plus', 'pre-text')).append('span').attr('class', 'label').html(_t.html('zoom_in_edit')); - - function disableTooHigh() { - var canEdit = context.map().zoom() >= context.minEditableZoom(); - div.style('display', canEdit ? 'none' : 'block'); - } + sidebar.showPresetList = function () {}; - context.map().on('move.notice', debounce(disableTooHigh, 500)); - disableTooHigh(); - }; - } + sidebar.hover = function () {}; - function uiPhotoviewer(context) { - var dispatch$1 = dispatch('resize'); + sidebar.hover.cancel = function () {}; - var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; + sidebar.intersects = function () {}; - function photoviewer(selection) { - selection.append('button').attr('class', 'thumb-hide').on('click', function () { - if (services.streetside) { - services.streetside.hideViewer(context); - } + sidebar.select = function () {}; - if (services.mapillary) { - services.mapillary.hideViewer(context); - } + sidebar.show = function () {}; - if (services.openstreetcam) { - services.openstreetcam.hideViewer(context); - } - }).append('div').call(svgIcon('#iD-icon-close')); + sidebar.hide = function () {}; - function preventDefault(d3_event) { - d3_event.preventDefault(); - } + sidebar.expand = function () {}; - selection.append('button').attr('class', 'resize-handle-xy').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch$1, { - resizeOnX: true, - resizeOnY: true - })); - selection.append('button').attr('class', 'resize-handle-x').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch$1, { - resizeOnX: true - })); - selection.append('button').attr('class', 'resize-handle-y').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch$1, { - resizeOnY: true - })); + sidebar.collapse = function () {}; - function buildResizeListener(target, eventName, dispatch, options) { - var resizeOnX = !!options.resizeOnX; - var resizeOnY = !!options.resizeOnY; - var minHeight = options.minHeight || 240; - var minWidth = options.minWidth || 320; - var pointerId; - var startX; - var startY; - var startWidth; - var startHeight; + sidebar.toggle = function () {}; - function startResize(d3_event) { - if (pointerId !== (d3_event.pointerId || 'mouse')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); - var mapSize = context.map().dimensions(); + return sidebar; + } - if (resizeOnX) { - var maxWidth = mapSize[0]; - var newWidth = clamp(startWidth + d3_event.clientX - startX, minWidth, maxWidth); - target.style('width', newWidth + 'px'); - } + function uiSourceSwitch(context) { + var keys; - if (resizeOnY) { - var maxHeight = mapSize[1] - 90; // preserve space at top/bottom of map + function click(d3_event) { + d3_event.preventDefault(); + var osm = context.connection(); + if (!osm) return; + if (context.inIntro()) return; + if (context.history().hasChanges() && !window.confirm(_t('source_switch.lose_changes'))) return; + var isLive = select(this).classed('live'); + isLive = !isLive; + context.enter(modeBrowse(context)); + context.history().clearSaved(); // remove saved history - var newHeight = clamp(startHeight + startY - d3_event.clientY, minHeight, maxHeight); - target.style('height', newHeight + 'px'); - } + context.flush(); // remove stored data - dispatch.call(eventName, target, utilGetDimensions(target, true)); - } + select(this).html(isLive ? _t.html('source_switch.live') : _t.html('source_switch.dev')).classed('live', isLive).classed('chip', isLive); + osm["switch"](isLive ? keys[0] : keys[1]); // switch connection (warning: dispatches 'change' event) + } - function clamp(num, min, max) { - return Math.max(min, Math.min(num, max)); - } + var sourceSwitch = function sourceSwitch(selection) { + selection.append('a').attr('href', '#').html(_t.html('source_switch.live')).attr('class', 'live chip').on('click', click); + }; - function stopResize(d3_event) { - if (pointerId !== (d3_event.pointerId || 'mouse')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); // remove all the listeners we added + sourceSwitch.keys = function (_) { + if (!arguments.length) return keys; + keys = _; + return sourceSwitch; + }; - select(window).on('.' + eventName, null); - } + return sourceSwitch; + } - return function initResize(d3_event) { - d3_event.preventDefault(); - d3_event.stopPropagation(); - pointerId = d3_event.pointerId || 'mouse'; - startX = d3_event.clientX; - startY = d3_event.clientY; - var targetRect = target.node().getBoundingClientRect(); - startWidth = targetRect.width; - startHeight = targetRect.height; - select(window).on(_pointerPrefix + 'move.' + eventName, startResize, false).on(_pointerPrefix + 'up.' + eventName, stopResize, false); + function uiSpinner(context) { + var osm = context.connection(); + return function (selection) { + var img = selection.append('img').attr('src', context.imagePath('loader-black.gif')).style('opacity', 0); - if (_pointerPrefix === 'pointer') { - select(window).on('pointercancel.' + eventName, stopResize, false); - } - }; + if (osm) { + osm.on('loading.spinner', function () { + img.transition().style('opacity', 1); + }).on('loaded.spinner', function () { + img.transition().style('opacity', 0); + }); } - } + }; + } - photoviewer.onMapResize = function () { - var photoviewer = context.container().select('.photoviewer'); - var content = context.container().select('.main-content'); - var mapDimensions = utilGetDimensions(content, true); // shrink photo viewer if it is too big - // (-90 preserves space at top and bottom of map used by menus) + function uiSplash(context) { + return function (selection) { + // Exception - if there are restorable changes, skip this splash screen. + // This is because we currently only support one `uiModal` at a time + // and we need to show them `uiRestore`` instead of this one. + if (context.history().hasRestorableChanges()) return; // If user has not seen this version of the privacy policy, show the splash again. - var photoDimensions = utilGetDimensions(photoviewer, true); + var updateMessage = ''; + var sawPrivacyVersion = corePreferences('sawPrivacyVersion'); + var showSplash = !corePreferences('sawSplash'); - if (photoDimensions[0] > mapDimensions[0] || photoDimensions[1] > mapDimensions[1] - 90) { - var setPhotoDimensions = [Math.min(photoDimensions[0], mapDimensions[0]), Math.min(photoDimensions[1], mapDimensions[1] - 90)]; - photoviewer.style('width', setPhotoDimensions[0] + 'px').style('height', setPhotoDimensions[1] + 'px'); - dispatch$1.call('resize', photoviewer, setPhotoDimensions); + if (sawPrivacyVersion !== context.privacyVersion) { + updateMessage = _t('splash.privacy_update'); + showSplash = true; } - }; - return utilRebind(photoviewer, dispatch$1, 'on'); - } + if (!showSplash) return; + corePreferences('sawSplash', true); + corePreferences('sawPrivacyVersion', context.privacyVersion); // fetch intro graph data now, while user is looking at the splash screen - function uiRestore(context) { - return function (selection) { - if (!context.history().hasRestorableChanges()) return; - var modalSelection = uiModal(selection, true); - modalSelection.select('.modal').attr('class', 'modal fillL'); - var introModal = modalSelection.select('.content'); - introModal.append('div').attr('class', 'modal-section').append('h3').html(_t.html('restore.heading')); - introModal.append('div').attr('class', 'modal-section').append('p').html(_t.html('restore.description')); + _mainFileFetcher.get('intro_graph'); + var modalSelection = uiModal(selection); + modalSelection.select('.modal').attr('class', 'modal-splash modal'); + var introModal = modalSelection.select('.content').append('div').attr('class', 'fillL'); + introModal.append('div').attr('class', 'modal-section').append('h3').html(_t.html('splash.welcome')); + var modalSection = introModal.append('div').attr('class', 'modal-section'); + modalSection.append('p').html(_t.html('splash.text', { + version: context.version, + website: 'changelog', + github: 'github.com' + })); + modalSection.append('p').html(_t.html('splash.privacy', { + updateMessage: updateMessage, + privacyLink: '' + _t('splash.privacy_policy') + '' + })); var buttonWrap = introModal.append('div').attr('class', 'modal-actions'); - var restore = buttonWrap.append('button').attr('class', 'restore').on('click', function () { - context.history().restore(); - modalSelection.remove(); - }); - restore.append('svg').attr('class', 'logo logo-restore').append('use').attr('xlink:href', '#iD-logo-restore'); - restore.append('div').html(_t.html('restore.restore')); - var reset = buttonWrap.append('button').attr('class', 'reset').on('click', function () { - context.history().clearSaved(); - modalSelection.remove(); + var walkthrough = buttonWrap.append('button').attr('class', 'walkthrough').on('click', function () { + context.container().call(uiIntro(context)); + modalSelection.close(); }); - reset.append('svg').attr('class', 'logo logo-reset').append('use').attr('xlink:href', '#iD-logo-reset'); - reset.append('div').html(_t.html('restore.reset')); - restore.node().focus(); + walkthrough.append('svg').attr('class', 'logo logo-walkthrough').append('use').attr('xlink:href', '#iD-logo-walkthrough'); + walkthrough.append('div').html(_t.html('splash.walkthrough')); + var startEditing = buttonWrap.append('button').attr('class', 'start-editing').on('click', modalSelection.close); + startEditing.append('svg').attr('class', 'logo logo-features').append('use').attr('xlink:href', '#iD-logo-features'); + startEditing.append('div').html(_t.html('splash.start')); + modalSelection.select('button.close').attr('class', 'hide'); }; } - function uiScale(context) { - var projection = context.projection, - isImperial = !_mainLocalizer.usesMetric(), - maxLength = 180, - tickHeight = 8; + function uiStatus(context) { + var osm = context.connection(); + return function (selection) { + if (!osm) return; - function scaleDefs(loc1, loc2) { - var lat = (loc2[1] + loc1[1]) / 2, - conversion = isImperial ? 3.28084 : 1, - dist = geoLonToMeters(loc2[0] - loc1[0], lat) * conversion, - scale = { - dist: 0, - px: 0, - text: '' - }, - buckets, - i, - val, - dLon; + function update(err, apiStatus) { + selection.html(''); - if (isImperial) { - buckets = [5280000, 528000, 52800, 5280, 500, 50, 5, 1]; - } else { - buckets = [5000000, 500000, 50000, 5000, 500, 50, 5, 1]; - } // determine a user-friendly endpoint for the scale + if (err) { + if (apiStatus === 'connectionSwitched') { + // if the connection was just switched, we can't rely on + // the status (we're getting the status of the previous api) + return; + } else if (apiStatus === 'rateLimited') { + selection.html(_t.html('osm_api_status.message.rateLimit')).append('a').attr('href', '#').attr('class', 'api-status-login').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).append('span').html(_t.html('login')).on('click.login', function (d3_event) { + d3_event.preventDefault(); + osm.authenticate(); + }); + } else { + // don't allow retrying too rapidly + var throttledRetry = throttle(function () { + // try loading the visible tiles + context.loadTiles(context.projection); // manually reload the status too in case all visible tiles were already loaded + osm.reloadApiStatus(); + }, 2000); // eslint-disable-next-line no-warning-comments + // TODO: nice messages for different error types - for (i = 0; i < buckets.length; i++) { - val = buckets[i]; - if (dist >= val) { - scale.dist = Math.floor(dist / val) * val; - break; - } else { - scale.dist = +dist.toFixed(2); + selection.html(_t.html('osm_api_status.message.error') + ' ').append('a').attr('href', '#') // let the user manually retry their connection directly + .html(_t.html('osm_api_status.retry')).on('click.retry', function (d3_event) { + d3_event.preventDefault(); + throttledRetry(); + }); + } + } else if (apiStatus === 'readonly') { + selection.html(_t.html('osm_api_status.message.readonly')); + } else if (apiStatus === 'offline') { + selection.html(_t.html('osm_api_status.message.offline')); } - } - dLon = geoMetersToLon(scale.dist / conversion, lat); - scale.px = Math.round(projection([loc1[0] + dLon, loc1[1]])[0]); - scale.text = displayLength(scale.dist / conversion, isImperial); - return scale; - } + selection.attr('class', 'api-status ' + (err ? 'error' : apiStatus)); + } - function update(selection) { - // choose loc1, loc2 along bottom of viewport (near where the scale will be drawn) - var dims = context.map().dimensions(), - loc1 = projection.invert([0, dims[1]]), - loc2 = projection.invert([maxLength, dims[1]]), - scale = scaleDefs(loc1, loc2); - selection.select('.scale-path').attr('d', 'M0.5,0.5v' + tickHeight + 'h' + scale.px + 'v-' + tickHeight); - selection.select('.scale-text').style(_mainLocalizer.textDirection() === 'ltr' ? 'left' : 'right', scale.px + 16 + 'px').html(scale.text); - } + osm.on('apiStatusChange.uiStatus', update); // reload the status periodically regardless of other factors - return function (selection) { - function switchUnits() { - isImperial = !isImperial; - selection.call(update); - } + window.setInterval(function () { + osm.reloadApiStatus(); + }, 90000); // load the initial status in case no OSM data was loaded yet - var scalegroup = selection.append('svg').attr('class', 'scale').on('click', switchUnits).append('g').attr('transform', 'translate(10,11)'); - scalegroup.append('path').attr('class', 'scale-path'); - selection.append('div').attr('class', 'scale-text'); - selection.call(update); - context.map().on('move.scale', function () { - update(selection); - }); + osm.reloadApiStatus(); }; } - function uiShortcuts(context) { - var detected = utilDetect(); - var _activeTab = 0; - - var _modalSelection; - - var _selection = select(null); + function modeDrawArea(context, wayID, startGraph, button) { + var mode = { + button: button, + id: 'draw-area' + }; + var behavior = behaviorDrawWay(context, wayID, mode, startGraph).on('rejectedSelfIntersection.modeDrawArea', function () { + context.ui().flash.iconName('#iD-icon-no').label(_t('self_intersection.error.areas'))(); + }); + mode.wayID = wayID; - var _dataShortcuts; + mode.enter = function () { + context.install(behavior); + }; - function shortcutsModal(_modalSelection) { - _modalSelection.select('.modal').classed('modal-shortcuts', true); + mode.exit = function () { + context.uninstall(behavior); + }; - var content = _modalSelection.select('.content'); + mode.selectedIDs = function () { + return [wayID]; + }; - content.append('div').attr('class', 'modal-section').append('h3').html(_t.html('shortcuts.title')); - _mainFileFetcher.get('shortcuts').then(function (data) { - _dataShortcuts = data; - content.call(render); - })["catch"](function () { - /* ignore */ - }); - } + mode.activeID = function () { + return behavior && behavior.activeID() || []; + }; - function render(selection) { - if (!_dataShortcuts) return; - var wrapper = selection.selectAll('.wrapper').data([0]); - var wrapperEnter = wrapper.enter().append('div').attr('class', 'wrapper modal-section'); - var tabsBar = wrapperEnter.append('div').attr('class', 'tabs-bar'); - var shortcutsList = wrapperEnter.append('div').attr('class', 'shortcuts-list'); - wrapper = wrapper.merge(wrapperEnter); - var tabs = tabsBar.selectAll('.tab').data(_dataShortcuts); - var tabsEnter = tabs.enter().append('a').attr('class', 'tab').attr('href', '#').on('click', function (d3_event, d) { - d3_event.preventDefault(); + return mode; + } - var i = _dataShortcuts.indexOf(d); + function modeAddArea(context, mode) { + mode.id = 'add-area'; + var behavior = behaviorAddWay(context).on('start', start).on('startFromWay', startFromWay).on('startFromNode', startFromNode); + var defaultTags = { + area: 'yes' + }; + if (mode.preset) defaultTags = mode.preset.setTags(defaultTags, 'area'); - _activeTab = i; - render(selection); - }); - tabsEnter.append('span').html(function (d) { - return _t.html(d.text); - }); // Update + function actionClose(wayId) { + return function (graph) { + return graph.replace(graph.entity(wayId).close()); + }; + } - wrapper.selectAll('.tab').classed('active', function (d, i) { - return i === _activeTab; - }); - var shortcuts = shortcutsList.selectAll('.shortcut-tab').data(_dataShortcuts); - var shortcutsEnter = shortcuts.enter().append('div').attr('class', function (d) { - return 'shortcut-tab shortcut-tab-' + d.tab; - }); - var columnsEnter = shortcutsEnter.selectAll('.shortcut-column').data(function (d) { - return d.columns; - }).enter().append('table').attr('class', 'shortcut-column'); - var rowsEnter = columnsEnter.selectAll('.shortcut-row').data(function (d) { - return d.rows; - }).enter().append('tr').attr('class', 'shortcut-row'); - var sectionRows = rowsEnter.filter(function (d) { - return !d.shortcuts; + function start(loc) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - sectionRows.append('td'); - sectionRows.append('td').attr('class', 'shortcut-section').append('h3').html(function (d) { - return _t.html(d.text); + var way = osmWay({ + tags: defaultTags }); - var shortcutRows = rowsEnter.filter(function (d) { - return d.shortcuts; + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id), actionClose(way.id)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); + } + + function startFromWay(loc, edge) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - var shortcutKeys = shortcutRows.append('td').attr('class', 'shortcut-keys'); - var modifierKeys = shortcutKeys.filter(function (d) { - return d.modifiers; + var way = osmWay({ + tags: defaultTags }); - modifierKeys.selectAll('kbd.modifier').data(function (d) { - if (detected.os === 'win' && d.text === 'shortcuts.editing.commands.redo') { - return ['â']; - } else if (detected.os !== 'mac' && d.text === 'shortcuts.browsing.display_options.fullscreen') { - return []; - } else { - return d.modifiers; - } - }).enter().each(function () { - var selection = select(this); - selection.append('kbd').attr('class', 'modifier').html(function (d) { - return uiCmd.display(d); - }); - selection.append('span').html('+'); + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id), actionClose(way.id), actionAddMidpoint({ + loc: loc, + edge: edge + }, node)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); + } + + function startFromNode(node) { + var startGraph = context.graph(); + var way = osmWay({ + tags: defaultTags }); - shortcutKeys.selectAll('kbd.shortcut').data(function (d) { - var arr = d.shortcuts; + context.perform(actionAddEntity(way), actionAddVertex(way.id, node.id), actionClose(way.id)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); + } - if (detected.os === 'win' && d.text === 'shortcuts.editing.commands.redo') { - arr = ['Y']; - } else if (detected.os !== 'mac' && d.text === 'shortcuts.browsing.display_options.fullscreen') { - arr = ['F11']; - } // replace translations + mode.enter = function () { + context.install(behavior); + }; + mode.exit = function () { + context.uninstall(behavior); + }; - arr = arr.map(function (s) { - return uiCmd.display(s.indexOf('.') !== -1 ? _t(s) : s); - }); - return utilArrayUniq(arr).map(function (s) { - return { - shortcut: s, - separator: d.separator, - suffix: d.suffix - }; - }); - }).enter().each(function (d, i, nodes) { - var selection = select(this); - var click = d.shortcut.toLowerCase().match(/(.*).click/); + return mode; + } - if (click && click[1]) { - // replace "left_click", "right_click" with mouse icon - selection.call(svgIcon('#iD-walkthrough-mouse-' + click[1], 'operation')); - } else if (d.shortcut.toLowerCase() === 'long-press') { - selection.call(svgIcon('#iD-walkthrough-longpress', 'longpress operation')); - } else if (d.shortcut.toLowerCase() === 'tap') { - selection.call(svgIcon('#iD-walkthrough-tap', 'tap operation')); - } else { - selection.append('kbd').attr('class', 'shortcut').html(function (d) { - return d.shortcut; - }); - } + function modeAddLine(context, mode) { + mode.id = 'add-line'; + var behavior = behaviorAddWay(context).on('start', start).on('startFromWay', startFromWay).on('startFromNode', startFromNode); + var defaultTags = {}; + if (mode.preset) defaultTags = mode.preset.setTags(defaultTags, 'line'); - if (i < nodes.length - 1) { - selection.append('span').html(d.separator || "\xA0" + _t.html('shortcuts.or') + "\xA0"); - } else if (i === nodes.length - 1 && d.suffix) { - selection.append('span').html(d.suffix); - } + function start(loc) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - shortcutKeys.filter(function (d) { - return d.gesture; - }).each(function () { - var selection = select(this); - selection.append('span').html('+'); - selection.append('span').attr('class', 'gesture').html(function (d) { - return _t.html(d.gesture); - }); + var way = osmWay({ + tags: defaultTags }); - shortcutRows.append('td').attr('class', 'shortcut-desc').html(function (d) { - return d.text ? _t.html(d.text) : "\xA0"; - }); // Update + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id)); + context.enter(modeDrawLine(context, way.id, startGraph, mode.button)); + } - wrapper.selectAll('.shortcut-tab').style('display', function (d, i) { - return i === _activeTab ? 'flex' : 'none'; + function startFromWay(loc, edge) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc + }); + var way = osmWay({ + tags: defaultTags }); + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id), actionAddMidpoint({ + loc: loc, + edge: edge + }, node)); + context.enter(modeDrawLine(context, way.id, startGraph, mode.button)); } - return function (selection, show) { - _selection = selection; - - if (show) { - _modalSelection = uiModal(selection); - - _modalSelection.call(shortcutsModal); - } else { - context.keybinding().on([_t('shortcuts.toggle.key'), '?'], function () { - if (context.container().selectAll('.modal-shortcuts').size()) { - // already showing - if (_modalSelection) { - _modalSelection.close(); - - _modalSelection = null; - } - } else { - _modalSelection = uiModal(_selection); + function startFromNode(node) { + var startGraph = context.graph(); + var way = osmWay({ + tags: defaultTags + }); + context.perform(actionAddEntity(way), actionAddVertex(way.id, node.id)); + context.enter(modeDrawLine(context, way.id, startGraph, mode.button)); + } - _modalSelection.call(shortcutsModal); - } - }); - } + mode.enter = function () { + context.install(behavior); }; - } - var pair_1 = pair; + mode.exit = function () { + context.uninstall(behavior); + }; - function search(input, dims) { - if (!dims) dims = 'NSEW'; - if (typeof input !== 'string') return null; - input = input.toUpperCase(); - var regex = /^[\s\,]*([NSEW])?\s*([\-|\â|\â]?[0-9.]+)[°ºË]?\s*(?:([0-9.]+)['ââ²â]\s*)?(?:([0-9.]+)(?:''|"|â|â³)\s*)?([NSEW])?/; - var m = input.match(regex); - if (!m) return null; // no match + return mode; + } - var matched = m[0]; // extract dimension.. m[1] = leading, m[5] = trailing + function modeAddPoint(context, mode) { + mode.id = 'add-point'; + var behavior = behaviorDraw(context).on('click', add).on('clickWay', addWay).on('clickNode', addNode).on('cancel', cancel).on('finish', cancel); + var defaultTags = {}; + if (mode.preset) defaultTags = mode.preset.setTags(defaultTags, 'point'); - var dim; + function add(loc) { + var node = osmNode({ + loc: loc, + tags: defaultTags + }); + context.perform(actionAddEntity(node), _t('operations.add.annotation.point')); + enterSelectMode(node); + } - if (m[1] && m[5]) { - // if matched both.. - dim = m[1]; // keep leading + function addWay(loc, edge) { + var node = osmNode({ + tags: defaultTags + }); + context.perform(actionAddMidpoint({ + loc: loc, + edge: edge + }, node), _t('operations.add.annotation.vertex')); + enterSelectMode(node); + } - matched = matched.slice(0, -1); // remove trailing dimension from match - } else { - dim = m[1] || m[5]; - } // if unrecognized dimension + function enterSelectMode(node) { + context.enter(modeSelect(context, [node.id]).newFeature(true)); + } + function addNode(node) { + if (Object.keys(defaultTags).length === 0) { + enterSelectMode(node); + return; + } - if (dim && dims.indexOf(dim) === -1) return null; // extract DMS + var tags = Object.assign({}, node.tags); // shallow copy - var deg = m[2] ? parseFloat(m[2]) : 0; - var min = m[3] ? parseFloat(m[3]) / 60 : 0; - var sec = m[4] ? parseFloat(m[4]) / 3600 : 0; - var sign = deg < 0 ? -1 : 1; - if (dim === 'S' || dim === 'W') sign *= -1; - return { - val: (Math.abs(deg) + min + sec) * sign, - dim: dim, - matched: matched, - remain: input.slice(matched.length) - }; - } + for (var key in defaultTags) { + tags[key] = defaultTags[key]; + } - function pair(input, dims) { - input = input.trim(); - var one = search(input, dims); - if (!one) return null; - input = one.remain.trim(); - var two = search(input, dims); - if (!two || two.remain) return null; + context.perform(actionChangeTags(node.id, tags), _t('operations.add.annotation.point')); + enterSelectMode(node); + } - if (one.dim) { - return swapdim(one.val, two.val, one.dim); - } else { - return [one.val, two.val]; + function cancel() { + context.enter(modeBrowse(context)); } - } - function swapdim(a, b, dim) { - if (dim === 'N' || dim === 'S') return [a, b]; - if (dim === 'W' || dim === 'E') return [b, a]; - } + mode.enter = function () { + context.install(behavior); + }; - function uiFeatureList(context) { - var _geocodeResults; + mode.exit = function () { + context.uninstall(behavior); + }; - function featureList(selection) { - var header = selection.append('div').attr('class', 'header fillL'); - header.append('h3').html(_t.html('inspector.feature_list')); - var searchWrap = selection.append('div').attr('class', 'search-header'); - searchWrap.call(svgIcon('#iD-icon-search', 'pre-text')); - var search = searchWrap.append('input').attr('placeholder', _t('inspector.search')).attr('type', 'search').call(utilNoAuto).on('keypress', keypress).on('keydown', keydown).on('input', inputevent); - var listWrap = selection.append('div').attr('class', 'inspector-body'); - var list = listWrap.append('div').attr('class', 'feature-list'); - context.on('exit.feature-list', clearSearch); - context.map().on('drawn.feature-list', mapDrawn); - context.keybinding().on(uiCmd('âF'), focusSearch); + return mode; + } - function focusSearch(d3_event) { - var mode = context.mode() && context.mode().id; - if (mode !== 'browse') return; - d3_event.preventDefault(); - search.node().focus(); - } + function modeSelectNote(context, selectedNoteID) { + var mode = { + id: 'select-note', + button: 'browse' + }; - function keydown(d3_event) { - if (d3_event.keyCode === 27) { - // escape - search.node().blur(); - } - } + var _keybinding = utilKeybinding('select-note'); - function keypress(d3_event) { - var q = search.property('value'), - items = list.selectAll('.feature-list-item'); + var _noteEditor = uiNoteEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - if (d3_event.keyCode === 13 && // â© Return - q.length && items.size()) { - click(items.datum()); - } - } + var note = checkSelectedID(); + if (!note) return; + context.ui().sidebar.show(_noteEditor.note(note)); + }); - function inputevent() { - _geocodeResults = undefined; - drawList(); - } + var _behaviors = [behaviorBreathe(), behaviorHover(context), behaviorSelect(context), behaviorLasso(context), modeDragNode(context).behavior, modeDragNote(context).behavior]; + var _newFeature = false; - function clearSearch() { - search.property('value', ''); - drawList(); - } + function checkSelectedID() { + if (!services.osm) return; + var note = services.osm.getNote(selectedNoteID); - function mapDrawn(e) { - if (e.full) { - drawList(); - } + if (!note) { + context.enter(modeBrowse(context)); } - function features() { - var result = []; - var graph = context.graph(); - var visibleCenter = context.map().extent().center(); - var q = search.property('value').toLowerCase(); - if (!q) return result; - var locationMatch = pair_1(q.toUpperCase()) || q.match(/^(-?\d+\.?\d*)\s+(-?\d+\.?\d*)$/); + return note; + } // class the note as selected, or return to browse mode if the note is gone - if (locationMatch) { - var loc = [parseFloat(locationMatch[0]), parseFloat(locationMatch[1])]; - result.push({ - id: -1, - geometry: 'point', - type: _t('inspector.location'), - name: dmsCoordinatePair([loc[1], loc[0]]), - location: loc - }); - } // A location search takes priority over an ID search + function selectNote(d3_event, drawn) { + if (!checkSelectedID()) return; + var selection = context.surface().selectAll('.layer-notes .note-' + selectedNoteID); - var idMatch = !locationMatch && q.match(/(?:^|\W)(node|way|relation|[nwr])\W?0*([1-9]\d*)(?:\W|$)/i); + if (selection.empty()) { + // Return to browse mode if selected DOM elements have + // disappeared because the user moved them out of view.. + var source = d3_event && d3_event.type === 'zoom' && d3_event.sourceEvent; - if (idMatch) { - var elemType = idMatch[1].charAt(0); - var elemId = idMatch[2]; - result.push({ - id: elemType + elemId, - geometry: elemType === 'n' ? 'point' : elemType === 'w' ? 'line' : 'relation', - type: elemType === 'n' ? _t('inspector.node') : elemType === 'w' ? _t('inspector.way') : _t('inspector.relation'), - name: elemId - }); + if (drawn && source && (source.type === 'pointermove' || source.type === 'mousemove' || source.type === 'touchmove')) { + context.enter(modeBrowse(context)); } + } else { + selection.classed('selected', true); + context.selectedNoteID(selectedNoteID); + } + } - var allEntities = graph.entities; - var localResults = []; + function esc() { + if (context.container().select('.combobox').size()) return; + context.enter(modeBrowse(context)); + } - for (var id in allEntities) { - var entity = allEntities[id]; - if (!entity) continue; - var name = utilDisplayName(entity) || ''; - if (name.toLowerCase().indexOf(q) < 0) continue; - var matched = _mainPresetIndex.match(entity, graph); - var type = matched && matched.name() || utilDisplayType(entity.id); - var extent = entity.extent(graph); - var distance = extent ? geoSphericalDistance(visibleCenter, extent.center()) : 0; - localResults.push({ - id: entity.id, - entity: entity, - geometry: entity.geometry(graph), - type: type, - name: name, - distance: distance - }); - if (localResults.length > 100) break; - } + mode.zoomToSelected = function () { + if (!services.osm) return; + var note = services.osm.getNote(selectedNoteID); - localResults = localResults.sort(function byDistance(a, b) { - return a.distance - b.distance; - }); - result = result.concat(localResults); + if (note) { + context.map().centerZoomEase(note.loc, 20); + } + }; - (_geocodeResults || []).forEach(function (d) { - if (d.osm_type && d.osm_id) { - // some results may be missing these - #1890 - // Make a temporary osmEntity so we can preset match - // and better localize the search result - #4725 - var id = osmEntity.id.fromOSM(d.osm_type, d.osm_id); - var tags = {}; - tags[d["class"]] = d.type; - var attrs = { - id: id, - type: d.osm_type, - tags: tags - }; + mode.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return mode; + }; - if (d.osm_type === 'way') { - // for ways, add some fake closed nodes - attrs.nodes = ['a', 'a']; // so that geometry area is possible - } + mode.enter = function () { + var note = checkSelectedID(); + if (!note) return; - var tempEntity = osmEntity(attrs); - var tempGraph = coreGraph([tempEntity]); - var matched = _mainPresetIndex.match(tempEntity, tempGraph); - var type = matched && matched.name() || utilDisplayType(id); - result.push({ - id: tempEntity.id, - geometry: tempEntity.geometry(tempGraph), - type: type, - name: d.display_name, - extent: new geoExtent([parseFloat(d.boundingbox[3]), parseFloat(d.boundingbox[0])], [parseFloat(d.boundingbox[2]), parseFloat(d.boundingbox[1])]) - }); - } - }); + _behaviors.forEach(context.install); - if (q.match(/^[0-9]+$/)) { - // if query is just a number, possibly an OSM ID without a prefix - result.push({ - id: 'n' + q, - geometry: 'point', - type: _t('inspector.node'), - name: q - }); - result.push({ - id: 'w' + q, - geometry: 'line', - type: _t('inspector.way'), - name: q - }); - result.push({ - id: 'r' + q, - geometry: 'relation', - type: _t('inspector.relation'), - name: q - }); - } + _keybinding.on(_t('inspector.zoom_to.key'), mode.zoomToSelected).on('â', esc, true); - return result; - } + select(document).call(_keybinding); + selectNote(); + var sidebar = context.ui().sidebar; + sidebar.show(_noteEditor.note(note).newNote(_newFeature)); // expand the sidebar, avoid obscuring the note if needed - function drawList() { - var value = search.property('value'); - var results = features(); - list.classed('filtered', value.length); - var resultsIndicator = list.selectAll('.no-results-item').data([0]).enter().append('button').property('disabled', true).attr('class', 'no-results-item').call(svgIcon('#iD-icon-alert', 'pre-text')); - resultsIndicator.append('span').attr('class', 'entity-name'); - list.selectAll('.no-results-item .entity-name').html(_t.html('geocoder.no_results_worldwide')); + sidebar.expand(sidebar.intersects(note.extent())); + context.map().on('drawn.select', selectNote); + }; - if (services.geocoder) { - list.selectAll('.geocode-item').data([0]).enter().append('button').attr('class', 'geocode-item secondary-action').on('click', geocoderSearch).append('div').attr('class', 'label').append('span').attr('class', 'entity-name').html(_t.html('geocoder.search')); - } + mode.exit = function () { + _behaviors.forEach(context.uninstall); - list.selectAll('.no-results-item').style('display', value.length && !results.length ? 'block' : 'none'); - list.selectAll('.geocode-item').style('display', value && _geocodeResults === undefined ? 'block' : 'none'); - list.selectAll('.feature-list-item').data([-1]).remove(); - var items = list.selectAll('.feature-list-item').data(results, function (d) { - return d.id; - }); - var enter = items.enter().insert('button', '.geocode-item').attr('class', 'feature-list-item').on('mouseover', mouseover).on('mouseout', mouseout).on('click', click); - var label = enter.append('div').attr('class', 'label'); - label.each(function (d) { - select(this).call(svgIcon('#iD-icon-' + d.geometry, 'pre-text')); - }); - label.append('span').attr('class', 'entity-type').html(function (d) { - return d.type; - }); - label.append('span').attr('class', 'entity-name').html(function (d) { - return d.name; - }); - enter.style('opacity', 0).transition().style('opacity', 1); - items.order(); - items.exit().remove(); - } + select(document).call(_keybinding.unbind); + context.surface().selectAll('.layer-notes .selected').classed('selected hover', false); + context.map().on('drawn.select', null); + context.ui().sidebar.hide(); + context.selectedNoteID(null); + }; - function mouseover(d3_event, d) { - if (d.id === -1) return; - utilHighlightEntities([d.id], true, context); - } + return mode; + } - function mouseout(d3_event, d) { - if (d.id === -1) return; - utilHighlightEntities([d.id], false, context); - } + function modeAddNote(context) { + var mode = { + id: 'add-note', + button: 'note', + description: _t.html('modes.add_note.description'), + key: _t('modes.add_note.key') + }; + var behavior = behaviorDraw(context).on('click', add).on('cancel', cancel).on('finish', cancel); - function click(d3_event, d) { - d3_event.preventDefault(); + function add(loc) { + var osm = services.osm; + if (!osm) return; + var note = osmNote({ + loc: loc, + status: 'open', + comments: [] + }); + osm.replaceNote(note); // force a reraw (there is no history change that would otherwise do this) - if (d.location) { - context.map().centerZoomEase([d.location[1], d.location[0]], 19); - } else if (d.entity) { - utilHighlightEntities([d.id], false, context); - context.enter(modeSelect(context, [d.entity.id])); - context.map().zoomToEase(d.entity); - } else { - // download, zoom to, and select the entity with the given ID - context.zoomToEntity(d.id); - } - } + context.map().pan([0, 0]); + context.selectedNoteID(note.id).enter(modeSelectNote(context, note.id).newFeature(true)); + } - function geocoderSearch() { - services.geocoder.search(search.property('value'), function (err, resp) { - _geocodeResults = resp || []; - drawList(); - }); - } + function cancel() { + context.enter(modeBrowse(context)); } - return featureList; - } + mode.enter = function () { + context.install(behavior); + }; - var getOwnPropertyDescriptor$4 = objectGetOwnPropertyDescriptor.f; + mode.exit = function () { + context.uninstall(behavior); + }; + return mode; + } + var JXON = new function () { + var sValueProp = 'keyValue', + sAttributesProp = 'keyAttributes', + sAttrPref = '@', + /* you can customize these values */ + aCache = [], + rIsNull = /^\s*$/, + rIsBool = /^(?:true|false)$/i; + function parseText(sValue) { + if (rIsNull.test(sValue)) { + return null; + } + if (rIsBool.test(sValue)) { + return sValue.toLowerCase() === 'true'; + } - var nativeStartsWith = ''.startsWith; - var min$9 = Math.min; + if (isFinite(sValue)) { + return parseFloat(sValue); + } - var CORRECT_IS_REGEXP_LOGIC = correctIsRegexpLogic('startsWith'); - // https://github.com/zloirock/core-js/pull/702 - var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () { - var descriptor = getOwnPropertyDescriptor$4(String.prototype, 'startsWith'); - return descriptor && !descriptor.writable; - }(); + if (isFinite(Date.parse(sValue))) { + return new Date(sValue); + } - // `String.prototype.startsWith` method - // https://tc39.es/ecma262/#sec-string.prototype.startswith - _export({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, { - startsWith: function startsWith(searchString /* , position = 0 */) { - var that = String(requireObjectCoercible(this)); - notARegexp(searchString); - var index = toLength(min$9(arguments.length > 1 ? arguments[1] : undefined, that.length)); - var search = String(searchString); - return nativeStartsWith - ? nativeStartsWith.call(that, search, index) - : that.slice(index, index + search.length) === search; + return sValue; } - }); - function uiSectionEntityIssues(context) { - var _entityIDs = []; - var _issues = []; + function EmptyTree() {} - var _activeIssueID; + EmptyTree.prototype.toString = function () { + return 'null'; + }; - var section = uiSection('entity-issues', context).shouldDisplay(function () { - return _issues.length > 0; - }).label(function () { - return _t('inspector.title_count', { - title: _t.html('issues.list_title'), - count: _issues.length - }); - }).disclosureContent(renderDisclosureContent); - context.validator().on('validated.entity_issues', function () { - // Refresh on validated events - reloadIssues(); - section.reRender(); - }).on('focusedIssue.entity_issues', function (issue) { - makeActiveIssue(issue.id); - }); + EmptyTree.prototype.valueOf = function () { + return null; + }; - function reloadIssues() { - _issues = context.validator().getSharedEntityIssues(_entityIDs, { - includeDisabledRules: true - }); + function objectify(vValue) { + return vValue === null ? new EmptyTree() : vValue instanceof Object ? vValue : new vValue.constructor(vValue); } - function makeActiveIssue(issueID) { - _activeIssueID = issueID; - section.selection().selectAll('.issue-container').classed('active', function (d) { - return d.id === _activeIssueID; - }); - } + function createObjTree(oParentNode, nVerb, bFreeze, bNesteAttr) { + var nLevelStart = aCache.length, + bChildren = oParentNode.hasChildNodes(), + bAttributes = oParentNode.hasAttributes(), + bHighVerb = Boolean(nVerb & 2); + var sProp, + vContent, + nLength = 0, + sCollectedTxt = '', + vResult = bHighVerb ? {} : + /* put here the default value for empty nodes: */ + true; - function renderDisclosureContent(selection) { - selection.classed('grouped-items-area', true); - _activeIssueID = _issues.length > 0 ? _issues[0].id : null; - var containers = selection.selectAll('.issue-container').data(_issues, function (d) { - return d.id; - }); // Exit + if (bChildren) { + for (var oNode, nItem = 0; nItem < oParentNode.childNodes.length; nItem++) { + oNode = oParentNode.childNodes.item(nItem); - containers.exit().remove(); // Enter + if (oNode.nodeType === 4) { + /* nodeType is 'CDATASection' (4) */ + sCollectedTxt += oNode.nodeValue; + } else if (oNode.nodeType === 3) { + /* nodeType is 'Text' (3) */ + sCollectedTxt += oNode.nodeValue.trim(); + } else if (oNode.nodeType === 1 && !oNode.prefix) { + /* nodeType is 'Element' (1) */ + aCache.push(oNode); + } + } + } - var containersEnter = containers.enter().append('div').attr('class', 'issue-container'); - var itemsEnter = containersEnter.append('div').attr('class', function (d) { - return 'issue severity-' + d.severity; - }).on('mouseover.highlight', function (d3_event, d) { - // don't hover-highlight the selected entity - var ids = d.entityIds.filter(function (e) { - return _entityIDs.indexOf(e) === -1; - }); - utilHighlightEntities(ids, true, context); - }).on('mouseout.highlight', function (d3_event, d) { - var ids = d.entityIds.filter(function (e) { - return _entityIDs.indexOf(e) === -1; - }); - utilHighlightEntities(ids, false, context); - }); - var labelsEnter = itemsEnter.append('div').attr('class', 'issue-label'); - var textEnter = labelsEnter.append('button').attr('class', 'issue-text').on('click', function (d3_event, d) { - makeActiveIssue(d.id); // expand only the clicked item + var nLevelEnd = aCache.length, + vBuiltVal = parseText(sCollectedTxt); - var extent = d.extent(context.graph()); + if (!bHighVerb && (bChildren || bAttributes)) { + vResult = nVerb === 0 ? objectify(vBuiltVal) : {}; + } - if (extent) { - var setZoom = Math.max(context.map().zoom(), 19); - context.map().unobscuredCenterZoomEase(extent.center(), setZoom); - } - }); - textEnter.each(function (d) { - var iconName = '#iD-icon-' + (d.severity === 'warning' ? 'alert' : 'error'); - select(this).call(svgIcon(iconName, 'issue-icon')); - }); - textEnter.append('span').attr('class', 'issue-message'); - var infoButton = labelsEnter.append('button').attr('class', 'issue-info-button').attr('title', _t('icons.information')).call(svgIcon('#iD-icon-inspect')); - infoButton.on('click', function (d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - this.blur(); // avoid keeping focus on the button - #4641 + for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) { + sProp = aCache[nElId].nodeName.toLowerCase(); + vContent = createObjTree(aCache[nElId], nVerb, bFreeze, bNesteAttr); - var container = select(this.parentNode.parentNode.parentNode); - var info = container.selectAll('.issue-info'); - var isExpanded = info.classed('expanded'); + if (vResult.hasOwnProperty(sProp)) { + if (vResult[sProp].constructor !== Array) { + vResult[sProp] = [vResult[sProp]]; + } - if (isExpanded) { - info.transition().duration(200).style('max-height', '0px').style('opacity', '0').on('end', function () { - info.classed('expanded', false); - }); + vResult[sProp].push(vContent); } else { - info.classed('expanded', true).transition().duration(200).style('max-height', '200px').style('opacity', '1').on('end', function () { - info.style('max-height', null); - }); + vResult[sProp] = vContent; + nLength++; } - }); - itemsEnter.append('ul').attr('class', 'issue-fix-list'); - containersEnter.append('div').attr('class', 'issue-info').style('max-height', '0').style('opacity', '0').each(function (d) { - if (typeof d.reference === 'function') { - select(this).call(d.reference); - } else { - select(this).html(_t.html('inspector.no_documentation_key')); + } + + if (bAttributes) { + var nAttrLen = oParentNode.attributes.length, + sAPrefix = bNesteAttr ? '' : sAttrPref, + oAttrParent = bNesteAttr ? {} : vResult; + + for (var oAttrib, nAttrib = 0; nAttrib < nAttrLen; nLength++, nAttrib++) { + oAttrib = oParentNode.attributes.item(nAttrib); + oAttrParent[sAPrefix + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim()); } - }); // Update - containers = containers.merge(containersEnter).classed('active', function (d) { - return d.id === _activeIssueID; - }); - containers.selectAll('.issue-message').html(function (d) { - return d.message(context); - }); // fixes + if (bNesteAttr) { + if (bFreeze) { + Object.freeze(oAttrParent); + } - var fixLists = containers.selectAll('.issue-fix-list'); - var fixes = fixLists.selectAll('.issue-fix-item').data(function (d) { - return d.fixes ? d.fixes(context) : []; - }, function (fix) { - return fix.id; - }); - fixes.exit().remove(); - var fixesEnter = fixes.enter().append('li').attr('class', 'issue-fix-item'); - var buttons = fixesEnter.append('button').on('click', function (d3_event, d) { - // not all fixes are actionable - if (select(this).attr('disabled') || !d.onClick) return; // Don't run another fix for this issue within a second of running one - // (Necessary for "Select a feature type" fix. Most fixes should only ever run once) + vResult[sAttributesProp] = oAttrParent; + nLength -= nAttrLen - 1; + } + } - if (d.issue.dateLastRanFix && new Date() - d.issue.dateLastRanFix < 1000) return; - d.issue.dateLastRanFix = new Date(); // remove hover-highlighting + if (nVerb === 3 || (nVerb === 2 || nVerb === 1 && nLength > 0) && sCollectedTxt) { + vResult[sValueProp] = vBuiltVal; + } else if (!bHighVerb && nLength === 0 && sCollectedTxt) { + vResult = vBuiltVal; + } - utilHighlightEntities(d.issue.entityIds.concat(d.entityIds), false, context); - new Promise(function (resolve, reject) { - d.onClick(context, resolve, reject); + if (bFreeze && (bHighVerb || nLength > 0)) { + Object.freeze(vResult); + } - if (d.onClick.length <= 1) { - // if the fix doesn't take any completion parameters then consider it resolved - resolve(); - } - }).then(function () { - // revalidate whenever the fix has finished running successfully - context.validator().validate(); - }); - }).on('mouseover.highlight', function (d3_event, d) { - utilHighlightEntities(d.entityIds, true, context); - }).on('mouseout.highlight', function (d3_event, d) { - utilHighlightEntities(d.entityIds, false, context); - }); - buttons.each(function (d) { - var iconName = d.icon || 'iD-icon-wrench'; + aCache.length = nLevelStart; + return vResult; + } - if (iconName.startsWith('maki')) { - iconName += '-15'; - } + function loadObjTree(oXMLDoc, oParentEl, oParentObj) { + var vValue, oChild; - select(this).call(svgIcon('#' + iconName, 'fix-icon')); - }); - buttons.append('span').attr('class', 'fix-message').html(function (d) { - return d.title; - }); - fixesEnter.merge(fixes).selectAll('button').classed('actionable', function (d) { - return d.onClick; - }).attr('disabled', function (d) { - return d.onClick ? null : 'true'; - }).attr('title', function (d) { - if (d.disabledReason) { - return d.disabledReason; + if (oParentObj instanceof String || oParentObj instanceof Number || oParentObj instanceof Boolean) { + oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toString())); + /* verbosity level is 0 */ + } else if (oParentObj.constructor === Date) { + oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toGMTString())); + } + + for (var sName in oParentObj) { + vValue = oParentObj[sName]; + + if (isFinite(sName) || vValue instanceof Function) { + continue; } + /* verbosity level is 0 */ + + + if (sName === sValueProp) { + if (vValue !== null && vValue !== true) { + oParentEl.appendChild(oXMLDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); + } + } else if (sName === sAttributesProp) { + /* verbosity level is 3 */ + for (var sAttrib in vValue) { + oParentEl.setAttribute(sAttrib, vValue[sAttrib]); + } + } else if (sName.charAt(0) === sAttrPref) { + oParentEl.setAttribute(sName.slice(1), vValue); + } else if (vValue.constructor === Array) { + for (var nItem = 0; nItem < vValue.length; nItem++) { + oChild = oXMLDoc.createElement(sName); + loadObjTree(oXMLDoc, oChild, vValue[nItem]); + oParentEl.appendChild(oChild); + } + } else { + oChild = oXMLDoc.createElement(sName); + + if (vValue instanceof Object) { + loadObjTree(oXMLDoc, oChild, vValue); + } else if (vValue !== null && vValue !== true) { + oChild.appendChild(oXMLDoc.createTextNode(vValue.toString())); + } - return null; - }); + oParentEl.appendChild(oChild); + } + } } - section.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; + this.build = function (oXMLParent, nVerbosity + /* optional */ + , bFreeze + /* optional */ + , bNesteAttributes + /* optional */ + ) { + var _nVerb = arguments.length > 1 && typeof nVerbosity === 'number' ? nVerbosity & 3 : + /* put here the default verbosity level: */ + 1; - if (!_entityIDs || !val || !utilArrayIdentical(_entityIDs, val)) { - _entityIDs = val; - _activeIssueID = null; - reloadIssues(); - } + return createObjTree(oXMLParent, _nVerb, bFreeze || false, arguments.length > 3 ? bNesteAttributes : _nVerb === 3); + }; - return section; + this.unbuild = function (oObjTree) { + var oNewDoc = document.implementation.createDocument('', '', null); + loadObjTree(oNewDoc, oNewDoc, oObjTree); + return oNewDoc; }; - return section; - } + this.stringify = function (oObjTree) { + return new XMLSerializer().serializeToString(JXON.unbuild(oObjTree)); + }; + }(); // var myObject = JXON.build(doc); + // we got our javascript object! try: alert(JSON.stringify(myObject)); + // var newDoc = JXON.unbuild(myObject); + // we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc)); - function uiPresetIcon() { - var _preset; + function uiConflicts(context) { + var dispatch = dispatch$8('cancel', 'save'); + var keybinding = utilKeybinding('conflicts'); - var _geometry; + var _origChanges; - var _sizeClass = 'medium'; + var _conflictList; - function isSmall() { - return _sizeClass === 'small'; - } + var _shownConflictIndex; - function presetIcon(selection) { - selection.each(render); + function keybindingOn() { + select(document).call(keybinding.on('â', cancel, true)); } - function getIcon(p, geom) { - if (isSmall() && p.isFallback && p.isFallback()) return 'iD-icon-' + p.id;else if (p.icon) return p.icon;else if (geom === 'line') return 'iD-other-line';else if (geom === 'vertex') return p.isFallback() ? '' : 'temaki-vertex';else if (isSmall() && geom === 'point') return '';else return 'maki-marker-stroked'; + function keybindingOff() { + select(document).call(keybinding.unbind); } - function renderPointBorder(container, drawPoint) { - var pointBorder = container.selectAll('.preset-icon-point-border').data(drawPoint ? [0] : []); - pointBorder.exit().remove(); - var pointBorderEnter = pointBorder.enter(); - var w = 40; - var h = 40; - pointBorderEnter.append('svg').attr('class', 'preset-icon-fill preset-icon-point-border').attr('width', w).attr('height', h).attr('viewBox', "0 0 ".concat(w, " ").concat(h)).append('path').attr('transform', 'translate(11.5, 8)').attr('d', 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z'); - pointBorder = pointBorderEnter.merge(pointBorder); + function tryAgain() { + keybindingOff(); + dispatch.call('save'); } - function renderCircleFill(container, drawVertex) { - var vertexFill = container.selectAll('.preset-icon-fill-vertex').data(drawVertex ? [0] : []); - vertexFill.exit().remove(); - var vertexFillEnter = vertexFill.enter(); - var w = 60; - var h = 60; - var d = 40; - vertexFillEnter.append('svg').attr('class', 'preset-icon-fill preset-icon-fill-vertex').attr('width', w).attr('height', h).attr('viewBox', "0 0 ".concat(w, " ").concat(h)).append('circle').attr('cx', w / 2).attr('cy', h / 2).attr('r', d / 2); - vertexFill = vertexFillEnter.merge(vertexFill); + function cancel() { + keybindingOff(); + dispatch.call('cancel'); } - function renderSquareFill(container, drawArea, tagClasses) { - var fill = container.selectAll('.preset-icon-fill-area').data(drawArea ? [0] : []); - fill.exit().remove(); - var fillEnter = fill.enter(); - var d = isSmall() ? 40 : 60; - var w = d; - var h = d; - var l = d * 2 / 3; - var c1 = (w - l) / 2; - var c2 = c1 + l; - fillEnter = fillEnter.append('svg').attr('class', 'preset-icon-fill preset-icon-fill-area').attr('width', w).attr('height', h).attr('viewBox', "0 0 ".concat(w, " ").concat(h)); - ['fill', 'stroke'].forEach(function (klass) { - fillEnter.append('path').attr('d', "M".concat(c1, " ").concat(c1, " L").concat(c1, " ").concat(c2, " L").concat(c2, " ").concat(c2, " L").concat(c2, " ").concat(c1, " Z")).attr('class', "line area ".concat(klass)); - }); - var rVertex = 2.5; - [[c1, c1], [c1, c2], [c2, c2], [c2, c1]].forEach(function (point) { - fillEnter.append('circle').attr('class', 'vertex').attr('cx', point[0]).attr('cy', point[1]).attr('r', rVertex); + function conflicts(selection) { + keybindingOn(); + var headerEnter = selection.selectAll('.header').data([0]).enter().append('div').attr('class', 'header fillL'); + headerEnter.append('button').attr('class', 'fr').on('click', cancel).call(svgIcon('#iD-icon-close')); + headerEnter.append('h3').html(_t.html('save.conflict.header')); + var bodyEnter = selection.selectAll('.body').data([0]).enter().append('div').attr('class', 'body fillL'); + var conflictsHelpEnter = bodyEnter.append('div').attr('class', 'conflicts-help').html(_t.html('save.conflict.help')); // Download changes link + + var detected = utilDetect(); + var changeset = new osmChangeset(); + delete changeset.id; // Export without changeset_id + + var data = JXON.stringify(changeset.osmChangeJXON(_origChanges)); + var blob = new Blob([data], { + type: 'text/xml;charset=utf-8;' }); + var fileName = 'changes.osc'; + var linkEnter = conflictsHelpEnter.selectAll('.download-changes').append('a').attr('class', 'download-changes'); - if (!isSmall()) { - var rMidpoint = 1.25; - [[c1, w / 2], [c2, w / 2], [h / 2, c1], [h / 2, c2]].forEach(function (point) { - fillEnter.append('circle').attr('class', 'midpoint').attr('cx', point[0]).attr('cy', point[1]).attr('r', rMidpoint); + if (detected.download) { + // All except IE11 and Edge + linkEnter // download the data as a file + .attr('href', window.URL.createObjectURL(blob)).attr('download', fileName); + } else { + // IE11 and Edge + linkEnter // open data uri in a new tab + .attr('target', '_blank').on('click.download', function () { + navigator.msSaveBlob(blob, fileName); }); } - fill = fillEnter.merge(fill); - fill.selectAll('path.stroke').attr('class', "area stroke ".concat(tagClasses)); - fill.selectAll('path.fill').attr('class', "area fill ".concat(tagClasses)); + linkEnter.call(svgIcon('#iD-icon-load', 'inline')).append('span').html(_t.html('save.conflict.download_changes')); + bodyEnter.append('div').attr('class', 'conflict-container fillL3').call(showConflict, 0); + bodyEnter.append('div').attr('class', 'conflicts-done').attr('opacity', 0).style('display', 'none').html(_t.html('save.conflict.done')); + var buttonsEnter = bodyEnter.append('div').attr('class', 'buttons col12 joined conflicts-buttons'); + buttonsEnter.append('button').attr('disabled', _conflictList.length > 1).attr('class', 'action conflicts-button col6').html(_t.html('save.title')).on('click.try_again', tryAgain); + buttonsEnter.append('button').attr('class', 'secondary-action conflicts-button col6').html(_t.html('confirm.cancel')).on('click.cancel', cancel); } - function renderLine(container, drawLine, tagClasses) { - var line = container.selectAll('.preset-icon-line').data(drawLine ? [0] : []); - line.exit().remove(); - var lineEnter = line.enter(); - var d = isSmall() ? 40 : 60; // draw the line parametrically + function showConflict(selection, index) { + index = utilWrap(index, _conflictList.length); + _shownConflictIndex = index; + var parent = select(selection.node().parentNode); // enable save button if this is the last conflict being reviewed.. - var w = d; - var h = d; - var y = Math.round(d * 0.72); - var l = Math.round(d * 0.6); - var r = 2.5; - var x1 = (w - l) / 2; - var x2 = x1 + l; - lineEnter = lineEnter.append('svg').attr('class', 'preset-icon-line').attr('width', w).attr('height', h).attr('viewBox', "0 0 ".concat(w, " ").concat(h)); - ['casing', 'stroke'].forEach(function (klass) { - lineEnter.append('path').attr('d', "M".concat(x1, " ").concat(y, " L").concat(x2, " ").concat(y)).attr('class', "line ".concat(klass)); + if (index === _conflictList.length - 1) { + window.setTimeout(function () { + parent.select('.conflicts-button').attr('disabled', null); + parent.select('.conflicts-done').transition().attr('opacity', 1).style('display', 'block'); + }, 250); + } + + var conflict = selection.selectAll('.conflict').data([_conflictList[index]]); + conflict.exit().remove(); + var conflictEnter = conflict.enter().append('div').attr('class', 'conflict'); + conflictEnter.append('h4').attr('class', 'conflict-count').html(_t.html('save.conflict.count', { + num: index + 1, + total: _conflictList.length + })); + conflictEnter.append('a').attr('class', 'conflict-description').attr('href', '#').html(function (d) { + return d.name; + }).on('click', function (d3_event, d) { + d3_event.preventDefault(); + zoomToEntity(d.id); }); - [[x1 - 1, y], [x2 + 1, y]].forEach(function (point) { - lineEnter.append('circle').attr('class', 'vertex').attr('cx', point[0]).attr('cy', point[1]).attr('r', r); + var details = conflictEnter.append('div').attr('class', 'conflict-detail-container'); + details.append('ul').attr('class', 'conflict-detail-list').selectAll('li').data(function (d) { + return d.details || []; + }).enter().append('li').attr('class', 'conflict-detail-item').html(function (d) { + return d; + }); + details.append('div').attr('class', 'conflict-choices').call(addChoices); + details.append('div').attr('class', 'conflict-nav-buttons joined cf').selectAll('button').data(['previous', 'next']).enter().append('button').html(function (d) { + return _t.html('save.conflict.' + d); + }).attr('class', 'conflict-nav-button action col6').attr('disabled', function (d, i) { + return i === 0 && index === 0 || i === 1 && index === _conflictList.length - 1 || null; + }).on('click', function (d3_event, d) { + d3_event.preventDefault(); + var container = parent.selectAll('.conflict-container'); + var sign = d === 'previous' ? -1 : 1; + container.selectAll('.conflict').remove(); + container.call(showConflict, index + sign); }); - line = lineEnter.merge(line); - line.selectAll('path.stroke').attr('class', "line stroke ".concat(tagClasses)); - line.selectAll('path.casing').attr('class', "line casing ".concat(tagClasses)); } - function renderRoute(container, drawRoute, p) { - var route = container.selectAll('.preset-icon-route').data(drawRoute ? [0] : []); - route.exit().remove(); - var routeEnter = route.enter(); - var d = isSmall() ? 40 : 60; // draw the route parametrically + function addChoices(selection) { + var choices = selection.append('ul').attr('class', 'layer-list').selectAll('li').data(function (d) { + return d.choices || []; + }); // enter - var w = d; - var h = d; - var y1 = Math.round(d * 0.80); - var y2 = Math.round(d * 0.68); - var l = Math.round(d * 0.6); - var r = 2; - var x1 = (w - l) / 2; - var x2 = x1 + l / 3; - var x3 = x2 + l / 3; - var x4 = x3 + l / 3; - routeEnter = routeEnter.append('svg').attr('class', 'preset-icon-route').attr('width', w).attr('height', h).attr('viewBox', "0 0 ".concat(w, " ").concat(h)); - ['casing', 'stroke'].forEach(function (klass) { - routeEnter.append('path').attr('d', "M".concat(x1, " ").concat(y1, " L").concat(x2, " ").concat(y2)).attr('class', "segment0 line ".concat(klass)); - routeEnter.append('path').attr('d', "M".concat(x2, " ").concat(y2, " L").concat(x3, " ").concat(y1)).attr('class', "segment1 line ".concat(klass)); - routeEnter.append('path').attr('d', "M".concat(x3, " ").concat(y1, " L").concat(x4, " ").concat(y2)).attr('class', "segment2 line ".concat(klass)); - }); - [[x1, y1], [x2, y2], [x3, y1], [x4, y2]].forEach(function (point) { - routeEnter.append('circle').attr('class', 'vertex').attr('cx', point[0]).attr('cy', point[1]).attr('r', r); + var choicesEnter = choices.enter().append('li').attr('class', 'layer'); + var labelEnter = choicesEnter.append('label'); + labelEnter.append('input').attr('type', 'radio').attr('name', function (d) { + return d.id; + }).on('change', function (d3_event, d) { + var ul = this.parentNode.parentNode.parentNode; + ul.__data__.chosen = d.id; + choose(d3_event, ul, d); }); - route = routeEnter.merge(route); + labelEnter.append('span').html(function (d) { + return d.text; + }); // update - if (drawRoute) { - var routeType = p.tags.type === 'waterway' ? 'waterway' : p.tags.route; - var segmentPresetIDs = routeSegments[routeType]; + choicesEnter.merge(choices).each(function (d) { + var ul = this.parentNode; - for (var i in segmentPresetIDs) { - var segmentPreset = _mainPresetIndex.item(segmentPresetIDs[i]); - var segmentTagClasses = svgTagClasses().getClassesString(segmentPreset.tags, ''); - route.selectAll("path.stroke.segment".concat(i)).attr('class', "segment".concat(i, " line stroke ").concat(segmentTagClasses)); - route.selectAll("path.casing.segment".concat(i)).attr('class', "segment".concat(i, " line casing ").concat(segmentTagClasses)); + if (ul.__data__.chosen === d.id) { + choose(null, ul, d); } - } - } // Route icons are drawn with a zigzag annotation underneath: - // o o - // / \ / - // o o - // This dataset defines the styles that are used to draw the zigzag segments. - - - var routeSegments = { - bicycle: ['highway/cycleway', 'highway/cycleway', 'highway/cycleway'], - bus: ['highway/unclassified', 'highway/secondary', 'highway/primary'], - trolleybus: ['highway/unclassified', 'highway/secondary', 'highway/primary'], - detour: ['highway/tertiary', 'highway/residential', 'highway/unclassified'], - ferry: ['route/ferry', 'route/ferry', 'route/ferry'], - foot: ['highway/footway', 'highway/footway', 'highway/footway'], - hiking: ['highway/path', 'highway/path', 'highway/path'], - horse: ['highway/bridleway', 'highway/bridleway', 'highway/bridleway'], - light_rail: ['railway/light_rail', 'railway/light_rail', 'railway/light_rail'], - monorail: ['railway/monorail', 'railway/monorail', 'railway/monorail'], - pipeline: ['man_made/pipeline', 'man_made/pipeline', 'man_made/pipeline'], - piste: ['piste/downhill', 'piste/hike', 'piste/nordic'], - power: ['power/line', 'power/line', 'power/line'], - road: ['highway/secondary', 'highway/primary', 'highway/trunk'], - subway: ['railway/subway', 'railway/subway', 'railway/subway'], - train: ['railway/rail', 'railway/rail', 'railway/rail'], - tram: ['railway/tram', 'railway/tram', 'railway/tram'], - waterway: ['waterway/stream', 'waterway/stream', 'waterway/stream'] - }; - - function render() { - var p = _preset.apply(this, arguments); - - var geom = _geometry ? _geometry.apply(this, arguments) : null; + }); + } - if (geom === 'relation' && p.tags && (p.tags.type === 'route' && p.tags.route && routeSegments[p.tags.route] || p.tags.type === 'waterway')) { - geom = 'route'; - } + function choose(d3_event, ul, datum) { + if (d3_event) d3_event.preventDefault(); + select(ul).selectAll('li').classed('active', function (d) { + return d === datum; + }).selectAll('input').property('checked', function (d) { + return d === datum; + }); + var extent = geoExtent(); + var entity; + entity = context.graph().hasEntity(datum.id); + if (entity) extent._extend(entity.extent(context.graph())); + datum.action(); + entity = context.graph().hasEntity(datum.id); + if (entity) extent._extend(entity.extent(context.graph())); + zoomToEntity(datum.id, extent); + } - var showThirdPartyIcons = corePreferences('preferences.privacy.thirdpartyicons') || 'true'; - var isFallback = isSmall() && p.isFallback && p.isFallback(); - var imageURL = showThirdPartyIcons === 'true' && p.imageURL; - var picon = getIcon(p, geom); - var isMaki = picon && /^maki-/.test(picon); - var isTemaki = picon && /^temaki-/.test(picon); - var isFa = picon && /^fa[srb]-/.test(picon); - var isiDIcon = picon && !(isMaki || isTemaki || isFa); - var isCategory = !p.setTags; - var drawPoint = picon && geom === 'point' && isSmall() && !isFallback; - var drawVertex = picon !== null && geom === 'vertex' && (!isSmall() || !isFallback); - var drawLine = picon && geom === 'line' && !isFallback && !isCategory; - var drawArea = picon && geom === 'area' && !isFallback; - var drawRoute = picon && geom === 'route'; - var isFramed = drawVertex || drawArea || drawLine || drawRoute; - var tags = !isCategory ? p.setTags({}, geom) : {}; + function zoomToEntity(id, extent) { + context.surface().selectAll('.hover').classed('hover', false); + var entity = context.graph().hasEntity(id); - for (var k in tags) { - if (tags[k] === '*') { - tags[k] = 'yes'; + if (entity) { + if (extent) { + context.map().trimmedExtent(extent); + } else { + context.map().zoomToEase(entity); } + + context.surface().selectAll(utilEntityOrMemberSelector([entity.id], context.graph())).classed('hover', true); } + } // The conflict list should be an array of objects like: + // { + // id: id, + // name: entityName(local), + // details: merge.conflicts(), + // chosen: 1, + // choices: [ + // choice(id, keepMine, forceLocal), + // choice(id, keepTheirs, forceRemote) + // ] + // } - var tagClasses = svgTagClasses().getClassesString(tags, ''); - var selection = select(this); - var container = selection.selectAll('.preset-icon-container').data([0]); - container = container.enter().append('div').attr('class', "preset-icon-container ".concat(_sizeClass)).merge(container); - container.classed('showing-img', !!imageURL).classed('fallback', isFallback); - renderPointBorder(container, drawPoint); - renderCircleFill(container, drawVertex); - renderSquareFill(container, drawArea, tagClasses); - renderLine(container, drawLine, tagClasses); - renderRoute(container, drawRoute, p); - var icon = container.selectAll('.preset-icon').data(picon ? [0] : []); - icon.exit().remove(); - icon = icon.enter().append('div').attr('class', 'preset-icon').call(svgIcon('')).merge(icon); - icon.attr('class', 'preset-icon ' + (geom ? geom + '-geom' : '')).classed('framed', isFramed).classed('preset-icon-iD', isiDIcon); - icon.selectAll('svg').attr('class', 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line' ? '' : tagClasses)); - icon.selectAll('use').attr('href', '#' + picon + (isMaki ? isSmall() && geom === 'point' ? '-11' : '-15' : '')); - var imageIcon = container.selectAll('img.image-icon').data(imageURL ? [0] : []); - imageIcon.exit().remove(); - imageIcon = imageIcon.enter().append('img').attr('class', 'image-icon').on('load', function () { - return container.classed('showing-img', true); - }).on('error', function () { - return container.classed('showing-img', false); - }).merge(imageIcon); - imageIcon.attr('src', imageURL); - } - presetIcon.preset = function (val) { - if (!arguments.length) return _preset; - _preset = utilFunctor(val); - return presetIcon; + conflicts.conflictList = function (_) { + if (!arguments.length) return _conflictList; + _conflictList = _; + return conflicts; }; - presetIcon.geometry = function (val) { - if (!arguments.length) return _geometry; - _geometry = utilFunctor(val); - return presetIcon; + conflicts.origChanges = function (_) { + if (!arguments.length) return _origChanges; + _origChanges = _; + return conflicts; }; - presetIcon.sizeClass = function (val) { - if (!arguments.length) return _sizeClass; - _sizeClass = val; - return presetIcon; + conflicts.shownEntityIds = function () { + if (_conflictList && typeof _shownConflictIndex === 'number') { + return [_conflictList[_shownConflictIndex].id]; + } + + return []; }; - return presetIcon; + return utilRebind(conflicts, dispatch, 'on'); } - function uiSectionFeatureType(context) { - var dispatch$1 = dispatch('choose'); - var _entityIDs = []; - var _presets = []; + function uiConfirm(selection) { + var modalSelection = uiModal(selection); + modalSelection.select('.modal').classed('modal-alert', true); + var section = modalSelection.select('.content'); + section.append('div').attr('class', 'modal-section header'); + section.append('div').attr('class', 'modal-section message-text'); + var buttons = section.append('div').attr('class', 'modal-section buttons cf'); - var _tagReference; + modalSelection.okButton = function () { + buttons.append('button').attr('class', 'button ok-button action').on('click.confirm', function () { + modalSelection.remove(); + }).html(_t.html('confirm.okay')).node().focus(); + return modalSelection; + }; - var section = uiSection('feature-type', context).label(_t.html('inspector.feature_type')).disclosureContent(renderDisclosureContent); + return modalSelection; + } - function renderDisclosureContent(selection) { - selection.classed('preset-list-item', true); - selection.classed('mixed-types', _presets.length > 1); - var presetButtonWrap = selection.selectAll('.preset-list-button-wrap').data([0]).enter().append('div').attr('class', 'preset-list-button-wrap'); - var presetButton = presetButtonWrap.append('button').attr('class', 'preset-list-button preset-reset').call(uiTooltip().title(_t.html('inspector.back_tooltip')).placement('bottom')); - presetButton.append('div').attr('class', 'preset-icon-container'); - presetButton.append('div').attr('class', 'label').append('div').attr('class', 'label-inner'); - presetButtonWrap.append('div').attr('class', 'accessory-buttons'); - var tagReferenceBodyWrap = selection.selectAll('.tag-reference-body-wrap').data([0]); - tagReferenceBodyWrap = tagReferenceBodyWrap.enter().append('div').attr('class', 'tag-reference-body-wrap').merge(tagReferenceBodyWrap); // update header + function uiChangesetEditor(context) { + var dispatch = dispatch$8('change'); + var formFields = uiFormFields(context); + var commentCombo = uiCombobox(context, 'comment').caseSensitive(true); - if (_tagReference) { - selection.selectAll('.preset-list-button-wrap .accessory-buttons').style('display', _presets.length === 1 ? null : 'none').call(_tagReference.button); - tagReferenceBodyWrap.style('display', _presets.length === 1 ? null : 'none').call(_tagReference.body); - } + var _fieldsArr; - selection.selectAll('.preset-reset').on('click', function () { - dispatch$1.call('choose', this, _presets); - }).on('pointerdown pointerup mousedown mouseup', function (d3_event) { - d3_event.preventDefault(); - d3_event.stopPropagation(); - }); - var geometries = entityGeometries(); - selection.select('.preset-list-item button').call(uiPresetIcon().geometry(_presets.length === 1 ? geometries.length === 1 && geometries[0] : null).preset(_presets.length === 1 ? _presets[0] : _mainPresetIndex.item('point'))); - var names = _presets.length === 1 ? [_presets[0].nameLabel(), _presets[0].subtitleLabel()].filter(Boolean) : [_t('inspector.multiple_types')]; - var label = selection.select('.label-inner'); - var nameparts = label.selectAll('.namepart').data(names, function (d) { - return d; - }); - nameparts.exit().remove(); - nameparts.enter().append('div').attr('class', 'namepart').html(function (d) { - return d; - }); - } + var _tags; - section.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return section; - }; + var _changesetID; - section.presets = function (val) { - if (!arguments.length) return _presets; // don't reload the same preset + function changesetEditor(selection) { + render(selection); + } - if (!utilArrayIdentical(val, _presets)) { - _presets = val; + function render(selection) { + var initial = false; - if (_presets.length === 1) { - _tagReference = uiTagReference(_presets[0].reference()).showing(false); - } + if (!_fieldsArr) { + initial = true; + var presets = _mainPresetIndex; + _fieldsArr = [uiField(context, presets.field('comment'), null, { + show: true, + revert: false + }), uiField(context, presets.field('source'), null, { + show: false, + revert: false + }), uiField(context, presets.field('hashtags'), null, { + show: false, + revert: false + })]; + + _fieldsArr.forEach(function (field) { + field.on('change', function (t, onInput) { + dispatch.call('change', field, undefined, t, onInput); + }); + }); } - return section; - }; + _fieldsArr.forEach(function (field) { + field.tags(_tags); + }); - function entityGeometries() { - var counts = {}; + selection.call(formFields.fieldsArr(_fieldsArr)); - for (var i in _entityIDs) { - var geometry = context.graph().geometry(_entityIDs[i]); - if (!counts[geometry]) counts[geometry] = 0; - counts[geometry] += 1; - } + if (initial) { + var commentField = selection.select('.form-field-comment textarea'); + var commentNode = commentField.node(); - return Object.keys(counts).sort(function (geom1, geom2) { - return counts[geom2] - counts[geom1]; - }); - } + if (commentNode) { + commentNode.focus(); + commentNode.select(); + } // trigger a 'blur' event so that comment field can be cleaned + // and checked for hashtags, even if retrieved from localstorage - return utilRebind(section, dispatch$1, 'on'); - } - // It borrows some code from uiHelp + utilTriggerEvent(commentField, 'blur'); + var osm = context.connection(); + + if (osm) { + osm.userChangesets(function (err, changesets) { + if (err) return; + var comments = changesets.map(function (changeset) { + var comment = changeset.tags.comment; + return comment ? { + title: comment, + value: comment + } : null; + }).filter(Boolean); + commentField.call(commentCombo.data(utilArrayUniqBy(comments, 'title'))); + }); + } + } // Add warning if comment mentions Google - function uiFieldHelp(context, fieldName) { - var fieldHelp = {}; - var _inspector = select(null); + var hasGoogle = _tags.comment.match(/google/i); - var _wrap = select(null); + var commentWarning = selection.select('.form-field-comment').selectAll('.comment-warning').data(hasGoogle ? [0] : []); + commentWarning.exit().transition().duration(200).style('opacity', 0).remove(); + var commentEnter = commentWarning.enter().insert('div', '.tag-reference-body').attr('class', 'field-warning comment-warning').style('opacity', 0); + commentEnter.append('a').attr('target', '_blank').call(svgIcon('#iD-icon-alert', 'inline')).attr('href', _t('commit.google_warning_link')).append('span').html(_t.html('commit.google_warning')); + commentEnter.transition().duration(200).style('opacity', 1); + } - var _body = select(null); + changesetEditor.tags = function (_) { + if (!arguments.length) return _tags; + _tags = _; // Don't reset _fieldsArr here. - var fieldHelpKeys = { - restrictions: [['about', ['about', 'from_via_to', 'maxdist', 'maxvia']], ['inspecting', ['about', 'from_shadow', 'allow_shadow', 'restrict_shadow', 'only_shadow', 'restricted', 'only']], ['modifying', ['about', 'indicators', 'allow_turn', 'restrict_turn', 'only_turn']], ['tips', ['simple', 'simple_example', 'indirect', 'indirect_example', 'indirect_noedit']]] + return changesetEditor; }; - var fieldHelpHeadings = {}; - var replacements = { - distField: _t.html('restriction.controls.distance'), - viaField: _t.html('restriction.controls.via'), - fromShadow: icon('#iD-turn-shadow', 'inline shadow from'), - allowShadow: icon('#iD-turn-shadow', 'inline shadow allow'), - restrictShadow: icon('#iD-turn-shadow', 'inline shadow restrict'), - onlyShadow: icon('#iD-turn-shadow', 'inline shadow only'), - allowTurn: icon('#iD-turn-yes', 'inline turn'), - restrictTurn: icon('#iD-turn-no', 'inline turn'), - onlyTurn: icon('#iD-turn-only', 'inline turn') - }; // For each section, squash all the texts into a single markdown document - var docs = fieldHelpKeys[fieldName].map(function (key) { - var helpkey = 'help.field.' + fieldName + '.' + key[0]; - var text = key[1].reduce(function (all, part) { - var subkey = helpkey + '.' + part; - var depth = fieldHelpHeadings[subkey]; // is this subkey a heading? + changesetEditor.changesetID = function (_) { + if (!arguments.length) return _changesetID; + if (_changesetID === _) return changesetEditor; + _changesetID = _; + _fieldsArr = null; + return changesetEditor; + }; - var hhh = depth ? Array(depth + 1).join('#') + ' ' : ''; // if so, prepend with some ##'s + return utilRebind(changesetEditor, dispatch, 'on'); + } - return all + hhh + _t.html(subkey, replacements) + '\n\n'; - }, ''); - return { - key: helpkey, - title: _t.html(helpkey + '.title'), - html: marked_1(text.trim()) - }; + function uiSectionChanges(context) { + var detected = utilDetect(); + var _discardTags = {}; + _mainFileFetcher.get('discarded').then(function (d) { + _discardTags = d; + })["catch"](function () { + /* ignore */ }); + var section = uiSection('changes-list', context).label(function () { + var history = context.history(); + var summary = history.difference().summary(); + return _t('inspector.title_count', { + title: _t.html('commit.changes'), + count: summary.length + }); + }).disclosureContent(renderDisclosureContent); - function show() { - updatePosition(); + function renderDisclosureContent(selection) { + var history = context.history(); + var summary = history.difference().summary(); + var container = selection.selectAll('.commit-section').data([0]); + var containerEnter = container.enter().append('div').attr('class', 'commit-section'); + containerEnter.append('ul').attr('class', 'changeset-list'); + container = containerEnter.merge(container); + var items = container.select('ul').selectAll('li').data(summary); + var itemsEnter = items.enter().append('li').attr('class', 'change-item'); + var buttons = itemsEnter.append('button').on('mouseover', mouseover).on('mouseout', mouseout).on('click', click); + buttons.each(function (d) { + select(this).call(svgIcon('#iD-icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType)); + }); + buttons.append('span').attr('class', 'change-type').html(function (d) { + return _t.html('commit.' + d.changeType) + ' '; + }); + buttons.append('strong').attr('class', 'entity-type').html(function (d) { + var matched = _mainPresetIndex.match(d.entity, d.graph); + return matched && matched.name() || utilDisplayType(d.entity.id); + }); + buttons.append('span').attr('class', 'entity-name').html(function (d) { + var name = utilDisplayName(d.entity) || '', + string = ''; - _body.classed('hide', false).style('opacity', '0').transition().duration(200).style('opacity', '1'); - } + if (name !== '') { + string += ':'; + } - function hide() { - _body.classed('hide', true).transition().duration(200).style('opacity', '0').on('end', function () { - _body.classed('hide', true); + return string += ' ' + name; }); - } + items = itemsEnter.merge(items); // Download changeset link - function clickHelp(index) { - var d = docs[index]; - var tkeys = fieldHelpKeys[fieldName][index][1]; + var changeset = new osmChangeset().update({ + id: undefined + }); + var changes = history.changes(actionDiscardTags(history.difference(), _discardTags)); + delete changeset.id; // Export without chnageset_id - _body.selectAll('.field-help-nav-item').classed('active', function (d, i) { - return i === index; + var data = JXON.stringify(changeset.osmChangeJXON(changes)); + var blob = new Blob([data], { + type: 'text/xml;charset=utf-8;' }); + var fileName = 'changes.osc'; + var linkEnter = container.selectAll('.download-changes').data([0]).enter().append('a').attr('class', 'download-changes'); - var content = _body.selectAll('.field-help-content').html(d.html); // class the paragraphs so we can find and style them + if (detected.download) { + // All except IE11 and Edge + linkEnter // download the data as a file + .attr('href', window.URL.createObjectURL(blob)).attr('download', fileName); + } else { + // IE11 and Edge + linkEnter // open data uri in a new tab + .attr('target', '_blank').on('click.download', function () { + navigator.msSaveBlob(blob, fileName); + }); + } + linkEnter.call(svgIcon('#iD-icon-load', 'inline')).append('span').html(_t.html('commit.download_changes')); - content.selectAll('p').attr('class', function (d, i) { - return tkeys[i]; - }); // insert special content for certain help sections + function mouseover(d) { + if (d.entity) { + context.surface().selectAll(utilEntityOrMemberSelector([d.entity.id], context.graph())).classed('hover', true); + } + } - if (d.key === 'help.field.restrictions.inspecting') { - content.insert('img', 'p.from_shadow').attr('class', 'field-help-image cf').attr('src', context.imagePath('tr_inspect.gif')); - } else if (d.key === 'help.field.restrictions.modifying') { - content.insert('img', 'p.allow_turn').attr('class', 'field-help-image cf').attr('src', context.imagePath('tr_modify.gif')); + function mouseout() { + context.surface().selectAll('.hover').classed('hover', false); } - } - fieldHelp.button = function (selection) { - if (_body.empty()) return; - var button = selection.selectAll('.field-help-button').data([0]); // enter/update + function click(d3_event, change) { + if (change.changeType !== 'deleted') { + var entity = change.entity; + context.map().zoomToEase(entity); + context.surface().selectAll(utilEntityOrMemberSelector([entity.id], context.graph())).classed('hover', true); + } + } + } - button.enter().append('button').attr('class', 'field-help-button').call(svgIcon('#iD-icon-help')).merge(button).on('click', function (d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); + return section; + } - if (_body.classed('hide')) { - show(); - } else { - hide(); - } + function uiCommitWarnings(context) { + function commitWarnings(selection) { + var issuesBySeverity = context.validator().getIssuesBySeverity({ + what: 'edited', + where: 'all', + includeDisabledRules: true }); - }; - - function updatePosition() { - var wrap = _wrap.node(); - var inspector = _inspector.node(); + for (var severity in issuesBySeverity) { + var issues = issuesBySeverity[severity]; - var wRect = wrap.getBoundingClientRect(); - var iRect = inspector.getBoundingClientRect(); + if (severity !== 'error') { + // exclude 'fixme' and similar - #8603 + issues = issues.filter(function (issue) { + return issue.type !== 'help_request'; + }); + } - _body.style('top', wRect.top + inspector.scrollTop - iRect.top + 'px'); + var section = severity + '-section'; + var issueItem = severity + '-item'; + var container = selection.selectAll('.' + section).data(issues.length ? [0] : []); + container.exit().remove(); + var containerEnter = container.enter().append('div').attr('class', 'modal-section ' + section + ' fillL2'); + containerEnter.append('h3').html(severity === 'warning' ? _t.html('commit.warnings') : _t.html('commit.errors')); + containerEnter.append('ul').attr('class', 'changeset-list'); + container = containerEnter.merge(container); + var items = container.select('ul').selectAll('li').data(issues, function (d) { + return d.id; + }); + items.exit().remove(); + var itemsEnter = items.enter().append('li').attr('class', issueItem); + var buttons = itemsEnter.append('button').on('mouseover', function (d3_event, d) { + if (d.entityIds) { + context.surface().selectAll(utilEntityOrMemberSelector(d.entityIds, context.graph())).classed('hover', true); + } + }).on('mouseout', function () { + context.surface().selectAll('.hover').classed('hover', false); + }).on('click', function (d3_event, d) { + context.validator().focusIssue(d); + }); + buttons.call(svgIcon('#iD-icon-alert', 'pre-text')); + buttons.append('strong').attr('class', 'issue-message'); + buttons.filter(function (d) { + return d.tooltip; + }).call(uiTooltip().title(function (d) { + return d.tooltip; + }).placement('top')); + items = itemsEnter.merge(items); + items.selectAll('.issue-message').html(function (d) { + return d.message(context); + }); + } } - fieldHelp.body = function (selection) { - // This control expects the field to have a form-field-input-wrap div - _wrap = selection.selectAll('.form-field-input-wrap'); - if (_wrap.empty()) return; // absolute position relative to the inspector, so it "floats" above the fields - - _inspector = context.container().select('.sidebar .entity-editor-pane .inspector-body'); - if (_inspector.empty()) return; - _body = _inspector.selectAll('.field-help-body').data([0]); + return commitWarnings; + } - var enter = _body.enter().append('div').attr('class', 'field-help-body hide'); // initially hidden + var readOnlyTags = [/^changesets_count$/, /^created_by$/, /^ideditor:/, /^imagery_used$/, /^host$/, /^locale$/, /^warnings:/, /^resolved:/, /^closed:note$/, /^closed:keepright$/, /^closed:improveosm:/, /^closed:osmose:/]; // treat most punctuation (except -, _, +, &) as hashtag delimiters - #4398 + // from https://stackoverflow.com/a/25575009 + var hashtagRegex = /(#[^\u2000-\u206F\u2E00-\u2E7F\s\\'!"#$%()*,.\/:;<=>?@\[\]^`{|}~]+)/g; + function uiCommit(context) { + var dispatch = dispatch$8('cancel'); - var titleEnter = enter.append('div').attr('class', 'field-help-title cf'); - titleEnter.append('h2').attr('class', _mainLocalizer.textDirection() === 'rtl' ? 'fr' : 'fl').html(_t.html('help.field.' + fieldName + '.title')); - titleEnter.append('button').attr('class', 'fr close').on('click', function (d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - hide(); - }).call(svgIcon('#iD-icon-close')); - var navEnter = enter.append('div').attr('class', 'field-help-nav cf'); - var titles = docs.map(function (d) { - return d.title; - }); - navEnter.selectAll('.field-help-nav-item').data(titles).enter().append('div').attr('class', 'field-help-nav-item').html(function (d) { - return d; - }).on('click', function (d3_event, d) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - clickHelp(titles.indexOf(d)); - }); - enter.append('div').attr('class', 'field-help-content'); - _body = _body.merge(enter); - clickHelp(0); - }; + var _userDetails; - return fieldHelp; - } + var _selection; - function uiFieldCheck(field, context) { - var dispatch$1 = dispatch('change'); - var options = field.strings && field.strings.options; - var values = []; - var texts = []; + var changesetEditor = uiChangesetEditor(context).on('change', changeTags); + var rawTagEditor = uiSectionRawTagEditor('changeset-tag-editor', context).on('change', changeTags).readOnlyTags(readOnlyTags); + var commitChanges = uiSectionChanges(context); + var commitWarnings = uiCommitWarnings(context); - var _tags; + function commit(selection) { + _selection = selection; // Initialize changeset if one does not exist yet. - var input = select(null); - var text = select(null); - var label = select(null); - var reverser = select(null); + if (!context.changeset) initChangeset(); + loadDerivedChangesetTags(); + selection.call(render); + } - var _impliedYes; + function initChangeset() { + // expire stored comment, hashtags, source after cutoff datetime - #3947 #4899 + var commentDate = +corePreferences('commentDate') || 0; + var currDate = Date.now(); + var cutoff = 2 * 86400 * 1000; // 2 days - var _entityIDs = []; + if (commentDate > currDate || currDate - commentDate > cutoff) { + corePreferences('comment', null); + corePreferences('hashtags', null); + corePreferences('source', null); + } // load in explicitly-set values, if any - var _value; - if (options) { - for (var k in options) { - values.push(k === 'undefined' ? undefined : k); - texts.push(field.t.html('options.' + k, { - 'default': options[k] - })); + if (context.defaultChangesetComment()) { + corePreferences('comment', context.defaultChangesetComment()); + corePreferences('commentDate', Date.now()); } - } else { - values = [undefined, 'yes']; - texts = [_t.html('inspector.unknown'), _t.html('inspector.check.yes')]; - if (field.type !== 'defaultCheck') { - values.push('no'); - texts.push(_t.html('inspector.check.no')); + if (context.defaultChangesetSource()) { + corePreferences('source', context.defaultChangesetSource()); + corePreferences('commentDate', Date.now()); } - } // Checks tags to see whether an undefined value is "Assumed to be Yes" - - - function checkImpliedYes() { - _impliedYes = field.id === 'oneway_yes'; // hack: pretend `oneway` field is a `oneway_yes` field - // where implied oneway tag exists (e.g. `junction=roundabout`) #2220, #1841 - - if (field.id === 'oneway') { - var entity = context.entity(_entityIDs[0]); - for (var key in entity.tags) { - if (key in osmOneWayTags && entity.tags[key] in osmOneWayTags[key]) { - _impliedYes = true; - texts[0] = _t.html('presets.fields.oneway_yes.options.undefined'); - break; - } - } + if (context.defaultChangesetHashtags()) { + corePreferences('hashtags', context.defaultChangesetHashtags()); + corePreferences('commentDate', Date.now()); } - } - - function reverserHidden() { - if (!context.container().select('div.inspector-hover').empty()) return true; - return !(_value === 'yes' || _impliedYes && !_value); - } - function reverserSetText(selection) { - var entity = _entityIDs.length && context.hasEntity(_entityIDs[0]); - if (reverserHidden() || !entity) return selection; - var first = entity.first(); - var last = entity.isClosed() ? entity.nodes[entity.nodes.length - 2] : entity.last(); - var pseudoDirection = first < last; - var icon = pseudoDirection ? '#iD-icon-forward' : '#iD-icon-backward'; - selection.selectAll('.reverser-span').html(_t.html('inspector.check.reverser')).call(svgIcon(icon, 'inline')); - return selection; - } + var detected = utilDetect(); + var tags = { + comment: corePreferences('comment') || '', + created_by: context.cleanTagValue('iD ' + context.version), + host: context.cleanTagValue(detected.host), + locale: context.cleanTagValue(_mainLocalizer.localeCode()) + }; // call findHashtags initially - this will remove stored + // hashtags if any hashtags are found in the comment - #4304 - var check = function check(selection) { - checkImpliedYes(); - label = selection.selectAll('.form-field-input-wrap').data([0]); - var enter = label.enter().append('label').attr('class', 'form-field-input-wrap form-field-input-check'); - enter.append('input').property('indeterminate', field.type !== 'defaultCheck').attr('type', 'checkbox').attr('id', field.domId); - enter.append('span').html(texts[0]).attr('class', 'value'); + findHashtags(tags, true); + var hashtags = corePreferences('hashtags'); - if (field.type === 'onewayCheck') { - enter.append('button').attr('class', 'reverser' + (reverserHidden() ? ' hide' : '')).append('span').attr('class', 'reverser-span'); + if (hashtags) { + tags.hashtags = hashtags; } - label = label.merge(enter); - input = label.selectAll('input'); - text = label.selectAll('span.value'); - input.on('click', function (d3_event) { - d3_event.stopPropagation(); - var t = {}; - - if (Array.isArray(_tags[field.key])) { - if (values.indexOf('yes') !== -1) { - t[field.key] = 'yes'; - } else { - t[field.key] = values[0]; - } - } else { - t[field.key] = values[(values.indexOf(_value) + 1) % values.length]; - } // Don't cycle through `alternating` or `reversible` states - #4970 - // (They are supported as translated strings, but should not toggle with clicks) + var source = corePreferences('source'); + if (source) { + tags.source = source; + } - if (t[field.key] === 'reversible' || t[field.key] === 'alternating') { - t[field.key] = values[0]; - } + var photoOverlaysUsed = context.history().photoOverlaysUsed(); - dispatch$1.call('change', this, t); - }); + if (photoOverlaysUsed.length) { + var sources = (tags.source || '').split(';'); // include this tag for any photo layer - if (field.type === 'onewayCheck') { - reverser = label.selectAll('.reverser'); - reverser.call(reverserSetText).on('click', function (d3_event) { - d3_event.preventDefault(); - d3_event.stopPropagation(); - context.perform(function (graph) { - for (var i in _entityIDs) { - graph = actionReverse(_entityIDs[i])(graph); - } + if (sources.indexOf('streetlevel imagery') === -1) { + sources.push('streetlevel imagery'); + } // add the photo overlays used during editing as sources - return graph; - }, _t('operations.reverse.annotation.line', { - n: 1 - })); // must manually revalidate since no 'change' event was called - context.validator().validate(); - select(this).call(reverserSetText); + photoOverlaysUsed.forEach(function (photoOverlay) { + if (sources.indexOf(photoOverlay) === -1) { + sources.push(photoOverlay); + } }); + tags.source = context.cleanTagValue(sources.join(';')); } - }; - check.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return check; - }; + context.changeset = new osmChangeset({ + tags: tags + }); + } // Calculates read-only metadata tags based on the user's editing session and applies + // them to the changeset. - check.tags = function (tags) { - _tags = tags; - function isChecked(val) { - return val !== 'no' && val !== '' && val !== undefined && val !== null; - } + function loadDerivedChangesetTags() { + var osm = context.connection(); + if (!osm) return; + var tags = Object.assign({}, context.changeset.tags); // shallow copy + // assign tags for imagery used - function textFor(val) { - if (val === '') val = undefined; - var index = values.indexOf(val); - return index !== -1 ? texts[index] : '"' + val + '"'; - } + var imageryUsed = context.cleanTagValue(context.history().imageryUsed().join(';')); + tags.imagery_used = imageryUsed || 'None'; // assign tags for closed issues and notes - checkImpliedYes(); - var isMixed = Array.isArray(tags[field.key]); - _value = !isMixed && tags[field.key] && tags[field.key].toLowerCase(); + var osmClosed = osm.getClosedIDs(); + var itemType; - if (field.type === 'onewayCheck' && (_value === '1' || _value === '-1')) { - _value = 'yes'; + if (osmClosed.length) { + tags['closed:note'] = context.cleanTagValue(osmClosed.join(';')); } - input.property('indeterminate', isMixed || field.type !== 'defaultCheck' && !_value).property('checked', isChecked(_value)); - text.html(isMixed ? _t.html('inspector.multiple_values') : textFor(_value)).classed('mixed', isMixed); - label.classed('set', !!_value); + if (services.keepRight) { + var krClosed = services.keepRight.getClosedIDs(); - if (field.type === 'onewayCheck') { - reverser.classed('hide', reverserHidden()).call(reverserSetText); + if (krClosed.length) { + tags['closed:keepright'] = context.cleanTagValue(krClosed.join(';')); + } } - }; - check.focus = function () { - input.node().focus(); - }; + if (services.improveOSM) { + var iOsmClosed = services.improveOSM.getClosedCounts(); - return utilRebind(check, dispatch$1, 'on'); - } + for (itemType in iOsmClosed) { + tags['closed:improveosm:' + itemType] = context.cleanTagValue(iOsmClosed[itemType].toString()); + } + } - function uiFieldCombo(field, context) { - var dispatch$1 = dispatch('change'); + if (services.osmose) { + var osmoseClosed = services.osmose.getClosedCounts(); - var _isMulti = field.type === 'multiCombo' || field.type === 'manyCombo'; + for (itemType in osmoseClosed) { + tags['closed:osmose:' + itemType] = context.cleanTagValue(osmoseClosed[itemType].toString()); + } + } // remove existing issue counts - var _isNetwork = field.type === 'networkCombo'; - var _isSemi = field.type === 'semiCombo'; + for (var key in tags) { + if (key.match(/(^warnings:)|(^resolved:)/)) { + delete tags[key]; + } + } - var _optstrings = field.strings && field.strings.options; + function addIssueCounts(issues, prefix) { + var issuesByType = utilArrayGroupBy(issues, 'type'); - var _optarray = field.options; + for (var issueType in issuesByType) { + var issuesOfType = issuesByType[issueType]; - var _snake_case = field.snake_case || field.snake_case === undefined; + if (issuesOfType[0].subtype) { + var issuesBySubtype = utilArrayGroupBy(issuesOfType, 'subtype'); - var _combobox = uiCombobox(context, 'combo-' + field.safeid).caseSensitive(field.caseSensitive).minItems(_isMulti || _isSemi ? 1 : 2); + for (var issueSubtype in issuesBySubtype) { + var issuesOfSubtype = issuesBySubtype[issueSubtype]; + tags[prefix + ':' + issueType + ':' + issueSubtype] = context.cleanTagValue(issuesOfSubtype.length.toString()); + } + } else { + tags[prefix + ':' + issueType] = context.cleanTagValue(issuesOfType.length.toString()); + } + } + } // add counts of warnings generated by the user's edits - var _container = select(null); - var _inputWrap = select(null); + var warnings = context.validator().getIssuesBySeverity({ + what: 'edited', + where: 'all', + includeIgnored: true, + includeDisabledRules: true + }).warning.filter(function (issue) { + return issue.type !== 'help_request'; + }); // exclude 'fixme' and similar - #8603 - var _input = select(null); + addIssueCounts(warnings, 'warnings'); // add counts of issues resolved by the user's edits - var _comboData = []; - var _multiData = []; - var _entityIDs = []; + var resolvedIssues = context.validator().getResolvedIssues(); + addIssueCounts(resolvedIssues, 'resolved'); + context.changeset = context.changeset.update({ + tags: tags + }); + } - var _tags; + function render(selection) { + var osm = context.connection(); + if (!osm) return; + var header = selection.selectAll('.header').data([0]); + var headerTitle = header.enter().append('div').attr('class', 'header fillL'); + headerTitle.append('div').append('h3').html(_t.html('commit.title')); + headerTitle.append('button').attr('class', 'close').on('click', function () { + dispatch.call('cancel', this); + }).call(svgIcon('#iD-icon-close')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); // Changeset Section - var _countryCode; + var changesetSection = body.selectAll('.changeset-editor').data([0]); + changesetSection = changesetSection.enter().append('div').attr('class', 'modal-section changeset-editor').merge(changesetSection); + changesetSection.call(changesetEditor.changesetID(context.changeset.id).tags(context.changeset.tags)); // Warnings - var _staticPlaceholder; // initialize deprecated tags array + body.call(commitWarnings); // Upload Explanation + var saveSection = body.selectAll('.save-section').data([0]); + saveSection = saveSection.enter().append('div').attr('class', 'modal-section save-section fillL').merge(saveSection); + var prose = saveSection.selectAll('.commit-info').data([0]); - var _dataDeprecated = []; - _mainFileFetcher.get('deprecated').then(function (d) { - _dataDeprecated = d; - })["catch"](function () { - /* ignore */ - }); // ensure multiCombo field.key ends with a ':' + if (prose.enter().size()) { + // first time, make sure to update user details in prose + _userDetails = null; + } - if (_isMulti && field.key && /[^:]$/.test(field.key)) { - field.key += ':'; - } + prose = prose.enter().append('p').attr('class', 'commit-info').html(_t.html('commit.upload_explanation')).merge(prose); // always check if this has changed, but only update prose.html() + // if needed, because it can trigger a style recalculation - function snake(s) { - return s.replace(/\s+/g, '_'); - } + osm.userDetails(function (err, user) { + if (err) return; + if (_userDetails === user) return; // no change - function unsnake(s) { - return s.replace(/_+/g, ' '); - } + _userDetails = user; + var userLink = select(document.createElement('div')); - function clean(s) { - return s.split(';').map(function (s) { - return s.trim(); - }).join(';'); - } // returns the tag value for a display value - // (for multiCombo, dval should be the key suffix, not the entire key) + if (user.image_url) { + userLink.append('img').attr('src', user.image_url).attr('class', 'icon pre-text user-icon'); + } + userLink.append('a').attr('class', 'user-info').html(user.display_name).attr('href', osm.userURL(user.display_name)).attr('target', '_blank'); + prose.html(_t.html('commit.upload_explanation_with_user', { + user: userLink.html() + })); + }); // Request Review - function tagValue(dval) { - dval = clean(dval || ''); + var requestReview = saveSection.selectAll('.request-review').data([0]); // Enter - if (_optstrings) { - var found = _comboData.find(function (o) { - return o.key && clean(o.value) === dval; - }); + var requestReviewEnter = requestReview.enter().append('div').attr('class', 'request-review'); + var requestReviewDomId = utilUniqueDomId('commit-input-request-review'); + var labelEnter = requestReviewEnter.append('label').attr('for', requestReviewDomId); - if (found) { - return found.key; - } + if (!labelEnter.empty()) { + labelEnter.call(uiTooltip().title(_t.html('commit.request_review_info')).placement('top')); } - if (field.type === 'typeCombo' && !dval) { - return 'yes'; - } + labelEnter.append('input').attr('type', 'checkbox').attr('id', requestReviewDomId); + labelEnter.append('span').html(_t.html('commit.request_review')); // Update - return (_snake_case ? snake(dval) : dval) || undefined; - } // returns the display value for a tag value - // (for multiCombo, tval should be the key suffix, not the entire key) + requestReview = requestReview.merge(requestReviewEnter); + var requestReviewInput = requestReview.selectAll('input').property('checked', isReviewRequested(context.changeset.tags)).on('change', toggleRequestReview); // Buttons + var buttonSection = saveSection.selectAll('.buttons').data([0]); // enter - function displayValue(tval) { - tval = tval || ''; + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons fillL'); + buttonEnter.append('button').attr('class', 'secondary-action button cancel-button').append('span').attr('class', 'label').html(_t.html('commit.cancel')); + var uploadButton = buttonEnter.append('button').attr('class', 'action button save-button'); + uploadButton.append('span').attr('class', 'label').html(_t.html('commit.save')); + var uploadBlockerTooltipText = getUploadBlockerMessage(); // update - if (_optstrings) { - var found = _comboData.find(function (o) { - return o.key === tval && o.value; - }); + buttonSection = buttonSection.merge(buttonEnter); + buttonSection.selectAll('.cancel-button').on('click.cancel', function () { + dispatch.call('cancel', this); + }); + buttonSection.selectAll('.save-button').classed('disabled', uploadBlockerTooltipText !== null).on('click.save', function () { + if (!select(this).classed('disabled')) { + this.blur(); // avoid keeping focus on the button - #4641 - if (found) { - return found.value; - } - } + for (var key in context.changeset.tags) { + // remove any empty keys before upload + if (!key) delete context.changeset.tags[key]; + } - if (field.type === 'typeCombo' && tval.toLowerCase() === 'yes') { - return ''; - } + context.uploader().save(context.changeset); + } + }); // remove any existing tooltip - return _snake_case ? unsnake(tval) : tval; - } // Compute the difference between arrays of objects by `value` property - // - // objectDifference([{value:1}, {value:2}, {value:3}], [{value:2}]) - // > [{value:1}, {value:3}] - // + uiTooltip().destroyAny(buttonSection.selectAll('.save-button')); + if (uploadBlockerTooltipText) { + buttonSection.selectAll('.save-button').call(uiTooltip().title(uploadBlockerTooltipText).placement('top')); + } // Raw Tag Editor - function objectDifference(a, b) { - return a.filter(function (d1) { - return !b.some(function (d2) { - return !d2.isMixed && d1.value === d2.value; - }); - }); - } - function initCombo(selection, attachTo) { - if (_optstrings) { - selection.attr('readonly', 'readonly'); - selection.call(_combobox, attachTo); - setStaticValues(setPlaceholder); - } else if (_optarray) { - selection.call(_combobox, attachTo); - setStaticValues(setPlaceholder); - } else if (services.taginfo) { - selection.call(_combobox.fetcher(setTaginfoValues), attachTo); - setTaginfoValues('', setPlaceholder); - } - } + var tagSection = body.selectAll('.tag-section.raw-tag-editor').data([0]); + tagSection = tagSection.enter().append('div').attr('class', 'modal-section tag-section raw-tag-editor').merge(tagSection); + tagSection.call(rawTagEditor.tags(Object.assign({}, context.changeset.tags)) // shallow copy + .render); + var changesSection = body.selectAll('.commit-changes-section').data([0]); + changesSection = changesSection.enter().append('div').attr('class', 'modal-section commit-changes-section').merge(changesSection); // Change summary - function setStaticValues(callback) { - if (!(_optstrings || _optarray)) return; + changesSection.call(commitChanges.render); - if (_optstrings) { - _comboData = Object.keys(_optstrings).map(function (k) { - var v = field.t('options.' + k, { - 'default': _optstrings[k] - }); - return { - key: k, - value: v, - title: v, - display: field.t.html('options.' + k, { - 'default': _optstrings[k] - }) - }; - }); - } else if (_optarray) { - _comboData = _optarray.map(function (k) { - var v = _snake_case ? unsnake(k) : k; - return { - key: k, - value: v, - title: v - }; + function toggleRequestReview() { + var rr = requestReviewInput.property('checked'); + updateChangeset({ + review_requested: rr ? 'yes' : undefined }); + tagSection.call(rawTagEditor.tags(Object.assign({}, context.changeset.tags)) // shallow copy + .render); } - - _combobox.data(objectDifference(_comboData, _multiData)); - - if (callback) callback(_comboData); } - function setTaginfoValues(q, callback) { - var fn = _isMulti ? 'multikeys' : 'values'; - var query = (_isMulti ? field.key : '') + q; - var hasCountryPrefix = _isNetwork && _countryCode && _countryCode.indexOf(q.toLowerCase()) === 0; - - if (hasCountryPrefix) { - query = _countryCode + ':'; - } + function getUploadBlockerMessage() { + var errors = context.validator().getIssuesBySeverity({ + what: 'edited', + where: 'all' + }).error; - var params = { - debounce: q !== '', - key: field.key, - query: query - }; + if (errors.length) { + return _t('commit.outstanding_errors_message', { + count: errors.length + }); + } else { + var hasChangesetComment = context.changeset && context.changeset.tags.comment && context.changeset.tags.comment.trim().length; - if (_entityIDs.length) { - params.geometry = context.graph().geometry(_entityIDs[0]); + if (!hasChangesetComment) { + return _t('commit.comment_needed_message'); + } } - services.taginfo[fn](params, function (err, data) { - if (err) return; - data = data.filter(function (d) { - if (field.type === 'typeCombo' && d.value === 'yes') { - // don't show the fallback value - return false; - } // don't show values with very low usage - + return null; + } - return !d.count || d.count > 10; - }); - var deprecatedValues = osmEntity.deprecatedTagValuesByKey(_dataDeprecated)[field.key]; + function changeTags(_, changed, onInput) { + if (changed.hasOwnProperty('comment')) { + if (changed.comment === undefined) { + changed.comment = ''; + } - if (deprecatedValues) { - // don't suggest deprecated tag values - data = data.filter(function (d) { - return deprecatedValues.indexOf(d.value) === -1; - }); + if (!onInput) { + corePreferences('comment', changed.comment); + corePreferences('commentDate', Date.now()); } + } - if (hasCountryPrefix) { - data = data.filter(function (d) { - return d.value.toLowerCase().indexOf(_countryCode + ':') === 0; - }); - } // hide the caret if there are no suggestions + if (changed.hasOwnProperty('source')) { + if (changed.source === undefined) { + corePreferences('source', null); + } else if (!onInput) { + corePreferences('source', changed.source); + corePreferences('commentDate', Date.now()); + } + } // no need to update `prefs` for `hashtags` here since it's done in `updateChangeset` - _container.classed('empty-combobox', data.length === 0); + updateChangeset(changed, onInput); - _comboData = data.map(function (d) { - var k = d.value; - if (_isMulti) k = k.replace(field.key, ''); - var v = _snake_case ? unsnake(k) : k; - return { - key: k, - value: v, - title: _isMulti ? v : d.title - }; - }); - _comboData = objectDifference(_comboData, _multiData); - if (callback) callback(_comboData); - }); + if (_selection) { + _selection.call(render); + } } - function setPlaceholder(values) { - if (_isMulti || _isSemi) { - _staticPlaceholder = field.placeholder() || _t('inspector.add'); - } else { - var vals = values.map(function (d) { - return d.value; - }).filter(function (s) { - return s.length < 20; - }); - var placeholders = vals.length > 1 ? vals : values.map(function (d) { - return d.key; - }); - _staticPlaceholder = field.placeholder() || placeholders.slice(0, 3).join(', '); - } + function findHashtags(tags, commentOnly) { + var detectedHashtags = commentHashtags(); - if (!/(â¦|\.\.\.)$/.test(_staticPlaceholder)) { - _staticPlaceholder += 'â¦'; + if (detectedHashtags.length) { + // always remove stored hashtags if there are hashtags in the comment - #4304 + corePreferences('hashtags', null); } - var ph; - - if (!_isMulti && !_isSemi && _tags && Array.isArray(_tags[field.key])) { - ph = _t('inspector.multiple_values'); - } else { - ph = _staticPlaceholder; + if (!detectedHashtags.length || !commentOnly) { + detectedHashtags = detectedHashtags.concat(hashtagHashtags()); } - _container.selectAll('input').attr('placeholder', ph); - } - - function change() { - var t = {}; - var val; - - if (_isMulti || _isSemi) { - val = tagValue(utilGetSetValue(_input).replace(/,/g, ';')) || ''; + var allLowerCase = new Set(); + return detectedHashtags.filter(function (hashtag) { + // Compare tags as lowercase strings, but keep original case tags + var lowerCase = hashtag.toLowerCase(); - _container.classed('active', false); + if (!allLowerCase.has(lowerCase)) { + allLowerCase.add(lowerCase); + return true; + } - utilGetSetValue(_input, ''); - var vals = val.split(';').filter(Boolean); - if (!vals.length) return; + return false; + }); // Extract hashtags from `comment` - if (_isMulti) { - utilArrayUniq(vals).forEach(function (v) { - var key = (field.key || '') + v; + function commentHashtags() { + var matches = (tags.comment || '').replace(/http\S*/g, '') // drop anything that looks like a URL - #4289 + .match(hashtagRegex); + return matches || []; + } // Extract and clean hashtags from `hashtags` - if (_tags) { - // don't set a multicombo value to 'yes' if it already has a non-'no' value - // e.g. `language:de=main` - var old = _tags[key]; - if (typeof old === 'string' && old.toLowerCase() !== 'no') return; - } - key = context.cleanTagKey(key); - field.keys.push(key); - t[key] = 'yes'; - }); - } else if (_isSemi) { - var arr = _multiData.map(function (d) { - return d.key; - }); + function hashtagHashtags() { + var matches = (tags.hashtags || '').split(/[,;\s]+/).map(function (s) { + if (s[0] !== '#') { + s = '#' + s; + } // prepend '#' - arr = arr.concat(vals); - t[field.key] = context.cleanTagValue(utilArrayUniq(arr).filter(Boolean).join(';')); - } - window.setTimeout(function () { - _input.node().focus(); - }, 10); - } else { - var rawValue = utilGetSetValue(_input); // don't override multiple values with blank string + var matched = s.match(hashtagRegex); + return matched && matched[0]; + }).filter(Boolean); // exclude falsy - if (!rawValue && Array.isArray(_tags[field.key])) return; - val = context.cleanTagValue(tagValue(rawValue)); - t[field.key] = val || undefined; + return matches || []; } - - dispatch$1.call('change', this, t); } - function removeMultikey(d3_event, d) { - d3_event.preventDefault(); - d3_event.stopPropagation(); - var t = {}; - - if (_isMulti) { - t[d.key] = undefined; - } else if (_isSemi) { - var arr = _multiData.map(function (md) { - return md.key === d.key ? null : md.key; - }).filter(Boolean); + function isReviewRequested(tags) { + var rr = tags.review_requested; + if (rr === undefined) return false; + rr = rr.trim().toLowerCase(); + return !(rr === '' || rr === 'no'); + } - arr = utilArrayUniq(arr); - t[field.key] = arr.length ? arr.join(';') : undefined; - } + function updateChangeset(changed, onInput) { + var tags = Object.assign({}, context.changeset.tags); // shallow copy - dispatch$1.call('change', this, t); - } + Object.keys(changed).forEach(function (k) { + var v = changed[k]; + k = context.cleanTagKey(k); + if (readOnlyTags.indexOf(k) !== -1) return; - function combo(selection) { - _container = selection.selectAll('.form-field-input-wrap').data([0]); - var type = _isMulti || _isSemi ? 'multicombo' : 'combo'; - _container = _container.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + type).merge(_container); + if (v === undefined) { + delete tags[k]; + } else if (onInput) { + tags[k] = v; + } else { + tags[k] = context.cleanTagValue(v); + } + }); - if (_isMulti || _isSemi) { - _container = _container.selectAll('.chiplist').data([0]); - var listClass = 'chiplist'; // Use a separate line for each value in the Destinations field - // to mimic highway exit signs + if (!onInput) { + // when changing the comment, override hashtags with any found in comment. + var commentOnly = changed.hasOwnProperty('comment') && changed.comment !== ''; + var arr = findHashtags(tags, commentOnly); - if (field.key === 'destination') { - listClass += ' full-line-chips'; + if (arr.length) { + tags.hashtags = context.cleanTagValue(arr.join(';')); + corePreferences('hashtags', tags.hashtags); + } else { + delete tags.hashtags; + corePreferences('hashtags', null); } + } // always update userdetails, just in case user reauthenticates as someone else - _container = _container.enter().append('ul').attr('class', listClass).on('click', function () { - window.setTimeout(function () { - _input.node().focus(); - }, 10); - }).merge(_container); - _inputWrap = _container.selectAll('.input-wrap').data([0]); - _inputWrap = _inputWrap.enter().append('li').attr('class', 'input-wrap').merge(_inputWrap); - _input = _inputWrap.selectAll('input').data([0]); - } else { - _input = _container.selectAll('input').data([0]); - } - _input = _input.enter().append('input').attr('type', 'text').attr('id', field.domId).call(utilNoAuto).call(initCombo, selection).merge(_input); + if (_userDetails && _userDetails.changesets_count !== undefined) { + var changesetsCount = parseInt(_userDetails.changesets_count, 10) + 1; // #4283 - if (_isNetwork) { - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); - _countryCode = countryCode && countryCode.toLowerCase(); - } + tags.changesets_count = String(changesetsCount); // first 100 edits - new user - _input.on('change', change).on('blur', change); + if (changesetsCount <= 100) { + var s; + s = corePreferences('walkthrough_completed'); - _input.on('keydown.field', function (d3_event) { - switch (d3_event.keyCode) { - case 13: - // â© Return - _input.node().blur(); // blurring also enters the value + if (s) { + tags['ideditor:walkthrough_completed'] = s; + } + s = corePreferences('walkthrough_progress'); - d3_event.stopPropagation(); - break; - } - }); + if (s) { + tags['ideditor:walkthrough_progress'] = s; + } - if (_isMulti || _isSemi) { - _combobox.on('accept', function () { - _input.node().blur(); + s = corePreferences('walkthrough_started'); - _input.node().focus(); - }); + if (s) { + tags['ideditor:walkthrough_started'] = s; + } + } + } else { + delete tags.changesets_count; + } - _input.on('focus', function () { - _container.classed('active', true); + if (!fastDeepEqual(context.changeset.tags, tags)) { + context.changeset = context.changeset.update({ + tags: tags }); } } - combo.tags = function (tags) { - _tags = tags; - - if (_isMulti || _isSemi) { - _multiData = []; - var maxLength; - - if (_isMulti) { - // Build _multiData array containing keys already set.. - for (var k in tags) { - if (field.key && k.indexOf(field.key) !== 0) continue; - if (!field.key && field.keys.indexOf(k) === -1) continue; - var v = tags[k]; - if (!v || typeof v === 'string' && v.toLowerCase() === 'no') continue; - var suffix = field.key ? k.substr(field.key.length) : k; + commit.reset = function () { + context.changeset = null; + }; - _multiData.push({ - key: k, - value: displayValue(suffix), - isMixed: Array.isArray(v) - }); - } + return utilRebind(commit, dispatch, 'on'); + } - if (field.key) { - // Set keys for form-field modified (needed for undo and reset buttons).. - field.keys = _multiData.map(function (d) { - return d.key; - }); // limit the input length so it fits after prepending the key prefix + // for punction see https://stackoverflow.com/a/21224179 - maxLength = context.maxCharsForTagKey() - utilUnicodeCharsCount(field.key); - } else { - maxLength = context.maxCharsForTagKey(); - } - } else if (_isSemi) { - var allValues = []; - var commonValues; + function simplify(str) { + if (typeof str !== 'string') return ''; + return diacritics.remove(str.replace(/&/g, 'and').replace(/Ä°/ig, 'i').replace(/[\s\-=_!"#%'*{},.\/:;?\(\)\[\]@\\$\^*+<>«»~`â\u00a1\u00a7\u00b6\u00b7\u00bf\u037e\u0387\u055a-\u055f\u0589\u05c0\u05c3\u05c6\u05f3\u05f4\u0609\u060a\u060c\u060d\u061b\u061e\u061f\u066a-\u066d\u06d4\u0700-\u070d\u07f7-\u07f9\u0830-\u083e\u085e\u0964\u0965\u0970\u0af0\u0df4\u0e4f\u0e5a\u0e5b\u0f04-\u0f12\u0f14\u0f85\u0fd0-\u0fd4\u0fd9\u0fda\u104a-\u104f\u10fb\u1360-\u1368\u166d\u166e\u16eb-\u16ed\u1735\u1736\u17d4-\u17d6\u17d8-\u17da\u1800-\u1805\u1807-\u180a\u1944\u1945\u1a1e\u1a1f\u1aa0-\u1aa6\u1aa8-\u1aad\u1b5a-\u1b60\u1bfc-\u1bff\u1c3b-\u1c3f\u1c7e\u1c7f\u1cc0-\u1cc7\u1cd3\u200b-\u200f\u2016\u2017\u2020-\u2027\u2030-\u2038\u203b-\u203e\u2041-\u2043\u2047-\u2051\u2053\u2055-\u205e\u2cf9-\u2cfc\u2cfe\u2cff\u2d70\u2e00\u2e01\u2e06-\u2e08\u2e0b\u2e0e-\u2e16\u2e18\u2e19\u2e1b\u2e1e\u2e1f\u2e2a-\u2e2e\u2e30-\u2e39\u3001-\u3003\u303d\u30fb\ua4fe\ua4ff\ua60d-\ua60f\ua673\ua67e\ua6f2-\ua6f7\ua874-\ua877\ua8ce\ua8cf\ua8f8-\ua8fa\ua92e\ua92f\ua95f\ua9c1-\ua9cd\ua9de\ua9df\uaa5c-\uaa5f\uaade\uaadf\uaaf0\uaaf1\uabeb\ufe10-\ufe16\ufe19\ufe30\ufe45\ufe46\ufe49-\ufe4c\ufe50-\ufe52\ufe54-\ufe57\ufe5f-\ufe61\ufe68\ufe6a\ufe6b\ufeff\uff01-\uff03\uff05-\uff07\uff0a\uff0c\uff0e\uff0f\uff1a\uff1b\uff1f\uff20\uff3c\uff61\uff64\uff65]+/g, '').toLowerCase()); + } - if (Array.isArray(tags[field.key])) { - tags[field.key].forEach(function (tagVal) { - var thisVals = utilArrayUniq((tagVal || '').split(';')).filter(Boolean); - allValues = allValues.concat(thisVals); + // `resolveStrings` + // Resolves the text strings for a given community index item + // + // Arguments + // `item`: Object containing the community index item + // `defaults`: Object containing the community index default strings + // `localizerFn?`: optional function we will call to do the localization. + // This function should be like the iD `t()` function that + // accepts a `stringID` and returns a localized string + // + // Returns + // An Object containing all the resolved strings: + // { + // name: 'talk-ru Mailing List', + // url: 'https://lists.openstreetmap.org/listinfo/talk-ru', + // signupUrl: 'https://example.url/signup', + // description: 'A one line description', + // extendedDescription: 'Extended description', + // nameHTML: 'the name', + // urlHTML: 'the url', + // signupUrlHTML: 'the signupUrl', + // descriptionHTML: the description, with urls and signupUrls linkified, + // extendedDescriptionHTML: the extendedDescription with urls and signupUrls linkified + // } + // - if (!commonValues) { - commonValues = thisVals; - } else { - commonValues = commonValues.filter(function (value) { - return thisVals.includes(value); - }); - } - }); - allValues = utilArrayUniq(allValues).filter(Boolean); - } else { - allValues = utilArrayUniq((tags[field.key] || '').split(';')).filter(Boolean); - commonValues = allValues; - } + function resolveStrings(item, defaults, localizerFn) { + var itemStrings = Object.assign({}, item.strings); // shallow clone - _multiData = allValues.map(function (v) { - return { - key: v, - value: displayValue(v), - isMixed: !commonValues.includes(v) - }; - }); - var currLength = utilUnicodeCharsCount(commonValues.join(';')); // limit the input length to the remaining available characters + var defaultStrings = Object.assign({}, defaults[item.type]); // shallow clone - maxLength = context.maxCharsForTagValue() - currLength; + var anyToken = new RegExp(/(\{\w+\})/, 'gi'); // Pre-localize the item and default strings - if (currLength > 0) { - // account for the separator if a new value will be appended to existing - maxLength -= 1; - } - } // a negative maxlength doesn't make sense + if (localizerFn) { + if (itemStrings.community) { + var communityID = simplify(itemStrings.community); + itemStrings.community = localizerFn("_communities.".concat(communityID)); + } + ['name', 'description', 'extendedDescription'].forEach(function (prop) { + if (defaultStrings[prop]) defaultStrings[prop] = localizerFn("_defaults.".concat(item.type, ".").concat(prop)); + if (itemStrings[prop]) itemStrings[prop] = localizerFn("".concat(item.id, ".").concat(prop)); + }); + } - maxLength = Math.max(0, maxLength); - var allowDragAndDrop = _isSemi // only semiCombo values are ordered - && !Array.isArray(tags[field.key]); // Exclude existing multikeys from combo options.. + var replacements = { + account: item.account, + community: itemStrings.community, + signupUrl: itemStrings.signupUrl, + url: itemStrings.url + }; // Resolve URLs first (which may refer to {account}) - var available = objectDifference(_comboData, _multiData); + if (!replacements.signupUrl) { + replacements.signupUrl = resolve(itemStrings.signupUrl || defaultStrings.signupUrl); + } - _combobox.data(available); // Hide 'Add' button if this field uses fixed set of - // translateable _optstrings and they're all currently used, - // or if the field is already at its character limit + if (!replacements.url) { + replacements.url = resolve(itemStrings.url || defaultStrings.url); + } + var resolved = { + name: resolve(itemStrings.name || defaultStrings.name), + url: resolve(itemStrings.url || defaultStrings.url), + signupUrl: resolve(itemStrings.signupUrl || defaultStrings.signupUrl), + description: resolve(itemStrings.description || defaultStrings.description), + extendedDescription: resolve(itemStrings.extendedDescription || defaultStrings.extendedDescription) + }; // Generate linkified strings - var hideAdd = _optstrings && !available.length || maxLength <= 0; + resolved.nameHTML = linkify(resolved.url, resolved.name); + resolved.urlHTML = linkify(resolved.url); + resolved.signupUrlHTML = linkify(resolved.signupUrl); + resolved.descriptionHTML = resolve(itemStrings.description || defaultStrings.description, true); + resolved.extendedDescriptionHTML = resolve(itemStrings.extendedDescription || defaultStrings.extendedDescription, true); + return resolved; - _container.selectAll('.chiplist .input-wrap').style('display', hideAdd ? 'none' : null); // Render chips + function resolve(s, addLinks) { + if (!s) return undefined; + var result = s; + for (var key in replacements) { + var token = "{".concat(key, "}"); + var regex = new RegExp(token, 'g'); - var chips = _container.selectAll('.chip').data(_multiData); + if (regex.test(result)) { + var replacement = replacements[key]; - chips.exit().remove(); - var enter = chips.enter().insert('li', '.input-wrap').attr('class', 'chip'); - enter.append('span'); - enter.append('a'); - chips = chips.merge(enter).order().classed('draggable', allowDragAndDrop).classed('mixed', function (d) { - return d.isMixed; - }).attr('title', function (d) { - return d.isMixed ? _t('inspector.unshared_value_tooltip') : null; - }); + if (!replacement) { + throw new Error("Cannot resolve token: ".concat(token)); + } else { + if (addLinks && (key === 'signupUrl' || key === 'url')) { + replacement = linkify(replacement); + } - if (allowDragAndDrop) { - registerDragAndDrop(chips); + result = result.replace(regex, replacement); + } } + } // There shouldn't be any leftover tokens in a resolved string - chips.select('span').html(function (d) { - return d.value; + + var leftovers = result.match(anyToken); + + if (leftovers) { + throw new Error("Cannot resolve tokens: ".concat(leftovers)); + } // Linkify subreddits like `/r/openstreetmap` + // https://github.com/osmlab/osm-community-index/issues/82 + // https://github.com/openstreetmap/iD/issues/4997 + + + if (addLinks && item.type === 'reddit') { + result = result.replace(/(\/r\/\w+\/*)/i, function (match) { + return linkify(resolved.url, match); }); - chips.select('a').attr('href', '#').on('click', removeMultikey).attr('class', 'remove').html('Ã'); - } else { - var isMixed = Array.isArray(tags[field.key]); - var mixedValues = isMixed && tags[field.key].map(function (val) { - return displayValue(val); - }).filter(Boolean); - utilGetSetValue(_input, !isMixed ? displayValue(tags[field.key]) : '').attr('title', isMixed ? mixedValues.join('\n') : undefined).attr('placeholder', isMixed ? _t('inspector.multiple_values') : _staticPlaceholder || '').classed('mixed', isMixed); } - }; - - function registerDragAndDrop(selection) { - // allow drag and drop re-ordering of chips - var dragOrigin, targetIndex; - selection.call(d3_drag().on('start', function (d3_event) { - dragOrigin = { - x: d3_event.x, - y: d3_event.y - }; - targetIndex = null; - }).on('drag', function (d3_event) { - var x = d3_event.x - dragOrigin.x, - y = d3_event.y - dragOrigin.y; - if (!select(this).classed('dragging') && // don't display drag until dragging beyond a distance threshold - Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) <= 5) return; - var index = selection.nodes().indexOf(this); - select(this).classed('dragging', true); - targetIndex = null; - var targetIndexOffsetTop = null; - var draggedTagWidth = select(this).node().offsetWidth; - if (field.key === 'destination') { - // meaning tags are full width - _container.selectAll('.chip').style('transform', function (d2, index2) { - var node = select(this).node(); + return result; + } - if (index === index2) { - return 'translate(' + x + 'px, ' + y + 'px)'; // move the dragged tag up the order - } else if (index2 > index && d3_event.y > node.offsetTop) { - if (targetIndex === null || index2 > targetIndex) { - targetIndex = index2; - } + function linkify(url, text) { + if (!url) return undefined; + text = text || url; + return "").concat(text, ""); + } + } - return 'translateY(-100%)'; // move the dragged tag down the order - } else if (index2 < index && d3_event.y < node.offsetTop + node.offsetHeight) { - if (targetIndex === null || index2 < targetIndex) { - targetIndex = index2; - } + var _oci = null; + function uiSuccess(context) { + var MAXEVENTS = 2; + var dispatch = dispatch$8('cancel'); - return 'translateY(100%)'; - } + var _changeset; - return null; - }); - } else { - _container.selectAll('.chip').each(function (d2, index2) { - var node = select(this).node(); // check the cursor is in the bounding box + var _location; - if (index !== index2 && d3_event.x < node.offsetLeft + node.offsetWidth + 5 && d3_event.x > node.offsetLeft && d3_event.y < node.offsetTop + node.offsetHeight && d3_event.y > node.offsetTop) { - targetIndex = index2; - targetIndexOffsetTop = node.offsetTop; - } - }).style('transform', function (d2, index2) { - var node = select(this).node(); + ensureOSMCommunityIndex(); // start fetching the data - if (index === index2) { - return 'translate(' + x + 'px, ' + y + 'px)'; - } // only translate tags in the same row + function ensureOSMCommunityIndex() { + var data = _mainFileFetcher; + return Promise.all([data.get('oci_features'), data.get('oci_resources'), data.get('oci_defaults')]).then(function (vals) { + if (_oci) return _oci; // Merge Custom Features + if (vals[0] && Array.isArray(vals[0].features)) { + _mainLocations.mergeCustomGeoJSON(vals[0]); + } - if (node.offsetTop === targetIndexOffsetTop) { - if (index2 < index && index2 >= targetIndex) { - return 'translateX(' + draggedTagWidth + 'px)'; - } else if (index2 > index && index2 <= targetIndex) { - return 'translateX(-' + draggedTagWidth + 'px)'; - } - } + var ociResources = Object.values(vals[1].resources); - return null; + if (ociResources.length) { + // Resolve all locationSet features. + return _mainLocations.mergeLocationSets(ociResources).then(function () { + _oci = { + resources: ociResources, + defaults: vals[2].defaults + }; + return _oci; }); + } else { + _oci = { + resources: [], + // no resources? + defaults: vals[2].defaults + }; + return _oci; } - }).on('end', function () { - if (!select(this).classed('dragging')) { - return; - } + }); + } // string-to-date parsing in JavaScript is weird - var index = selection.nodes().indexOf(this); - select(this).classed('dragging', false); - _container.selectAll('.chip').style('transform', null); + function parseEventDate(when) { + if (!when) return; + var raw = when.trim(); + if (!raw) return; - if (typeof targetIndex === 'number') { - var element = _multiData[index]; + if (!/Z$/.test(raw)) { + // if no trailing 'Z', add one + raw += 'Z'; // this forces date to be parsed as a UTC date + } - _multiData.splice(index, 1); + var parsed = new Date(raw); + return new Date(parsed.toUTCString().substr(0, 25)); // convert to local timezone + } - _multiData.splice(targetIndex, 0, element); + function success(selection) { + var header = selection.append('div').attr('class', 'header fillL'); + header.append('h3').html(_t.html('success.just_edited')); + header.append('button').attr('class', 'close').on('click', function () { + return dispatch.call('cancel'); + }).call(svgIcon('#iD-icon-close')); + var body = selection.append('div').attr('class', 'body save-success fillL'); + var summary = body.append('div').attr('class', 'save-summary'); + summary.append('h3').html(_t.html('success.thank_you' + (_location ? '_location' : ''), { + where: _location + })); + summary.append('p').html(_t.html('success.help_html')).append('a').attr('class', 'link-out').attr('target', '_blank').attr('href', _t('success.help_link_url')).call(svgIcon('#iD-icon-out-link', 'inline')).append('span').html(_t.html('success.help_link_text')); + var osm = context.connection(); + if (!osm) return; + var changesetURL = osm.changesetURL(_changeset.id); + var table = summary.append('table').attr('class', 'summary-table'); + var row = table.append('tr').attr('class', 'summary-row'); + row.append('td').attr('class', 'cell-icon summary-icon').append('a').attr('target', '_blank').attr('href', changesetURL).append('svg').attr('class', 'logo-small').append('use').attr('xlink:href', '#iD-logo-osm'); + var summaryDetail = row.append('td').attr('class', 'cell-detail summary-detail'); + summaryDetail.append('a').attr('class', 'cell-detail summary-view-on-osm').attr('target', '_blank').attr('href', changesetURL).html(_t.html('success.view_on_osm')); + summaryDetail.append('div').html(_t.html('success.changeset_id', { + changeset_id: "").concat(_changeset.id, "") + })); // Get OSM community index features intersecting the map.. - var t = {}; + ensureOSMCommunityIndex().then(function (oci) { + var loc = context.map().center(); + var validLocations = _mainLocations.locationsAt(loc); // Gather the communities - if (_multiData.length) { - t[field.key] = _multiData.map(function (element) { - return element.key; - }).join(';'); - } else { - t[field.key] = undefined; - } + var communities = []; + oci.resources.forEach(function (resource) { + var area = validLocations[resource.locationSetID]; + if (!area) return; // Resolve strings - dispatch$1.call('change', this, t); - } + var localizer = function localizer(stringID) { + return _t.html("community.".concat(stringID)); + }; - dragOrigin = undefined; - targetIndex = undefined; - })); + resource.resolved = resolveStrings(resource, oci.defaults, localizer); + communities.push({ + area: area, + order: resource.order || 0, + resource: resource + }); + }); // sort communities by feature area ascending, community order descending + + communities.sort(function (a, b) { + return a.area - b.area || b.order - a.order; + }); + body.call(showCommunityLinks, communities.map(function (c) { + return c.resource; + })); + }); } - combo.focus = function () { - _input.node().focus(); - }; + function showCommunityLinks(selection, resources) { + var communityLinks = selection.append('div').attr('class', 'save-communityLinks'); + communityLinks.append('h3').html(_t.html('success.like_osm')); + var table = communityLinks.append('table').attr('class', 'community-table'); + var row = table.selectAll('.community-row').data(resources); + var rowEnter = row.enter().append('tr').attr('class', 'community-row'); + rowEnter.append('td').attr('class', 'cell-icon community-icon').append('a').attr('target', '_blank').attr('href', function (d) { + return d.resolved.url; + }).append('svg').attr('class', 'logo-small').append('use').attr('xlink:href', function (d) { + return "#community-".concat(d.type); + }); + var communityDetail = rowEnter.append('td').attr('class', 'cell-detail community-detail'); + communityDetail.each(showCommunityDetails); + communityLinks.append('div').attr('class', 'community-missing').html(_t.html('success.missing')).append('a').attr('class', 'link-out').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).attr('href', 'https://github.com/osmlab/osm-community-index/issues').append('span').html(_t.html('success.tell_us')); + } - combo.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return combo; - }; + function showCommunityDetails(d) { + var selection = select(this); + var communityID = d.id; + selection.append('div').attr('class', 'community-name').html(d.resolved.nameHTML); + selection.append('div').attr('class', 'community-description').html(d.resolved.descriptionHTML); // Create an expanding section if any of these are present.. - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + if (d.resolved.extendedDescriptionHTML || d.languageCodes && d.languageCodes.length) { + selection.append('div').call(uiDisclosure(context, "community-more-".concat(d.id), false).expanded(false).updatePreference(false).label(_t.html('success.more')).content(showMore)); + } - return utilRebind(combo, dispatch$1, 'on'); - } + var nextEvents = (d.events || []).map(function (event) { + event.date = parseEventDate(event.when); + return event; + }).filter(function (event) { + // date is valid and future (or today) + var t = event.date.getTime(); + var now = new Date().setHours(0, 0, 0, 0); + return !isNaN(t) && t >= now; + }).sort(function (a, b) { + // sort by date ascending + return a.date < b.date ? -1 : a.date > b.date ? 1 : 0; + }).slice(0, MAXEVENTS); // limit number of events shown - function uiFieldText(field, context) { - var dispatch$1 = dispatch('change'); - var input = select(null); - var outlinkButton = select(null); - var _entityIDs = []; + if (nextEvents.length) { + selection.append('div').call(uiDisclosure(context, "community-events-".concat(d.id), false).expanded(false).updatePreference(false).label(_t.html('success.events')).content(showNextEvents)).select('.hide-toggle').append('span').attr('class', 'badge-text').html(nextEvents.length); + } - var _tags; + function showMore(selection) { + var more = selection.selectAll('.community-more').data([0]); + var moreEnter = more.enter().append('div').attr('class', 'community-more'); - var _phoneFormats = {}; + if (d.resolved.extendedDescriptionHTML) { + moreEnter.append('div').attr('class', 'community-extended-description').html(d.resolved.extendedDescriptionHTML); + } - if (field.type === 'tel') { - _mainFileFetcher.get('phone_formats').then(function (d) { - _phoneFormats = d; - updatePhonePlaceholder(); - })["catch"](function () { - /* ignore */ - }); - } + if (d.languageCodes && d.languageCodes.length) { + var languageList = d.languageCodes.map(function (code) { + return _mainLocalizer.languageName(code); + }).join(', '); + moreEnter.append('div').attr('class', 'community-languages').html(_t.html('success.languages', { + languages: languageList + })); + } + } - function i(selection) { - var entity = _entityIDs.length && context.hasEntity(_entityIDs[0]); - var preset = entity && _mainPresetIndex.match(entity, context.graph()); - var isLocked = preset && preset.suggestion && field.id === 'brand'; - field.locked(isLocked); - var wrap = selection.selectAll('.form-field-input-wrap').data([0]); - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - input = wrap.selectAll('input').data([0]); - input = input.enter().append('input').attr('type', field.type === 'identifier' ? 'text' : field.type).attr('id', field.domId).classed(field.type, true).call(utilNoAuto).merge(input); - input.classed('disabled', !!isLocked).attr('readonly', isLocked || null).on('input', change(true)).on('blur', change()).on('change', change()); + function showNextEvents(selection) { + var events = selection.append('div').attr('class', 'community-events'); + var item = events.selectAll('.community-event').data(nextEvents); + var itemEnter = item.enter().append('div').attr('class', 'community-event'); + itemEnter.append('div').attr('class', 'community-event-name').append('a').attr('target', '_blank').attr('href', function (d) { + return d.url; + }).html(function (d) { + var name = d.name; - if (field.type === 'tel') { - updatePhonePlaceholder(); - } else if (field.type === 'number') { - var rtl = _mainLocalizer.textDirection() === 'rtl'; - input.attr('type', 'text'); - var inc = field.increment; - var buttons = wrap.selectAll('.increment, .decrement').data(rtl ? [inc, -inc] : [-inc, inc]); - buttons.enter().append('button').attr('class', function (d) { - var which = d > 0 ? 'increment' : 'decrement'; - return 'form-field-button ' + which; - }).merge(buttons).on('click', function (d3_event, d) { - d3_event.preventDefault(); - var raw_vals = input.node().value || '0'; - var vals = raw_vals.split(';'); - vals = vals.map(function (v) { - var num = parseFloat(v.trim(), 10); - return isFinite(num) ? clamped(num + d) : v.trim(); - }); - input.node().value = vals.join(';'); - change()(); + if (d.i18n && d.id) { + name = _t("community.".concat(communityID, ".events.").concat(d.id, ".name"), { + "default": name + }); + } + + return name; }); - } else if (field.type === 'identifier' && field.urlFormat && field.pattern) { - input.attr('type', 'text'); - outlinkButton = wrap.selectAll('.foreign-id-permalink').data([0]); - outlinkButton.enter().append('button').call(svgIcon('#iD-icon-out-link')).attr('class', 'form-field-button foreign-id-permalink').attr('title', function () { - var domainResults = /^https?:\/\/(.{1,}?)\//.exec(field.urlFormat); + itemEnter.append('div').attr('class', 'community-event-when').html(function (d) { + var options = { + weekday: 'short', + day: 'numeric', + month: 'short', + year: 'numeric' + }; - if (domainResults.length >= 2 && domainResults[1]) { - var domain = domainResults[1]; - return _t('icons.view_on', { - domain: domain + if (d.date.getHours() || d.date.getMinutes()) { + // include time if it has one + options.hour = 'numeric'; + options.minute = 'numeric'; + } + + return d.date.toLocaleString(_mainLocalizer.localeCode(), options); + }); + itemEnter.append('div').attr('class', 'community-event-where').html(function (d) { + var where = d.where; + + if (d.i18n && d.id) { + where = _t("community.".concat(communityID, ".events.").concat(d.id, ".where"), { + "default": where }); } - return ''; - }).on('click', function (d3_event) { - d3_event.preventDefault(); - var value = validIdentifierValueForLink(); + return where; + }); + itemEnter.append('div').attr('class', 'community-event-description').html(function (d) { + var description = d.description; - if (value) { - var url = field.urlFormat.replace(/{value}/, encodeURIComponent(value)); - window.open(url, '_blank'); + if (d.i18n && d.id) { + description = _t("community.".concat(communityID, ".events.").concat(d.id, ".description"), { + "default": description + }); } - }).merge(outlinkButton); + + return description; + }); } } - function updatePhonePlaceholder() { - if (input.empty() || !Object.keys(_phoneFormats).length) return; - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); + success.changeset = function (val) { + if (!arguments.length) return _changeset; + _changeset = val; + return success; + }; - var format = countryCode && _phoneFormats[countryCode.toLowerCase()]; + success.location = function (val) { + if (!arguments.length) return _location; + _location = val; + return success; + }; - if (format) input.attr('placeholder', format); - } + return utilRebind(success, dispatch, 'on'); + } - function validIdentifierValueForLink() { - if (field.type === 'identifier' && field.pattern) { - var value = utilGetSetValue(input).trim().split(';')[0]; - return value && value.match(new RegExp(field.pattern)); - } + function modeSave(context) { + var mode = { + id: 'save' + }; + var keybinding = utilKeybinding('modeSave'); + var commit = uiCommit(context).on('cancel', cancel); - return null; - } // clamp number to min/max + var _conflictsUi; // uiConflicts - function clamped(num) { - if (field.minValue !== undefined) { - num = Math.max(num, field.minValue); - } + var _location; - if (field.maxValue !== undefined) { - num = Math.min(num, field.maxValue); - } + var _success; - return num; + var uploader = context.uploader().on('saveStarted.modeSave', function () { + keybindingOff(); + }) // fire off some async work that we want to be ready later + .on('willAttemptUpload.modeSave', prepareForSuccess).on('progressChanged.modeSave', showProgress).on('resultNoChanges.modeSave', function () { + cancel(); + }).on('resultErrors.modeSave', showErrors).on('resultConflicts.modeSave', showConflicts).on('resultSuccess.modeSave', showSuccess); + + function cancel() { + context.enter(modeBrowse(context)); } - function change(onInput) { - return function () { - var t = {}; - var val = utilGetSetValue(input); - if (!onInput) val = context.cleanTagValue(val); // don't override multiple values with blank string + function showProgress(num, total) { + var modal = context.container().select('.loading-modal .modal-section'); + var progress = modal.selectAll('.progress').data([0]); // enter/update - if (!val && Array.isArray(_tags[field.key])) return; + progress.enter().append('div').attr('class', 'progress').merge(progress).text(_t('save.conflict_progress', { + num: num, + total: total + })); + } - if (!onInput) { - if (field.type === 'number' && val) { - var vals = val.split(';'); - vals = vals.map(function (v) { - var num = parseFloat(v.trim(), 10); - return isFinite(num) ? clamped(num) : v.trim(); - }); - val = vals.join(';'); - } + function showConflicts(changeset, conflicts, origChanges) { + var selection = context.container().select('.sidebar').append('div').attr('class', 'sidebar-component'); + context.container().selectAll('.main-content').classed('active', true).classed('inactive', false); + _conflictsUi = uiConflicts(context).conflictList(conflicts).origChanges(origChanges).on('cancel', function () { + context.container().selectAll('.main-content').classed('active', false).classed('inactive', true); + selection.remove(); + keybindingOn(); + uploader.cancelConflictResolution(); + }).on('save', function () { + context.container().selectAll('.main-content').classed('active', false).classed('inactive', true); + selection.remove(); + uploader.processResolvedConflicts(changeset); + }); + selection.call(_conflictsUi); + } + + function showErrors(errors) { + keybindingOn(); + var selection = uiConfirm(context.container()); + selection.select('.modal-section.header').append('h3').text(_t('save.error')); + addErrors(selection, errors); + selection.okButton(); + } + + function addErrors(selection, data) { + var message = selection.select('.modal-section.message-text'); + var items = message.selectAll('.error-container').data(data); + var enter = items.enter().append('div').attr('class', 'error-container'); + enter.append('a').attr('class', 'error-description').attr('href', '#').classed('hide-toggle', true).text(function (d) { + return d.msg || _t('save.unknown_error_details'); + }).on('click', function (d3_event) { + d3_event.preventDefault(); + var error = select(this); + var detail = select(this.nextElementSibling); + var exp = error.classed('expanded'); + detail.style('display', exp ? 'none' : 'block'); + error.classed('expanded', !exp); + }); + var details = enter.append('div').attr('class', 'error-detail-container').style('display', 'none'); + details.append('ul').attr('class', 'error-detail-list').selectAll('li').data(function (d) { + return d.details || []; + }).enter().append('li').attr('class', 'error-detail-item').text(function (d) { + return d; + }); + items.exit().remove(); + } + + function showSuccess(changeset) { + commit.reset(); + + var ui = _success.changeset(changeset).location(_location).on('cancel', function () { + context.ui().sidebar.hide(); + }); + + context.enter(modeBrowse(context).sidebar(ui)); + } + + function keybindingOn() { + select(document).call(keybinding.on('â', cancel, true)); + } + + function keybindingOff() { + select(document).call(keybinding.unbind); + } // Reverse geocode current map location so we can display a message on + // the success screen like "Thank you for editing around place, region." - utilGetSetValue(input, val); - } - t[field.key] = val || undefined; - dispatch$1.call('change', this, t, onInput); - }; + function prepareForSuccess() { + _success = uiSuccess(context); + _location = null; + if (!services.geocoder) return; + services.geocoder.reverse(context.map().center(), function (err, result) { + if (err || !result || !result.address) return; + var addr = result.address; + var place = addr && (addr.town || addr.city || addr.county) || ''; + var region = addr && (addr.state || addr.country) || ''; + var separator = place && region ? _t('success.thank_you_where.separator') : ''; + _location = _t('success.thank_you_where.format', { + place: place, + separator: separator, + region: region + }); + }); } - i.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return i; + mode.selectedIDs = function () { + return _conflictsUi ? _conflictsUi.shownEntityIds() : []; }; - i.tags = function (tags) { - _tags = tags; - var isMixed = Array.isArray(tags[field.key]); - utilGetSetValue(input, !isMixed && tags[field.key] ? tags[field.key] : '').attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined).attr('placeholder', isMixed ? _t('inspector.multiple_values') : field.placeholder() || _t('inspector.unknown')).classed('mixed', isMixed); + mode.enter = function () { + // Show sidebar + context.ui().sidebar.expand(); - if (outlinkButton && !outlinkButton.empty()) { - var disabled = !validIdentifierValueForLink(); - outlinkButton.classed('disabled', disabled); + function done() { + context.ui().sidebar.show(commit); } - }; - i.focus = function () { - var node = input.node(); - if (node) node.focus(); + keybindingOn(); + context.container().selectAll('.main-content').classed('active', false).classed('inactive', true); + var osm = context.connection(); + + if (!osm) { + cancel(); + return; + } + + if (osm.authenticated()) { + done(); + } else { + osm.authenticate(function (err) { + if (err) { + cancel(); + } else { + done(); + } + }); + } }; - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + mode.exit = function () { + keybindingOff(); + context.container().selectAll('.main-content').classed('active', true).classed('inactive', false); + context.ui().sidebar.hide(); + }; - return utilRebind(i, dispatch$1, 'on'); + return mode; } - function uiFieldAccess(field, context) { - var dispatch$1 = dispatch('change'); - var items = select(null); + function modeSelectError(context, selectedErrorID, selectedErrorService) { + var mode = { + id: 'select-error', + button: 'browse' + }; + var keybinding = utilKeybinding('select-error'); + var errorService = services[selectedErrorService]; + var errorEditor; - var _tags; + switch (selectedErrorService) { + case 'improveOSM': + errorEditor = uiImproveOsmEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - function access(selection) { - var wrap = selection.selectAll('.form-field-input-wrap').data([0]); - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - var list = wrap.selectAll('ul').data([0]); - list = list.enter().append('ul').attr('class', 'rows').merge(list); - items = list.selectAll('li').data(field.keys); // Enter + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); + }); + break; - var enter = items.enter().append('li').attr('class', function (d) { - return 'labeled-input preset-access-' + d; - }); - enter.append('span').attr('class', 'label preset-label-access').attr('for', function (d) { - return 'preset-input-access-' + d; - }).html(function (d) { - return field.t.html('types.' + d); - }); - enter.append('div').attr('class', 'preset-input-access-wrap').append('input').attr('type', 'text').attr('class', function (d) { - return 'preset-input-access preset-input-access-' + d; - }).call(utilNoAuto).each(function (d) { - select(this).call(uiCombobox(context, 'access-' + d).data(access.options(d))); - }); // Update + case 'keepRight': + errorEditor = uiKeepRightEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - items = items.merge(enter); - wrap.selectAll('.preset-input-access').on('change', change).on('blur', change); - } + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); + }); + break; - function change(d3_event, d) { - var tag = {}; - var value = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string + case 'osmose': + errorEditor = uiOsmoseEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - if (!value && typeof _tags[d] !== 'string') return; - tag[d] = value || undefined; - dispatch$1.call('change', this, tag); + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); + }); + break; } - access.options = function (type) { - var options = ['no', 'permissive', 'private', 'permit', 'destination']; + var behaviors = [behaviorBreathe(), behaviorHover(context), behaviorSelect(context), behaviorLasso(context), modeDragNode(context).behavior, modeDragNote(context).behavior]; - if (type !== 'access') { - options.unshift('yes'); - options.push('designated'); + function checkSelectedID() { + if (!errorService) return; + var error = errorService.getError(selectedErrorID); - if (type === 'bicycle') { - options.push('dismount'); - } + if (!error) { + context.enter(modeBrowse(context)); } - return options.map(function (option) { - return { - title: field.t('options.' + option + '.description'), - value: option - }; - }); - }; + return error; + } - var placeholdersByHighway = { - footway: { - foot: 'designated', - motor_vehicle: 'no' - }, - steps: { - foot: 'yes', - motor_vehicle: 'no', - bicycle: 'no', - horse: 'no' - }, - pedestrian: { - foot: 'yes', - motor_vehicle: 'no' - }, - cycleway: { - motor_vehicle: 'no', - bicycle: 'designated' - }, - bridleway: { - motor_vehicle: 'no', - horse: 'designated' - }, - path: { - foot: 'yes', - motor_vehicle: 'no', - bicycle: 'yes', - horse: 'yes' - }, - motorway: { - foot: 'no', - motor_vehicle: 'yes', - bicycle: 'no', - horse: 'no' - }, - trunk: { - motor_vehicle: 'yes' - }, - primary: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - secondary: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - tertiary: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - residential: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - unclassified: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - service: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - motorway_link: { - foot: 'no', - motor_vehicle: 'yes', - bicycle: 'no', - horse: 'no' - }, - trunk_link: { - motor_vehicle: 'yes' - }, - primary_link: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - secondary_link: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' - }, - tertiary_link: { - foot: 'yes', - motor_vehicle: 'yes', - bicycle: 'yes', - horse: 'yes' + mode.zoomToSelected = function () { + if (!errorService) return; + var error = errorService.getError(selectedErrorID); + + if (error) { + context.map().centerZoomEase(error.loc, 20); } }; - access.tags = function (tags) { - _tags = tags; - utilGetSetValue(items.selectAll('.preset-input-access'), function (d) { - return typeof tags[d] === 'string' ? tags[d] : ''; - }).classed('mixed', function (d) { - return tags[d] && Array.isArray(tags[d]); - }).attr('title', function (d) { - return tags[d] && Array.isArray(tags[d]) && tags[d].filter(Boolean).join('\n'); - }).attr('placeholder', function (d) { - if (tags[d] && Array.isArray(tags[d])) { - return _t('inspector.multiple_values'); - } - - if (d === 'access') { - return 'yes'; - } + mode.enter = function () { + var error = checkSelectedID(); + if (!error) return; + behaviors.forEach(context.install); + keybinding.on(_t('inspector.zoom_to.key'), mode.zoomToSelected).on('â', esc, true); + select(document).call(keybinding); + selectError(); + var sidebar = context.ui().sidebar; + sidebar.show(errorEditor.error(error)); + context.map().on('drawn.select-error', selectError); // class the error as selected, or return to browse mode if the error is gone - if (tags.access && typeof tags.access === 'string') { - return tags.access; - } + function selectError(d3_event, drawn) { + if (!checkSelectedID()) return; + var selection = context.surface().selectAll('.itemId-' + selectedErrorID + '.' + selectedErrorService); - if (tags.highway) { - if (typeof tags.highway === 'string') { - if (placeholdersByHighway[tags.highway] && placeholdersByHighway[tags.highway][d]) { - return placeholdersByHighway[tags.highway][d]; - } - } else { - var impliedAccesses = tags.highway.filter(Boolean).map(function (highwayVal) { - return placeholdersByHighway[highwayVal] && placeholdersByHighway[highwayVal][d]; - }).filter(Boolean); + if (selection.empty()) { + // Return to browse mode if selected DOM elements have + // disappeared because the user moved them out of view.. + var source = d3_event && d3_event.type === 'zoom' && d3_event.sourceEvent; - if (impliedAccesses.length === tags.highway.length && new Set(impliedAccesses).size === 1) { - // if all the highway values have the same implied access for this type then use that - return impliedAccesses[0]; - } + if (drawn && source && (source.type === 'pointermove' || source.type === 'mousemove' || source.type === 'touchmove')) { + context.enter(modeBrowse(context)); } + } else { + selection.classed('selected', true); + context.selectedErrorID(selectedErrorID); } + } - return field.placeholder(); - }); + function esc() { + if (context.container().select('.combobox').size()) return; + context.enter(modeBrowse(context)); + } }; - access.focus = function () { - items.selectAll('.preset-input-access').node().focus(); + mode.exit = function () { + behaviors.forEach(context.uninstall); + select(document).call(keybinding.unbind); + context.surface().selectAll('.qaItem.selected').classed('selected hover', false); + context.map().on('drawn.select-error', null); + context.ui().sidebar.hide(); + context.selectedErrorID(null); + context.features().forceVisible([]); }; - return utilRebind(access, dispatch$1, 'on'); + return mode; } - function uiFieldAddress(field, context) { - var dispatch$1 = dispatch('change'); - - var _selection = select(null); - - var _wrap = select(null); - - var addrField = _mainPresetIndex.field('address'); // needed for placeholder strings - - var _entityIDs = []; - - var _tags; - - var _countryCode; - - var _addressFormats = [{ - format: [['housenumber', 'street'], ['city', 'postcode']] - }]; - _mainFileFetcher.get('address_formats').then(function (d) { - _addressFormats = d; - - if (!_selection.empty()) { - _selection.call(address); - } - })["catch"](function () { - /* ignore */ - }); + function uiToolOldDrawModes(context) { + var tool = { + id: 'old_modes', + label: _t.html('toolbar.add_feature') + }; + var modes = [modeAddPoint(context, { + title: _t.html('modes.add_point.title'), + button: 'point', + description: _t.html('modes.add_point.description'), + preset: _mainPresetIndex.item('point'), + key: '1' + }), modeAddLine(context, { + title: _t.html('modes.add_line.title'), + button: 'line', + description: _t.html('modes.add_line.description'), + preset: _mainPresetIndex.item('line'), + key: '2' + }), modeAddArea(context, { + title: _t.html('modes.add_area.title'), + button: 'area', + description: _t.html('modes.add_area.description'), + preset: _mainPresetIndex.item('area'), + key: '3' + })]; - function getNearStreets() { - var extent = combinedEntityExtent(); - var l = extent.center(); - var box = geoExtent(l).padByMeters(200); - var streets = context.history().intersects(box).filter(isAddressable).map(function (d) { - var loc = context.projection([(extent[0][0] + extent[1][0]) / 2, (extent[0][1] + extent[1][1]) / 2]); - var choice = geoChooseEdge(context.graph().childNodes(d), loc, context.projection); - return { - title: d.tags.name, - value: d.tags.name, - dist: choice.distance - }; - }).sort(function (a, b) { - return a.dist - b.dist; - }); - return utilArrayUniqBy(streets, 'value'); + function enabled() { + return osmEditable(); + } - function isAddressable(d) { - return d.tags.highway && d.tags.name && d.type === 'way'; - } + function osmEditable() { + return context.editable(); } - function getNearCities() { - var extent = combinedEntityExtent(); - var l = extent.center(); - var box = geoExtent(l).padByMeters(200); - var cities = context.history().intersects(box).filter(isAddressable).map(function (d) { - return { - title: d.tags['addr:city'] || d.tags.name, - value: d.tags['addr:city'] || d.tags.name, - dist: geoSphericalDistance(d.extent(context.graph()).center(), l) - }; - }).sort(function (a, b) { - return a.dist - b.dist; - }); - return utilArrayUniqBy(cities, 'value'); + modes.forEach(function (mode) { + context.keybinding().on(mode.key, function () { + if (!enabled()) return; - function isAddressable(d) { - if (d.tags.name) { - if (d.tags.admin_level === '8' && d.tags.boundary === 'administrative') return true; - if (d.tags.border_type === 'city') return true; - if (d.tags.place === 'city' || d.tags.place === 'town' || d.tags.place === 'village') return true; + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); } - - if (d.tags['addr:city']) return true; - return false; - } - } - - function getNearValues(key) { - var extent = combinedEntityExtent(); - var l = extent.center(); - var box = geoExtent(l).padByMeters(200); - var results = context.history().intersects(box).filter(function hasTag(d) { - return _entityIDs.indexOf(d.id) === -1 && d.tags[key]; - }).map(function (d) { - return { - title: d.tags[key], - value: d.tags[key], - dist: geoSphericalDistance(d.extent(context.graph()).center(), l) - }; - }).sort(function (a, b) { - return a.dist - b.dist; }); - return utilArrayUniqBy(results, 'value'); - } + }); - function updateForCountryCode() { - if (!_countryCode) return; - var addressFormat; + tool.render = function (selection) { + var wrap = selection.append('div').attr('class', 'joined').style('display', 'flex'); - for (var i = 0; i < _addressFormats.length; i++) { - var format = _addressFormats[i]; + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - if (!format.countryCodes) { - addressFormat = format; // choose the default format, keep going - } else if (format.countryCodes.indexOf(_countryCode) !== -1) { - addressFormat = format; // choose the country format, stop here + context.map().on('move.modes', debouncedUpdate).on('drawn.modes', debouncedUpdate); + context.on('enter.modes', update); + update(); - break; - } - } + function update() { + var buttons = wrap.selectAll('button.add-button').data(modes, function (d) { + return d.id; + }); // exit - var dropdowns = addressFormat.dropdowns || ['city', 'county', 'country', 'district', 'hamlet', 'neighbourhood', 'place', 'postcode', 'province', 'quarter', 'state', 'street', 'subdistrict', 'suburb']; - var widths = addressFormat.widths || { - housenumber: 1 / 3, - street: 2 / 3, - city: 2 / 3, - state: 1 / 4, - postcode: 1 / 3 - }; + buttons.exit().remove(); // enter - function row(r) { - // Normalize widths. - var total = r.reduce(function (sum, key) { - return sum + (widths[key] || 0.5); - }, 0); - return r.map(function (key) { - return { - id: key, - width: (widths[key] || 0.5) / total - }; - }); - } + var buttonsEnter = buttons.enter().append('button').attr('class', function (d) { + return d.id + ' add-button bar-button'; + }).on('click.mode-buttons', function (d3_event, d) { + if (!enabled()) return; // When drawing, ignore accidental clicks on mode buttons - #4042 - var rows = _wrap.selectAll('.addr-row').data(addressFormat.format, function (d) { - return d.toString(); - }); + var currMode = context.mode().id; + if (/^draw/.test(currMode)) return; - rows.exit().remove(); - rows.enter().append('div').attr('class', 'addr-row').selectAll('input').data(row).enter().append('input').property('type', 'text').call(updatePlaceholder).attr('class', function (d) { - return 'addr-' + d.id; - }).call(utilNoAuto).each(addDropdown).style('width', function (d) { - return d.width * 100 + '%'; - }); + if (d.id === currMode) { + context.enter(modeBrowse(context)); + } else { + context.enter(d); + } + }).call(uiTooltip().placement('bottom').title(function (d) { + return d.description; + }).keys(function (d) { + return [d.key]; + }).scrollContainer(context.container().select('.top-toolbar'))); + buttonsEnter.each(function (d) { + select(this).call(svgIcon('#iD-icon-' + d.button)); + }); + buttonsEnter.append('span').attr('class', 'label').html(function (mode) { + return mode.title; + }); // if we are adding/removing the buttons, check if toolbar has overflowed - function addDropdown(d) { - if (dropdowns.indexOf(d.id) === -1) return; // not a dropdown + if (buttons.enter().size() || buttons.exit().size()) { + context.ui().checkOverflow('.top-toolbar', true); + } // update - var nearValues = d.id === 'street' ? getNearStreets : d.id === 'city' ? getNearCities : getNearValues; - select(this).call(uiCombobox(context, 'address-' + d.id).minItems(1).caseSensitive(true).fetcher(function (value, callback) { - callback(nearValues('addr:' + d.id)); - })); + + buttons = buttons.merge(buttonsEnter).classed('disabled', function (d) { + return !enabled(); + }).classed('active', function (d) { + return context.mode() && context.mode().button === d.button; + }); } + }; - _wrap.selectAll('input').on('blur', change()).on('change', change()); + return tool; + } - _wrap.selectAll('input:not(.combobox-input)').on('input', change(true)); + function uiToolNotes(context) { + var tool = { + id: 'notes', + label: _t.html('modes.add_note.label') + }; + var mode = modeAddNote(context); - if (_tags) updateTags(_tags); + function enabled() { + return notesEnabled() && notesEditable(); } - function address(selection) { - _selection = selection; - _wrap = selection.selectAll('.form-field-input-wrap').data([0]); - _wrap = _wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(_wrap); - var extent = combinedEntityExtent(); + function notesEnabled() { + var noteLayer = context.layers().layer('notes'); + return noteLayer && noteLayer.enabled(); + } - if (extent) { - var countryCode; + function notesEditable() { + var mode = context.mode(); + return context.map().notesEditable() && mode && mode.id !== 'save'; + } - if (context.inIntro()) { - // localize the address format for the walkthrough - countryCode = _t('intro.graph.countrycode'); - } else { - var center = extent.center(); - countryCode = iso1A2Code(center); - } + context.keybinding().on(mode.key, function () { + if (!enabled()) return; - if (countryCode) { - _countryCode = countryCode.toLowerCase(); - updateForCountryCode(); - } + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); } - } + }); - function change(onInput) { - return function () { - var tags = {}; + tool.render = function (selection) { + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - _wrap.selectAll('input').each(function (subfield) { - var key = field.key + ':' + subfield.id; - var value = this.value; - if (!onInput) value = context.cleanTagValue(value); // don't override multiple values with blank string + context.map().on('move.notes', debouncedUpdate).on('drawn.notes', debouncedUpdate); + context.on('enter.notes', update); + update(); - if (Array.isArray(_tags[key]) && !value) return; - tags[key] = value || undefined; - }); + function update() { + var showNotes = notesEnabled(); + var data = showNotes ? [mode] : []; + var buttons = selection.selectAll('button.add-button').data(data, function (d) { + return d.id; + }); // exit - dispatch$1.call('change', this, tags, onInput); - }; - } + buttons.exit().remove(); // enter - function updatePlaceholder(inputSelection) { - return inputSelection.attr('placeholder', function (subfield) { - if (_tags && Array.isArray(_tags[field.key + ':' + subfield.id])) { - return _t('inspector.multiple_values'); - } + var buttonsEnter = buttons.enter().append('button').attr('class', function (d) { + return d.id + ' add-button bar-button'; + }).on('click.notes', function (d3_event, d) { + if (!enabled()) return; // When drawing, ignore accidental clicks on mode buttons - #4042 - if (_countryCode) { - var localkey = subfield.id + '!' + _countryCode; - var tkey = addrField.strings.placeholders[localkey] ? localkey : subfield.id; - return addrField.t('placeholders.' + tkey); - } - }); - } + var currMode = context.mode().id; + if (/^draw/.test(currMode)) return; - function updateTags(tags) { - utilGetSetValue(_wrap.selectAll('input'), function (subfield) { - var val = tags[field.key + ':' + subfield.id]; - return typeof val === 'string' ? val : ''; - }).attr('title', function (subfield) { - var val = tags[field.key + ':' + subfield.id]; - return val && Array.isArray(val) && val.filter(Boolean).join('\n'); - }).classed('mixed', function (subfield) { - return Array.isArray(tags[field.key + ':' + subfield.id]); - }).call(updatePlaceholder); - } + if (d.id === currMode) { + context.enter(modeBrowse(context)); + } else { + context.enter(d); + } + }).call(uiTooltip().placement('bottom').title(function (d) { + return d.description; + }).keys(function (d) { + return [d.key]; + }).scrollContainer(context.container().select('.top-toolbar'))); + buttonsEnter.each(function (d) { + select(this).call(svgIcon(d.icon || '#iD-icon-' + d.button)); + }); // if we are adding/removing the buttons, check if toolbar has overflowed - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + if (buttons.enter().size() || buttons.exit().size()) { + context.ui().checkOverflow('.top-toolbar', true); + } // update - address.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return address; - }; - address.tags = function (tags) { - _tags = tags; - updateTags(tags); + buttons = buttons.merge(buttonsEnter).classed('disabled', function (d) { + return !enabled(); + }).classed('active', function (d) { + return context.mode() && context.mode().button === d.button; + }); + } }; - address.focus = function () { - var node = _wrap.selectAll('input').node(); - - if (node) node.focus(); + tool.uninstall = function () { + context.on('enter.editor.notes', null).on('exit.editor.notes', null).on('enter.notes', null); + context.map().on('move.notes', null).on('drawn.notes', null); }; - return utilRebind(address, dispatch$1, 'on'); + return tool; } - function uiFieldCycleway(field, context) { - var dispatch$1 = dispatch('change'); - var items = select(null); - var wrap = select(null); - - var _tags; - - function cycleway(selection) { - function stripcolon(s) { - return s.replace(':', ''); - } - - wrap = selection.selectAll('.form-field-input-wrap').data([0]); - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - var div = wrap.selectAll('ul').data([0]); - div = div.enter().append('ul').attr('class', 'rows').merge(div); - var keys = ['cycleway:left', 'cycleway:right']; - items = div.selectAll('li').data(keys); - var enter = items.enter().append('li').attr('class', function (d) { - return 'labeled-input preset-cycleway-' + stripcolon(d); - }); - enter.append('span').attr('class', 'label preset-label-cycleway').attr('for', function (d) { - return 'preset-input-cycleway-' + stripcolon(d); - }).html(function (d) { - return field.t.html('types.' + d); - }); - enter.append('div').attr('class', 'preset-input-cycleway-wrap').append('input').attr('type', 'text').attr('class', function (d) { - return 'preset-input-cycleway preset-input-' + stripcolon(d); - }).call(utilNoAuto).each(function (d) { - select(this).call(uiCombobox(context, 'cycleway-' + stripcolon(d)).data(cycleway.options(d))); - }); - items = items.merge(enter); // Update + function uiToolSave(context) { + var tool = { + id: 'save', + label: _t.html('save.title') + }; + var button = null; + var tooltipBehavior = null; + var history = context.history(); + var key = uiCmd('âS'); + var _numChanges = 0; - wrap.selectAll('.preset-input-cycleway').on('change', change).on('blur', change); + function isSaving() { + var mode = context.mode(); + return mode && mode.id === 'save'; } - function change(d3_event, key) { - var newValue = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string + function isDisabled() { + return _numChanges === 0 || isSaving(); + } - if (!newValue && (Array.isArray(_tags.cycleway) || Array.isArray(_tags[key]))) return; + function save(d3_event) { + d3_event.preventDefault(); - if (newValue === 'none' || newValue === '') { - newValue = undefined; + if (!context.inIntro() && !isSaving() && history.hasChanges()) { + context.enter(modeSave(context)); } + } - var otherKey = key === 'cycleway:left' ? 'cycleway:right' : 'cycleway:left'; - var otherValue = typeof _tags.cycleway === 'string' ? _tags.cycleway : _tags[otherKey]; - - if (otherValue && Array.isArray(otherValue)) { - // we must always have an explicit value for comparison - otherValue = otherValue[0]; - } + function bgColor() { + var step; - if (otherValue === 'none' || otherValue === '') { - otherValue = undefined; + if (_numChanges === 0) { + return null; + } else if (_numChanges <= 50) { + step = _numChanges / 50; + return d3_interpolateRgb('#fff', '#ff8')(step); // white -> yellow + } else { + step = Math.min((_numChanges - 50) / 50, 1.0); + return d3_interpolateRgb('#ff8', '#f88')(step); // yellow -> red } + } - var tag = {}; // If the left and right tags match, use the cycleway tag to tag both - // sides the same way + function updateCount() { + var val = history.difference().summary().length; + if (val === _numChanges) return; + _numChanges = val; - if (newValue === otherValue) { - tag = { - cycleway: newValue, - 'cycleway:left': undefined, - 'cycleway:right': undefined - }; - } else { - // Always set both left and right as changing one can affect the other - tag = { - cycleway: undefined - }; - tag[key] = newValue; - tag[otherKey] = otherValue; + if (tooltipBehavior) { + tooltipBehavior.title(_t.html(_numChanges > 0 ? 'save.help' : 'save.no_changes')).keys([key]); } - dispatch$1.call('change', this, tag); + if (button) { + button.classed('disabled', isDisabled()).style('background', bgColor()); + button.select('span.count').html(_numChanges); + } } - cycleway.options = function () { - return Object.keys(field.strings.options).map(function (option) { - return { - title: field.t('options.' + option + '.description'), - value: option - }; - }); - }; - - cycleway.tags = function (tags) { - _tags = tags; // If cycleway is set, use that instead of individual values + tool.render = function (selection) { + tooltipBehavior = uiTooltip().placement('bottom').title(_t.html('save.no_changes')).keys([key]).scrollContainer(context.container().select('.top-toolbar')); + var lastPointerUpType; + button = selection.append('button').attr('class', 'save disabled bar-button').on('pointerup', function (d3_event) { + lastPointerUpType = d3_event.pointerType; + }).on('click', function (d3_event) { + save(d3_event); - var commonValue = typeof tags.cycleway === 'string' && tags.cycleway; - utilGetSetValue(items.selectAll('.preset-input-cycleway'), function (d) { - if (commonValue) return commonValue; - return !tags.cycleway && typeof tags[d] === 'string' ? tags[d] : ''; - }).attr('title', function (d) { - if (Array.isArray(tags.cycleway) || Array.isArray(tags[d])) { - var vals = []; + if (_numChanges === 0 && (lastPointerUpType === 'touch' || lastPointerUpType === 'pen')) { + // there are no tooltips for touch interactions so flash feedback instead + context.ui().flash.duration(2000).iconName('#iD-icon-save').iconClass('disabled').label(_t.html('save.no_changes'))(); + } - if (Array.isArray(tags.cycleway)) { - vals = vals.concat(tags.cycleway); - } + lastPointerUpType = null; + }).call(tooltipBehavior); + button.call(svgIcon('#iD-icon-save')); + button.append('span').attr('class', 'count').attr('aria-hidden', 'true').html('0'); + updateCount(); + context.keybinding().on(key, save, true); + context.history().on('change.save', updateCount); + context.on('enter.save', function () { + if (button) { + button.classed('disabled', isDisabled()); - if (Array.isArray(tags[d])) { - vals = vals.concat(tags[d]); + if (isSaving()) { + button.call(tooltipBehavior.hide); } - - return vals.filter(Boolean).join('\n'); } - - return null; - }).attr('placeholder', function (d) { - if (Array.isArray(tags.cycleway) || Array.isArray(tags[d])) { - return _t('inspector.multiple_values'); - } - - return field.placeholder(); - }).classed('mixed', function (d) { - return Array.isArray(tags.cycleway) || Array.isArray(tags[d]); }); }; - cycleway.focus = function () { - var node = wrap.selectAll('input').node(); - if (node) node.focus(); + tool.uninstall = function () { + context.keybinding().off(key, true); + context.history().on('change.save', null); + context.on('enter.save', null); + button = null; + tooltipBehavior = null; }; - return utilRebind(cycleway, dispatch$1, 'on'); + return tool; } - function uiFieldLanes(field, context) { - var dispatch$1 = dispatch('change'); - var LANE_WIDTH = 40; - var LANE_HEIGHT = 200; - var _entityIDs = []; - - function lanes(selection) { - var lanesData = context.entity(_entityIDs[0]).lanes(); - - if (!context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode) { - selection.call(lanes.off); - return; - } - - var wrap = selection.selectAll('.form-field-input-wrap').data([0]); - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - var surface = wrap.selectAll('.surface').data([0]); - var d = utilGetDimensions(wrap); - var freeSpace = d[0] - lanesData.lanes.length * LANE_WIDTH * 1.5 + LANE_WIDTH * 0.5; - surface = surface.enter().append('svg').attr('width', d[0]).attr('height', 300).attr('class', 'surface').merge(surface); - var lanesSelection = surface.selectAll('.lanes').data([0]); - lanesSelection = lanesSelection.enter().append('g').attr('class', 'lanes').merge(lanesSelection); - lanesSelection.attr('transform', function () { - return 'translate(' + freeSpace / 2 + ', 0)'; - }); - var lane = lanesSelection.selectAll('.lane').data(lanesData.lanes); - lane.exit().remove(); - var enter = lane.enter().append('g').attr('class', 'lane'); - enter.append('g').append('rect').attr('y', 50).attr('width', LANE_WIDTH).attr('height', LANE_HEIGHT); - enter.append('g').attr('class', 'forward').append('text').attr('y', 40).attr('x', 14).html('â²'); - enter.append('g').attr('class', 'bothways').append('text').attr('y', 40).attr('x', 14).html('â²â¼'); - enter.append('g').attr('class', 'backward').append('text').attr('y', 40).attr('x', 14).html('â¼'); - lane = lane.merge(enter); - lane.attr('transform', function (d) { - return 'translate(' + LANE_WIDTH * d.index * 1.5 + ', 0)'; - }); - lane.select('.forward').style('visibility', function (d) { - return d.direction === 'forward' ? 'visible' : 'hidden'; - }); - lane.select('.bothways').style('visibility', function (d) { - return d.direction === 'bothways' ? 'visible' : 'hidden'; - }); - lane.select('.backward').style('visibility', function (d) { - return d.direction === 'backward' ? 'visible' : 'hidden'; - }); - } - - lanes.entityIDs = function (val) { - _entityIDs = val; + function uiToolSidebarToggle(context) { + var tool = { + id: 'sidebar_toggle', + label: _t.html('toolbar.inspect') }; - lanes.tags = function () {}; - - lanes.focus = function () {}; - - lanes.off = function () {}; + tool.render = function (selection) { + selection.append('button').attr('class', 'bar-button').on('click', function () { + context.ui().sidebar.toggle(); + }).call(uiTooltip().placement('bottom').title(_t.html('sidebar.tooltip')).keys([_t('sidebar.key')]).scrollContainer(context.container().select('.top-toolbar'))).call(svgIcon('#iD-icon-sidebar-' + (_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left'))); + }; - return utilRebind(lanes, dispatch$1, 'on'); + return tool; } - uiFieldLanes.supportsMultiselection = false; - - var _languagesArray = []; - function uiFieldLocalized(field, context) { - var dispatch$1 = dispatch('change', 'input'); - var wikipedia = services.wikipedia; - var input = select(null); - var localizedInputs = select(null); - - var _countryCode; - - var _tags; // A concern here in switching to async data means that _languagesArray will not - // be available the first time through, so things like the fetchers and - // the language() function will not work immediately. + function uiToolUndoRedo(context) { + var tool = { + id: 'undo_redo', + label: _t.html('toolbar.undo_redo') + }; + var commands = [{ + id: 'undo', + cmd: uiCmd('âZ'), + action: function action() { + context.undo(); + }, + annotation: function annotation() { + return context.history().undoAnnotation(); + }, + icon: 'iD-icon-' + (_mainLocalizer.textDirection() === 'rtl' ? 'redo' : 'undo') + }, { + id: 'redo', + cmd: uiCmd('ââ§Z'), + action: function action() { + context.redo(); + }, + annotation: function annotation() { + return context.history().redoAnnotation(); + }, + icon: 'iD-icon-' + (_mainLocalizer.textDirection() === 'rtl' ? 'undo' : 'redo') + }]; - _mainFileFetcher.get('languages').then(loadLanguagesArray)["catch"](function () { - /* ignore */ - }); - var _territoryLanguages = {}; - _mainFileFetcher.get('territory_languages').then(function (d) { - _territoryLanguages = d; - })["catch"](function () { - /* ignore */ - }); - var allSuggestions = _mainPresetIndex.collection.filter(function (p) { - return p.suggestion === true; - }); // reuse these combos - - var langCombo = uiCombobox(context, 'localized-lang').fetcher(fetchLanguages).minItems(0); - var brandCombo = uiCombobox(context, 'localized-brand').canAutocomplete(false).minItems(1); - - var _selection = select(null); - - var _multilingual = []; + function editable() { + return context.mode() && context.mode().id !== 'save' && context.map().editableDataEnabled(true + /* ignore min zoom */ + ); + } - var _buttonTip = uiTooltip().title(_t.html('translate.translate')).placement('left'); + tool.render = function (selection) { + var tooltipBehavior = uiTooltip().placement('bottom').title(function (d) { + return d.annotation() ? _t.html(d.id + '.tooltip', { + action: d.annotation() + }) : _t.html(d.id + '.nothing'); + }).keys(function (d) { + return [d.cmd]; + }).scrollContainer(context.container().select('.top-toolbar')); + var lastPointerUpType; + var buttons = selection.selectAll('button').data(commands).enter().append('button').attr('class', function (d) { + return 'disabled ' + d.id + '-button bar-button'; + }).on('pointerup', function (d3_event) { + // `pointerup` is always called before `click` + lastPointerUpType = d3_event.pointerType; + }).on('click', function (d3_event, d) { + d3_event.preventDefault(); + var annotation = d.annotation(); - var _wikiTitles; + if (editable() && annotation) { + d.action(); + } - var _entityIDs = []; + if (editable() && (lastPointerUpType === 'touch' || lastPointerUpType === 'pen')) { + // there are no tooltips for touch interactions so flash feedback instead + var text = annotation ? _t(d.id + '.tooltip', { + action: annotation + }) : _t(d.id + '.nothing'); + context.ui().flash.duration(2000).iconName('#' + d.icon).iconClass(annotation ? '' : 'disabled').label(text)(); + } - function loadLanguagesArray(dataLanguages) { - if (_languagesArray.length !== 0) return; // some conversion is needed to ensure correct OSM tags are used + lastPointerUpType = null; + }).call(tooltipBehavior); + buttons.each(function (d) { + select(this).call(svgIcon('#' + d.icon)); + }); + context.keybinding().on(commands[0].cmd, function (d3_event) { + d3_event.preventDefault(); + if (editable()) commands[0].action(); + }).on(commands[1].cmd, function (d3_event) { + d3_event.preventDefault(); + if (editable()) commands[1].action(); + }); - var replacements = { - sr: 'sr-Cyrl', - // in OSM, `sr` implies Cyrillic - 'sr-Cyrl': false // `sr-Cyrl` isn't used in OSM + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - }; + context.map().on('move.undo_redo', debouncedUpdate).on('drawn.undo_redo', debouncedUpdate); + context.history().on('change.undo_redo', function (difference) { + if (difference) update(); + }); + context.on('enter.undo_redo', update); - for (var code in dataLanguages) { - if (replacements[code] === false) continue; - var metaCode = code; - if (replacements[code]) metaCode = replacements[code]; + function update() { + buttons.classed('disabled', function (d) { + return !editable() || !d.annotation(); + }).each(function () { + var selection = select(this); - _languagesArray.push({ - localName: _mainLocalizer.languageName(metaCode, { - localOnly: true - }), - nativeName: dataLanguages[metaCode].nativeName, - code: code, - label: _mainLocalizer.languageName(metaCode) + if (!selection.select('.tooltip.in').empty()) { + selection.call(tooltipBehavior.updateContent); + } }); } - } - - function calcLocked() { - // only lock the Name field - var isLocked = field.id === 'name' && _entityIDs.length && // lock the field if any feature needs it - _entityIDs.some(function (entityID) { - var entity = context.graph().hasEntity(entityID); - if (!entity) return false; - - var original = context.graph().base().entities[_entityIDs[0]]; + }; - var hasOriginalName = original && entity.tags.name && entity.tags.name === original.tags.name; // if the name was already edited manually then allow further editing + tool.uninstall = function () { + context.keybinding().off(commands[0].cmd).off(commands[1].cmd); + context.map().on('move.undo_redo', null).on('drawn.undo_redo', null); + context.history().on('change.undo_redo', null); + context.on('enter.undo_redo', null); + }; - if (!hasOriginalName) return false; // features linked to Wikidata are likely important and should be protected + return tool; + } - if (entity.tags.wikidata) return true; // assume the name has already been confirmed if its source has been researched + function uiTopToolbar(context) { + var sidebarToggle = uiToolSidebarToggle(context), + modes = uiToolOldDrawModes(context), + notes = uiToolNotes(context), + undoRedo = uiToolUndoRedo(context), + save = uiToolSave(context); - if (entity.tags['name:etymology:wikidata']) return true; - var preset = _mainPresetIndex.match(entity, context.graph()); - var isSuggestion = preset && preset.suggestion; - var showsBrand = preset && preset.originalFields.filter(function (d) { - return d.id === 'brand'; - }).length; // protect standardized brand names + function notesEnabled() { + var noteLayer = context.layers().layer('notes'); + return noteLayer && noteLayer.enabled(); + } - return isSuggestion && !showsBrand; + function topToolbar(bar) { + bar.on('wheel.topToolbar', function (d3_event) { + if (!d3_event.deltaX) { + // translate vertical scrolling into horizontal scrolling in case + // the user doesn't have an input device that can scroll horizontally + bar.node().scrollLeft += d3_event.deltaY; + } }); - field.locked(isLocked); - } // update _multilingual, maintaining the existing order - - - function calcMultilingual(tags) { - var existingLangsOrdered = _multilingual.map(function (item) { - return item.lang; + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true }); - var existingLangs = new Set(existingLangsOrdered.filter(Boolean)); + context.layers().on('change.topToolbar', debouncedUpdate); + update(); - for (var k in tags) { - var m = k.match(/^(.*):(.+)$/); + function update() { + var tools = [sidebarToggle, 'spacer', modes]; + tools.push('spacer'); - if (m && m[1] === field.key && m[2]) { - var item = { - lang: m[2], - value: tags[k] - }; + if (notesEnabled()) { + tools = tools.concat([notes, 'spacer']); + } - if (existingLangs.has(item.lang)) { - // update the value - _multilingual[existingLangsOrdered.indexOf(item.lang)].value = item.value; - existingLangs["delete"](item.lang); - } else { - _multilingual.push(item); + tools = tools.concat([undoRedo, save]); + var toolbarItems = bar.selectAll('.toolbar-item').data(tools, function (d) { + return d.id || d; + }); + toolbarItems.exit().each(function (d) { + if (d.uninstall) { + d.uninstall(); } - } + }).remove(); + var itemsEnter = toolbarItems.enter().append('div').attr('class', function (d) { + var classes = 'toolbar-item ' + (d.id || d).replace('_', '-'); + if (d.klass) classes += ' ' + d.klass; + return classes; + }); + var actionableItems = itemsEnter.filter(function (d) { + return d !== 'spacer'; + }); + actionableItems.append('div').attr('class', 'item-content').each(function (d) { + select(this).call(d.render, bar); + }); + actionableItems.append('div').attr('class', 'item-label').html(function (d) { + return d.label; + }); } - - _multilingual = _multilingual.filter(function (item) { - return !item.lang || !existingLangs.has(item.lang); - }); } - function localized(selection) { - _selection = selection; - calcLocked(); - var isLocked = field.locked(); - var singularEntity = _entityIDs.length === 1 && context.hasEntity(_entityIDs[0]); - var preset = singularEntity && _mainPresetIndex.match(singularEntity, context.graph()); - var wrap = selection.selectAll('.form-field-input-wrap').data([0]); // enter/update - - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - input = wrap.selectAll('.localized-main').data([0]); // enter/update - - input = input.enter().append('input').attr('type', 'text').attr('id', field.domId).attr('class', 'localized-main').call(utilNoAuto).merge(input); - - if (preset && field.id === 'name') { - var pTag = preset.id.split('/', 2); - var pKey = pTag[0]; - var pValue = pTag[1]; + return topToolbar; + } - if (!preset.suggestion) { - // Not a suggestion preset - Add a suggestions dropdown if it makes sense to. - // This code attempts to determine if the matched preset is the - // kind of preset that even can benefit from name suggestions.. - // - true = shops, cafes, hotels, etc. (also generic and fallback presets) - // - false = churches, parks, hospitals, etc. (things not in the index) - var isFallback = preset.isFallback(); - var goodSuggestions = allSuggestions.filter(function (s) { - if (isFallback) return true; - var sTag = s.id.split('/', 2); - var sKey = sTag[0]; - var sValue = sTag[1]; - return pKey === sKey && (!pValue || pValue === sValue); - }); // Show the suggestions.. If the user picks one, change the tags.. + var sawVersion = null; + var isNewVersion = false; + var isNewUser = false; + function uiVersion(context) { + var currVersion = context.version; + var matchedVersion = currVersion.match(/\d+\.\d+\.\d+.*/); - if (allSuggestions.length && goodSuggestions.length) { - input.on('blur.localized', checkBrandOnBlur).call(brandCombo.fetcher(fetchBrandNames(preset, allSuggestions)).on('accept', acceptBrand).on('cancel', cancelBrand)); - } - } + if (sawVersion === null && matchedVersion !== null) { + if (corePreferences('sawVersion')) { + isNewUser = false; + isNewVersion = corePreferences('sawVersion') !== currVersion && currVersion.indexOf('-') === -1; + } else { + isNewUser = true; + isNewVersion = true; } - input.classed('disabled', !!isLocked).attr('readonly', isLocked || null).on('input', change(true)).on('blur', change()).on('change', change()); - var translateButton = wrap.selectAll('.localized-add').data([0]); - translateButton = translateButton.enter().append('button').attr('class', 'localized-add form-field-button').call(svgIcon('#iD-icon-plus')).merge(translateButton); - translateButton.classed('disabled', !!isLocked).call(isLocked ? _buttonTip.destroy : _buttonTip).on('click', addNew); + corePreferences('sawVersion', currVersion); + sawVersion = currVersion; + } - if (_tags && !_multilingual.length) { - calcMultilingual(_tags); - } + return function (selection) { + selection.append('a').attr('target', '_blank').attr('href', 'https://github.com/openstreetmap/iD').html(currVersion); // only show new version indicator to users that have used iD before - localizedInputs = selection.selectAll('.localized-multilingual').data([0]); - localizedInputs = localizedInputs.enter().append('div').attr('class', 'localized-multilingual').merge(localizedInputs); - localizedInputs.call(renderMultilingual); - localizedInputs.selectAll('button, input').classed('disabled', !!isLocked).attr('readonly', isLocked || null); // We are not guaranteed to get an `accept` or `cancel` when blurring the field. - // (This can happen if the user actives the combo, arrows down, and then clicks off to blur) - // So compare the current field value against the suggestions one last time. + if (isNewVersion && !isNewUser) { + selection.append('a').attr('class', 'badge').attr('target', '_blank').attr('href', 'https://github.com/openstreetmap/iD/blob/release/CHANGELOG.md#whats-new').call(svgIcon('#maki-gift-11')).call(uiTooltip().title(_t.html('version.whats_new', { + version: currVersion + })).placement('top').scrollContainer(context.container().select('.main-footer-wrap'))); + } + }; + } - function checkBrandOnBlur() { - var latest = _entityIDs.length === 1 && context.hasEntity(_entityIDs[0]); - if (!latest) return; // deleting the entity blurred the field? + function uiZoom(context) { + var zooms = [{ + id: 'zoom-in', + icon: 'iD-icon-plus', + title: _t.html('zoom.in'), + action: zoomIn, + disabled: function disabled() { + return !context.map().canZoomIn(); + }, + disabledTitle: _t.html('zoom.disabled.in'), + key: '+' + }, { + id: 'zoom-out', + icon: 'iD-icon-minus', + title: _t.html('zoom.out'), + action: zoomOut, + disabled: function disabled() { + return !context.map().canZoomOut(); + }, + disabledTitle: _t.html('zoom.disabled.out'), + key: '-' + }]; - var preset = _mainPresetIndex.match(latest, context.graph()); - if (preset && preset.suggestion) return; // already accepted + function zoomIn(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomIn(); + } - var name = utilGetSetValue(input).trim(); - var matched = allSuggestions.filter(function (s) { - return name === s.name(); - }); + function zoomOut(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomOut(); + } - if (matched.length === 1) { - acceptBrand({ - suggestion: matched[0] - }); - } else { - cancelBrand(); - } - } + function zoomInFurther(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomInFurther(); + } - function acceptBrand(d) { - var entity = _entityIDs.length === 1 && context.hasEntity(_entityIDs[0]); + function zoomOutFurther(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomOutFurther(); + } - if (!d || !entity) { - cancelBrand(); - return; + return function (selection) { + var tooltipBehavior = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(function (d) { + if (d.disabled()) { + return d.disabledTitle; } - var tags = entity.tags; - var geometry = entity.geometry(context.graph()); - var removed = preset.unsetTags(tags, geometry); - - for (var k in tags) { - tags[k] = removed[k]; // set removed tags to `undefined` + return d.title; + }).keys(function (d) { + return [d.key]; + }); + var lastPointerUpType; + var buttons = selection.selectAll('button').data(zooms).enter().append('button').attr('class', function (d) { + return d.id; + }).on('pointerup.editor', function (d3_event) { + lastPointerUpType = d3_event.pointerType; + }).on('click.editor', function (d3_event, d) { + if (!d.disabled()) { + d.action(d3_event); + } else if (lastPointerUpType === 'touch' || lastPointerUpType === 'pen') { + context.ui().flash.duration(2000).iconName('#' + d.icon).iconClass('disabled').label(d.disabledTitle)(); } - tags = d.suggestion.setTags(tags, geometry); - utilGetSetValue(input, tags.name); - dispatch$1.call('change', this, tags); - } // user hit escape + lastPointerUpType = null; + }).call(tooltipBehavior); + buttons.each(function (d) { + select(this).call(svgIcon('#' + d.icon, 'light')); + }); + utilKeybinding.plusKeys.forEach(function (key) { + context.keybinding().on([key], zoomIn); + context.keybinding().on([uiCmd('â¥' + key)], zoomInFurther); + }); + utilKeybinding.minusKeys.forEach(function (key) { + context.keybinding().on([key], zoomOut); + context.keybinding().on([uiCmd('â¥' + key)], zoomOutFurther); + }); + function updateButtonStates() { + buttons.classed('disabled', function (d) { + return d.disabled(); + }).each(function () { + var selection = select(this); - function cancelBrand() { - var name = utilGetSetValue(input); - dispatch$1.call('change', this, { - name: name + if (!selection.select('.tooltip.in').empty()) { + selection.call(tooltipBehavior.updateContent); + } }); } - function fetchBrandNames(preset, suggestions) { - var pTag = preset.id.split('/', 2); - var pKey = pTag[0]; - var pValue = pTag[1]; - return function (value, callback) { - var results = []; - - if (value && value.length > 2) { - for (var i = 0; i < suggestions.length; i++) { - var s = suggestions[i]; // don't suggest brands from incompatible countries - - if (_countryCode && s.countryCodes && s.countryCodes.indexOf(_countryCode) === -1) continue; - var sTag = s.id.split('/', 2); - var sKey = sTag[0]; - var sValue = sTag[1]; - var subtitle = s.subtitle(); - var name = s.name(); - if (subtitle) name += ' â ' + subtitle; - var dist = utilEditDistance(value, name.substring(0, value.length)); - var matchesPreset = pKey === sKey && (!pValue || pValue === sValue); - - if (dist < 1 || matchesPreset && dist < 3) { - var obj = { - value: s.name(), - title: name, - display: s.nameLabel() + (subtitle ? ' â ' + s.subtitleLabel() : ''), - suggestion: s, - dist: dist + (matchesPreset ? 0 : 1) // penalize if not matched preset - - }; - results.push(obj); - } - } + updateButtonStates(); + context.map().on('move.uiZoom', updateButtonStates); + }; + } - results.sort(function (a, b) { - return a.dist - b.dist; - }); - } + function uiZoomToSelection(context) { + function isDisabled() { + var mode = context.mode(); + return !mode || !mode.zoomToSelected; + } - results = results.slice(0, 10); - callback(results); - }; - } + var _lastPointerUpType; - function addNew(d3_event) { - d3_event.preventDefault(); - if (field.locked()) return; - var defaultLang = _mainLocalizer.languageCode().toLowerCase(); + function pointerup(d3_event) { + _lastPointerUpType = d3_event.pointerType; + } - var langExists = _multilingual.find(function (datum) { - return datum.lang === defaultLang; - }); + function click(d3_event) { + d3_event.preventDefault(); - var isLangEn = defaultLang.indexOf('en') > -1; + if (isDisabled()) { + if (_lastPointerUpType === 'touch' || _lastPointerUpType === 'pen') { + context.ui().flash.duration(2000).iconName('#iD-icon-framed-dot').iconClass('disabled').label(_t.html('inspector.zoom_to.no_selection'))(); + } + } else { + var mode = context.mode(); - if (isLangEn || langExists) { - defaultLang = ''; - langExists = _multilingual.find(function (datum) { - return datum.lang === defaultLang; - }); + if (mode && mode.zoomToSelected) { + mode.zoomToSelected(); } + } - if (!langExists) { - // prepend the value so it appears at the top - _multilingual.unshift({ - lang: defaultLang, - value: '' - }); + _lastPointerUpType = null; + } - localizedInputs.call(renderMultilingual); + return function (selection) { + var tooltipBehavior = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(function () { + if (isDisabled()) { + return _t.html('inspector.zoom_to.no_selection'); } - } - function change(onInput) { - return function (d3_event) { - if (field.locked()) { - d3_event.preventDefault(); - return; - } + return _t.html('inspector.zoom_to.title'); + }).keys([_t('inspector.zoom_to.key')]); + var button = selection.append('button').on('pointerup', pointerup).on('click', click).call(svgIcon('#iD-icon-framed-dot', 'light')).call(tooltipBehavior); - var val = utilGetSetValue(select(this)); - if (!onInput) val = context.cleanTagValue(val); // don't override multiple values with blank string + function setEnabledState() { + button.classed('disabled', isDisabled()); - if (!val && Array.isArray(_tags[field.key])) return; - var t = {}; - t[field.key] = val || undefined; - dispatch$1.call('change', this, t, onInput); - }; + if (!button.select('.tooltip.in').empty()) { + button.call(tooltipBehavior.updateContent); + } } - } - function key(lang) { - return field.key + ':' + lang; - } - - function changeLang(d3_event, d) { - var tags = {}; // make sure unrecognized suffixes are lowercase - #7156 + context.on('enter.uiZoomToSelection', setEnabledState); + setEnabledState(); + }; + } - var lang = utilGetSetValue(select(this)).toLowerCase(); + function uiPane(id, context) { + var _key; - var language = _languagesArray.find(function (d) { - return d.label.toLowerCase() === lang || d.localName && d.localName.toLowerCase() === lang || d.nativeName && d.nativeName.toLowerCase() === lang; - }); + var _label = ''; + var _description = ''; + var _iconName = ''; - if (language) lang = language.code; + var _sections; // array of uiSection objects - if (d.lang && d.lang !== lang) { - tags[key(d.lang)] = undefined; - } - var newKey = lang && context.cleanTagKey(key(lang)); - var value = utilGetSetValue(select(this.parentNode).selectAll('.localized-value')); + var _paneSelection = select(null); - if (newKey && value) { - tags[newKey] = value; - } else if (newKey && _wikiTitles && _wikiTitles[d.lang]) { - tags[newKey] = _wikiTitles[d.lang]; - } + var _paneTooltip; - d.lang = lang; - dispatch$1.call('change', this, tags); - } + var pane = { + id: id + }; - function changeValue(d3_event, d) { - if (!d.lang) return; - var value = context.cleanTagValue(utilGetSetValue(select(this))) || undefined; // don't override multiple values with blank string + pane.label = function (val) { + if (!arguments.length) return _label; + _label = val; + return pane; + }; - if (!value && Array.isArray(d.value)) return; - var t = {}; - t[key(d.lang)] = value; - d.value = value; - dispatch$1.call('change', this, t); - } + pane.key = function (val) { + if (!arguments.length) return _key; + _key = val; + return pane; + }; - function fetchLanguages(value, cb) { - var v = value.toLowerCase(); // show the user's language first + pane.description = function (val) { + if (!arguments.length) return _description; + _description = val; + return pane; + }; - var langCodes = [_mainLocalizer.localeCode(), _mainLocalizer.languageCode()]; + pane.iconName = function (val) { + if (!arguments.length) return _iconName; + _iconName = val; + return pane; + }; - if (_countryCode && _territoryLanguages[_countryCode]) { - langCodes = langCodes.concat(_territoryLanguages[_countryCode]); - } + pane.sections = function (val) { + if (!arguments.length) return _sections; + _sections = val; + return pane; + }; - var langItems = []; - langCodes.forEach(function (code) { - var langItem = _languagesArray.find(function (item) { - return item.code === code; - }); + pane.selection = function () { + return _paneSelection; + }; - if (langItem) langItems.push(langItem); - }); - langItems = utilArrayUniq(langItems.concat(_languagesArray)); - cb(langItems.filter(function (d) { - return d.label.toLowerCase().indexOf(v) >= 0 || d.localName && d.localName.toLowerCase().indexOf(v) >= 0 || d.nativeName && d.nativeName.toLowerCase().indexOf(v) >= 0 || d.code.toLowerCase().indexOf(v) >= 0; - }).map(function (d) { - return { - value: d.label - }; - })); + function hidePane() { + context.ui().togglePanes(); } - function renderMultilingual(selection) { - var entries = selection.selectAll('div.entry').data(_multilingual, function (d) { - return d.lang; - }); - entries.exit().style('top', '0').style('max-height', '240px').transition().duration(200).style('opacity', '0').style('max-height', '0px').remove(); - var entriesEnter = entries.enter().append('div').attr('class', 'entry').each(function (_, index) { - var wrap = select(this); - var domId = utilUniqueDomId(index); - var label = wrap.append('label').attr('class', 'field-label').attr('for', domId); - var text = label.append('span').attr('class', 'label-text'); - text.append('span').attr('class', 'label-textvalue').html(_t.html('translate.localized_translation_label')); - text.append('span').attr('class', 'label-textannotation'); - label.append('button').attr('class', 'remove-icon-multilingual').on('click', function (d3_event, d) { - if (field.locked()) return; - d3_event.preventDefault(); + pane.togglePane = function (d3_event) { + if (d3_event) d3_event.preventDefault(); - if (!d.lang || !d.value) { - _multilingual.splice(index, 1); + _paneTooltip.hide(); - renderMultilingual(selection); - } else { - // remove from entity tags - var t = {}; - t[key(d.lang)] = undefined; - dispatch$1.call('change', this, t); - } - }).call(svgIcon('#iD-operation-delete')); - wrap.append('input').attr('class', 'localized-lang').attr('id', domId).attr('type', 'text').attr('placeholder', _t('translate.localized_translation_language')).on('blur', changeLang).on('change', changeLang).call(langCombo); - wrap.append('input').attr('type', 'text').attr('class', 'localized-value').on('blur', changeValue).on('change', changeValue); - }); - entriesEnter.style('margin-top', '0px').style('max-height', '0px').style('opacity', '0').transition().duration(200).style('margin-top', '10px').style('max-height', '240px').style('opacity', '1').on('end', function () { - select(this).style('max-height', '').style('overflow', 'visible'); - }); - entries = entries.merge(entriesEnter); - entries.order(); - entries.classed('present', function (d) { - return d.lang && d.value; - }); - utilGetSetValue(entries.select('.localized-lang'), function (d) { - var langItem = _languagesArray.find(function (item) { - return item.code === d.lang; - }); + context.ui().togglePanes(!_paneSelection.classed('shown') ? _paneSelection : undefined); + }; - if (langItem) return langItem.label; - return d.lang; - }); - utilGetSetValue(entries.select('.localized-value'), function (d) { - return typeof d.value === 'string' ? d.value : ''; - }).attr('title', function (d) { - return Array.isArray(d.value) ? d.value.filter(Boolean).join('\n') : null; - }).attr('placeholder', function (d) { - return Array.isArray(d.value) ? _t('inspector.multiple_values') : _t('translate.localized_translation_name'); - }).classed('mixed', function (d) { - return Array.isArray(d.value); - }); - } + pane.renderToggleButton = function (selection) { + if (!_paneTooltip) { + _paneTooltip = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(_description).keys([_key]); + } + + selection.append('button').on('click', pane.togglePane).call(svgIcon('#' + _iconName, 'light')).call(_paneTooltip); + }; + + pane.renderContent = function (selection) { + // override to fully customize content + if (_sections) { + _sections.forEach(function (section) { + selection.call(section.render); + }); + } + }; - localized.tags = function (tags) { - _tags = tags; // Fetch translations from wikipedia + pane.renderPane = function (selection) { + _paneSelection = selection.append('div').attr('class', 'fillL map-pane hide ' + id + '-pane').attr('pane', id); - if (typeof tags.wikipedia === 'string' && !_wikiTitles) { - _wikiTitles = {}; - var wm = tags.wikipedia.match(/([^:]+):(.+)/); + var heading = _paneSelection.append('div').attr('class', 'pane-heading'); - if (wm && wm[0] && wm[1]) { - wikipedia.translations(wm[1], wm[2], function (err, d) { - if (err || !d) return; - _wikiTitles = d; - }); - } - } + heading.append('h2').html(_label); + heading.append('button').on('click', hidePane).call(svgIcon('#iD-icon-close')); - var isMixed = Array.isArray(tags[field.key]); - utilGetSetValue(input, typeof tags[field.key] === 'string' ? tags[field.key] : '').attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined).attr('placeholder', isMixed ? _t('inspector.multiple_values') : field.placeholder()).classed('mixed', isMixed); - calcMultilingual(tags); + _paneSelection.append('div').attr('class', 'pane-content').call(pane.renderContent); - _selection.call(localized); + if (_key) { + context.keybinding().on(_key, pane.togglePane); + } }; - localized.focus = function () { - input.node().focus(); - }; + return pane; + } - localized.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - _multilingual = []; - loadCountryCode(); - return localized; + function uiSectionBackgroundDisplayOptions(context) { + var section = uiSection('background-display-options', context).label(_t.html('background.display_options')).disclosureContent(renderDisclosureContent); + + var _detected = utilDetect(); + + var _storedOpacity = corePreferences('background-opacity'); + + var _minVal = 0; + + var _maxVal = _detected.cssfilters ? 3 : 1; + + var _sliders = _detected.cssfilters ? ['brightness', 'contrast', 'saturation', 'sharpness'] : ['brightness']; + + var _options = { + brightness: _storedOpacity !== null ? +_storedOpacity : 1, + contrast: 1, + saturation: 1, + sharpness: 1 }; - function loadCountryCode() { - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); - _countryCode = countryCode && countryCode.toLowerCase(); + function clamp(x, min, max) { + return Math.max(min, Math.min(x, max)); } - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + function updateValue(d, val) { + val = clamp(val, _minVal, _maxVal); + _options[d] = val; + context.background()[d](val); + + if (d === 'brightness') { + corePreferences('background-opacity', val); + } + + section.reRender(); } - return utilRebind(localized, dispatch$1, 'on'); - } + function renderDisclosureContent(selection) { + var container = selection.selectAll('.display-options-container').data([0]); + var containerEnter = container.enter().append('div').attr('class', 'display-options-container controls-list'); // add slider controls - function uiFieldMaxspeed(field, context) { - var dispatch$1 = dispatch('change'); - var unitInput = select(null); - var input = select(null); - var _entityIDs = []; + var slidersEnter = containerEnter.selectAll('.display-control').data(_sliders).enter().append('div').attr('class', function (d) { + return 'display-control display-control-' + d; + }); + slidersEnter.append('h5').html(function (d) { + return _t.html('background.' + d); + }).append('span').attr('class', function (d) { + return 'display-option-value display-option-value-' + d; + }); + var sildersControlEnter = slidersEnter.append('div').attr('class', 'control-wrap'); + sildersControlEnter.append('input').attr('class', function (d) { + return 'display-option-input display-option-input-' + d; + }).attr('type', 'range').attr('min', _minVal).attr('max', _maxVal).attr('step', '0.05').on('input', function (d3_event, d) { + var val = select(this).property('value'); - var _tags; + if (!val && d3_event && d3_event.target) { + val = d3_event.target.value; + } - var _isImperial; + updateValue(d, val); + }); + sildersControlEnter.append('button').attr('title', _t('background.reset')).attr('class', function (d) { + return 'display-option-reset display-option-reset-' + d; + }).on('click', function (d3_event, d) { + if (d3_event.button !== 0) return; + updateValue(d, 1); + }).call(svgIcon('#iD-icon-' + (_mainLocalizer.textDirection() === 'rtl' ? 'redo' : 'undo'))); // reset all button - var speedCombo = uiCombobox(context, 'maxspeed'); - var unitCombo = uiCombobox(context, 'maxspeed-unit').data(['km/h', 'mph'].map(comboValues)); - var metricValues = [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]; - var imperialValues = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]; + containerEnter.append('a').attr('class', 'display-option-resetlink').attr('href', '#').html(_t.html('background.reset_all')).on('click', function (d3_event) { + d3_event.preventDefault(); - function maxspeed(selection) { - var wrap = selection.selectAll('.form-field-input-wrap').data([0]); - wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap); - input = wrap.selectAll('input.maxspeed-number').data([0]); - input = input.enter().append('input').attr('type', 'text').attr('class', 'maxspeed-number').attr('id', field.domId).call(utilNoAuto).call(speedCombo).merge(input); - input.on('change', change).on('blur', change); - var loc = combinedEntityExtent().center(); - _isImperial = roadSpeedUnit(loc) === 'mph'; - unitInput = wrap.selectAll('input.maxspeed-unit').data([0]); - unitInput = unitInput.enter().append('input').attr('type', 'text').attr('class', 'maxspeed-unit').call(unitCombo).merge(unitInput); - unitInput.on('blur', changeUnits).on('change', changeUnits); + for (var i = 0; i < _sliders.length; i++) { + updateValue(_sliders[i], 1); + } + }); // update - function changeUnits() { - _isImperial = utilGetSetValue(unitInput) === 'mph'; - utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h'); - setUnitSuggestions(); - change(); + container = containerEnter.merge(container); + container.selectAll('.display-option-input').property('value', function (d) { + return _options[d]; + }); + container.selectAll('.display-option-value').html(function (d) { + return Math.floor(_options[d] * 100) + '%'; + }); + container.selectAll('.display-option-reset').classed('disabled', function (d) { + return _options[d] === 1; + }); // first time only, set brightness if needed + + if (containerEnter.size() && _options.brightness !== 1) { + context.background().brightness(_options.brightness); } } - function setUnitSuggestions() { - speedCombo.data((_isImperial ? imperialValues : metricValues).map(comboValues)); - utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h'); - } + return section; + } - function comboValues(d) { - return { - value: d.toString(), - title: d.toString() + function uiSettingsCustomBackground() { + var dispatch = dispatch$8('change'); + + function render(selection) { + // keep separate copies of original and current settings + var _origSettings = { + template: corePreferences('background-custom-template') }; - } + var _currSettings = { + template: corePreferences('background-custom-template') + }; + var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; + var modal = uiConfirm(selection).okButton(); + modal.classed('settings-modal settings-custom-background', true); + modal.select('.modal-section.header').append('h3').html(_t.html('settings.custom_background.header')); + var textSection = modal.select('.modal-section.message-text'); + var instructions = "".concat(_t.html('settings.custom_background.instructions.info'), "\n") + '\n' + "#### ".concat(_t.html('settings.custom_background.instructions.wms.tokens_label'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.wms.tokens.proj'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.wms.tokens.wkid'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.wms.tokens.dimensions'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.wms.tokens.bbox'), "\n") + '\n' + "#### ".concat(_t.html('settings.custom_background.instructions.tms.tokens_label'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.tms.tokens.xyz'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.tms.tokens.flipped_y'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.tms.tokens.switch'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.tms.tokens.quadtile'), "\n") + "* ".concat(_t.html('settings.custom_background.instructions.tms.tokens.scale_factor'), "\n") + '\n' + "#### ".concat(_t.html('settings.custom_background.instructions.example'), "\n") + "`".concat(example, "`"); + textSection.append('div').attr('class', 'instructions-template').html(marked_1(instructions)); + textSection.append('textarea').attr('class', 'field-template').attr('placeholder', _t('settings.custom_background.template.placeholder')).call(utilNoAuto).property('value', _currSettings.template); // insert a cancel button - function change() { - var tag = {}; - var value = utilGetSetValue(input).trim(); // don't override multiple values with blank string + var buttonSection = modal.select('.modal-section.buttons'); + buttonSection.insert('button', '.ok-button').attr('class', 'button cancel-button secondary-action').html(_t.html('confirm.cancel')); + buttonSection.select('.cancel-button').on('click.cancel', clickCancel); + buttonSection.select('.ok-button').attr('disabled', isSaveDisabled).on('click.save', clickSave); - if (!value && Array.isArray(_tags[field.key])) return; + function isSaveDisabled() { + return null; + } // restore the original template - if (!value) { - tag[field.key] = undefined; - } else if (isNaN(value) || !_isImperial) { - tag[field.key] = context.cleanTagValue(value); - } else { - tag[field.key] = context.cleanTagValue(value + ' mph'); - } - dispatch$1.call('change', this, tag); - } + function clickCancel() { + textSection.select('.field-template').property('value', _origSettings.template); + corePreferences('background-custom-template', _origSettings.template); + this.blur(); + modal.close(); + } // accept the current template - maxspeed.tags = function (tags) { - _tags = tags; - var value = tags[field.key]; - var isMixed = Array.isArray(value); - if (!isMixed) { - if (value && value.indexOf('mph') >= 0) { - value = parseInt(value, 10).toString(); - _isImperial = true; - } else if (value) { - _isImperial = false; - } + function clickSave() { + _currSettings.template = textSection.select('.field-template').property('value'); + corePreferences('background-custom-template', _currSettings.template); + this.blur(); + modal.close(); + dispatch.call('change', this, _currSettings); } + } - setUnitSuggestions(); - utilGetSetValue(input, typeof value === 'string' ? value : '').attr('title', isMixed ? value.filter(Boolean).join('\n') : null).attr('placeholder', isMixed ? _t('inspector.multiple_values') : field.placeholder()).classed('mixed', isMixed); - }; + return utilRebind(render, dispatch, 'on'); + } - maxspeed.focus = function () { - input.node().focus(); - }; + function uiSectionBackgroundList(context) { + var _backgroundList = select(null); - maxspeed.entityIDs = function (val) { - _entityIDs = val; - }; + var _customSource = context.background().findSource('custom'); - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + var _settingsCustomBackground = uiSettingsCustomBackground().on('change', customChanged); - return utilRebind(maxspeed, dispatch$1, 'on'); - } + var section = uiSection('background-list', context).label(_t.html('background.backgrounds')).disclosureContent(renderDisclosureContent); - function uiFieldRadio(field, context) { - var dispatch$1 = dispatch('change'); - var placeholder = select(null); - var wrap = select(null); - var labels = select(null); - var radios = select(null); - var radioData = (field.options || field.strings && field.strings.options && Object.keys(field.strings.options) || field.keys).slice(); // shallow copy + function previousBackgroundID() { + return corePreferences('background-last-used-toggle'); + } - var typeField; - var layerField; - var _oldType = {}; - var _entityIDs = []; + function renderDisclosureContent(selection) { + // the background list + var container = selection.selectAll('.layer-background-list').data([0]); + _backgroundList = container.enter().append('ul').attr('class', 'layer-list layer-background-list').attr('dir', 'auto').merge(container); // add minimap toggle below list - function selectedKey() { - var node = wrap.selectAll('.form-field-input-radio label.active input'); - return !node.empty() && node.datum(); - } + var bgExtrasListEnter = selection.selectAll('.bg-extras-list').data([0]).enter().append('ul').attr('class', 'layer-list bg-extras-list'); + var minimapLabelEnter = bgExtrasListEnter.append('li').attr('class', 'minimap-toggle-item').append('label').call(uiTooltip().title(_t.html('background.minimap.tooltip')).keys([_t('background.minimap.key')]).placement('top')); + minimapLabelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) { + d3_event.preventDefault(); + uiMapInMap.toggle(); + }); + minimapLabelEnter.append('span').html(_t.html('background.minimap.description')); + var panelLabelEnter = bgExtrasListEnter.append('li').attr('class', 'background-panel-toggle-item').append('label').call(uiTooltip().title(_t.html('background.panel.tooltip')).keys([uiCmd('ââ§' + _t('info_panels.background.key'))]).placement('top')); + panelLabelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) { + d3_event.preventDefault(); + context.ui().info.toggle('background'); + }); + panelLabelEnter.append('span').html(_t.html('background.panel.description')); + var locPanelLabelEnter = bgExtrasListEnter.append('li').attr('class', 'location-panel-toggle-item').append('label').call(uiTooltip().title(_t.html('background.location_panel.tooltip')).keys([uiCmd('ââ§' + _t('info_panels.location.key'))]).placement('top')); + locPanelLabelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) { + d3_event.preventDefault(); + context.ui().info.toggle('location'); + }); + locPanelLabelEnter.append('span').html(_t.html('background.location_panel.description')); // "Info / Report a Problem" link - function radio(selection) { - selection.classed('preset-radio', true); - wrap = selection.selectAll('.form-field-input-wrap').data([0]); - var enter = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-radio'); - enter.append('span').attr('class', 'placeholder'); - wrap = wrap.merge(enter); - placeholder = wrap.selectAll('.placeholder'); - labels = wrap.selectAll('label').data(radioData); - enter = labels.enter().append('label'); - enter.append('input').attr('type', 'radio').attr('name', field.id).attr('value', function (d) { - return field.t('options.' + d, { - 'default': d - }); - }).attr('checked', false); - enter.append('span').html(function (d) { - return field.t.html('options.' + d, { - 'default': d - }); + selection.selectAll('.imagery-faq').data([0]).enter().append('div').attr('class', 'imagery-faq').append('a').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).attr('href', 'https://github.com/openstreetmap/iD/blob/develop/FAQ.md#how-can-i-report-an-issue-with-background-imagery').append('span').html(_t.html('background.imagery_problem_faq')); + + _backgroundList.call(drawListItems, 'radio', function (d3_event, d) { + chooseBackground(d); + }, function (d) { + return !d.isHidden() && !d.overlay; }); - labels = labels.merge(enter); - radios = labels.selectAll('input').on('change', changeRadio); } - function structureExtras(selection, tags) { - var selected = selectedKey() || tags.layer !== undefined; - var type = _mainPresetIndex.field(selected); - var layer = _mainPresetIndex.field('layer'); - var showLayer = selected === 'bridge' || selected === 'tunnel' || tags.layer !== undefined; - var extrasWrap = selection.selectAll('.structure-extras-wrap').data(selected ? [0] : []); - extrasWrap.exit().remove(); - extrasWrap = extrasWrap.enter().append('div').attr('class', 'structure-extras-wrap').merge(extrasWrap); - var list = extrasWrap.selectAll('ul').data([0]); - list = list.enter().append('ul').attr('class', 'rows').merge(list); // Type + function setTooltips(selection) { + selection.each(function (d, i, nodes) { + var item = select(this).select('label'); + var span = item.select('span'); + var placement = i < nodes.length / 2 ? 'bottom' : 'top'; + var description = d.description(); + var isOverflowing = span.property('clientWidth') !== span.property('scrollWidth'); + item.call(uiTooltip().destroyAny); - if (type) { - if (!typeField || typeField.id !== selected) { - typeField = uiField(context, type, _entityIDs, { - wrap: false - }).on('change', changeType); + if (d.id === previousBackgroundID()) { + item.call(uiTooltip().placement(placement).title('
' + _t.html('background.switch') + '
').keys([uiCmd('â' + _t('background.key'))]));
+ } else if (description || isOverflowing) {
+ item.call(uiTooltip().placement(placement).title(description || d.label()));
}
+ });
+ }
- typeField.tags(tags);
- } else {
- typeField = null;
- }
-
- var typeItem = list.selectAll('.structure-type-item').data(typeField ? [typeField] : [], function (d) {
+ function drawListItems(layerList, type, change, filter) {
+ var sources = context.background().sources(context.map().extent(), context.map().zoom(), true).filter(filter).sort(function (a, b) {
+ return a.best() && !b.best() ? -1 : b.best() && !a.best() ? 1 : d3_descending(a.area(), b.area()) || d3_ascending(a.name(), b.name()) || 0;
+ });
+ var layerLinks = layerList.selectAll('li') // We have to be a bit inefficient about reordering the list since
+ // arrow key navigation of radio values likes to work in the order
+ // they were added, not the display document order.
+ .data(sources, function (d, i) {
+ return d.id + '---' + i;
+ });
+ layerLinks.exit().remove();
+ var enter = layerLinks.enter().append('li').classed('layer-custom', function (d) {
+ return d.id === 'custom';
+ }).classed('best', function (d) {
+ return d.best();
+ });
+ var label = enter.append('label');
+ label.append('input').attr('type', type).attr('name', 'background-layer').attr('value', function (d) {
return d.id;
- }); // Exit
-
- typeItem.exit().remove(); // Enter
+ }).on('change', change);
+ label.append('span').html(function (d) {
+ return d.label();
+ });
+ enter.filter(function (d) {
+ return d.id === 'custom';
+ }).append('button').attr('class', 'layer-browse').call(uiTooltip().title(_t.html('settings.custom_background.tooltip')).placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ editCustom();
+ }).call(svgIcon('#iD-icon-more'));
+ enter.filter(function (d) {
+ return d.best();
+ }).append('div').attr('class', 'best').call(uiTooltip().title(_t.html('background.best_imagery')).placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left')).append('span').html('★');
+ layerList.call(updateLayerSelections);
+ }
- var typeEnter = typeItem.enter().insert('li', ':first-child').attr('class', 'labeled-input structure-type-item');
- typeEnter.append('span').attr('class', 'label structure-label-type').attr('for', 'preset-input-' + selected).html(_t.html('inspector.radio.structure.type'));
- typeEnter.append('div').attr('class', 'structure-input-type-wrap'); // Update
+ function updateLayerSelections(selection) {
+ function active(d) {
+ return context.background().showsLayer(d);
+ }
- typeItem = typeItem.merge(typeEnter);
+ selection.selectAll('li').classed('active', active).classed('switch', function (d) {
+ return d.id === previousBackgroundID();
+ }).call(setTooltips).selectAll('input').property('checked', active);
+ }
- if (typeField) {
- typeItem.selectAll('.structure-input-type-wrap').call(typeField.render);
- } // Layer
+ function chooseBackground(d) {
+ if (d.id === 'custom' && !d.template()) {
+ return editCustom();
+ }
+ var previousBackground = context.background().baseLayerSource();
+ corePreferences('background-last-used-toggle', previousBackground.id);
+ corePreferences('background-last-used', d.id);
+ context.background().baseLayerSource(d);
+ }
- if (layer && showLayer) {
- if (!layerField) {
- layerField = uiField(context, layer, _entityIDs, {
- wrap: false
- }).on('change', changeLayer);
- }
+ function customChanged(d) {
+ if (d && d.template) {
+ _customSource.template(d.template);
- layerField.tags(tags);
- field.keys = utilArrayUnion(field.keys, ['layer']);
+ chooseBackground(_customSource);
} else {
- layerField = null;
- field.keys = field.keys.filter(function (k) {
- return k !== 'layer';
- });
+ _customSource.template('');
+
+ chooseBackground(context.background().findSource('none'));
}
+ }
- var layerItem = list.selectAll('.structure-layer-item').data(layerField ? [layerField] : []); // Exit
+ function editCustom() {
+ context.container().call(_settingsCustomBackground);
+ }
- layerItem.exit().remove(); // Enter
+ context.background().on('change.background_list', function () {
+ _backgroundList.call(updateLayerSelections);
+ });
+ context.map().on('move.background_list', debounce(function () {
+ // layers in-view may have changed due to map move
+ window.requestIdleCallback(section.reRender);
+ }, 1000));
+ return section;
+ }
- var layerEnter = layerItem.enter().append('li').attr('class', 'labeled-input structure-layer-item');
- layerEnter.append('span').attr('class', 'label structure-label-layer').attr('for', 'preset-input-layer').html(_t.html('inspector.radio.structure.layer'));
- layerEnter.append('div').attr('class', 'structure-input-layer-wrap'); // Update
+ function uiSectionBackgroundOffset(context) {
+ var section = uiSection('background-offset', context).label(_t.html('background.fix_misalignment')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- layerItem = layerItem.merge(layerEnter);
+ var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
- if (layerField) {
- layerItem.selectAll('.structure-input-layer-wrap').call(layerField.render);
- }
+ var _directions = [['top', [0, -0.5]], ['left', [-0.5, 0]], ['right', [0.5, 0]], ['bottom', [0, 0.5]]];
+
+ function updateValue() {
+ var meters = geoOffsetToMeters(context.background().offset());
+ var x = +meters[0].toFixed(2);
+ var y = +meters[1].toFixed(2);
+ context.container().selectAll('.nudge-inner-rect').select('input').classed('error', false).property('value', x + ', ' + y);
+ context.container().selectAll('.nudge-reset').classed('disabled', function () {
+ return x === 0 && y === 0;
+ });
}
- function changeType(t, onInput) {
- var key = selectedKey();
- if (!key) return;
- var val = t[key];
+ function resetOffset() {
+ context.background().offset([0, 0]);
+ updateValue();
+ }
- if (val !== 'no') {
- _oldType[key] = val;
+ function nudge(d) {
+ context.background().nudge(d, context.map().zoom());
+ updateValue();
+ }
+
+ function inputOffset() {
+ var input = select(this);
+ var d = input.node().value;
+ if (d === '') return resetOffset();
+ d = d.replace(/;/g, ',').split(',').map(function (n) {
+ // if n is NaN, it will always get mapped to false.
+ return !isNaN(n) && n;
+ });
+
+ if (d.length !== 2 || !d[0] || !d[1]) {
+ input.classed('error', true);
+ return;
}
- if (field.type === 'structureRadio') {
- // remove layer if it should not be set
- if (val === 'no' || key !== 'bridge' && key !== 'tunnel' || key === 'tunnel' && val === 'building_passage') {
- t.layer = undefined;
- } // add layer if it should be set
+ context.background().offset(geoMetersToOffset(d));
+ updateValue();
+ }
+
+ function dragOffset(d3_event) {
+ if (d3_event.button !== 0) return;
+ var origin = [d3_event.clientX, d3_event.clientY];
+ var pointerId = d3_event.pointerId || 'mouse';
+ context.container().append('div').attr('class', 'nudge-surface');
+ select(window).on(_pointerPrefix + 'move.drag-bg-offset', pointermove).on(_pointerPrefix + 'up.drag-bg-offset', pointerup);
+ if (_pointerPrefix === 'pointer') {
+ select(window).on('pointercancel.drag-bg-offset', pointerup);
+ }
- if (t.layer === undefined) {
- if (key === 'bridge' && val !== 'no') {
- t.layer = '1';
- }
+ function pointermove(d3_event) {
+ if (pointerId !== (d3_event.pointerId || 'mouse')) return;
+ var latest = [d3_event.clientX, d3_event.clientY];
+ var d = [-(origin[0] - latest[0]) / 4, -(origin[1] - latest[1]) / 4];
+ origin = latest;
+ nudge(d);
+ }
- if (key === 'tunnel' && val !== 'no' && val !== 'building_passage') {
- t.layer = '-1';
- }
- }
+ function pointerup(d3_event) {
+ if (pointerId !== (d3_event.pointerId || 'mouse')) return;
+ if (d3_event.button !== 0) return;
+ context.container().selectAll('.nudge-surface').remove();
+ select(window).on('.drag-bg-offset', null);
}
+ }
- dispatch$1.call('change', this, t, onInput);
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.nudge-container').data([0]);
+ var containerEnter = container.enter().append('div').attr('class', 'nudge-container');
+ containerEnter.append('div').attr('class', 'nudge-instructions').html(_t.html('background.offset'));
+ var nudgeWrapEnter = containerEnter.append('div').attr('class', 'nudge-controls-wrap');
+ var nudgeEnter = nudgeWrapEnter.append('div').attr('class', 'nudge-outer-rect').on(_pointerPrefix + 'down', dragOffset);
+ nudgeEnter.append('div').attr('class', 'nudge-inner-rect').append('input').attr('type', 'text').on('change', inputOffset);
+ nudgeWrapEnter.append('div').selectAll('button').data(_directions).enter().append('button').attr('class', function (d) {
+ return d[0] + ' nudge';
+ }).on('click', function (d3_event, d) {
+ nudge(d[1]);
+ });
+ nudgeWrapEnter.append('button').attr('title', _t('background.reset')).attr('class', 'nudge-reset disabled').on('click', function (d3_event) {
+ d3_event.preventDefault();
+ resetOffset();
+ }).call(svgIcon('#iD-icon-' + (_mainLocalizer.textDirection() === 'rtl' ? 'redo' : 'undo')));
+ updateValue();
}
- function changeLayer(t, onInput) {
- if (t.layer === '0') {
- t.layer = undefined;
- }
-
- dispatch$1.call('change', this, t, onInput);
- }
+ context.background().on('change.backgroundOffset-update', updateValue);
+ return section;
+ }
- function changeRadio() {
- var t = {};
- var activeKey;
+ function uiSectionOverlayList(context) {
+ var section = uiSection('overlay-list', context).label(_t.html('background.overlays')).disclosureContent(renderDisclosureContent);
- if (field.key) {
- t[field.key] = undefined;
- }
+ var _overlayList = select(null);
- radios.each(function (d) {
- var active = select(this).property('checked');
- if (active) activeKey = d;
+ function setTooltips(selection) {
+ selection.each(function (d, i, nodes) {
+ var item = select(this).select('label');
+ var span = item.select('span');
+ var placement = i < nodes.length / 2 ? 'bottom' : 'top';
+ var description = d.description();
+ var isOverflowing = span.property('clientWidth') !== span.property('scrollWidth');
+ item.call(uiTooltip().destroyAny);
- if (field.key) {
- if (active) t[field.key] = d;
- } else {
- var val = _oldType[activeKey] || 'yes';
- t[d] = active ? val : undefined;
+ if (description || isOverflowing) {
+ item.call(uiTooltip().placement(placement).title(description || d.name()));
}
});
+ }
- if (field.type === 'structureRadio') {
- if (activeKey === 'bridge') {
- t.layer = '1';
- } else if (activeKey === 'tunnel' && t.tunnel !== 'building_passage') {
- t.layer = '-1';
- } else {
- t.layer = undefined;
- }
+ function updateLayerSelections(selection) {
+ function active(d) {
+ return context.background().showsLayer(d);
}
- dispatch$1.call('change', this, t);
+ selection.selectAll('li').classed('active', active).call(setTooltips).selectAll('input').property('checked', active);
}
- radio.tags = function (tags) {
- radios.property('checked', function (d) {
- if (field.key) {
- return tags[field.key] === d;
- }
-
- return !!(typeof tags[d] === 'string' && tags[d].toLowerCase() !== 'no');
- });
-
- function isMixed(d) {
- if (field.key) {
- return Array.isArray(tags[field.key]) && tags[field.key].includes(d);
- }
+ function chooseOverlay(d3_event, d) {
+ d3_event.preventDefault();
+ context.background().toggleOverlayLayer(d);
- return Array.isArray(tags[d]);
- }
+ _overlayList.call(updateLayerSelections);
- labels.classed('active', function (d) {
- if (field.key) {
- return Array.isArray(tags[field.key]) && tags[field.key].includes(d) || tags[field.key] === d;
- }
+ document.activeElement.blur();
+ }
- return Array.isArray(tags[d]) || !!(tags[d] && tags[d].toLowerCase() !== 'no');
- }).classed('mixed', isMixed).attr('title', function (d) {
- return isMixed(d) ? _t('inspector.unshared_value_tooltip') : null;
+ function drawListItems(layerList, type, change, filter) {
+ var sources = context.background().sources(context.map().extent(), context.map().zoom(), true).filter(filter);
+ var layerLinks = layerList.selectAll('li').data(sources, function (d) {
+ return d.name();
});
- var selection = radios.filter(function () {
- return this.checked;
+ layerLinks.exit().remove();
+ var enter = layerLinks.enter().append('li');
+ var label = enter.append('label');
+ label.append('input').attr('type', type).attr('name', 'layers').on('change', change);
+ label.append('span').html(function (d) {
+ return d.label();
});
+ layerList.selectAll('li').sort(sortSources);
+ layerList.call(updateLayerSelections);
- if (selection.empty()) {
- placeholder.html(_t.html('inspector.none'));
- } else {
- placeholder.html(selection.attr('value'));
- _oldType[selection.datum()] = tags[selection.datum()];
+ function sortSources(a, b) {
+ return a.best() && !b.best() ? -1 : b.best() && !a.best() ? 1 : d3_descending(a.area(), b.area()) || d3_ascending(a.name(), b.name()) || 0;
}
+ }
- if (field.type === 'structureRadio') {
- // For waterways without a tunnel tag, set 'culvert' as
- // the _oldType to default to if the user picks 'tunnel'
- if (!!tags.waterway && !_oldType.tunnel) {
- _oldType.tunnel = 'culvert';
- }
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.layer-overlay-list').data([0]);
+ _overlayList = container.enter().append('ul').attr('class', 'layer-list layer-overlay-list').attr('dir', 'auto').merge(container);
- wrap.call(structureExtras, tags);
- }
- };
+ _overlayList.call(drawListItems, 'checkbox', chooseOverlay, function (d) {
+ return !d.isHidden() && d.overlay;
+ });
+ }
- radio.focus = function () {
- radios.node().focus();
- };
+ context.map().on('move.overlay_list', debounce(function () {
+ // layers in-view may have changed due to map move
+ window.requestIdleCallback(section.reRender);
+ }, 1000));
+ return section;
+ }
- radio.entityIDs = function (val) {
- if (!arguments.length) return _entityIDs;
- _entityIDs = val;
- _oldType = {};
- return radio;
- };
+ function uiPaneBackground(context) {
+ var backgroundPane = uiPane('background', context).key(_t('background.key')).label(_t.html('background.title')).description(_t.html('background.description')).iconName('iD-icon-layers').sections([uiSectionBackgroundList(context), uiSectionOverlayList(context), uiSectionBackgroundDisplayOptions(context), uiSectionBackgroundOffset(context)]);
+ return backgroundPane;
+ }
- radio.isAllowed = function () {
- return _entityIDs.length === 1;
- };
+ function uiPaneHelp(context) {
+ var docKeys = [['help', ['welcome', 'open_data_h', 'open_data', 'before_start_h', 'before_start', 'open_source_h', 'open_source', 'open_source_help']], ['overview', ['navigation_h', 'navigation_drag', 'navigation_zoom', 'features_h', 'features', 'nodes_ways']], ['editing', ['select_h', 'select_left_click', 'select_right_click', 'select_space', 'multiselect_h', 'multiselect', 'multiselect_shift_click', 'multiselect_lasso', 'undo_redo_h', 'undo_redo', 'save_h', 'save', 'save_validation', 'upload_h', 'upload', 'backups_h', 'backups', 'keyboard_h', 'keyboard']], ['feature_editor', ['intro', 'definitions', 'type_h', 'type', 'type_picker', 'fields_h', 'fields_all_fields', 'fields_example', 'fields_add_field', 'tags_h', 'tags_all_tags', 'tags_resources']], ['points', ['intro', 'add_point_h', 'add_point', 'add_point_finish', 'move_point_h', 'move_point', 'delete_point_h', 'delete_point', 'delete_point_command']], ['lines', ['intro', 'add_line_h', 'add_line', 'add_line_draw', 'add_line_continue', 'add_line_finish', 'modify_line_h', 'modify_line_dragnode', 'modify_line_addnode', 'connect_line_h', 'connect_line', 'connect_line_display', 'connect_line_drag', 'connect_line_tag', 'disconnect_line_h', 'disconnect_line_command', 'move_line_h', 'move_line_command', 'move_line_connected', 'delete_line_h', 'delete_line', 'delete_line_command']], ['areas', ['intro', 'point_or_area_h', 'point_or_area', 'add_area_h', 'add_area_command', 'add_area_draw', 'add_area_continue', 'add_area_finish', 'square_area_h', 'square_area_command', 'modify_area_h', 'modify_area_dragnode', 'modify_area_addnode', 'delete_area_h', 'delete_area', 'delete_area_command']], ['relations', ['intro', 'edit_relation_h', 'edit_relation', 'edit_relation_add', 'edit_relation_delete', 'maintain_relation_h', 'maintain_relation', 'relation_types_h', 'multipolygon_h', 'multipolygon', 'multipolygon_create', 'multipolygon_merge', 'turn_restriction_h', 'turn_restriction', 'turn_restriction_field', 'turn_restriction_editing', 'route_h', 'route', 'route_add', 'boundary_h', 'boundary', 'boundary_add']], ['operations', ['intro', 'intro_2', 'straighten', 'orthogonalize', 'circularize', 'move', 'rotate', 'reflect', 'continue', 'reverse', 'disconnect', 'split', 'extract', 'merge', 'delete', 'downgrade', 'copy_paste']], ['notes', ['intro', 'add_note_h', 'add_note', 'place_note', 'move_note', 'update_note_h', 'update_note', 'save_note_h', 'save_note']], ['imagery', ['intro', 'sources_h', 'choosing', 'sources', 'offsets_h', 'offset', 'offset_change']], ['streetlevel', ['intro', 'using_h', 'using', 'photos', 'viewer']], ['gps', ['intro', 'survey', 'using_h', 'using', 'tracing', 'upload']], ['qa', ['intro', 'tools_h', 'tools', 'issues_h', 'issues']]];
+ var headings = {
+ 'help.help.open_data_h': 3,
+ 'help.help.before_start_h': 3,
+ 'help.help.open_source_h': 3,
+ 'help.overview.navigation_h': 3,
+ 'help.overview.features_h': 3,
+ 'help.editing.select_h': 3,
+ 'help.editing.multiselect_h': 3,
+ 'help.editing.undo_redo_h': 3,
+ 'help.editing.save_h': 3,
+ 'help.editing.upload_h': 3,
+ 'help.editing.backups_h': 3,
+ 'help.editing.keyboard_h': 3,
+ 'help.feature_editor.type_h': 3,
+ 'help.feature_editor.fields_h': 3,
+ 'help.feature_editor.tags_h': 3,
+ 'help.points.add_point_h': 3,
+ 'help.points.move_point_h': 3,
+ 'help.points.delete_point_h': 3,
+ 'help.lines.add_line_h': 3,
+ 'help.lines.modify_line_h': 3,
+ 'help.lines.connect_line_h': 3,
+ 'help.lines.disconnect_line_h': 3,
+ 'help.lines.move_line_h': 3,
+ 'help.lines.delete_line_h': 3,
+ 'help.areas.point_or_area_h': 3,
+ 'help.areas.add_area_h': 3,
+ 'help.areas.square_area_h': 3,
+ 'help.areas.modify_area_h': 3,
+ 'help.areas.delete_area_h': 3,
+ 'help.relations.edit_relation_h': 3,
+ 'help.relations.maintain_relation_h': 3,
+ 'help.relations.relation_types_h': 2,
+ 'help.relations.multipolygon_h': 3,
+ 'help.relations.turn_restriction_h': 3,
+ 'help.relations.route_h': 3,
+ 'help.relations.boundary_h': 3,
+ 'help.notes.add_note_h': 3,
+ 'help.notes.update_note_h': 3,
+ 'help.notes.save_note_h': 3,
+ 'help.imagery.sources_h': 3,
+ 'help.imagery.offsets_h': 3,
+ 'help.streetlevel.using_h': 3,
+ 'help.gps.using_h': 3,
+ 'help.qa.tools_h': 3,
+ 'help.qa.issues_h': 3
+ }; // For each section, squash all the texts into a single markdown document
- return utilRebind(radio, dispatch$1, 'on');
- }
+ var docs = docKeys.map(function (key) {
+ var helpkey = 'help.' + key[0];
+ var helpPaneReplacements = {
+ version: context.version
+ };
+ var text = key[1].reduce(function (all, part) {
+ var subkey = helpkey + '.' + part;
+ var depth = headings[subkey]; // is this subkey a heading?
- function uiFieldRestrictions(field, context) {
- var dispatch$1 = dispatch('change');
- var breathe = behaviorBreathe();
- corePreferences('turn-restriction-via-way', null); // remove old key
+ var hhh = depth ? Array(depth + 1).join('#') + ' ' : ''; // if so, prepend with some ##'s
- var storedViaWay = corePreferences('turn-restriction-via-way0'); // use new key #6922
+ return all + hhh + helpHtml(subkey, helpPaneReplacements) + '\n\n';
+ }, '');
+ return {
+ title: _t.html(helpkey + '.title'),
+ content: marked_1(text.trim()) // use keyboard key styling for shortcuts
+ .replace(//g, '').replace(/<\/code>/g, '<\/kbd>')
+ };
+ });
+ var helpPane = uiPane('help', context).key(_t('help.key')).label(_t.html('help.title')).description(_t.html('help.title')).iconName('iD-icon-help');
- var storedDistance = corePreferences('turn-restriction-distance');
+ helpPane.renderContent = function (content) {
+ function clickHelp(d, i) {
+ var rtl = _mainLocalizer.textDirection() === 'rtl';
+ content.property('scrollTop', 0);
+ helpPane.selection().select('.pane-heading h2').html(d.title);
+ body.html(d.content);
+ body.selectAll('a').attr('target', '_blank');
+ menuItems.classed('selected', function (m) {
+ return m.title === d.title;
+ });
+ nav.html('');
- var _maxViaWay = storedViaWay !== null ? +storedViaWay : 0;
+ if (rtl) {
+ nav.call(drawNext).call(drawPrevious);
+ } else {
+ nav.call(drawPrevious).call(drawNext);
+ }
- var _maxDistance = storedDistance ? +storedDistance : 30;
+ function drawNext(selection) {
+ if (i < docs.length - 1) {
+ var nextLink = selection.append('a').attr('href', '#').attr('class', 'next').on('click', function (d3_event) {
+ d3_event.preventDefault();
+ clickHelp(docs[i + 1], i + 1);
+ });
+ nextLink.append('span').html(docs[i + 1].title).call(svgIcon(rtl ? '#iD-icon-backward' : '#iD-icon-forward', 'inline'));
+ }
+ }
- var _initialized = false;
+ function drawPrevious(selection) {
+ if (i > 0) {
+ var prevLink = selection.append('a').attr('href', '#').attr('class', 'previous').on('click', function (d3_event) {
+ d3_event.preventDefault();
+ clickHelp(docs[i - 1], i - 1);
+ });
+ prevLink.call(svgIcon(rtl ? '#iD-icon-forward' : '#iD-icon-backward', 'inline')).append('span').html(docs[i - 1].title);
+ }
+ }
+ }
- var _parent = select(null); // the entire field
+ function clickWalkthrough(d3_event) {
+ d3_event.preventDefault();
+ if (context.inIntro()) return;
+ context.container().call(uiIntro(context));
+ context.ui().togglePanes();
+ }
+ function clickShortcuts(d3_event) {
+ d3_event.preventDefault();
+ context.container().call(context.ui().shortcuts, true);
+ }
- var _container = select(null); // just the map
+ var toc = content.append('ul').attr('class', 'toc');
+ var menuItems = toc.selectAll('li').data(docs).enter().append('li').append('a').attr('href', '#').html(function (d) {
+ return d.title;
+ }).on('click', function (d3_event, d) {
+ d3_event.preventDefault();
+ clickHelp(d, docs.indexOf(d));
+ });
+ var shortcuts = toc.append('li').attr('class', 'shortcuts').call(uiTooltip().title(_t.html('shortcuts.tooltip')).keys(['?']).placement('top')).append('a').attr('href', '#').on('click', clickShortcuts);
+ shortcuts.append('div').html(_t.html('shortcuts.title'));
+ var walkthrough = toc.append('li').attr('class', 'walkthrough').append('a').attr('href', '#').on('click', clickWalkthrough);
+ walkthrough.append('svg').attr('class', 'logo logo-walkthrough').append('use').attr('xlink:href', '#iD-logo-walkthrough');
+ walkthrough.append('div').html(_t.html('splash.walkthrough'));
+ var helpContent = content.append('div').attr('class', 'left-content');
+ var body = helpContent.append('div').attr('class', 'body');
+ var nav = helpContent.append('div').attr('class', 'nav');
+ clickHelp(docs[0], 0);
+ };
+ return helpPane;
+ }
- var _oldTurns;
+ function uiSectionValidationIssues(id, severity, context) {
+ var _issues = [];
+ var section = uiSection(id, context).label(function () {
+ if (!_issues) return '';
+ var issueCountText = _issues.length > 1000 ? '1000+' : String(_issues.length);
+ return _t('inspector.title_count', {
+ title: _t.html('issues.' + severity + 's.list_title'),
+ count: issueCountText
+ });
+ }).disclosureContent(renderDisclosureContent).shouldDisplay(function () {
+ return _issues && _issues.length;
+ });
- var _graph;
+ function getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ where: corePreferences('validate-where') || 'all'
+ };
+ } // get and cache the issues to display, unordered
- var _vertexID;
- var _intersection;
+ function reloadIssues() {
+ _issues = context.validator().getIssuesBySeverity(getOptions())[severity];
+ }
- var _fromWayID;
+ function renderDisclosureContent(selection) {
+ var center = context.map().center();
+ var graph = context.graph(); // sort issues by distance away from the center of the map
- var _lastXPos;
+ var issues = _issues.map(function withDistance(issue) {
+ var extent = issue.extent(graph);
+ var dist = extent ? geoSphericalDistance(center, extent.center()) : 0;
+ return Object.assign(issue, {
+ dist: dist
+ });
+ }).sort(function byDistance(a, b) {
+ return a.dist - b.dist;
+ }); // cut off at 1000
- function restrictions(selection) {
- _parent = selection; // try to reuse the intersection, but always rebuild it if the graph has changed
- if (_vertexID && (context.graph() !== _graph || !_intersection)) {
- _graph = context.graph();
- _intersection = osmIntersection(_graph, _vertexID, _maxDistance);
- } // It's possible for there to be no actual intersection here.
- // for example, a vertex of two `highway=path`
- // In this case, hide the field.
+ issues = issues.slice(0, 1000); //renderIgnoredIssuesReset(_warningsSelection);
+ selection.call(drawIssuesList, issues);
+ }
- var isOK = _intersection && _intersection.vertices.length && // has vertices
- _intersection.vertices // has the vertex that the user selected
- .filter(function (vertex) {
- return vertex.id === _vertexID;
- }).length && _intersection.ways.length > 2 && // has more than 2 ways
- _intersection.ways // has more than 1 TO way
- .filter(function (way) {
- return way.__to;
- }).length > 1; // Also hide in the case where
+ function drawIssuesList(selection, issues) {
+ var list = selection.selectAll('.issues-list').data([0]);
+ list = list.enter().append('ul').attr('class', 'layer-list issues-list ' + severity + 's-list').merge(list);
+ var items = list.selectAll('li').data(issues, function (d) {
+ return d.id;
+ }); // Exit
- select(selection.node().parentNode).classed('hide', !isOK); // if form field is hidden or has detached from dom, clean up.
+ items.exit().remove(); // Enter
- if (!isOK || !context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode || !selection.node().parentNode.parentNode) {
- selection.call(restrictions.off);
- return;
+ var itemsEnter = items.enter().append('li').attr('class', function (d) {
+ return 'issue severity-' + d.severity;
+ });
+ var labelsEnter = itemsEnter.append('button').attr('class', 'issue-label').on('click', function (d3_event, d) {
+ context.validator().focusIssue(d);
+ }).on('mouseover', function (d3_event, d) {
+ utilHighlightEntities(d.entityIds, true, context);
+ }).on('mouseout', function (d3_event, d) {
+ utilHighlightEntities(d.entityIds, false, context);
+ });
+ var textEnter = labelsEnter.append('span').attr('class', 'issue-text');
+ textEnter.append('span').attr('class', 'issue-icon').each(function (d) {
+ var iconName = '#iD-icon-' + (d.severity === 'warning' ? 'alert' : 'error');
+ select(this).call(svgIcon(iconName));
+ });
+ textEnter.append('span').attr('class', 'issue-message');
+ /*
+ labelsEnter
+ .append('span')
+ .attr('class', 'issue-autofix')
+ .each(function(d) {
+ if (!d.autoFix) return;
+ d3_select(this)
+ .append('button')
+ .attr('title', t('issues.fix_one.title'))
+ .datum(d.autoFix) // set button datum to the autofix
+ .attr('class', 'autofix action')
+ .on('click', function(d3_event, d) {
+ d3_event.preventDefault();
+ d3_event.stopPropagation();
+ var issuesEntityIDs = d.issue.entityIds;
+ utilHighlightEntities(issuesEntityIDs.concat(d.entityIds), false, context);
+ context.perform.apply(context, d.autoArgs);
+ context.validator().validate();
+ })
+ .call(svgIcon('#iD-icon-wrench'));
+ });
+ */
+ // Update
+
+ items = items.merge(itemsEnter).order();
+ items.selectAll('.issue-message').html(function (d) {
+ return d.message(context);
+ });
+ /*
+ // autofix
+ var canAutoFix = issues.filter(function(issue) { return issue.autoFix; });
+ var autoFixAll = selection.selectAll('.autofix-all')
+ .data(canAutoFix.length ? [0] : []);
+ // exit
+ autoFixAll.exit()
+ .remove();
+ // enter
+ var autoFixAllEnter = autoFixAll.enter()
+ .insert('div', '.issues-list')
+ .attr('class', 'autofix-all');
+ var linkEnter = autoFixAllEnter
+ .append('a')
+ .attr('class', 'autofix-all-link')
+ .attr('href', '#');
+ linkEnter
+ .append('span')
+ .attr('class', 'autofix-all-link-text')
+ .html(t.html('issues.fix_all.title'));
+ linkEnter
+ .append('span')
+ .attr('class', 'autofix-all-link-icon')
+ .call(svgIcon('#iD-icon-wrench'));
+ if (severity === 'warning') {
+ renderIgnoredIssuesReset(selection);
}
+ // update
+ autoFixAll = autoFixAll
+ .merge(autoFixAllEnter);
+ autoFixAll.selectAll('.autofix-all-link')
+ .on('click', function() {
+ context.pauseChangeDispatch();
+ context.perform(actionNoop());
+ canAutoFix.forEach(function(issue) {
+ var args = issue.autoFix.autoArgs.slice(); // copy
+ if (typeof args[args.length - 1] !== 'function') {
+ args.pop();
+ }
+ args.push(t('issues.fix_all.annotation'));
+ context.replace.apply(context, args);
+ });
+ context.resumeChangeDispatch();
+ context.validator().validate();
+ });
+ */
+ }
- var wrap = selection.selectAll('.form-field-input-wrap').data([0]);
- wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap);
- var container = wrap.selectAll('.restriction-container').data([0]); // enter
+ context.validator().on('validated.uiSectionValidationIssues' + id, function () {
+ window.requestIdleCallback(function () {
+ reloadIssues();
+ section.reRender();
+ });
+ });
+ context.map().on('move.uiSectionValidationIssues' + id, debounce(function () {
+ window.requestIdleCallback(function () {
+ if (getOptions().where === 'visible') {
+ // must refetch issues if they are viewport-dependent
+ reloadIssues();
+ } // always reload list to re-sort-by-distance
- var containerEnter = container.enter().append('div').attr('class', 'restriction-container');
- containerEnter.append('div').attr('class', 'restriction-help'); // update
- _container = containerEnter.merge(container).call(renderViewer);
- var controls = wrap.selectAll('.restriction-controls').data([0]); // enter/update
+ section.reRender();
+ });
+ }, 1000));
+ return section;
+ }
- controls.enter().append('div').attr('class', 'restriction-controls-container').append('div').attr('class', 'restriction-controls').merge(controls).call(renderControls);
+ function uiSectionValidationOptions(context) {
+ var section = uiSection('issues-options', context).content(renderContent);
+
+ function renderContent(selection) {
+ var container = selection.selectAll('.issues-options-container').data([0]);
+ container = container.enter().append('div').attr('class', 'issues-options-container').merge(container);
+ var data = [{
+ key: 'what',
+ values: ['edited', 'all']
+ }, {
+ key: 'where',
+ values: ['visible', 'all']
+ }];
+ var options = container.selectAll('.issues-option').data(data, function (d) {
+ return d.key;
+ });
+ var optionsEnter = options.enter().append('div').attr('class', function (d) {
+ return 'issues-option issues-option-' + d.key;
+ });
+ optionsEnter.append('div').attr('class', 'issues-option-title').html(function (d) {
+ return _t.html('issues.options.' + d.key + '.title');
+ });
+ var valuesEnter = optionsEnter.selectAll('label').data(function (d) {
+ return d.values.map(function (val) {
+ return {
+ value: val,
+ key: d.key
+ };
+ });
+ }).enter().append('label');
+ valuesEnter.append('input').attr('type', 'radio').attr('name', function (d) {
+ return 'issues-option-' + d.key;
+ }).attr('value', function (d) {
+ return d.value;
+ }).property('checked', function (d) {
+ return getOptions()[d.key] === d.value;
+ }).on('change', function (d3_event, d) {
+ updateOptionValue(d3_event, d.key, d.value);
+ });
+ valuesEnter.append('span').html(function (d) {
+ return _t.html('issues.options.' + d.key + '.' + d.value);
+ });
}
- function renderControls(selection) {
- var distControl = selection.selectAll('.restriction-distance').data([0]);
- distControl.exit().remove();
- var distControlEnter = distControl.enter().append('div').attr('class', 'restriction-control restriction-distance');
- distControlEnter.append('span').attr('class', 'restriction-control-label restriction-distance-label').html(_t.html('restriction.controls.distance') + ':');
- distControlEnter.append('input').attr('class', 'restriction-distance-input').attr('type', 'range').attr('min', '20').attr('max', '50').attr('step', '5');
- distControlEnter.append('span').attr('class', 'restriction-distance-text'); // update
+ function getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ // 'all', 'edited'
+ where: corePreferences('validate-where') || 'all' // 'all', 'visible'
- selection.selectAll('.restriction-distance-input').property('value', _maxDistance).on('input', function () {
- var val = select(this).property('value');
- _maxDistance = +val;
- _intersection = null;
+ };
+ }
- _container.selectAll('.layer-osm .layer-turns *').remove();
+ function updateOptionValue(d3_event, d, val) {
+ if (!val && d3_event && d3_event.target) {
+ val = d3_event.target.value;
+ }
- corePreferences('turn-restriction-distance', _maxDistance);
+ corePreferences('validate-' + d, val);
+ context.validator().validate();
+ }
- _parent.call(restrictions);
- });
- selection.selectAll('.restriction-distance-text').html(displayMaxDistance(_maxDistance));
- var viaControl = selection.selectAll('.restriction-via-way').data([0]);
- viaControl.exit().remove();
- var viaControlEnter = viaControl.enter().append('div').attr('class', 'restriction-control restriction-via-way');
- viaControlEnter.append('span').attr('class', 'restriction-control-label restriction-via-way-label').html(_t.html('restriction.controls.via') + ':');
- viaControlEnter.append('input').attr('class', 'restriction-via-way-input').attr('type', 'range').attr('min', '0').attr('max', '2').attr('step', '1');
- viaControlEnter.append('span').attr('class', 'restriction-via-way-text'); // update
+ return section;
+ }
- selection.selectAll('.restriction-via-way-input').property('value', _maxViaWay).on('input', function () {
- var val = select(this).property('value');
- _maxViaWay = +val;
+ function uiSectionValidationRules(context) {
+ var MINSQUARE = 0;
+ var MAXSQUARE = 20;
+ var DEFAULTSQUARE = 5; // see also unsquare_way.js
- _container.selectAll('.layer-osm .layer-turns *').remove();
+ var section = uiSection('issues-rules', context).disclosureContent(renderDisclosureContent).label(_t.html('issues.rules.title'));
- corePreferences('turn-restriction-via-way0', _maxViaWay);
+ var _ruleKeys = context.validator().getRuleKeys().filter(function (key) {
+ return key !== 'maprules';
+ }).sort(function (key1, key2) {
+ // alphabetize by localized title
+ return _t('issues.' + key1 + '.title') < _t('issues.' + key2 + '.title') ? -1 : 1;
+ });
- _parent.call(restrictions);
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.issues-rulelist-container').data([0]);
+ var containerEnter = container.enter().append('div').attr('class', 'issues-rulelist-container');
+ containerEnter.append('ul').attr('class', 'layer-list issue-rules-list');
+ var ruleLinks = containerEnter.append('div').attr('class', 'issue-rules-links section-footer');
+ ruleLinks.append('a').attr('class', 'issue-rules-link').attr('href', '#').html(_t.html('issues.disable_all')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ context.validator().disableRules(_ruleKeys);
});
- selection.selectAll('.restriction-via-way-text').html(displayMaxVia(_maxViaWay));
+ ruleLinks.append('a').attr('class', 'issue-rules-link').attr('href', '#').html(_t.html('issues.enable_all')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ context.validator().disableRules([]);
+ }); // Update
+
+ container = container.merge(containerEnter);
+ container.selectAll('.issue-rules-list').call(drawListItems, _ruleKeys, 'checkbox', 'rule', toggleRule, isRuleEnabled);
}
- function renderViewer(selection) {
- if (!_intersection) return;
- var vgraph = _intersection.graph;
- var filter = utilFunctor(true);
- var projection = geoRawMercator(); // Reflow warning: `utilGetDimensions` calls `getBoundingClientRect`
- // Instead of asking the restriction-container for its dimensions,
- // we can ask the .sidebar, which can have its dimensions cached.
- // width: calc as sidebar - padding
- // height: hardcoded (from `80_app.css`)
- // var d = utilGetDimensions(selection);
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- var sdims = utilGetDimensions(context.container().select('.sidebar'));
- var d = [sdims[0] - 50, 370];
- var c = geoVecScale(d, 0.5);
- var z = 22;
- projection.scale(geoZoomToScale(z)); // Calculate extent of all key vertices
+ items.exit().remove(); // Enter
- var extent = geoExtent();
+ var enter = items.enter().append('li');
- for (var i = 0; i < _intersection.vertices.length; i++) {
- extent._extend(_intersection.vertices[i].extent());
- } // If this is a large intersection, adjust zoom to fit extent
+ if (name === 'rule') {
+ enter.call(uiTooltip().title(function (d) {
+ return _t.html('issues.' + d + '.tip');
+ }).placement('top'));
+ }
+ var label = enter.append('label');
+ label.append('input').attr('type', type).attr('name', name).on('change', change);
+ label.append('span').html(function (d) {
+ var params = {};
- if (_intersection.vertices.length > 1) {
- var padding = 180; // in z22 pixels
+ if (d === 'unsquare_way') {
+ params.val = '';
+ }
- var tl = projection([extent[0][0], extent[1][1]]);
- var br = projection([extent[1][0], extent[0][1]]);
- var hFactor = (br[0] - tl[0]) / (d[0] - padding);
- var vFactor = (br[1] - tl[1]) / (d[1] - padding);
- var hZoomDiff = Math.log(Math.abs(hFactor)) / Math.LN2;
- var vZoomDiff = Math.log(Math.abs(vFactor)) / Math.LN2;
- z = z - Math.max(hZoomDiff, vZoomDiff);
- projection.scale(geoZoomToScale(z));
- }
+ return _t.html('issues.' + d + '.title', params);
+ }); // Update
- var padTop = 35; // reserve top space for hint text
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', false); // user-configurable square threshold
- var extentCenter = projection(extent.center());
- extentCenter[1] = extentCenter[1] - padTop;
- projection.translate(geoVecSubtract(c, extentCenter)).clipExtent([[0, 0], d]);
- var drawLayers = svgLayers(projection, context).only(['osm', 'touch']).dimensions(d);
- var drawVertices = svgVertices(projection, context);
- var drawLines = svgLines(projection, context);
- var drawTurns = svgTurns(projection, context);
- var firstTime = selection.selectAll('.surface').empty();
- selection.call(drawLayers);
- var surface = selection.selectAll('.surface').classed('tr', true);
+ var degStr = corePreferences('validate-square-degrees');
- if (firstTime) {
- _initialized = true;
- surface.call(breathe);
- } // This can happen if we've lowered the detail while a FROM way
- // is selected, and that way is no longer part of the intersection.
+ if (degStr === null) {
+ degStr = DEFAULTSQUARE.toString();
+ }
+ var span = items.selectAll('.square-degrees');
+ var input = span.selectAll('.square-degrees-input').data([0]); // enter / update
- if (_fromWayID && !vgraph.hasEntity(_fromWayID)) {
- _fromWayID = null;
- _oldTurns = null;
- }
+ input.enter().append('input').attr('type', 'number').attr('min', MINSQUARE.toString()).attr('max', MAXSQUARE.toString()).attr('step', '0.5').attr('class', 'square-degrees-input').call(utilNoAuto).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ d3_event.stopPropagation();
+ this.select();
+ }).on('keyup', function (d3_event) {
+ if (d3_event.keyCode === 13) {
+ // â© Return
+ this.blur();
+ this.select();
+ }
+ }).on('blur', changeSquare).merge(input).property('value', degStr);
+ }
- surface.call(utilSetDimensions, d).call(drawVertices, vgraph, _intersection.vertices, filter, extent, z).call(drawLines, vgraph, _intersection.ways, filter).call(drawTurns, vgraph, _intersection.turns(_fromWayID, _maxViaWay));
- surface.on('click.restrictions', click).on('mouseover.restrictions', mouseover);
- surface.selectAll('.selected').classed('selected', false);
- surface.selectAll('.related').classed('related', false);
- var way;
+ function changeSquare() {
+ var input = select(this);
+ var degStr = utilGetSetValue(input).trim();
+ var degNum = parseFloat(degStr, 10);
- if (_fromWayID) {
- way = vgraph.entity(_fromWayID);
- surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true);
+ if (!isFinite(degNum)) {
+ degNum = DEFAULTSQUARE;
+ } else if (degNum > MAXSQUARE) {
+ degNum = MAXSQUARE;
+ } else if (degNum < MINSQUARE) {
+ degNum = MINSQUARE;
}
- document.addEventListener('resizeWindow', function () {
- utilSetDimensions(_container, null);
- redraw(1);
- }, false);
- updateHints(null);
+ degNum = Math.round(degNum * 10) / 10; // round to 1 decimal
- function click(d3_event) {
- surface.call(breathe.off).call(breathe);
- var datum = d3_event.target.__data__;
- var entity = datum && datum.properties && datum.properties.entity;
+ degStr = degNum.toString();
+ input.property('value', degStr);
+ corePreferences('validate-square-degrees', degStr);
+ context.validator().revalidateUnsquare();
+ }
- if (entity) {
- datum = entity;
- }
+ function isRuleEnabled(d) {
+ return context.validator().isRuleEnabled(d);
+ }
- if (datum instanceof osmWay && (datum.__from || datum.__via)) {
- _fromWayID = datum.id;
- _oldTurns = null;
- redraw();
- } else if (datum instanceof osmTurn) {
- var actions, extraActions, turns, i;
- var restrictionType = osmInferRestriction(vgraph, datum, projection);
+ function toggleRule(d3_event, d) {
+ context.validator().toggleRule(d);
+ }
- if (datum.restrictionID && !datum.direct) {
- return;
- } else if (datum.restrictionID && !datum.only) {
- // NO -> ONLY
- var seen = {};
- var datumOnly = JSON.parse(JSON.stringify(datum)); // deep clone the datum
+ context.validator().on('validated.uiSectionValidationRules', function () {
+ window.requestIdleCallback(section.reRender);
+ });
+ return section;
+ }
- datumOnly.only = true; // but change this property
+ function uiSectionValidationStatus(context) {
+ var section = uiSection('issues-status', context).content(renderContent).shouldDisplay(function () {
+ var issues = context.validator().getIssues(getOptions());
+ return issues.length === 0;
+ });
- restrictionType = restrictionType.replace(/^no/, 'only'); // Adding an ONLY restriction should destroy all other direct restrictions from the FROM towards the VIA.
- // We will remember them in _oldTurns, and restore them if the user clicks again.
+ function getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ where: corePreferences('validate-where') || 'all'
+ };
+ }
- turns = _intersection.turns(_fromWayID, 2);
- extraActions = [];
- _oldTurns = [];
+ function renderContent(selection) {
+ var box = selection.selectAll('.box').data([0]);
+ var boxEnter = box.enter().append('div').attr('class', 'box');
+ boxEnter.append('div').call(svgIcon('#iD-icon-apply', 'pre-text'));
+ var noIssuesMessage = boxEnter.append('span');
+ noIssuesMessage.append('strong').attr('class', 'message');
+ noIssuesMessage.append('br');
+ noIssuesMessage.append('span').attr('class', 'details');
+ renderIgnoredIssuesReset(selection);
+ setNoIssuesText(selection);
+ }
- for (i = 0; i < turns.length; i++) {
- var turn = turns[i];
- if (seen[turn.restrictionID]) continue; // avoid deleting the turn twice (#4968, #4928)
+ function renderIgnoredIssuesReset(selection) {
+ var ignoredIssues = context.validator().getIssues({
+ what: 'all',
+ where: 'all',
+ includeDisabledRules: true,
+ includeIgnored: 'only'
+ });
+ var resetIgnored = selection.selectAll('.reset-ignored').data(ignoredIssues.length ? [0] : []); // exit
- if (turn.direct && turn.path[1] === datum.path[1]) {
- seen[turns[i].restrictionID] = true;
- turn.restrictionType = osmInferRestriction(vgraph, turn, projection);
+ resetIgnored.exit().remove(); // enter
- _oldTurns.push(turn);
+ var resetIgnoredEnter = resetIgnored.enter().append('div').attr('class', 'reset-ignored section-footer');
+ resetIgnoredEnter.append('a').attr('href', '#'); // update
- extraActions.push(actionUnrestrictTurn(turn));
- }
- }
+ resetIgnored = resetIgnored.merge(resetIgnoredEnter);
+ resetIgnored.select('a').html(_t('inspector.title_count', {
+ title: _t.html('issues.reset_ignored'),
+ count: ignoredIssues.length
+ }));
+ resetIgnored.on('click', function (d3_event) {
+ d3_event.preventDefault();
+ context.validator().resetIgnoredIssues();
+ });
+ }
- actions = _intersection.actions.concat(extraActions, [actionRestrictTurn(datumOnly, restrictionType), _t('operations.restriction.annotation.create')]);
- } else if (datum.restrictionID) {
- // ONLY -> Allowed
- // Restore whatever restrictions we might have destroyed by cycling thru the ONLY state.
- // This relies on the assumption that the intersection was already split up when we
- // performed the previous action (NO -> ONLY), so the IDs in _oldTurns shouldn't have changed.
- turns = _oldTurns || [];
- extraActions = [];
+ function setNoIssuesText(selection) {
+ var opts = getOptions();
- for (i = 0; i < turns.length; i++) {
- if (turns[i].key !== datum.key) {
- extraActions.push(actionRestrictTurn(turns[i], turns[i].restrictionType));
- }
- }
+ function checkForHiddenIssues(cases) {
+ for (var type in cases) {
+ var hiddenOpts = cases[type];
+ var hiddenIssues = context.validator().getIssues(hiddenOpts);
- _oldTurns = null;
- actions = _intersection.actions.concat(extraActions, [actionUnrestrictTurn(datum), _t('operations.restriction.annotation.delete')]);
- } else {
- // Allowed -> NO
- actions = _intersection.actions.concat([actionRestrictTurn(datum, restrictionType), _t('operations.restriction.annotation.create')]);
+ if (hiddenIssues.length) {
+ selection.select('.box .details').html(_t.html('issues.no_issues.hidden_issues.' + type, {
+ count: hiddenIssues.length.toString()
+ }));
+ return;
}
+ }
- context.perform.apply(context, actions); // At this point the datum will be changed, but will have same key..
- // Refresh it and update the help..
+ selection.select('.box .details').html(_t.html('issues.no_issues.hidden_issues.none'));
+ }
- var s = surface.selectAll('.' + datum.key);
- datum = s.empty() ? null : s.datum();
- updateHints(datum);
- } else {
- _fromWayID = null;
- _oldTurns = null;
- redraw();
- }
+ var messageType;
+
+ if (opts.what === 'edited' && opts.where === 'visible') {
+ messageType = 'edits_in_view';
+ checkForHiddenIssues({
+ elsewhere: {
+ what: 'edited',
+ where: 'all'
+ },
+ everything_else: {
+ what: 'all',
+ where: 'visible'
+ },
+ disabled_rules: {
+ what: 'edited',
+ where: 'visible',
+ includeDisabledRules: 'only'
+ },
+ everything_else_elsewhere: {
+ what: 'all',
+ where: 'all'
+ },
+ disabled_rules_elsewhere: {
+ what: 'edited',
+ where: 'all',
+ includeDisabledRules: 'only'
+ },
+ ignored_issues: {
+ what: 'edited',
+ where: 'visible',
+ includeIgnored: 'only'
+ },
+ ignored_issues_elsewhere: {
+ what: 'edited',
+ where: 'all',
+ includeIgnored: 'only'
+ }
+ });
+ } else if (opts.what === 'edited' && opts.where === 'all') {
+ messageType = 'edits';
+ checkForHiddenIssues({
+ everything_else: {
+ what: 'all',
+ where: 'all'
+ },
+ disabled_rules: {
+ what: 'edited',
+ where: 'all',
+ includeDisabledRules: 'only'
+ },
+ ignored_issues: {
+ what: 'edited',
+ where: 'all',
+ includeIgnored: 'only'
+ }
+ });
+ } else if (opts.what === 'all' && opts.where === 'visible') {
+ messageType = 'everything_in_view';
+ checkForHiddenIssues({
+ elsewhere: {
+ what: 'all',
+ where: 'all'
+ },
+ disabled_rules: {
+ what: 'all',
+ where: 'visible',
+ includeDisabledRules: 'only'
+ },
+ disabled_rules_elsewhere: {
+ what: 'all',
+ where: 'all',
+ includeDisabledRules: 'only'
+ },
+ ignored_issues: {
+ what: 'all',
+ where: 'visible',
+ includeIgnored: 'only'
+ },
+ ignored_issues_elsewhere: {
+ what: 'all',
+ where: 'all',
+ includeIgnored: 'only'
+ }
+ });
+ } else if (opts.what === 'all' && opts.where === 'all') {
+ messageType = 'everything';
+ checkForHiddenIssues({
+ disabled_rules: {
+ what: 'all',
+ where: 'all',
+ includeDisabledRules: 'only'
+ },
+ ignored_issues: {
+ what: 'all',
+ where: 'all',
+ includeIgnored: 'only'
+ }
+ });
}
- function mouseover(d3_event) {
- var datum = d3_event.target.__data__;
- updateHints(datum);
+ if (opts.what === 'edited' && context.history().difference().summary().length === 0) {
+ messageType = 'no_edits';
}
- _lastXPos = _lastXPos || sdims[0];
+ selection.select('.box .message').html(_t.html('issues.no_issues.message.' + messageType));
+ }
- function redraw(minChange) {
- var xPos = -1;
+ context.validator().on('validated.uiSectionValidationStatus', function () {
+ window.requestIdleCallback(section.reRender);
+ });
+ context.map().on('move.uiSectionValidationStatus', debounce(function () {
+ window.requestIdleCallback(section.reRender);
+ }, 1000));
+ return section;
+ }
- if (minChange) {
- xPos = utilGetDimensions(context.container().select('.sidebar'))[0];
- }
+ function uiPaneIssues(context) {
+ var issuesPane = uiPane('issues', context).key(_t('issues.key')).label(_t.html('issues.title')).description(_t.html('issues.title')).iconName('iD-icon-alert').sections([uiSectionValidationOptions(context), uiSectionValidationStatus(context), uiSectionValidationIssues('issues-errors', 'error', context), uiSectionValidationIssues('issues-warnings', 'warning', context), uiSectionValidationRules(context)]);
+ return issuesPane;
+ }
- if (!minChange || minChange && Math.abs(xPos - _lastXPos) >= minChange) {
- if (context.hasEntity(_vertexID)) {
- _lastXPos = xPos;
+ function uiSettingsCustomData(context) {
+ var dispatch = dispatch$8('change');
- _container.call(renderViewer);
- }
- }
- }
+ function render(selection) {
+ var dataLayer = context.layers().layer('data'); // keep separate copies of original and current settings
- function highlightPathsFrom(wayID) {
- surface.selectAll('.related').classed('related', false).classed('allow', false).classed('restrict', false).classed('only', false);
- surface.selectAll('.' + wayID).classed('related', true);
+ var _origSettings = {
+ fileList: dataLayer && dataLayer.fileList() || null,
+ url: corePreferences('settings-custom-data-url')
+ };
+ var _currSettings = {
+ fileList: dataLayer && dataLayer.fileList() || null,
+ url: corePreferences('settings-custom-data-url')
+ }; // var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
- if (wayID) {
- var turns = _intersection.turns(wayID, _maxViaWay);
+ var modal = uiConfirm(selection).okButton();
+ modal.classed('settings-modal settings-custom-data', true);
+ modal.select('.modal-section.header').append('h3').html(_t.html('settings.custom_data.header'));
+ var textSection = modal.select('.modal-section.message-text');
+ textSection.append('pre').attr('class', 'instructions-file').html(_t.html('settings.custom_data.file.instructions'));
+ textSection.append('input').attr('class', 'field-file').attr('type', 'file').property('files', _currSettings.fileList) // works for all except IE11
+ .on('change', function (d3_event) {
+ var files = d3_event.target.files;
- for (var i = 0; i < turns.length; i++) {
- var turn = turns[i];
- var ids = [turn.to.way];
- var klass = turn.no ? 'restrict' : turn.only ? 'only' : 'allow';
+ if (files && files.length) {
+ _currSettings.url = '';
+ textSection.select('.field-url').property('value', '');
+ _currSettings.fileList = files;
+ } else {
+ _currSettings.fileList = null;
+ }
+ });
+ textSection.append('h4').html(_t.html('settings.custom_data.or'));
+ textSection.append('pre').attr('class', 'instructions-url').html(_t.html('settings.custom_data.url.instructions'));
+ textSection.append('textarea').attr('class', 'field-url').attr('placeholder', _t('settings.custom_data.url.placeholder')).call(utilNoAuto).property('value', _currSettings.url); // insert a cancel button
- if (turn.only || turns.length === 1) {
- if (turn.via.ways) {
- ids = ids.concat(turn.via.ways);
- }
- } else if (turn.to.way === wayID) {
- continue;
- }
+ var buttonSection = modal.select('.modal-section.buttons');
+ buttonSection.insert('button', '.ok-button').attr('class', 'button cancel-button secondary-action').html(_t.html('confirm.cancel'));
+ buttonSection.select('.cancel-button').on('click.cancel', clickCancel);
+ buttonSection.select('.ok-button').attr('disabled', isSaveDisabled).on('click.save', clickSave);
- surface.selectAll(utilEntitySelector(ids)).classed('related', true).classed('allow', klass === 'allow').classed('restrict', klass === 'restrict').classed('only', klass === 'only');
- }
- }
- }
+ function isSaveDisabled() {
+ return null;
+ } // restore the original url
+
+
+ function clickCancel() {
+ textSection.select('.field-url').property('value', _origSettings.url);
+ corePreferences('settings-custom-data-url', _origSettings.url);
+ this.blur();
+ modal.close();
+ } // accept the current url
- function updateHints(datum) {
- var help = _container.selectAll('.restriction-help').html('');
- var placeholders = {};
- ['from', 'via', 'to'].forEach(function (k) {
- placeholders[k] = '' + _t('restriction.help.' + k) + '';
- });
- var entity = datum && datum.properties && datum.properties.entity;
+ function clickSave() {
+ _currSettings.url = textSection.select('.field-url').property('value').trim(); // one or the other but not both
- if (entity) {
- datum = entity;
+ if (_currSettings.url) {
+ _currSettings.fileList = null;
}
- if (_fromWayID) {
- way = vgraph.entity(_fromWayID);
- surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true);
- } // Hovering a way
+ if (_currSettings.fileList) {
+ _currSettings.url = '';
+ }
+ corePreferences('settings-custom-data-url', _currSettings.url);
+ this.blur();
+ modal.close();
+ dispatch.call('change', this, _currSettings);
+ }
+ }
- if (datum instanceof osmWay && datum.__from) {
- way = datum;
- highlightPathsFrom(_fromWayID ? null : way.id);
- surface.selectAll('.' + way.id).classed('related', true);
- var clickSelect = !_fromWayID || _fromWayID !== way.id;
- help.append('div') // "Click to select FROM {fromName}." / "FROM {fromName}"
- .html(_t.html('restriction.help.' + (clickSelect ? 'select_from_name' : 'from_name'), {
- from: placeholders.from,
- fromName: displayName(way.id, vgraph)
- })); // Hovering a turn arrow
- } else if (datum instanceof osmTurn) {
- var restrictionType = osmInferRestriction(vgraph, datum, projection);
- var turnType = restrictionType.replace(/^(only|no)\_/, '');
- var indirect = datum.direct === false ? _t.html('restriction.help.indirect') : '';
- var klass, turnText, nextText;
+ return utilRebind(render, dispatch, 'on');
+ }
- if (datum.no) {
- klass = 'restrict';
- turnText = _t.html('restriction.help.turn.no_' + turnType, {
- indirect: indirect
- });
- nextText = _t.html('restriction.help.turn.only_' + turnType, {
- indirect: ''
- });
- } else if (datum.only) {
- klass = 'only';
- turnText = _t.html('restriction.help.turn.only_' + turnType, {
- indirect: indirect
- });
- nextText = _t.html('restriction.help.turn.allowed_' + turnType, {
- indirect: ''
- });
- } else {
- klass = 'allow';
- turnText = _t.html('restriction.help.turn.allowed_' + turnType, {
- indirect: indirect
- });
- nextText = _t.html('restriction.help.turn.no_' + turnType, {
- indirect: ''
- });
- }
+ function uiSectionDataLayers(context) {
+ var settingsCustomData = uiSettingsCustomData(context).on('change', customChanged);
+ var layers = context.layers();
+ var section = uiSection('data-layers', context).label(_t.html('map_data.data_layers')).disclosureContent(renderDisclosureContent);
- help.append('div') // "NO Right Turn (indirect)"
- .attr('class', 'qualifier ' + klass).html(turnText);
- help.append('div') // "FROM {fromName} TO {toName}"
- .html(_t.html('restriction.help.from_name_to_name', {
- from: placeholders.from,
- fromName: displayName(datum.from.way, vgraph),
- to: placeholders.to,
- toName: displayName(datum.to.way, vgraph)
- }));
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.data-layer-container').data([0]);
+ container.enter().append('div').attr('class', 'data-layer-container').merge(container).call(drawOsmItems).call(drawQAItems).call(drawCustomDataItems).call(drawVectorItems) // Beta - Detroit mapping challenge
+ .call(drawPanelItems);
+ }
- if (datum.via.ways && datum.via.ways.length) {
- var names = [];
+ function showsLayer(which) {
+ var layer = layers.layer(which);
- for (var i = 0; i < datum.via.ways.length; i++) {
- var prev = names[names.length - 1];
- var curr = displayName(datum.via.ways[i], vgraph);
- if (!prev || curr !== prev) // collapse identical names
- names.push(curr);
- }
+ if (layer) {
+ return layer.enabled();
+ }
- help.append('div') // "VIA {viaNames}"
- .html(_t.html('restriction.help.via_names', {
- via: placeholders.via,
- viaNames: names.join(', ')
- }));
- }
+ return false;
+ }
- if (!indirect) {
- help.append('div') // Click for "No Right Turn"
- .html(_t.html('restriction.help.toggle', {
- turn: nextText.trim()
- }));
- }
+ function setLayer(which, enabled) {
+ // Don't allow layer changes while drawing - #6584
+ var mode = context.mode();
+ if (mode && /^draw/.test(mode.id)) return;
+ var layer = layers.layer(which);
- highlightPathsFrom(null);
- var alongIDs = datum.path.slice();
- surface.selectAll(utilEntitySelector(alongIDs)).classed('related', true).classed('allow', klass === 'allow').classed('restrict', klass === 'restrict').classed('only', klass === 'only'); // Hovering empty surface
- } else {
- highlightPathsFrom(null);
+ if (layer) {
+ layer.enabled(enabled);
- if (_fromWayID) {
- help.append('div') // "FROM {fromName}"
- .html(_t.html('restriction.help.from_name', {
- from: placeholders.from,
- fromName: displayName(_fromWayID, vgraph)
- }));
- } else {
- help.append('div') // "Click to select a FROM segment."
- .html(_t.html('restriction.help.select_from', {
- from: placeholders.from
- }));
- }
+ if (!enabled && (which === 'osm' || which === 'notes')) {
+ context.enter(modeBrowse(context));
}
}
}
- function displayMaxDistance(maxDist) {
- var isImperial = !_mainLocalizer.usesMetric();
- var opts;
-
- if (isImperial) {
- var distToFeet = {
- // imprecise conversion for prettier display
- 20: 70,
- 25: 85,
- 30: 100,
- 35: 115,
- 40: 130,
- 45: 145,
- 50: 160
- }[maxDist];
- opts = {
- distance: _t('units.feet', {
- quantity: distToFeet
- })
- };
- } else {
- opts = {
- distance: _t('units.meters', {
- quantity: maxDist
- })
- };
- }
-
- return _t.html('restriction.controls.distance_up_to', opts);
+ function toggleLayer(which) {
+ setLayer(which, !showsLayer(which));
}
- function displayMaxVia(maxVia) {
- return maxVia === 0 ? _t.html('restriction.controls.via_node_only') : maxVia === 1 ? _t.html('restriction.controls.via_up_to_one') : _t.html('restriction.controls.via_up_to_two');
- }
+ function drawOsmItems(selection) {
+ var osmKeys = ['osm', 'notes'];
+ var osmLayers = layers.all().filter(function (obj) {
+ return osmKeys.indexOf(obj.id) !== -1;
+ });
+ var ul = selection.selectAll('.layer-list-osm').data([0]);
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-osm').merge(ul);
+ var li = ul.selectAll('.list-item').data(osmLayers);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', function (d) {
+ return 'list-item list-item-' + d.id;
+ });
+ var labelEnter = liEnter.append('label').each(function (d) {
+ if (d.id === 'osm') {
+ select(this).call(uiTooltip().title(_t.html('map_data.layers.' + d.id + '.tooltip')).keys([uiCmd('â¥' + _t('area_fill.wireframe.key'))]).placement('bottom'));
+ } else {
+ select(this).call(uiTooltip().title(_t.html('map_data.layers.' + d.id + '.tooltip')).placement('bottom'));
+ }
+ });
+ labelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event, d) {
+ toggleLayer(d.id);
+ });
+ labelEnter.append('span').html(function (d) {
+ return _t.html('map_data.layers.' + d.id + '.title');
+ }); // Update
- function displayName(entityID, graph) {
- var entity = graph.entity(entityID);
- var name = utilDisplayName(entity) || '';
- var matched = _mainPresetIndex.match(entity, graph);
- var type = matched && matched.name() || utilDisplayType(entity.id);
- return name || type;
+ li.merge(liEnter).classed('active', function (d) {
+ return d.layer.enabled();
+ }).selectAll('input').property('checked', function (d) {
+ return d.layer.enabled();
+ });
}
- restrictions.entityIDs = function (val) {
- _intersection = null;
- _fromWayID = null;
- _oldTurns = null;
- _vertexID = val[0];
- };
-
- restrictions.tags = function () {};
+ function drawQAItems(selection) {
+ var qaKeys = ['keepRight', 'improveOSM', 'osmose'];
+ var qaLayers = layers.all().filter(function (obj) {
+ return qaKeys.indexOf(obj.id) !== -1;
+ });
+ var ul = selection.selectAll('.layer-list-qa').data([0]);
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-qa').merge(ul);
+ var li = ul.selectAll('.list-item').data(qaLayers);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', function (d) {
+ return 'list-item list-item-' + d.id;
+ });
+ var labelEnter = liEnter.append('label').each(function (d) {
+ select(this).call(uiTooltip().title(_t.html('map_data.layers.' + d.id + '.tooltip')).placement('bottom'));
+ });
+ labelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event, d) {
+ toggleLayer(d.id);
+ });
+ labelEnter.append('span').html(function (d) {
+ return _t.html('map_data.layers.' + d.id + '.title');
+ }); // Update
- restrictions.focus = function () {};
+ li.merge(liEnter).classed('active', function (d) {
+ return d.layer.enabled();
+ }).selectAll('input').property('checked', function (d) {
+ return d.layer.enabled();
+ });
+ } // Beta feature - sample vector layers to support Detroit Mapping Challenge
+ // https://github.com/osmus/detroit-mapping-challenge
- restrictions.off = function (selection) {
- if (!_initialized) return;
- selection.selectAll('.surface').call(breathe.off).on('click.restrictions', null).on('mouseover.restrictions', null);
- select(window).on('resize.restrictions', null);
- };
- return utilRebind(restrictions, dispatch$1, 'on');
- }
- uiFieldRestrictions.supportsMultiselection = false;
+ function drawVectorItems(selection) {
+ var dataLayer = layers.layer('data');
+ var vtData = [{
+ name: 'Detroit Neighborhoods/Parks',
+ src: 'neighborhoods-parks',
+ tooltip: 'Neighborhood boundaries and parks as compiled by City of Detroit in concert with community groups.',
+ template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmur6x34562qp9iv1u3ksf-54hev,jonahadkins.cjksmqxdx33jj2wp90xd9x2md-4e5y2/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA'
+ }, {
+ name: 'Detroit Composite POIs',
+ src: 'composite-poi',
+ tooltip: 'Fire Inspections, Business Licenses, and other public location data collated from the City of Detroit.',
+ template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmm6a02sli31myxhsr7zf3-2sw8h/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA'
+ }, {
+ name: 'Detroit All-The-Places POIs',
+ src: 'alltheplaces-poi',
+ tooltip: 'Public domain business location data created by web scrapers.',
+ template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmswgk340g2vo06p1w9w0j-8fjjc/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA'
+ }]; // Only show this if the map is around Detroit..
- function uiFieldTextarea(field, context) {
- var dispatch$1 = dispatch('change');
- var input = select(null);
+ var detroit = geoExtent([-83.5, 42.1], [-82.8, 42.5]);
+ var showVectorItems = context.map().zoom() > 9 && detroit.contains(context.map().center());
+ var container = selection.selectAll('.vectortile-container').data(showVectorItems ? [0] : []);
+ container.exit().remove();
+ var containerEnter = container.enter().append('div').attr('class', 'vectortile-container');
+ containerEnter.append('h4').attr('class', 'vectortile-header').html('Detroit Vector Tiles (Beta)');
+ containerEnter.append('ul').attr('class', 'layer-list layer-list-vectortile');
+ containerEnter.append('div').attr('class', 'vectortile-footer').append('a').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).attr('href', 'https://github.com/osmus/detroit-mapping-challenge').append('span').html('About these layers');
+ container = container.merge(containerEnter);
+ var ul = container.selectAll('.layer-list-vectortile');
+ var li = ul.selectAll('.list-item').data(vtData);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', function (d) {
+ return 'list-item list-item-' + d.src;
+ });
+ var labelEnter = liEnter.append('label').each(function (d) {
+ select(this).call(uiTooltip().title(d.tooltip).placement('top'));
+ });
+ labelEnter.append('input').attr('type', 'radio').attr('name', 'vectortile').on('change', selectVTLayer);
+ labelEnter.append('span').html(function (d) {
+ return d.name;
+ }); // Update
- var _tags;
+ li.merge(liEnter).classed('active', isVTLayerSelected).selectAll('input').property('checked', isVTLayerSelected);
- function textarea(selection) {
- var wrap = selection.selectAll('.form-field-input-wrap').data([0]);
- wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap);
- input = wrap.selectAll('textarea').data([0]);
- input = input.enter().append('textarea').attr('id', field.domId).call(utilNoAuto).on('input', change(true)).on('blur', change()).on('change', change()).merge(input);
- }
+ function isVTLayerSelected(d) {
+ return dataLayer && dataLayer.template() === d.template;
+ }
- function change(onInput) {
- return function () {
- var val = utilGetSetValue(input);
- if (!onInput) val = context.cleanTagValue(val); // don't override multiple values with blank string
+ function selectVTLayer(d3_event, d) {
+ corePreferences('settings-custom-data-url', d.template);
- if (!val && Array.isArray(_tags[field.key])) return;
- var t = {};
- t[field.key] = val || undefined;
- dispatch$1.call('change', this, t, onInput);
- };
+ if (dataLayer) {
+ dataLayer.template(d.template, d.src);
+ dataLayer.enabled(true);
+ }
+ }
}
- textarea.tags = function (tags) {
- _tags = tags;
- var isMixed = Array.isArray(tags[field.key]);
- utilGetSetValue(input, !isMixed && tags[field.key] ? tags[field.key] : '').attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined).attr('placeholder', isMixed ? _t('inspector.multiple_values') : field.placeholder() || _t('inspector.unknown')).classed('mixed', isMixed);
- };
+ function drawCustomDataItems(selection) {
+ var dataLayer = layers.layer('data');
+ var hasData = dataLayer && dataLayer.hasData();
+ var showsData = hasData && dataLayer.enabled();
+ var ul = selection.selectAll('.layer-list-data').data(dataLayer ? [0] : []); // Exit
- textarea.focus = function () {
- input.node().focus();
- };
+ ul.exit().remove(); // Enter
- return utilRebind(textarea, dispatch$1, 'on');
- }
+ var ulEnter = ul.enter().append('ul').attr('class', 'layer-list layer-list-data');
+ var liEnter = ulEnter.append('li').attr('class', 'list-item-data');
+ var labelEnter = liEnter.append('label').call(uiTooltip().title(_t.html('map_data.layers.custom.tooltip')).placement('top'));
+ labelEnter.append('input').attr('type', 'checkbox').on('change', function () {
+ toggleLayer('data');
+ });
+ labelEnter.append('span').html(_t.html('map_data.layers.custom.title'));
+ liEnter.append('button').attr('class', 'open-data-options').call(uiTooltip().title(_t.html('settings.custom_data.tooltip')).placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ editCustom();
+ }).call(svgIcon('#iD-icon-more'));
+ liEnter.append('button').attr('class', 'zoom-to-data').call(uiTooltip().title(_t.html('map_data.layers.custom.zoom')).placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left')).on('click', function (d3_event) {
+ if (select(this).classed('disabled')) return;
+ d3_event.preventDefault();
+ d3_event.stopPropagation();
+ dataLayer.fitZoom();
+ }).call(svgIcon('#iD-icon-framed-dot', 'monochrome')); // Update
+
+ ul = ul.merge(ulEnter);
+ ul.selectAll('.list-item-data').classed('active', showsData).selectAll('label').classed('deemphasize', !hasData).selectAll('input').property('disabled', !hasData).property('checked', showsData);
+ ul.selectAll('button.zoom-to-data').classed('disabled', !hasData);
+ }
- var getOwnPropertyDescriptor$5 = objectGetOwnPropertyDescriptor.f;
+ function editCustom() {
+ context.container().call(settingsCustomData);
+ }
+ function customChanged(d) {
+ var dataLayer = layers.layer('data');
+ if (d && d.url) {
+ dataLayer.url(d.url);
+ } else if (d && d.fileList) {
+ dataLayer.fileList(d.fileList);
+ }
+ }
+ function drawPanelItems(selection) {
+ var panelsListEnter = selection.selectAll('.md-extras-list').data([0]).enter().append('ul').attr('class', 'layer-list md-extras-list');
+ var historyPanelLabelEnter = panelsListEnter.append('li').attr('class', 'history-panel-toggle-item').append('label').call(uiTooltip().title(_t.html('map_data.history_panel.tooltip')).keys([uiCmd('ââ§' + _t('info_panels.history.key'))]).placement('top'));
+ historyPanelLabelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) {
+ d3_event.preventDefault();
+ context.ui().info.toggle('history');
+ });
+ historyPanelLabelEnter.append('span').html(_t.html('map_data.history_panel.title'));
+ var measurementPanelLabelEnter = panelsListEnter.append('li').attr('class', 'measurement-panel-toggle-item').append('label').call(uiTooltip().title(_t.html('map_data.measurement_panel.tooltip')).keys([uiCmd('ââ§' + _t('info_panels.measurement.key'))]).placement('top'));
+ measurementPanelLabelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) {
+ d3_event.preventDefault();
+ context.ui().info.toggle('measurement');
+ });
+ measurementPanelLabelEnter.append('span').html(_t.html('map_data.measurement_panel.title'));
+ }
+ context.layers().on('change.uiSectionDataLayers', section.reRender);
+ context.map().on('move.uiSectionDataLayers', debounce(function () {
+ // Detroit layers may have moved in or out of view
+ window.requestIdleCallback(section.reRender);
+ }, 1000));
+ return section;
+ }
+ function uiSectionMapFeatures(context) {
+ var _features = context.features().keys();
- var nativeEndsWith = ''.endsWith;
- var min$a = Math.min;
+ var section = uiSection('map-features', context).label(_t.html('map_data.map_features')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- var CORRECT_IS_REGEXP_LOGIC$1 = correctIsRegexpLogic('endsWith');
- // https://github.com/zloirock/core-js/pull/702
- var MDN_POLYFILL_BUG$1 = !CORRECT_IS_REGEXP_LOGIC$1 && !!function () {
- var descriptor = getOwnPropertyDescriptor$5(String.prototype, 'endsWith');
- return descriptor && !descriptor.writable;
- }();
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.layer-feature-list-container').data([0]);
+ var containerEnter = container.enter().append('div').attr('class', 'layer-feature-list-container');
+ containerEnter.append('ul').attr('class', 'layer-list layer-feature-list');
+ var footer = containerEnter.append('div').attr('class', 'feature-list-links section-footer');
+ footer.append('a').attr('class', 'feature-list-link').attr('href', '#').html(_t.html('issues.disable_all')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ context.features().disableAll();
+ });
+ footer.append('a').attr('class', 'feature-list-link').attr('href', '#').html(_t.html('issues.enable_all')).on('click', function (d3_event) {
+ d3_event.preventDefault();
+ context.features().enableAll();
+ }); // Update
- // `String.prototype.endsWith` method
- // https://tc39.es/ecma262/#sec-string.prototype.endswith
- _export({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG$1 && !CORRECT_IS_REGEXP_LOGIC$1 }, {
- endsWith: function endsWith(searchString /* , endPosition = @length */) {
- var that = String(requireObjectCoercible(this));
- notARegexp(searchString);
- var endPosition = arguments.length > 1 ? arguments[1] : undefined;
- var len = toLength(that.length);
- var end = endPosition === undefined ? len : min$a(toLength(endPosition), len);
- var search = String(searchString);
- return nativeEndsWith
- ? nativeEndsWith.call(that, search, end)
- : that.slice(end - search.length, end) === search;
+ container = container.merge(containerEnter);
+ container.selectAll('.layer-feature-list').call(drawListItems, _features, 'checkbox', 'feature', clickFeature, showsFeature);
}
- });
- function uiFieldWikidata(field, context) {
- var wikidata = services.wikidata;
- var dispatch$1 = dispatch('change');
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- var _selection = select(null);
+ items.exit().remove(); // Enter
- var _searchInput = select(null);
+ var enter = items.enter().append('li').call(uiTooltip().title(function (d) {
+ var tip = _t.html(name + '.' + d + '.tooltip');
- var _qid = null;
- var _wikidataEntity = null;
- var _wikiURL = '';
- var _entityIDs = [];
+ if (autoHiddenFeature(d)) {
+ var msg = showsLayer('osm') ? _t.html('map_data.autohidden') : _t.html('map_data.osmhidden');
+ tip += '' + msg + '';
+ }
- var _wikipediaKey = field.keys && field.keys.find(function (key) {
- return key.includes('wikipedia');
- }),
- _hintKey = field.key === 'wikidata' ? 'name' : field.key.split(':')[0];
+ return tip;
+ }).placement('top'));
+ var label = enter.append('label');
+ label.append('input').attr('type', type).attr('name', name).on('change', change);
+ label.append('span').html(function (d) {
+ return _t.html(name + '.' + d + '.description');
+ }); // Update
- var combobox = uiCombobox(context, 'combo-' + field.safeid).caseSensitive(true).minItems(1);
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', autoHiddenFeature);
+ }
- function wiki(selection) {
- _selection = selection;
- var wrap = selection.selectAll('.form-field-input-wrap').data([0]);
- wrap = wrap.enter().append('div').attr('class', 'form-field-input-wrap form-field-input-' + field.type).merge(wrap);
- var list = wrap.selectAll('ul').data([0]);
- list = list.enter().append('ul').attr('class', 'rows').merge(list);
- var searchRow = list.selectAll('li.wikidata-search').data([0]);
- var searchRowEnter = searchRow.enter().append('li').attr('class', 'wikidata-search');
- searchRowEnter.append('input').attr('type', 'text').attr('id', field.domId).style('flex', '1').call(utilNoAuto).on('focus', function () {
- var node = select(this).node();
- node.setSelectionRange(0, node.value.length);
- }).on('blur', function () {
- setLabelForEntity();
- }).call(combobox.fetcher(fetchWikidataItems));
- combobox.on('accept', function (d) {
- if (d) {
- _qid = d.id;
- change();
- }
- }).on('cancel', function () {
- setLabelForEntity();
- });
- searchRowEnter.append('button').attr('class', 'form-field-button wiki-link').attr('title', _t('icons.view_on', {
- domain: 'wikidata.org'
- })).call(svgIcon('#iD-icon-out-link')).on('click', function (d3_event) {
- d3_event.preventDefault();
- if (_wikiURL) window.open(_wikiURL, '_blank');
- });
- searchRow = searchRow.merge(searchRowEnter);
- _searchInput = searchRow.select('input');
- var wikidataProperties = ['description', 'identifier'];
- var items = list.selectAll('li.labeled-input').data(wikidataProperties); // Enter
+ function autoHiddenFeature(d) {
+ return context.features().autoHidden(d);
+ }
- var enter = items.enter().append('li').attr('class', function (d) {
- return 'labeled-input preset-wikidata-' + d;
- });
- enter.append('span').attr('class', 'label').html(function (d) {
- return _t.html('wikidata.' + d);
- });
- enter.append('input').attr('type', 'text').call(utilNoAuto).classed('disabled', 'true').attr('readonly', 'true');
- enter.append('button').attr('class', 'form-field-button').attr('title', _t('icons.copy')).call(svgIcon('#iD-operation-copy')).on('click', function (d3_event) {
- d3_event.preventDefault();
- select(this.parentNode).select('input').node().select();
- document.execCommand('copy');
- });
+ function showsFeature(d) {
+ return context.features().enabled(d);
}
- function fetchWikidataItems(q, callback) {
- if (!q && _hintKey) {
- // other tags may be good search terms
- for (var i in _entityIDs) {
- var entity = context.hasEntity(_entityIDs[i]);
+ function clickFeature(d3_event, d) {
+ context.features().toggle(d);
+ }
- if (entity.tags[_hintKey]) {
- q = entity.tags[_hintKey];
- break;
- }
- }
- }
+ function showsLayer(id) {
+ var layer = context.layers().layer(id);
+ return layer && layer.enabled();
+ } // add listeners
- wikidata.itemsForSearchQuery(q, function (err, data) {
- if (err) return;
- for (var i in data) {
- data[i].value = data[i].label + ' (' + data[i].id + ')';
- data[i].title = data[i].description;
- }
+ context.features().on('change.map_features', section.reRender);
+ return section;
+ }
- if (callback) callback(data);
+ function uiSectionMapStyleOptions(context) {
+ var section = uiSection('fill-area', context).label(_t.html('map_data.style_options')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
+
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.layer-fill-list').data([0]);
+ container.enter().append('ul').attr('class', 'layer-list layer-fill-list').merge(container).call(drawListItems, context.map().areaFillOptions, 'radio', 'area_fill', setFill, isActiveFill);
+ var container2 = selection.selectAll('.layer-visual-diff-list').data([0]);
+ container2.enter().append('ul').attr('class', 'layer-list layer-visual-diff-list').merge(container2).call(drawListItems, ['highlight_edits'], 'checkbox', 'visual_diff', toggleHighlightEdited, function () {
+ return context.surface().classed('highlight-edited');
});
}
- function change() {
- var syncTags = {};
- syncTags[field.key] = _qid;
- dispatch$1.call('change', this, syncTags); // attempt asynchronous update of wikidata tag..
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- var initGraph = context.graph();
- var initEntityIDs = _entityIDs;
- wikidata.entityByQID(_qid, function (err, entity) {
- if (err) return; // If graph has changed, we can't apply this update.
+ items.exit().remove(); // Enter
- if (context.graph() !== initGraph) return;
- if (!entity.sitelinks) return;
- var langs = wikidata.languagesToQuery(); // use the label and description languages as fallbacks
+ var enter = items.enter().append('li').call(uiTooltip().title(function (d) {
+ return _t.html(name + '.' + d + '.tooltip');
+ }).keys(function (d) {
+ var key = d === 'wireframe' ? _t('area_fill.wireframe.key') : null;
+ if (d === 'highlight_edits') key = _t('map_data.highlight_edits.key');
+ return key ? [key] : null;
+ }).placement('top'));
+ var label = enter.append('label');
+ label.append('input').attr('type', type).attr('name', name).on('change', change);
+ label.append('span').html(function (d) {
+ return _t.html(name + '.' + d + '.description');
+ }); // Update
- ['labels', 'descriptions'].forEach(function (key) {
- if (!entity[key]) return;
- var valueLangs = Object.keys(entity[key]);
- if (valueLangs.length === 0) return;
- var valueLang = valueLangs[0];
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', false);
+ }
- if (langs.indexOf(valueLang) === -1) {
- langs.push(valueLang);
- }
- });
- var newWikipediaValue;
+ function isActiveFill(d) {
+ return context.map().activeAreaFill() === d;
+ }
- if (_wikipediaKey) {
- var foundPreferred;
+ function toggleHighlightEdited(d3_event) {
+ d3_event.preventDefault();
+ context.map().toggleHighlightEdited();
+ }
- for (var i in langs) {
- var lang = langs[i];
- var siteID = lang.replace('-', '_') + 'wiki';
+ function setFill(d3_event, d) {
+ context.map().activeAreaFill(d);
+ }
- if (entity.sitelinks[siteID]) {
- foundPreferred = true;
- newWikipediaValue = lang + ':' + entity.sitelinks[siteID].title; // use the first match
+ context.map().on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.reRender);
+ return section;
+ }
- break;
- }
- }
+ function uiSectionPhotoOverlays(context) {
+ var layers = context.layers();
+ var section = uiSection('photo-overlays', context).label(_t.html('photo_overlays.title')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- if (!foundPreferred) {
- // No wikipedia sites available in the user's language or the fallback languages,
- // default to any wikipedia sitelink
- var wikiSiteKeys = Object.keys(entity.sitelinks).filter(function (site) {
- return site.endsWith('wiki');
- });
+ function renderDisclosureContent(selection) {
+ var container = selection.selectAll('.photo-overlay-container').data([0]);
+ container.enter().append('div').attr('class', 'photo-overlay-container').merge(container).call(drawPhotoItems).call(drawPhotoTypeItems).call(drawDateFilter).call(drawUsernameFilter);
+ }
- if (wikiSiteKeys.length === 0) {
- // if no wikipedia pages are linked to this wikidata entity, delete that tag
- newWikipediaValue = null;
- } else {
- var wikiLang = wikiSiteKeys[0].slice(0, -4).replace('_', '-');
- var wikiTitle = entity.sitelinks[wikiSiteKeys[0]].title;
- newWikipediaValue = wikiLang + ':' + wikiTitle;
- }
- }
- }
+ function drawPhotoItems(selection) {
+ var photoKeys = context.photos().overlayLayerIDs();
+ var photoLayers = layers.all().filter(function (obj) {
+ return photoKeys.indexOf(obj.id) !== -1;
+ });
+ var data = photoLayers.filter(function (obj) {
+ return obj.layer.supported();
+ });
- if (newWikipediaValue) {
- newWikipediaValue = context.cleanTagValue(newWikipediaValue);
- }
+ function layerSupported(d) {
+ return d.layer && d.layer.supported();
+ }
- if (typeof newWikipediaValue === 'undefined') return;
- var actions = initEntityIDs.map(function (entityID) {
- var entity = context.hasEntity(entityID);
- if (!entity) return null;
- var currTags = Object.assign({}, entity.tags); // shallow copy
+ function layerEnabled(d) {
+ return layerSupported(d) && d.layer.enabled();
+ }
- if (newWikipediaValue === null) {
- if (!currTags[_wikipediaKey]) return null;
- delete currTags[_wikipediaKey];
- } else {
- currTags[_wikipediaKey] = newWikipediaValue;
- }
+ var ul = selection.selectAll('.layer-list-photos').data([0]);
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-photos').merge(ul);
+ var li = ul.selectAll('.list-item-photos').data(data);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', function (d) {
+ var classes = 'list-item-photos list-item-' + d.id;
- return actionChangeTags(entityID, currTags);
- }).filter(Boolean);
- if (!actions.length) return; // Coalesce the update of wikidata tag into the previous tag change
+ if (d.id === 'mapillary-signs' || d.id === 'mapillary-map-features') {
+ classes += ' indented';
+ }
- context.overwrite(function actionUpdateWikipediaTags(graph) {
- actions.forEach(function (action) {
- graph = action(graph);
- });
- return graph;
- }, context.history().undoAnnotation()); // do not dispatch.call('change') here, because entity_editor
- // changeTags() is not intended to be called asynchronously
+ return classes;
});
- }
+ var labelEnter = liEnter.append('label').each(function (d) {
+ var titleID;
+ if (d.id === 'mapillary-signs') titleID = 'mapillary.signs.tooltip';else if (d.id === 'mapillary') titleID = 'mapillary_images.tooltip';else if (d.id === 'openstreetcam') titleID = 'openstreetcam_images.tooltip';else titleID = d.id.replace(/-/g, '_') + '.tooltip';
+ select(this).call(uiTooltip().title(_t.html(titleID)).placement('top'));
+ });
+ labelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event, d) {
+ toggleLayer(d.id);
+ });
+ labelEnter.append('span').html(function (d) {
+ var id = d.id;
+ if (id === 'mapillary-signs') id = 'photo_overlays.traffic_signs';
+ return _t.html(id.replace(/-/g, '_') + '.title');
+ }); // Update
- function setLabelForEntity() {
- var label = '';
+ li.merge(liEnter).classed('active', layerEnabled).selectAll('input').property('checked', layerEnabled);
+ }
- if (_wikidataEntity) {
- label = entityPropertyForDisplay(_wikidataEntity, 'labels');
+ function drawPhotoTypeItems(selection) {
+ var data = context.photos().allPhotoTypes();
- if (label.length === 0) {
- label = _wikidataEntity.id.toString();
- }
+ function typeEnabled(d) {
+ return context.photos().showsPhotoType(d);
}
- utilGetSetValue(_searchInput, label);
- }
-
- wiki.tags = function (tags) {
- var isMixed = Array.isArray(tags[field.key]);
+ var ul = selection.selectAll('.layer-list-photo-types').data([0]);
+ ul.exit().remove();
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-photo-types').merge(ul);
+ var li = ul.selectAll('.list-item-photo-types').data(context.photos().shouldFilterByPhotoType() ? data : []);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', function (d) {
+ return 'list-item-photo-types list-item-' + d;
+ });
+ var labelEnter = liEnter.append('label').each(function (d) {
+ select(this).call(uiTooltip().title(_t.html('photo_overlays.photo_type.' + d + '.tooltip')).placement('top'));
+ });
+ labelEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event, d) {
+ context.photos().togglePhotoType(d);
+ });
+ labelEnter.append('span').html(function (d) {
+ return _t.html('photo_overlays.photo_type.' + d + '.title');
+ }); // Update
- _searchInput.attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : null).attr('placeholder', isMixed ? _t('inspector.multiple_values') : '').classed('mixed', isMixed);
+ li.merge(liEnter).classed('active', typeEnabled).selectAll('input').property('checked', typeEnabled);
+ }
- _qid = typeof tags[field.key] === 'string' && tags[field.key] || '';
+ function drawDateFilter(selection) {
+ var data = context.photos().dateFilters();
- if (!/^Q[0-9]*$/.test(_qid)) {
- // not a proper QID
- unrecognized();
- return;
- } // QID value in correct format
+ function filterEnabled(d) {
+ return context.photos().dateFilterValue(d);
+ }
+ var ul = selection.selectAll('.layer-list-date-filter').data([0]);
+ ul.exit().remove();
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-date-filter').merge(ul);
+ var li = ul.selectAll('.list-item-date-filter').data(context.photos().shouldFilterByDate() ? data : []);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', 'list-item-date-filter');
+ var labelEnter = liEnter.append('label').each(function (d) {
+ select(this).call(uiTooltip().title(_t.html('photo_overlays.date_filter.' + d + '.tooltip')).placement('top'));
+ });
+ labelEnter.append('span').html(function (d) {
+ return _t.html('photo_overlays.date_filter.' + d + '.title');
+ });
+ labelEnter.append('input').attr('type', 'date').attr('class', 'list-item-input').attr('placeholder', _t('units.year_month_day')).call(utilNoAuto).each(function (d) {
+ utilGetSetValue(select(this), context.photos().dateFilterValue(d) || '');
+ }).on('change', function (d3_event, d) {
+ var value = utilGetSetValue(select(this)).trim();
+ context.photos().setDateFilter(d, value, true); // reload the displayed dates
- _wikiURL = 'https://wikidata.org/wiki/' + _qid;
- wikidata.entityByQID(_qid, function (err, entity) {
- if (err) {
- unrecognized();
- return;
- }
+ li.selectAll('input').each(function (d) {
+ utilGetSetValue(select(this), context.photos().dateFilterValue(d) || '');
+ });
+ });
+ li = li.merge(liEnter).classed('active', filterEnabled);
+ }
- _wikidataEntity = entity;
- setLabelForEntity();
- var description = entityPropertyForDisplay(entity, 'descriptions');
+ function drawUsernameFilter(selection) {
+ function filterEnabled() {
+ return context.photos().usernames();
+ }
- _selection.select('button.wiki-link').classed('disabled', false);
+ var ul = selection.selectAll('.layer-list-username-filter').data([0]);
+ ul.exit().remove();
+ ul = ul.enter().append('ul').attr('class', 'layer-list layer-list-username-filter').merge(ul);
+ var li = ul.selectAll('.list-item-username-filter').data(context.photos().shouldFilterByUsername() ? ['username-filter'] : []);
+ li.exit().remove();
+ var liEnter = li.enter().append('li').attr('class', 'list-item-username-filter');
+ var labelEnter = liEnter.append('label').each(function () {
+ select(this).call(uiTooltip().title(_t.html('photo_overlays.username_filter.tooltip')).placement('top'));
+ });
+ labelEnter.append('span').html(_t.html('photo_overlays.username_filter.title'));
+ labelEnter.append('input').attr('type', 'text').attr('class', 'list-item-input').call(utilNoAuto).property('value', usernameValue).on('change', function () {
+ var value = select(this).property('value');
+ context.photos().setUsernameFilter(value, true);
+ select(this).property('value', usernameValue);
+ });
+ li.merge(liEnter).classed('active', filterEnabled);
- _selection.select('.preset-wikidata-description').style('display', function () {
- return description.length > 0 ? 'flex' : 'none';
- }).select('input').attr('value', description);
+ function usernameValue() {
+ var usernames = context.photos().usernames();
+ if (usernames) return usernames.join('; ');
+ return usernames;
+ }
+ }
- _selection.select('.preset-wikidata-identifier').style('display', function () {
- return entity.id ? 'flex' : 'none';
- }).select('input').attr('value', entity.id);
- }); // not a proper QID
+ function toggleLayer(which) {
+ setLayer(which, !showsLayer(which));
+ }
- function unrecognized() {
- _wikidataEntity = null;
- setLabelForEntity();
+ function showsLayer(which) {
+ var layer = layers.layer(which);
- _selection.select('.preset-wikidata-description').style('display', 'none');
+ if (layer) {
+ return layer.enabled();
+ }
- _selection.select('.preset-wikidata-identifier').style('display', 'none');
+ return false;
+ }
- _selection.select('button.wiki-link').classed('disabled', true);
+ function setLayer(which, enabled) {
+ var layer = layers.layer(which);
- if (_qid && _qid !== '') {
- _wikiURL = 'https://wikidata.org/wiki/Special:Search?search=' + _qid;
- } else {
- _wikiURL = '';
- }
+ if (layer) {
+ layer.enabled(enabled);
}
- };
+ }
- function entityPropertyForDisplay(wikidataEntity, propKey) {
- if (!wikidataEntity[propKey]) return '';
- var propObj = wikidataEntity[propKey];
- var langKeys = Object.keys(propObj);
- if (langKeys.length === 0) return ''; // sorted by priority, since we want to show the user's language first if possible
+ context.layers().on('change.uiSectionPhotoOverlays', section.reRender);
+ context.photos().on('change.uiSectionPhotoOverlays', section.reRender);
+ return section;
+ }
- var langs = wikidata.languagesToQuery();
+ function uiPaneMapData(context) {
+ var mapDataPane = uiPane('map-data', context).key(_t('map_data.key')).label(_t.html('map_data.title')).description(_t.html('map_data.description')).iconName('iD-icon-data').sections([uiSectionDataLayers(context), uiSectionPhotoOverlays(context), uiSectionMapStyleOptions(context), uiSectionMapFeatures(context)]);
+ return mapDataPane;
+ }
- for (var i in langs) {
- var lang = langs[i];
- var valueObj = propObj[lang];
- if (valueObj && valueObj.value && valueObj.value.length > 0) return valueObj.value;
- } // default to any available value
+ function uiSectionPrivacy(context) {
+ var section = uiSection('preferences-third-party', context).label(_t.html('preferences.privacy.title')).disclosureContent(renderDisclosureContent);
+ var _showThirdPartyIcons = corePreferences('preferences.privacy.thirdpartyicons') || 'true';
- return propObj[langKeys[0]].value;
- }
+ function renderDisclosureContent(selection) {
+ // enter
+ var privacyOptionsListEnter = selection.selectAll('.privacy-options-list').data([0]).enter().append('ul').attr('class', 'layer-list privacy-options-list');
+ var thirdPartyIconsEnter = privacyOptionsListEnter.append('li').attr('class', 'privacy-third-party-icons-item').append('label').call(uiTooltip().title(_t.html('preferences.privacy.third_party_icons.tooltip')).placement('bottom'));
+ thirdPartyIconsEnter.append('input').attr('type', 'checkbox').on('change', function (d3_event) {
+ d3_event.preventDefault();
+ _showThirdPartyIcons = _showThirdPartyIcons === 'true' ? 'false' : 'true';
+ corePreferences('preferences.privacy.thirdpartyicons', _showThirdPartyIcons);
+ update();
+ });
+ thirdPartyIconsEnter.append('span').html(_t.html('preferences.privacy.third_party_icons.description')); // Privacy Policy link
- wiki.entityIDs = function (val) {
- if (!arguments.length) return _entityIDs;
- _entityIDs = val;
- return wiki;
- };
+ selection.selectAll('.privacy-link').data([0]).enter().append('div').attr('class', 'privacy-link').append('a').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).attr('href', 'https://github.com/openstreetmap/iD/blob/release/PRIVACY.md').append('span').html(_t.html('preferences.privacy.privacy_link'));
+ update();
- wiki.focus = function () {
- _searchInput.node().focus();
- };
+ function update() {
+ selection.selectAll('.privacy-third-party-icons-item').classed('active', _showThirdPartyIcons === 'true').select('input').property('checked', _showThirdPartyIcons === 'true');
+ }
+ }
- return utilRebind(wiki, dispatch$1, 'on');
+ return section;
}
- function uiFieldWikipedia(field, context) {
- var _arguments = arguments;
- var dispatch$1 = dispatch('change');
- var wikipedia = services.wikipedia;
- var wikidata = services.wikidata;
+ function uiPanePreferences(context) {
+ var preferencesPane = uiPane('preferences', context).key(_t('preferences.key')).label(_t.html('preferences.title')).description(_t.html('preferences.description')).iconName('fas-user-cog').sections([uiSectionPrivacy(context)]);
+ return preferencesPane;
+ }
- var _langInput = select(null);
+ function uiInit(context) {
+ var _initCounter = 0;
+ var _needWidth = {};
- var _titleInput = select(null);
+ var _lastPointerType;
- var _wikiURL = '';
+ function render(container) {
+ container.on('click.ui', function (d3_event) {
+ // we're only concerned with the primary mouse button
+ if (d3_event.button !== 0) return;
+ if (!d3_event.composedPath) return; // some targets have default click events we don't want to override
- var _entityIDs;
+ var isOkayTarget = d3_event.composedPath().some(function (node) {
+ // we only care about element nodes
+ return node.nodeType === 1 && ( // clicking focuses it and/or changes a value
+ node.nodeName === 'INPUT' || // clicking