' + (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) + ''; + if (r === candidates.length) { + break; // no point in examining further (j)s + } + } } - throw e; - } - } - /** - * Options - */ - + 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.options = marked.setOptions = function (opt) { - merge$3(marked.defaults, opt); - changeDefaults(marked.defaults); - return marked; - }; - marked.getDefaults = getDefaults; - marked.defaults = defaults$5; - /** - * Use 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. - marked.use = function (extension) { - var opts = merge$3({}, extension); - if (extension.renderer) { - (function () { - var renderer = marked.defaults.renderer || new Renderer_1(); + function diffIndices(buffer1, buffer2) { + var lcs = LCS(buffer1, buffer2); + var result = []; + var tail1 = buffer1.length; + var tail2 = buffer2.length; - var _loop = function _loop(prop) { - var prevRenderer = renderer[prop]; + 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; - renderer[prop] = function () { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } + 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) + }); + } + } - var ret = extension.renderer[prop].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) + // - if (ret === false) { - ret = prevRenderer.apply(renderer, args); - } - return ret; - }; - }; + 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 = []; - for (var prop in extension.renderer) { - _loop(prop); - } + 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]) - opts.renderer = renderer; - })(); + }); } - 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 + }); + for (var i = 0; i < hunks.length; i++) { + var hunk = hunks[i]; - 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; + 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 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 (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) + })); - var _cache$2; + break; + } + } + } - function abortRequest$2(controller) { - if (controller) { - controller.abort(); + return _conflicts.length === ccount ? target.update({ + nodes: nodes + }) : target; } - } - - function abortUnwantedRequests$2(cache, tiles) { - Object.keys(cache.inflightTile).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k === tile.id; - }); - 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; - 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 (_option === 'force_remote' && remote && remote.visible) { + updates.replacements.push(remote); + } else if (_option === 'force_local' && local) { + target = osmEntity(local); - return loc; - } + 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 + }); + + if (remote.visible) { + target = mergeLocation(remote, target); + } else { + _conflicts.push(_t('merge_remote_changes.conflict.deleted', { + user: user(remote.user) + })); + } + + 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(); - }); - })["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 (newScore < score) { + bestPoints = clonePoints(simplified); + score = newScore; + } - } - }, - showFeatureDetections: function showFeatureDetections(value) { - _mlyShowFeatureDetections = value; + if (score < epsilon) { + break; + } + } - if (!_mlyShowFeatureDetections && !_mlyShowSignDetections) { - this.resetTags(); - } - }, - showSignDetections: function showSignDetections(value) { - _mlyShowSignDetections = value; + var bestCoords = bestPoints.map(function (p) { + return p.coord; + }); + if (isClosed) bestCoords.push(bestCoords[0]); // move the nodes that should move - 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]]); + for (i = 0; i < bestPoints.length; i++) { + point = bestPoints[i]; - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - filter.push(['>=', 'capturedAt', fromTimestamp]); - } + 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 (toDate) { - var toTimestamp = new Date(toDate).getTime(); - filter.push(['>=', 'capturedAt', toTimestamp]); - } - if (_mlyViewer) { - _mlyViewer.setFilter(filter); - } + for (i = 0; i < straights.length; i++) { + point = straights[i]; + if (nodeCount[point.id] > 1) continue; // skip self-intersections - _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(); + node = graph.entity(point.id); - if (isHidden && _mlyViewer) { - wrap.selectAll('.photo-wrapper:not(.mly-wrapper)').classed('hide', true); - wrap.selectAll('.photo-wrapper.mly-wrapper').classed('hide', false); + 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); - _mlyViewer.resize(); + if (choice) { + loc = projection.invert(choice.target); + graph = graph.replace(node.move(geoVecInterp(node.loc, loc, t))); + } + } + } } - return this; - }, - hideViewer: function hideViewer(context) { - _mlyActiveImage = null; - _mlySelectedImageKey = null; + return graph; - if (!_mlyFallback && _mlyViewer) { - _mlyViewer.getComponent('sequence').stop(); + function clonePoints(array) { + return array.map(function (p) { + return { + id: p.id, + coord: [p.coord[0], p.coord[1]] + }; + }); } - 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); + 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 (imageKey) { - hash.photo = 'mapillary/' + imageKey; - } else { - delete hash.photo; + 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); + + if (val < lowerThreshold) { + // nearly orthogonal + corner.i = i; + corner.dotp = val; + var vec = geoVecNormalize(geoVecAdd(p, q)); + return geoVecScale(vec, 0.1 * dotp * scale); } - window.location.replace('#' + utilQsString(hash, true)); - } - }, - highlightDetection: function highlightDetection(detection) { - if (detection) { - _mlyHighlightedDetection = detection.detection_key; + return [0, 0]; // do nothing } + }; // if we are only orthogonalizing one vertex, + // get that vertex and the previous and next - 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 - 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 + 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]]; + } } - _mlyViewer = new Mapillary.Viewer('ideditor-mly', clientId, null, opts); + return []; + } - _mlyViewer.on('nodechanged', nodeChanged); + action.disabled = function (graph) { + var way = graph.entity(wayID); + way = way.removeNode(''); // sanity check - remove any consecutive duplicates - _mlyViewer.on('bearingchanged', bearingChanged); + graph = graph.replace(way); + var isClosed = way.isClosed(); + var nodes = graph.childNodes(way).slice(); // shallow copy - if (_mlyViewerFilter) { - _mlyViewer.setFilter(_mlyViewerFilter); - } // Register viewer resize handler + if (isClosed) nodes.pop(); + var allowStraightAngles = false; + if (vertexID !== undefined) { + allowStraightAngles = true; + nodes = nodeSubset(nodes, vertexID, isClosed); + if (nodes.length !== 3) return 'end_vertex'; + } - 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. - // + var coords = nodes.map(function (n) { + return projection(n.loc); + }); + var score = geoOrthoCanOrthogonalize(coords, isClosed, epsilon, threshold, allowStraightAngles); - function nodeChanged(node) { - that.resetTags(); - var clicks = _mlyClicks; - var index = clicks.indexOf(node.key); - var selectedKey = _mlySelectedImageKey; - that.setActiveImage(node); + if (score === null) { + return 'not_squarish'; + } else if (score === 0) { + return 'square_enough'; + } else { + return false; + } + }; - 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.. + action.transitionable = true; + 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); - } + // + // `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. + // - dispatch$4.call('nodeChanged'); - } + 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' + }); - function bearingChanged(e) { - dispatch$4.call('bearingChanged', undefined, e); + 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' + }); + }); } - }, - // 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; - if (!fromViewer && imageKey) { - _mlyClicks.push(imageKey); - } + members.push({ + id: toWay.id, + type: 'way', + role: 'to' + }); + return graph.replace(osmRelation({ + id: restrictionID, + tags: { + type: 'restriction', + restriction: restrictionType + }, + members: members + })); + }; + } - this.setStyles(context, null, true); + function actionRevert(id) { + var action = function action(graph) { + var entity = graph.hasEntity(id), + base = graph.base().entities[id]; - if (_mlyShowFeatureDetections) { - this.updateDetections(imageKey, apibase + 'image_detections?layers=points&values=' + mapFeatureConfig.values + '&image_keys=' + imageKey); - } + 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 (_mlyShowSignDetections) { - this.updateDetections(imageKey, apibase + 'image_detections?layers=trafficsigns&image_keys=' + imageKey); - } + if (parent.isDegenerate()) { + graph = actionDeleteWay(parent.id)(graph); + } + }); + } - if (_mlyViewer && imageKey) { - _mlyViewer.moveToKey(imageKey)["catch"](function (e) { - console.error('mly3', e); - }); // eslint-disable-line no-console + graph.parentRelations(entity).forEach(function (parent) { + parent = parent.removeMembersWithID(id); + graph = graph.replace(parent); + if (parent.isDegenerate()) { + graph = actionDeleteRelation(parent.id)(graph); + } + }); } - 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 graph.revert(id); + }; - 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 action; + } - 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; + 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))); + }); }); - 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); + return action; + } - function viewfieldPath() { - var d = this.parentNode.__data__; + 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 (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'; - } - } + /* Align nodes along their common axis */ - return this; - }, - updateDetections: function updateDetections(imageKey, url) { - if (!_mlyViewer || _mlyFallback) return; - if (!imageKey) return; + 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 (!_mlyCache.image_detections.forImageKey[imageKey]) { - loadData('image_detections', url).then(function () { - showDetections(_mlyCache.image_detections.forImageKey[imageKey] || []); - }); - } else { - showDetections(_mlyCache.image_detections.forImageKey[imageKey]); - } - function showDetections(detections) { - detections.forEach(function (data) { - var tag = makeTag(data); + 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 (tag) { - var tagComponent = _mlyViewer.getComponent('tag'); + 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); - tagComponent.add([tag]); - } - }); + if (isLong) { + return [p1, q1]; } - function makeTag(data) { - var valueParts = data.value.split('--'); - if (!valueParts.length) return; - var tag; - var text; - var color = 0xffffff; + return [p2, q2]; + } - if (_mlyHighlightedDetection === data.key) { - color = 0xffff00; - text = valueParts[1]; + 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 - if (text === 'flat' || text === 'discrete' || text === 'sign') { - text = valueParts[2]; - } + 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))); + } - text = text.replace(/-/g, ' '); - text = text.charAt(0).toUpperCase() + text.slice(1); - _mlyHighlightedDetection = null; - } + return graph; + }; - 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 - }); - } + action.disabled = function (graph) { + 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]; + var maxDistance = 0; - return tag; + 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 (!isNaN(dist) && dist > maxDistance) { + maxDistance = dist; + } } - }, - cache: function cache() { - return _mlyCache; - } - }; - function validationIssue(attrs) { - this.type = attrs.type; // required - name of rule that created the issue (e.g. 'missing_tag') + if (maxDistance < 0.0001) { + return 'straight_enough'; + } + }; - this.subtype = attrs.subtype; // optional - category of the issue within the type (e.g. 'relation_type' under 'missing_tag') + action.transitionable = true; + return action; + } - this.severity = attrs.severity; // required - 'warning' or 'error' + /* + * Based on https://github.com/openstreetmap/potlatch2/net/systemeD/potlatch2/tools/Straighten.as + */ - this.message = attrs.message; // required - function returning localized string + 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 - this.reference = attrs.reference; // optional - function(selection) to render reference information - this.entityIds = attrs.entityIds; // optional - array of IDs of entities involved in the issue + 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'; + }); - this.loc = attrs.loc; // optional - [lon, lat] to zoom in on to see the issue + 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"] - this.data = attrs.data; // optional - object containing extra data for the fixes - this.dynamicFixes = attrs.dynamicFixes; // optional - function(context) returning fixes + 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 - this.hash = attrs.hash; // optional - string to further differentiate the issue + 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 - this.id = generateID.apply(this); // generated - see below + 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.autoFix = null; // generated - if autofix exists, will be set below - // A unique, deterministic string hash. - // Issues with identical id values are considered identical. - function generateID() { - var parts = [this.type]; + while (remainingWays.length) { + nextWay = getNextWay(currNode, remainingWays); + remainingWays = utilArrayDifference(remainingWays, [nextWay]); - if (this.hash) { - // subclasses can pass in their own differentiator - parts.push(this.hash); - } + if (nextWay[0] !== currNode) { + nextWay.reverse(); + } - if (this.subtype) { - parts.push(this.subtype); - } // include the entities this issue is for - // (sort them so the id is deterministic) + nodes = nodes.concat(nextWay); + currNode = nodes[nodes.length - 1]; + } // If user selected 2 nodes to straighten between, then slice nodes array to those nodes - if (this.entityIds) { - var entityKeys = this.entityIds.slice().sort(); - parts.push.apply(parts, entityKeys); + 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); } - return parts.join(':'); + return nodes.map(function (n) { + return graph.entity(n); + }); } - this.extent = function (resolver) { - if (this.loc) { - return geoExtent(this.loc); + 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; + + for (i = 1; i < points.length - 1; i++) { + var node = nodes[i]; + var point = points[i]; + + 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); + } + } } - if (this.entityIds && this.entityIds.length) { - return this.entityIds.reduce(function (extent, entityId) { - return extent.extend(resolver.entity(entityId).extent(resolver)); - }, geoExtent()); + for (i = 0; i < toDelete.length; i++) { + graph = actionDeleteNode(toDelete[i].id)(graph); } - return null; + return graph; }; - this.fixes = function (context) { - var fixes = this.dynamicFixes ? this.dynamicFixes(context) : []; - var issue = this; + 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 (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); - } - })); + if (threshold === 0) { + return 'too_bendy'; } - 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 maxDistance = 0; - fix.issue = issue; + 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 (fix.autoArgs) { - issue.autoFix = fix; + if (isNaN(dist) || dist > threshold) { + return 'too_bendy'; + } else if (dist > maxDistance) { + maxDistance = dist; } + } + + var keepingAllNodes = nodes.every(function (node, i) { + return i === 0 || i === nodes.length - 1 || shouldKeepNode(node, graph); }); - return fixes; + + if (maxDistance < 0.0001 && // Allow straightening even if already straight in order to remove extraneous nodes + keepingAllNodes) { + return 'straight_enough'; + } }; - } - function validationIssueFix(attrs) { - this.title = attrs.title; // Required - this.onClick = attrs.onClick; // Optional - the function to run to apply the fix + action.transitionable = true; + return action; + } - this.disabledReason = attrs.disabledReason; // Optional - a string explaining why the fix is unavailable, if any + // + // `turn` must be an `osmTurn` object with a `restrictionID` property. + // see osm/intersection.js, pathToTurn() + // - this.icon = attrs.icon; // Optional - shows 'iD-icon-wrench' if not set + function actionUnrestrictTurn(turn) { + return function (graph) { + return actionDeleteRelation(turn.restrictionID)(graph); + }; + } - this.entityIds = attrs.entityIds || []; // Optional - used for hover-higlighting. + /* Reflect the given area around its axis of symmetry */ - this.autoArgs = attrs.autoArgs; // Optional - pass [actions, annotation] arglist if this fix can automatically run + function actionReflect(reflectIds, projection) { + var _useLongAxis = true; - this.issue = null; // Generated link - added by validationIssue - } + 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. - 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]; + 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); - var expression = _positiveRegex[tagKey].join('|'); + 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 - var regex = new RegExp(expression); - return function (tags) { - return regex.test(tags[tagKey]); - }; - }, - negativeRegex: function negativeRegex(_negativeRegex) { - var tagKey = Object.keys(_negativeRegex)[0]; - var expression = _negativeRegex[tagKey].join('|'); + 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); - var regex = new RegExp(expression); - return function (tags) { - return !regex.test(tags[tagKey]); - }; + 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); } + + return graph; }; - }; - var buildLineKeys = function buildLineKeys() { - return { - highway: { - rest_area: true, - services: true - }, - railway: { - roundhouse: true, - station: true, - traverser: true, - turntable: true, - wash: true - } + action.useLongAxis = function (val) { + if (!arguments.length) return _useLongAxis; + _useLongAxis = val; + return action; }; - }; - 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])); - } + action.transitionable = true; + return action; + } - 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, ''); - }); - }; + function actionUpgradeTags(entityId, oldTags, replaceTags) { + return function (graph) { + var entity = graph.entity(entityId); + var tags = Object.assign({}, entity.tags); // shallow copy - var tagMap = Object.keys(selector).reduce(function (expectedTags, key) { - var values; - var isRegex = /regex/gi.test(key); - var isEqual = /equals/gi.test(key); + var transferValue; + var semiIndex; - if (isRegex || isEqual) { - Object.keys(selector[key]).forEach(function (selectorKey) { - values = isEqual ? [selector[key][selectorKey]] : getRegexValues(selector[key][selectorKey]); + for (var oldTagKey in oldTags) { + if (!(oldTagKey in tags)) continue; // wildcard match - if (expectedTags.hasOwnProperty(selectorKey)) { - values = values.concat(expectedTags[selectorKey]); - } + 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]); - 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]]; + 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; + } - if (expectedTags.hasOwnProperty(tagKey)) { - values = values.concat(expectedTags[tagKey]); + vals.splice(oldIndex, 1); + tags[oldTagKey] = vals.join(';'); } - - expectedTags[tagKey] = values; - } - - return expectedTags; - }, {}); - return tagMap; - }, - // inspired by osmWay#isArea() - inferGeometry: function inferGeometry(tagMap) { - var _lineKeys = this._lineKeys; - var _areaKeys = this._areaKeys; - - var keyValueDoesNotImplyArea = function keyValueDoesNotImplyArea(key) { - return utilArrayIntersection(tagMap[key], Object.keys(_areaKeys[key])).length > 0; - }; - - var keyValueImpliesLine = function keyValueImpliesLine(key) { - return utilArrayIntersection(tagMap[key], Object.keys(_lineKeys[key])).length > 0; - }; - - if (tagMap.hasOwnProperty('area')) { - if (tagMap.area.indexOf('yes') > -1) { - return 'area'; - } - - if (tagMap.area.indexOf('no') > -1) { - return 'line'; } } - for (var key in tagMap) { - if (key in _areaKeys && !keyValueDoesNotImplyArea(key)) { - return 'area'; - } + if (replaceTags) { + for (var replaceKey in replaceTags) { + var replaceValue = replaceTags[replaceKey]; - if (key in _lineKeys && keyValueImpliesLine(key)) { - return 'area'; - } - } + 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); - 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] - })); + if (existingVals.indexOf(replaceValue) === -1) { + existingVals.splice(semiIndex, 0, replaceValue); + tags[replaceKey] = existingVals.join(';'); + } + } else { + tags[replaceKey] = replaceValue; + } } } - }; + } - 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; - } - }; + return graph.replace(entity.update({ + tags: tags + })); + }; + } - var apibase$1 = 'https://nominatim.openstreetmap.org/'; - var _inflight = {}; + function behaviorEdit(context) { + function behavior() { + context.map().minzoom(context.minEditableZoom()); + } - var _nominatimCache; + behavior.off = function () { + context.map().minzoom(0); + }; - 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] - }); + return behavior; + } - if (cached.length > 0) { - if (callback) callback(null, cached[0].data); - return; - } + /* + The hover behavior adds the `.hover` class on pointerover to all elements to which + the identical datum is bound, and removes it on pointerout. - 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]; + 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. + */ - if (result && result.error) { - throw new Error(result.error); - } + function behaviorHover(context) { + var dispatch = dispatch$8('hover'); - var extent = geoExtent(loc).padByMeters(200); + var _selection = select(null); - _nominatimCache.insert(Object.assign(extent.bbox(), { - data: result - })); + var _newNodeId = null; + var _initialNodeID = null; - 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]; + var _altDisables; - if (result && result.error) { - throw new Error(result.error); - } + var _ignoreVertex; - if (callback) callback(null, result); - })["catch"](function (err) { - delete _inflight[url]; - if (err.name === 'AbortError') return; - if (callback) callback(err.message); - }); - } - }; + var _targets = []; // use pointer events on supported platforms; fallback to mouse events - 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 _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; - var _oscCache; + function keydown(d3_event) { + if (_altDisables && d3_event.keyCode === utilKeybinding.modifierCodes.alt) { + _selection.selectAll('.hover').classed('hover-suppressed', true).classed('hover', false); - var _oscSelectedImage; + _selection.classed('hover-disabled', true); - var _loadViewerPromise$1; + dispatch.call('hover', this, null); + } + } - function abortRequest$4(controller) { - controller.abort(); - } + function keyup(d3_event) { + if (_altDisables && d3_event.keyCode === utilKeybinding.modifierCodes.alt) { + _selection.selectAll('.hover-suppressed').classed('hover-suppressed', false).classed('hover', true); - 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; - } + _selection.classed('hover-disabled', false); - 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 + dispatch.call('hover', this, _targets); + } + } - var cache = _oscCache[which]; - Object.keys(cache.inflight).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k.indexOf(tile.id + ',') === 0; - }); + function behavior(selection) { + _selection = selection; + _targets = []; - if (!wanted) { - abortRequest$4(cache.inflight[k]); - delete cache.inflight[k]; + if (_initialNodeID) { + _newNodeId = _initialNodeID; + _initialNodeID = null; + } else { + _newNodeId = null; } - }); - 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' - } - }; - d3_json(url, options).then(function (data) { - cache.loaded[id] = true; - delete cache.inflight[id]; + _selection.on(_pointerPrefix + 'over.hover', pointerover).on(_pointerPrefix + 'out.hover', pointerout) // treat pointerdown as pointerover for touch devices + .on(_pointerPrefix + 'down.hover', pointerover); - if (!data || !data.currentPageItems || !data.currentPageItems.length) { - throw new Error('No Data'); - } + select(window).on(_pointerPrefix + 'up.hover pointercancel.hover', pointerout, true).on('keydown.hover', keydown).on('keyup.hover', keyup); - var features = data.currentPageItems.map(function (item) { - var loc = [+item.lng, +item.lat]; - var d; + function eventTarget(d3_event) { + var datum = d3_event.target && d3_event.target.__data__; + if (_typeof(datum) !== 'object') return null; - 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 + if (!(datum instanceof osmEntity) && datum.properties && datum.properties.entity instanceof osmEntity) { + return datum.properties.entity; + } - var seq = _oscCache.sequences[d.sequence_id]; + return datum; + } - if (!seq) { - seq = { - rotation: 0, - images: [] - }; - _oscCache.sequences[d.sequence_id] = seq; - } + 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); - seq.images[d.sequence_index] = d; - _oscCache.images.forImageKey[d.key] = d; // cache imageKey -> image + if (target && _targets.indexOf(target) === -1) { + _targets.push(target); + + updateHover(d3_event, _targets); } + } - return { - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1], - data: d - }; - }); - cache.rtree.load(features); + function pointerout(d3_event) { + var target = eventTarget(d3_event); - 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 + var index = _targets.indexOf(target); + + if (index !== -1) { + _targets.splice(index); + + updateHover(d3_event, _targets); + } } - if (which === 'images') { - dispatch$5.call('loadedImages'); + function allowsVertex(d) { + return d.geometry(context.graph()) === 'vertex' || _mainPresetIndex.allowsVertex(d, context.graph()); } - })["catch"](function () { - cache.loaded[id] = true; - delete cache.inflight[id]; - }); - } // partition viewport into higher zoom tiles + function modeAllowsHover(target) { + var mode = context.mode(); - 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 + if (mode.id === 'add-point') { + return mode.preset.matchGeometry('vertex') || target.type !== 'way' && target.geometry(context.graph()) !== 'vertex'; + } - var tiler = utilTiler().zoomExtent([z2, z2]); - return tiler.getTiles(projection).map(function (tile) { - return tile.extent; - }); - } // no more than `limit` results per partition. + return true; + } + function updateHover(d3_event, targets) { + _selection.selectAll('.hover').classed('hover', false); - 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; - }, []); - } + _selection.selectAll('.hover-suppressed').classed('hover-suppressed', false); - var serviceOpenstreetcam = { - init: function init() { - if (!_oscCache) { - this.reset(); - } + var mode = context.mode(); - this.event = utilRebind(this, dispatch$5, 'on'); - }, - reset: function reset() { - if (_oscCache) { - Object.values(_oscCache.images.inflight).forEach(abortRequest$4); - } + 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; + } - _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 + 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); + } - _oscCache.images.rtree.search(bbox).forEach(function (d) { - sequenceKeys[d.data.sequence_id] = true; - }); // make linestrings from those sequences + return true; + }); + var selector = ''; + for (var i in targets) { + var datum = targets[i]; // What are we hovering over? - var lineStrings = []; - Object.keys(sequenceKeys).forEach(function (sequenceKey) { - var seq = _oscCache.sequences[sequenceKey]; - var images = seq && seq.images; + 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 (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 + if (datum.type === 'relation') { + for (var j in datum.members) { + selector += ', .' + datum.members[j].id; + } } - }); + } } - }); - 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 suppressed = _altDisables && d3_event && d3_event.altKey; - 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); - }); + if (selector.trim().length) { + // remove the first comma + selector = selector.slice(1); - function zoomPan(d3_event) { - var t = d3_event.transform; - context.container().select('.photoviewer .osc-image-wrap').call(utilSetTransform, t.x, t.y, t.k); - } + _selection.selectAll(selector).classed(suppressed ? 'hover-suppressed' : 'hover', true); + } - 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)'); - }; + dispatch.call('hover', this, !suppressed && targets); } + } - 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 + 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); + }; + behavior.altDisables = function (val) { + if (!arguments.length) return _altDisables; + _altDisables = val; + return behavior; + }; - _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(); + behavior.ignoreVertex = function (val) { + if (!arguments.length) return _ignoreVertex; + _ignoreVertex = val; + return behavior; + }; - if (isHidden) { - viewer.selectAll('.photo-wrapper:not(.osc-wrapper)').classed('hide', true); - viewer.selectAll('.photo-wrapper.osc-wrapper').classed('hide', false); - } + behavior.initialNodeID = function (nodeId) { + _initialNodeID = nodeId; + return behavior; + }; - 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(); + return utilRebind(behavior, dispatch, 'on'); + } - 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)'); + 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'); - 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('|'); - } + var _hover = behaviorHover(context).altDisables(true).ignoreVertex(true).on('hover', context.ui().sidebar.hover); - if (d.captured_at) { - attribution.append('span').attr('class', 'captured_at').html(localeDateString(d.captured_at)); - attribution.append('span').html('|'); - } + var _edit = behaviorEdit(context); - 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'); - } + var _closeTolerance = 4; + var _tolerance = 12; + var _mouseLeave = false; + var _lastMouse = null; - return this; + var _lastPointerUpEvent; - 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); - } + var _downPointer; // use pointer events on supported platforms; fallback to mouse events - 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 + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; // related code + // - `mode/drag_node.js` `datum()` + + + 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); + } + } - context.container().selectAll('.viewfield-group .viewfield').attr('d', viewfieldPath); + function pointermove(d3_event) { + if (_downPointer && _downPointer.id === (d3_event.pointerId || 'mouse') && !_downPointer.isCancelled) { + var p2 = _downPointer.pointerLocGetter(d3_event); - function viewfieldPath() { - var d = this.parentNode.__data__; + var dist = geoVecLength(_downPointer.downLoc, p2); - 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 >= _closeTolerance) { + _downPointer.isCancelled = true; + dispatch.call('downcancel', this); } } - return this; - }, - updateUrlImage: function updateUrlImage(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); + 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 (imageKey) { - hash.photo = 'openstreetcam/' + imageKey; - } else { - delete hash.photo; + if (_lastPointerUpEvent && _lastPointerUpEvent.pointerType !== 'mouse' && d3_event.timeStamp - _lastPointerUpEvent.timeStamp < 100) return; + _lastMouse = d3_event; + dispatch.call('move', this, d3_event, datum(d3_event)); + } + + function pointercancel(d3_event) { + if (_downPointer && _downPointer.id === (d3_event.pointerId || 'mouse')) { + if (!_downPointer.isCancelled) { + dispatch.call('downcancel', this); } - window.location.replace('#' + utilQsString(hash, true)); + _downPointer = null; } - }, - cache: function cache() { - return _oscCache; } - }; - var FORCED$f = fails(function () { - return new Date(NaN).toJSON() !== null - || Date.prototype.toJSON.call({ toISOString: function () { return 1; } }) !== 1; - }); + function mouseenter() { + _mouseLeave = false; + } - // `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 mouseleave() { + _mouseLeave = true; } - }); - // `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 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()` + + + function click(d3_event, loc) { + var d = datum(d3_event); + var target = d && d.properties && d.properties.entity; + var mode = context.mode(); + + 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()); + + 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 + + + function space(d3_event) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + var currSpace = context.map().mouse(); + + if (_disableSpace && _lastSpace) { + var dist = geoVecLength(_lastSpace, currSpace); + + if (dist > _tolerance) { + _disableSpace = false; + } + } + + if (_disableSpace || _mouseLeave || !_lastMouse) return; // user must move mouse or release space bar to allow another click + + _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 + + 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); } - }); - /** - * 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 backspace(d3_event) { + d3_event.preventDefault(); + dispatch.call('undo'); + } - return value != null && (type == 'object' || type == 'function'); - } + function del(d3_event) { + d3_event.preventDefault(); + dispatch.call('cancel'); + } - /** Detect free variable `global` from Node.js. */ - var freeGlobal = (typeof global === "undefined" ? "undefined" : _typeof(global)) == 'object' && global && global.Object === Object && global; + function ret(d3_event) { + d3_event.preventDefault(); + dispatch.call('finish'); + } - /** Detect free variable `self`. */ + 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; + } - var freeSelf = (typeof self === "undefined" ? "undefined" : _typeof(self)) == 'object' && self && self.Object === Object && self; - /** Used as a reference to the global object. */ + 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 - var root$1 = freeGlobal || freeSelf || Function('return this')(); + select(document).call(keybinding.unbind); + }; - /** - * 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. - */ + behavior.hover = function () { + return _hover; + }; - var now$1 = function now() { - return root$1.Date.now(); - }; + return utilRebind(behavior, dispatch, 'on'); + } - /** 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. - */ + function initRange(domain, range) { + switch (arguments.length) { + case 0: + break; - function trimmedEndIndex(string) { - var index = string.length; + case 1: + this.range(domain); + break; - while (index-- && reWhitespace.test(string.charAt(index))) {} + default: + this.range(range).domain(domain); + break; + } - return index; + return this; } - /** Used to match leading whitespace. */ + function constants(x) { + return function () { + return x; + }; + } - var reTrimStart = /^\s+/; - /** - * The base implementation of `_.trim`. - * - * @private - * @param {string} string The string to trim. - * @returns {string} Returns the trimmed string. - */ + function number(x) { + return +x; + } - function baseTrim(string) { - return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string; + var unit = [0, 1]; + function identity$1(x) { + return x; } - /** Built-in value references. */ + function normalize(a, b) { + return (b -= a = +a) ? function (x) { + return (x - a) / b; + } : constants(isNaN(b) ? NaN : 0.5); + } - var _Symbol = root$1.Symbol; + 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]. - /** Used for built-in method references. */ - var objectProto = Object.prototype; - /** Used to check objects for own properties. */ + 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)); + }; + } - 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 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 nativeObjectToString = objectProto.toString; - /** Built-in value references. */ + if (domain[j] < domain[0]) { + domain = domain.slice().reverse(); + range = range.slice().reverse(); + } - 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`. - */ + while (++i < j) { + d[i] = normalize(domain[i], domain[i + 1]); + r[i] = interpolate(range[i], range[i + 1]); + } - function getRawTag(value) { - var isOwn = hasOwnProperty$1.call(value, symToStringTag), - tag = value[symToStringTag]; + return function (x) { + var i = bisectRight(domain, x, 1, j) - 1; + return r[i](d[i](x)); + }; + } - try { - value[symToStringTag] = undefined; - var unmasked = true; - } catch (e) {} + 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 result = nativeObjectToString.call(value); + 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; + } - if (unmasked) { - if (isOwn) { - value[symToStringTag] = tag; - } else { - delete value[symToStringTag]; - } + function scale(x) { + return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x))); } - return result; - } + scale.invert = function (y) { + return clamp(untransform((input || (input = piecewise(range, domain.map(transform), d3_interpolateNumber)))(y))); + }; - /** 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.domain = function (_) { + return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice(); + }; - 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.range = function (_) { + return arguments.length ? (range = Array.from(_), rescale()) : range.slice(); + }; + + scale.rangeRound = function (_) { + return range = Array.from(_), interpolate = interpolateRound, rescale(); + }; + + scale.clamp = function (_) { + return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1; + }; + + scale.interpolate = function (_) { + return arguments.length ? (interpolate = _, rescale()) : interpolate; + }; - function objectToString$1(value) { - return nativeObjectToString$1.call(value); + scale.unknown = function (_) { + return arguments.length ? (unknown = _, scale) : unknown; + }; + + 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 $$7 = _export; + var fails$3 = fails$N; + var thisNumberValue = thisNumberValue$2; - function toNumber$1(value) { - if (typeof value == 'number') { - return value; - } + var nativeToPrecision = 1.0.toPrecision; - if (isSymbol$1(value)) { - return NAN; - } + var FORCED$1 = fails$3(function () { + // IE7- + return nativeToPrecision.call(1, undefined) !== '1'; + }) || !fails$3(function () { + // V8 ~ Android 4.3- + nativeToPrecision.call({}); + }); - if (isObject$1(value)) { - var other = typeof value.valueOf == 'function' ? value.valueOf() : value; - value = isObject$1(other) ? other + '' : other; + // `Number.prototype.toPrecision` method + // https://tc39.es/ecma262/#sec-number.prototype.toprecision + $$7({ target: 'Number', proto: true, forced: FORCED$1 }, { + toPrecision: function toPrecision(precision) { + return precision === undefined + ? nativeToPrecision.call(thisNumberValue(this)) + : nativeToPrecision.call(thisNumberValue(this), precision); } + }); - if (typeof value != 'string') { - return value === 0 ? value : +value; - } + 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! + } - 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 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"); } - /** Error message constants. */ + 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); + } + }; - var FUNC_ERROR_TEXT = 'Expected a function'; - /* Built-in method references for those with the same name as other `lodash` methods. */ + function identity (x) { + return x; + } - 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); - */ + 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 + ""; - function debounce(func, wait, options) { - var lastArgs, - lastThis, - maxWait, - result, - timerId, - lastCallTime, - lastInvokeTime = 0, - leading = false, - maxing = false, - trailing = true; + 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". - if (typeof func != 'function') { - throw new TypeError(FUNC_ERROR_TEXT); - } + 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. - wait = toNumber$1(wait) || 0; + if (zero || fill === "0" && align === "=") zero = true, fill = "0", align = "="; // Compute the prefix and suffix. + // For SI-prefix, the suffix is lazily computed. - 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; - } + 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? - function invokeFunc(time) { - var args = lastArgs, - thisArg = lastThis; - lastArgs = lastThis = undefined; - lastInvokeTime = time; - result = func.apply(thisArg, args); - return result; - } + 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]. - function leadingEdge(time) { - // Reset any `maxWait` timer. - lastInvokeTime = time; // Start the timer for the trailing edge. + precision = precision === undefined ? 6 : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision)) : Math.max(0, Math.min(20, precision)); - timerId = setTimeout(timerExpired, wait); // Invoke the leading edge. + function format(value) { + var valuePrefix = prefix, + valueSuffix = suffix, + i, + n, + c; - return leading ? invokeFunc(time) : result; - } + if (type === "c") { + valueSuffix = formatType(value) + valueSuffix; + value = ""; + } else { + value = +value; // Determine the sign. -0 is not less than 0, but 1 / -0 is! - function remainingWait(time) { - var timeSinceLastCall = time - lastCallTime, - timeSinceLastInvoke = time - lastInvokeTime, - timeWaiting = wait - timeSinceLastCall; - return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting; - } + var valueNegative = value < 0 || 1 / value < 0; // Perform the initial formatting. - 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. + value = isNaN(value) ? nan : formatType(Math.abs(value), precision); // Trim insignificant zeros. - return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait; - } + 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 timerExpired() { - var time = now$1(); + if (valueNegative && +value === 0 && sign !== "+") valueNegative = false; // Compute the prefix and suffix. - if (shouldInvoke(time)) { - return trailingEdge(time); - } // Restart the timer. + 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. + if (maybeSuffix) { + i = -1, n = value.length; - timerId = setTimeout(timerExpired, remainingWait(time)); - } + 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. - function trailingEdge(time) { - timerId = undefined; // Only invoke if we have `lastArgs` which means `func` has been - // debounced at least once. - if (trailing && lastArgs) { - return invokeFunc(time); - } + if (comma && !zero) value = group(value, Infinity); // Compute the padding. - lastArgs = lastThis = undefined; - return result; - } + 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. - function cancel() { - if (timerId !== undefined) { - clearTimeout(timerId); - } + if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = ""; // Reconstruct the final output based on the desired alignment. - lastInvokeTime = 0; - lastArgs = lastCallTime = lastThis = timerId = undefined; - } + switch (align) { + case "<": + value = valuePrefix + value + valueSuffix + padding; + break; - function flush() { - return timerId === undefined ? result : trailingEdge(now$1()); - } + case "=": + value = valuePrefix + padding + value + valueSuffix; + break; - function debounced() { - var time = now$1(), - isInvoking = shouldInvoke(time); - lastArgs = arguments; - lastThis = this; - lastCallTime = time; + case "^": + value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); + break; - if (isInvoking) { - if (timerId === undefined) { - return leadingEdge(lastCallTime); + default: + value = padding + valuePrefix + value + valueSuffix; + break; } - if (maxing) { - // Handle invocations in a tight loop. - clearTimeout(timerId); - timerId = setTimeout(timerExpired, wait); - return invokeFunc(lastCallTime); - } + return numerals(value); } - if (timerId === undefined) { - timerId = setTimeout(timerExpired, wait); - } + format.toString = function () { + return specifier + ""; + }; - return result; + return format; } - debounced.cancel = cancel; - debounced.flush = flush; - return debounced; - } - - /** 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 throttle(func, wait, options) { - var leading = true, - trailing = true; - - if (typeof func != 'function') { - throw new TypeError(FUNC_ERROR_TEXT$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; + }; } - if (isObject$1(options)) { - leading = 'leading' in options ? !!options.leading : leading; - trailing = 'trailing' in options ? !!options.trailing : trailing; - } + return { + format: newFormat, + formatPrefix: formatPrefix + }; + } - return debounce(func, wait, { - 'leading': leading, - 'maxWait': wait, - 'trailing': trailing - }); + var locale; + var format$1; + var formatPrefix; + defaultLocale({ + thousands: ",", + grouping: [3], + currency: ["$", ""] + }); + function defaultLocale(definition) { + locale = formatLocale(definition); + format$1 = locale.format; + formatPrefix = locale.formatPrefix; + return locale; } - 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; + function precisionFixed (step) { + return Math.max(0, -exponent(Math.abs(step))); + } - function utf8Encode(str) { - var x, - y, - output = '', - i = -1, - l; + function precisionPrefix (step, value) { + return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step))); + } - if (str && str.length) { - l = str.length; + function precisionRound (step, max) { + step = Math.abs(step), max = Math.abs(max) - step; + return Math.max(0, exponent(max) - exponent(step)) + 1; + } - while ((i += 1) < l) { - /* Decode utf-16 surrogate pairs */ - x = str.charCodeAt(i); - y = i + 1 < l ? str.charCodeAt(i + 1) : 0; + function tickFormat(start, stop, count, specifier) { + var step = tickStep(start, stop, count), + precision; + specifier = formatSpecifier(specifier == null ? ",f" : specifier); - if (0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF) { - x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF); - i += 1; - } - /* Encode output as utf-8 */ + 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); + } + 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; + } - 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); - } - } + case "f": + case "%": + { + if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2; + break; } + } - return output; - } + return format$1(specifier); + } - function utf8Decode(str) { - var i, - ac, - c1, - c2, - c3, - arr = [], - l; - i = ac = c1 = c2 = c3 = 0; + function linearish(scale) { + var domain = scale.domain; - if (str && str.length) { - l = str.length; - str += ''; + scale.ticks = function (count) { + var d = domain(); + return ticks(d[0], d[d.length - 1], count == null ? 10 : count); + }; - while (i < l) { - c1 = str.charCodeAt(i); - ac += 1; + scale.tickFormat = function (count, specifier) { + var d = domain(); + return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier); + }; - 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; - } - } - } + 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 arr.join(''); + if (stop < start) { + step = start, start = stop, stop = step; + step = i0, i0 = i1, i1 = step; } - /** - * Add integers, wrapping at 2^32. This uses 16-bit operations internally - * to work around bugs in some JS interpreters. - */ + while (maxIter-- > 0) { + step = tickIncrement(start, stop, count); - function safe_add(x, y) { - var lsw = (x & 0xFFFF) + (y & 0xFFFF), - msw = (x >> 16) + (y >> 16) + (lsw >> 16); - return msw << 16 | lsw & 0xFFFF; + 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; + } + + prestep = step; } - /** - * Bitwise rotate a 32-bit number to the left. - */ + return scale; + }; - function bit_rol(num, cnt) { - return num << cnt | num >>> 32 - cnt; - } - /** - * Convert a raw string to a hex string - */ + return scale; + } + function linear() { + var scale = continuous(); + scale.copy = function () { + return copy(scale, linear()); + }; - function rstr2hex(input, hexcase) { - var hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef', - output = '', - x, - i = 0, - l = input.length; + initRange.apply(scale, arguments); + return linearish(scale); + } - for (; i < l; i += 1) { - x = input.charCodeAt(i); - output += hex_tab.charAt(x >>> 4 & 0x0F) + hex_tab.charAt(x & 0x0F); - } + // eslint-disable-next-line es/no-math-expm1 -- safe + var $expm1 = Math.expm1; + var exp$1 = Math.exp; - return output; - } - /** - * Convert an array of big-endian words to a string - */ + // `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; + function quantize() { + var x0 = 0, + x1 = 1, + n = 1, + domain = [0.5], + range = [0, 1], + unknown; - function binb2rstr(input) { - var i, - l = input.length * 32, - output = ''; + function scale(x) { + return x != null && x <= x ? range[bisectRight(domain, x, 0, n)] : unknown; + } - for (i = 0; i < l; i += 8) { - output += String.fromCharCode(input[i >> 5] >>> 24 - i % 32 & 0xFF); - } + function rescale() { + var i = -1; + domain = new Array(n); - return output; + while (++i < n) { + domain[i] = ((i + 1) * x1 - (i - n) * x0) / (n + 1); } - /** - * Convert an array of little-endian words to a string - */ + return scale; + } - function binl2rstr(input) { - var i, - l = input.length * 32, - output = ''; - - for (i = 0; i < l; i += 8) { - output += String.fromCharCode(input[i >> 5] >>> i % 32 & 0xFF); - } + scale.domain = function (_) { + var _ref, _ref2; - return output; - } - /** - * Convert a raw string to an array of little-endian words - * Characters >255 have their high-byte silently ignored. - */ + return arguments.length ? ((_ref = _, _ref2 = _slicedToArray(_ref, 2), x0 = _ref2[0], x1 = _ref2[1], _ref), x0 = +x0, x1 = +x1, rescale()) : [x0, x1]; + }; + scale.range = function (_) { + return arguments.length ? (n = (range = Array.from(_)).length - 1, rescale()) : range.slice(); + }; - function rstr2binl(input) { - var i, - l = input.length * 8, - output = Array(input.length >> 2), - lo = output.length; + 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]]; + }; - for (i = 0; i < lo; i += 1) { - output[i] = 0; - } + scale.unknown = function (_) { + return arguments.length ? (unknown = _, scale) : scale; + }; - for (i = 0; i < l; i += 8) { - output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << i % 32; - } + scale.thresholds = function () { + return domain.slice(); + }; - return output; - } - /** - * Convert a raw string to an array of big-endian words - * Characters >255 have their high-byte silently ignored. - */ + scale.copy = function () { + return quantize().domain([x0, x1]).range(range).unknown(unknown); + }; + return initRange.apply(linearish(scale), arguments); + } - function rstr2binb(input) { - var i, - l = input.length * 8, - output = Array(input.length >> 2), - lo = output.length; + // https://github.com/tc39/proposal-string-pad-start-end + var toLength$2 = toLength$q; + var repeat$1 = stringRepeat; + var requireObjectCoercible$2 = requireObjectCoercible$e; - for (i = 0; i < lo; i += 1) { - output[i] = 0; - } + var ceil = Math.ceil; - for (i = 0; i < l; i += 8) { - output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << 24 - i % 32; - } + // `String.prototype.{ padStart, padEnd }` methods implementation + var createMethod = function (IS_END) { + return function ($this, maxLength, fillString) { + var S = String(requireObjectCoercible$2($this)); + var stringLength = S.length; + var fillStr = fillString === undefined ? ' ' : String(fillString); + var intMaxLength = toLength$2(maxLength); + var fillLen, stringFiller; + if (intMaxLength <= stringLength || fillStr == '') return S; + fillLen = intMaxLength - stringLength; + stringFiller = repeat$1.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 arbitrary string encoding - */ + 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 fails$2 = fails$N; + var padStart = stringPad.start; - 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 */ + var abs$1 = Math.abs; + var DatePrototype = Date.prototype; + var getTime = DatePrototype.getTime; + var nativeDateToISOString = DatePrototype.toISOString; - dividend = Array(Math.ceil(input.length / 2)); - ld = dividend.length; + // `Date.prototype.toISOString` method implementation + // https://tc39.es/ecma262/#sec-date.prototype.toisostring + // PhantomJS / old WebKit fails here: + var dateToIsoString = (fails$2(function () { + return nativeDateToISOString.call(new Date(-5e13 - 1)) != '0385-07-25T07:06:39.999Z'; + }) || !fails$2(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 < 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. - */ + var $$6 = _export; + var toISOString = dateToIsoString; + // `Date.prototype.toISOString` method + // https://tc39.es/ecma262/#sec-date.prototype.toisostring + // PhantomJS / old WebKit has a broken implementations + $$6({ target: 'Date', proto: true, forced: Date.prototype.toISOString !== toISOString }, { + toISOString: toISOString + }); - while (dividend.length > 0) { - quotient = Array(); - x = 0; + function behaviorBreathe() { + var duration = 800; + var steps = 4; + var selector = '.selected.shadow, .selected .shadow'; - for (i = 0; i < dividend.length; i += 1) { - x = (x << 16) + dividend[i]; - q = Math.floor(x / divisor); - x -= q * divisor; + var _selected = select(null); - if (quotient.length > 0 || q > 0) { - quotient[quotient.length] = q; - } - } + var _classed = ''; + var _params = {}; + var _done = false; - remainders[remainders.length] = x; - dividend = quotient; - } - /* Convert the remainders to the output string */ + var _timer; + 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 || ''); + }; + } - output = ''; + function reset(selection) { + selection.style('stroke-opacity', null).style('stroke-width', null).style('fill-opacity', null).style('r', null); + } - for (i = remainders.length - 1; i >= 0; i--) { - output += encoding.charAt(remainders[i]); - } - /* Append leading zero equivalents */ + 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 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 - full_length = Math.ceil(input.length * 8 / (Math.log(encoding.length) / Math.log(2))); + 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 = output.length; i < full_length; i += 1) { - output = encoding[0] + output; - } - return output; - } - /** - * Convert a raw string to a base-64 string - */ + 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; + }); + } + function run(surface, fromTo) { + var toFrom = fromTo === 'from' ? 'to' : 'from'; + var currSelected = surface.selectAll(selector); + var currClassed = surface.attr('class'); - function rstr2b64(input, b64pad) { - var tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', - output = '', - len = input.length, - i, - j, - triplet; - b64pad = b64pad || '='; + if (_done || currSelected.empty()) { + _selected.call(reset); - 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); + _selected = select(null); + return; + } - 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 (!fastDeepEqual(currSelected.data(), _selected.data()) || currClassed !== _classed) { + _selected.call(reset); - return output; + _classed = currClassed; + _selected = currSelected.call(calcAnimationParams); } - Hashes = { - /** - * @property {String} version - * @readonly - */ - VERSION: '1.0.6', + var didCallNextRun = false; - /** - * @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 + _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 - this.encode = function (input) { - var i, - j, - triplet, - output = '', - len = input.length; - pad = pad || '='; - input = utf8 ? utf8Encode(input) : input; - 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); + if (!select(this).classed('selected')) { + reset(select(this)); + } + }); + } - 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); - } - } - } + function behavior(surface) { + _done = false; + _timer = timer(function () { + // wait for elements to actually become selected + if (surface.selectAll(selector).empty()) { + return false; + } - return output; - }; // public method for decoding + surface.call(run, 'from'); + _timer.stop(); - this.decode = function (input) { - // var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; - var i, - o1, - o2, - o3, - h1, - h2, - h3, - h4, - bits, - ac, - dec = '', - arr = []; + return true; + }, 20); + } - if (!input) { - return input; - } + behavior.restartIfNeeded = function (surface) { + if (_selected.empty()) { + surface.call(run, 'from'); - i = ac = 0; - input = input.replace(new RegExp('\\' + pad, 'gi'), ''); // use '=' - //input += ''; + if (_timer) { + _timer.stop(); + } + } + }; - 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.off = function () { + _done = true; + + if (_timer) { + _timer.stop(); + } - 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); + _selected.interrupt().call(reset); + }; - dec = arr.join(''); - dec = utf8 ? utf8Decode(dec) : dec; - return dec; - }; // set custom pad string + return behavior; + } + /* Creates a keybinding behavior for an operation */ + function behaviorOperation(context) { + var _operation; - this.setPad = function (str) { - pad = str || pad; - return this; - }; // set custom tab string characters + function keypress(d3_event) { + // prevent operations during low zoom selection + if (!context.map().withinEditableZoom()) return; + if (_operation.availableForKeypress && !_operation.availableForKeypress()) return; + d3_event.preventDefault(); + var disabled = _operation.disabled(); - this.setTab = function (str) { - tab = str || tab; - return this; - }; + 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); - this.setUTF8 = function (bool) { - if (typeof bool === 'boolean') { - utf8 = bool; - } + _operation(); + } + } - return this; - }; - }, + function behavior() { + if (_operation && _operation.available()) { + context.keybinding().on(_operation.keys, keypress); + } - /** - * 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; + return behavior; + } - 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) + behavior.off = function () { + context.keybinding().off(_operation.keys); + }; + behavior.which = function (_) { + if (!arguments.length) return _operation; + _operation = _; + return behavior; + }; - return (crc ^ -1) >>> 0; - }, + return behavior; + } - /** - * @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; + while (src) { + // newline + if (token = this.tokenizer.space(src)) { + src = src.substring(token.raw.length); - 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.type) { + tokens.push(token); } - }); - if (localeSitelink) { - // If locale ID is not found, store false to prevent repeated queries - that.addLocale(params.langCodes[0], localeID); - } + continue; + } // code - 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.code(src)) { + src = src.substring(token.raw.length); + lastToken = tokens[tokens.length - 1]; // An indented code block cannot interrupt a paragraph. - if (!entity) { - callback('No entity'); - return; - } + if (lastToken && lastToken.type === 'paragraph') { + lastToken.raw += '\n' + token.raw; + lastToken.text += '\n' + token.text; + } else { + tokens.push(token); + } - var i; - var description; + continue; + } // fences - 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.fences(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // heading - 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.heading(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // table no leading pipe (gfm) - 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.nptable(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // hr - if (image) { - imageroot = 'https://wiki.openstreetmap.org/w/index.php'; - } - } - 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. + if (token = this.tokenizer.hr(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // blockquote - 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.blockquote(src)) { + src = src.substring(token.raw.length); + token.tokens = this.blockTokens(token.text, [], top); + tokens.push(token); + continue; + } // list - 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 (token = this.tokenizer.list(src)) { + src = src.substring(token.raw.length); + l = token.items.length; - if (info) { - result.wiki = info; - break; + for (i = 0; i < l; i++) { + token.items[i].tokens = this.blockTokens(token.items[i].text, [], false); } - } - - if (result.wiki) break; - } - - 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] - }; - } - } - }); - }, - 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 (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); + tokens.push(token); + continue; + } // html - request.abort = function () { - window.clearTimeout(t); - }; - } - return request; - } + if (token = this.tokenizer.html(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // def - function rand() { - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; - var c = ''; - var i = -1; - while (++i < 15) { - c += chars.charAt(Math.floor(Math.random() * 52)); - } + if (top && (token = this.tokenizer.def(src))) { + src = src.substring(token.raw.length); - return c; - } + if (!this.tokens.links[token.tag]) { + this.tokens.links[token.tag] = { + href: token.href, + title: token.title + }; + } - function create(url) { - var e = url.match(/callback=(\w+)/); - var c = e ? e[1] : rand(); + continue; + } // table (gfm) - jsonpCache[c] = function (data) { - if (jsonpCache[c]) { - callback(data); - } - finalize(); - }; + if (token = this.tokenizer.table(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // lheading - function finalize() { - delete jsonpCache[c]; - script.remove(); - } - request.abort = finalize; - return 'jsonpCache.' + c; - } + if (token = this.tokenizer.lheading(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // top-level paragraph - var cb = create(url); - var script = select('head').append('script').attr('type', 'text/javascript').attr('src', url.replace(/(\{|%7B)callback(\}|%7D)/, cb)); - return request; - } - 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 + if (top && (token = this.tokenizer.paragraph(src))) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // text - var maxHfov = 90; // zoom out degrees - var defaultHfov = 45; - var _hires = false; - var _resolution = 512; // higher numbers are slower - 512, 1024, 2048, 4096 + if (token = this.tokenizer.text(src)) { + src = src.substring(token.raw.length); + lastToken = tokens[tokens.length - 1]; - var _currScene = 0; + if (lastToken && lastToken.type === 'text') { + lastToken.raw += '\n' + token.raw; + lastToken.text += '\n' + token.text; + } else { + tokens.push(token); + } - var _ssCache; + continue; + } - var _pannellumViewer; + if (src) { + var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0); - var _sceneOptions = { - showFullscreenCtrl: false, - autoLoad: true, - compass: true, - yaw: 0, - minHfov: minHfov, - maxHfov: maxHfov, - hfov: defaultHfov, - type: 'cubemap', - cubeMap: [] - }; + if (this.options.silent) { + console.error(errMsg); + break; + } else { + throw new Error(errMsg); + } + } + } - var _loadViewerPromise$2; - /** - * abortRequest(). - */ + return tokens; + } + }, { + key: "inline", + value: function inline(tokens) { + var i, j, k, l2, row, token; + var l = tokens.length; + for (i = 0; i < l; i++) { + token = tokens[i]; - function abortRequest$6(i) { - i.abort(); - } - /** - * localeTimeStamp(). - */ + switch (token.type) { + case 'paragraph': + case 'text': + case 'heading': + { + token.tokens = []; + this.inlineTokens(token.text, token.tokens); + break; + } + case 'table': + { + token.tokens = { + header: [], + cells: [] + }; // header - 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. - */ + l2 = token.header.length; + for (j = 0; j < l2; j++) { + token.tokens.header[j] = []; + this.inlineTokens(token.header[j], token.tokens.header[j]); + } // cells - function loadTiles$2(which, url, projection, margin) { - var tiles = tiler$6.margin(margin).getTiles(projection); // abort inflight requests that are no longer needed - var cache = _ssCache[which]; - Object.keys(cache.inflight).forEach(function (k) { - var wanted = tiles.find(function (tile) { - return k.indexOf(tile.id + ',') === 0; - }); + l2 = token.cells.length; - 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. - */ + for (j = 0; j < l2; j++) { + row = token.cells[j]; + token.tokens.cells[j] = []; + for (k = 0; k < row.length; k++) { + token.tokens.cells[j][k] = []; + this.inlineTokens(row[k], token.tokens.cells[j][k]); + } + } - 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 + break; + } - bubbles.shift(); - var features = bubbles.map(function (bubble) { - if (cache.points[bubble.id]) return null; // skip duplicates + case 'blockquote': + { + this.inline(token.tokens); + break; + } - 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 + case 'list': + { + l2 = token.items.length; - if (bubble.pr === undefined) { - cache.leaders.push(bubble.id); - } + for (j = 0; j < l2; j++) { + this.inline(token.items[j].tokens); + } - return { - minX: loc[0], - minY: loc[1], - maxX: loc[0], - maxY: loc[1], - data: d - }; - }).filter(Boolean); - cache.rtree.load(features); - connectSequences(); + break; + } + } + } - if (which === 'bubbles') { - dispatch$7.call('loadedImages'); + return tokens; } - }); - } // call this sometimes to connect the bubbles into sequences + /** + * Lexing/Compiling + */ + }, { + 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 - function connectSequences() { - var cache = _ssCache.bubbles; - var keepLeaders = []; + var maskedSrc = src; + var match; + var keepPrevChar, prevChar; // Mask out reflinks - 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 (this.tokens.links) { + var links = Object.keys(this.tokens.links); - var sequence = { - key: bubble.key, - bubbles: [] - }; - var complete = false; + 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 - do { - sequence.bubbles.push(bubble); - seen[bubble.key] = true; - if (bubble.ne === undefined) { - complete = true; - } else { - bubble = cache.points[bubble.ne]; // advance to next + 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 + + + while ((match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null) { + maskedSrc = maskedSrc.slice(0, match.index) + '++' + maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex); } - } while (bubble && !seen[bubble.key] && !complete); - if (complete) { - _ssCache.sequences[sequence.key] = sequence; // assign bubbles to the sequence + while (src) { + if (!keepPrevChar) { + prevChar = ''; + } - for (var j = 0; j < sequence.bubbles.length; j++) { - sequence.bubbles[j].sequenceKey = sequence.key; - } // create a GeoJSON LineString + keepPrevChar = false; // escape + if (token = this.tokenizer.escape(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // tag - 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.tag(src, inLink, inRawBlock)) { + src = src.substring(token.raw.length); + inLink = token.inLink; + inRawBlock = token.inRawBlock; + var _lastToken = tokens[tokens.length - 1]; - cache.leaders = keepLeaders; - } - /** - * getBubbles() handles the request to the server for a tile extent of 'bubbles' (streetside image locations). - */ + if (_lastToken && token.type === 'text' && _lastToken.type === 'text') { + _lastToken.raw += token.raw; + _lastToken.text += token.text; + } else { + tokens.push(token); + } + continue; + } // link - 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.link(src)) { + 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.type === 'link') { + token.tokens = this.inlineTokens(token.text, [], true, inRawBlock); + } - var tiler = utilTiler().zoomExtent([z2, z2]); - return tiler.getTiles(projection).map(function (tile) { - return tile.extent; - }); - } // no more than `limit` results per partition. + tokens.push(token); + continue; + } // reflink, nolink - 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() - */ + if (token = this.tokenizer.reflink(src, this.tokens.links)) { + src = src.substring(token.raw.length); + var _lastToken2 = tokens[tokens.length - 1]; + 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); + } - function loadImage(imgInfo) { - return new Promise(function (resolve) { - var img = new Image(); + continue; + } // em & strong - 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' - }); - }; - img.onerror = function () { - resolve({ - data: imgInfo, - status: 'error' - }); - }; + 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 - img.setAttribute('crossorigin', ''); - img.src = imgInfo.url; - }); - } - /** - * loadCanvas() - */ + if (token = this.tokenizer.codespan(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // br - 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' - }; - }); - } - /** - * loadFaces() - */ + if (token = this.tokenizer.br(src)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // del (gfm) - function loadFaces(faceGroup) { - return Promise.all(faceGroup.map(loadCanvas)).then(function () { - return { - status: 'loadFaces done' - }; - }); - } - 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 + 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 - 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 (token = this.tokenizer.autolink(src, mangle)) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // url (gfm) - function qkToXY(qk) { - var x = 0; - var y = 0; - var scale = 256; - 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 (!inLink && (token = this.tokenizer.url(src, mangle))) { + src = src.substring(token.raw.length); + tokens.push(token); + continue; + } // text - return [x, y]; - } - function getQuadKeys() { - var dim = _resolution / 256; - var quadKeys; + if (token = this.tokenizer.inlineText(src, inRawBlock, smartypants)) { + src = src.substring(token.raw.length); - if (dim === 16) { - quadKeys = ['0000', '0001', '0010', '0011', '0100', '0101', '0110', '0111', '1000', '1001', '1010', '1011', '1100', '1101', '1110', '1111', '0002', '0003', '0012', '0013', '0102', '0103', '0112', '0113', '1002', '1003', '1012', '1013', '1102', '1103', '1112', '1113', '0020', '0021', '0030', '0031', '0120', '0121', '0130', '0131', '1020', '1021', '1030', '1031', '1120', '1121', '1130', '1131', '0022', '0023', '0032', '0033', '0122', '0123', '0132', '0133', '1022', '1023', '1032', '1033', '1122', '1123', '1132', '1133', '0200', '0201', '0210', '0211', '0300', '0301', '0310', '0311', '1200', '1201', '1210', '1211', '1300', '1301', '1310', '1311', '0202', '0203', '0212', '0213', '0302', '0303', '0312', '0313', '1202', '1203', '1212', '1213', '1302', '1303', '1312', '1313', '0220', '0221', '0230', '0231', '0320', '0321', '0330', '0331', '1220', '1221', '1230', '1231', '1320', '1321', '1330', '1331', '0222', '0223', '0232', '0233', '0322', '0323', '0332', '0333', '1222', '1223', '1232', '1233', '1322', '1323', '1332', '1333', '2000', '2001', '2010', '2011', '2100', '2101', '2110', '2111', '3000', '3001', '3010', '3011', '3100', '3101', '3110', '3111', '2002', '2003', '2012', '2013', '2102', '2103', '2112', '2113', '3002', '3003', '3012', '3013', '3102', '3103', '3112', '3113', '2020', '2021', '2030', '2031', '2120', '2121', '2130', '2131', '3020', '3021', '3030', '3031', '3120', '3121', '3130', '3131', '2022', '2023', '2032', '2033', '2122', '2123', '2132', '2133', '3022', '3023', '3032', '3033', '3122', '3123', '3132', '3133', '2200', '2201', '2210', '2211', '2300', '2301', '2310', '2311', '3200', '3201', '3210', '3211', '3300', '3301', '3310', '3311', '2202', '2203', '2212', '2213', '2302', '2303', '2312', '2313', '3202', '3203', '3212', '3213', '3302', '3303', '3312', '3313', '2220', '2221', '2230', '2231', '2320', '2321', '2330', '2331', '3220', '3221', '3230', '3231', '3320', '3321', '3330', '3331', '2222', '2223', '2232', '2233', '2322', '2323', '2332', '2333', '3222', '3223', '3232', '3233', '3322', '3323', '3332', '3333']; - } else if (dim === 8) { - quadKeys = ['000', '001', '010', '011', '100', '101', '110', '111', '002', '003', '012', '013', '102', '103', '112', '113', '020', '021', '030', '031', '120', '121', '130', '131', '022', '023', '032', '033', '122', '123', '132', '133', '200', '201', '210', '211', '300', '301', '310', '311', '202', '203', '212', '213', '302', '303', '312', '313', '220', '221', '230', '231', '320', '321', '330', '331', '222', '223', '232', '233', '322', '323', '332', '333']; - } else if (dim === 4) { - quadKeys = ['00', '01', '10', '11', '02', '03', '12', '13', '20', '21', '30', '31', '22', '23', '32', '33']; - } else { - // dim === 2 - quadKeys = ['0', '1', '2', '3']; - } + if (token.raw.slice(-1) !== '_') { + // Track prevChar before string of ____ started + prevChar = token.raw.slice(-1); + } - return quadKeys; - } + keepPrevChar = true; + lastToken = tokens[tokens.length - 1]; - var serviceStreetside = { - /** - * init() initialize streetside. - */ - init: function init() { - if (!_ssCache) { - this.reset(); - } + if (lastToken && lastToken.type === 'text') { + lastToken.raw += token.raw; + lastToken.text += token.text; + } else { + tokens.push(token); + } - this.event = utilRebind(this, dispatch$7, 'on'); - }, + continue; + } - /** - * reset() reset the cache. - */ - reset: function reset() { - if (_ssCache) { - Object.values(_ssCache.bubbles.inflight).forEach(abortRequest$6); + if (src) { + var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0); + + if (this.options.silent) { + console.error(errMsg); + break; + } else { + throw new Error(errMsg); + } + } + } + + return tokens; + } + }], [{ + key: "rules", + get: function get() { + return { + block: block, + inline: inline + }; } + /** + * Static Lex Method + */ - _ssCache = { - bubbles: { - inflight: {}, - loaded: {}, - nextPage: {}, - rtree: new RBush(), - points: {}, - leaders: [] - }, - sequences: {} - }; - }, + }, { + key: "lex", + value: function lex(src, options) { + var lexer = new Lexer(options); + return lexer.lex(src); + } + /** + * Static Lex Inline Method + */ - /** - * bubbles() - */ - bubbles: function bubbles(projection) { - var limit = 5; - return searchLimited$2(limit, projection, _ssCache.bubbles.rtree); - }, - cachedImage: function cachedImage(imageKey) { - return _ssCache.bubbles.points[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 seen = {}; - var results = []; // all sequences for bubbles in viewport + }, { + key: "lexInline", + value: function lexInline(src, options) { + var lexer = new Lexer(options); + return lexer.inlineTokens(src); + } + }]); - _ssCache.bubbles.rtree.search(bbox).forEach(function (d) { - var key = d.data.sequenceKey; + return Lexer; + }(); - if (key && !seen[key]) { - seen[key] = true; - results.push(_ssCache.sequences[key].geojson); - } - }); + var defaults$2 = defaults$5.exports.defaults; + var cleanUrl = helpers.cleanUrl, + escape$2 = helpers.escape; + /** + * Renderer + */ - return results; - }, + var Renderer_1 = /*#__PURE__*/function () { + function Renderer(options) { + _classCallCheck$1(this, Renderer); - /** - * loadBubbles() - */ - loadBubbles: function loadBubbles(projection, margin) { - // by default: request 2 nearby tiles so we can connect sequences. - if (margin === undefined) margin = 2; - loadTiles$2('bubbles', bubbleApi, projection, margin); - }, - viewer: function viewer() { - return _pannellumViewer; - }, - initViewer: function initViewer() { - if (!window.pannellum) return; - if (_pannellumViewer) return; - _currScene += 1; + this.options = options || defaults$2; + } - var sceneID = _currScene.toString(); + _createClass$1(Renderer, [{ + key: "code", + value: function code(_code, infostring, escaped) { + var lang = (infostring || '').match(/\S*/)[0]; - var options = { - 'default': { - firstScene: sceneID - }, - scenes: {} - }; - options.scenes[sceneID] = _sceneOptions; - _pannellumViewer = window.pannellum.viewer('ideditor-viewer-streetside', options); - }, - ensureViewerLoaded: function ensureViewerLoaded(context) { - if (_loadViewerPromise$2) return _loadViewerPromise$2; // create ms-wrapper, a photo wrapper class + if (this.options.highlight) { + var out = this.options.highlight(_code, lang); - var wrap = context.container().select('.photoviewer').selectAll('.ms-wrapper').data([0]); // inject ms-wrapper into the photoviewer div - // (used by all to house each custom photo viewer) + if (out != null && out !== _code) { + escaped = true; + _code = out; + } + } - var wrapEnter = wrap.enter().append('div').attr('class', 'photo-wrapper ms-wrapper').classed('hide', true); - var that = this; - var pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; // inject div to support streetside viewer (pannellum) and attribution line + _code = _code.replace(/\n$/, '') + '\n'; - wrapEnter.append('div').attr('id', 'ideditor-viewer-streetside').on(pointerPrefix + 'down.streetside', function () { - select(window).on(pointerPrefix + 'move.streetside', function () { - dispatch$7.call('viewerChanged'); - }, true); - }).on(pointerPrefix + 'up.streetside pointercancel.streetside', function () { - select(window).on(pointerPrefix + 'move.streetside', null); // continue dispatching events for a few seconds, in case viewer has inertia. + 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) + ''; } - } - var geom = { - type: "Polygon", - coordinates: coordinates - }; - return feature(geom, properties, options); + throw e; + } } /** - * Creates a {@link LineString} {@link Feature} from an Array of Positions. - * - * @name lineString - * @param {Array
An error occurred:
' + escape$1(e.message + '', true) + ''; } + + throw e; } + }; + /** + * Expose + */ - return outRings; - } - var fastJsonStableStringify = function fastJsonStableStringify(data, opts) { - if (!opts) opts = {}; - if (typeof opts === 'function') opts = { - cmp: opts - }; - var cycles = typeof opts.cycles === 'boolean' ? opts.cycles : false; + marked.Parser = Parser; + marked.parser = Parser.parse; + marked.Renderer = Renderer; + marked.TextRenderer = TextRenderer; + marked.Lexer = Lexer; + marked.lexer = Lexer.lex; + marked.Tokenizer = Tokenizer; + marked.Slugger = Slugger; + marked.parse = marked; + var marked_1 = marked; - var cmp = opts.cmp && function (f) { - return function (node) { - return function (a, b) { - var aobj = { - key: a, - value: node[a] - }; - var bobj = { - key: b, - value: node[b] - }; - return f(aobj, bobj); - }; - }; - }(opts.cmp); + 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 + + var _cache; + + function abortRequest$4(controller) { + if (controller) { + controller.abort(); + } + } - var seen = []; - return function stringify(node) { - if (node && node.toJSON && typeof node.toJSON === 'function') { - node = node.toJSON(); + function abortUnwantedRequests$1(cache, tiles) { + Object.keys(cache.inflightTile).forEach(function (k) { + var wanted = tiles.find(function (tile) { + return k === tile.id; + }); + + if (!wanted) { + abortRequest$4(cache.inflightTile[k]); + delete cache.inflightTile[k]; } + }); + } - if (node === undefined) return; - if (typeof node == 'number') return isFinite(node) ? '' + node : 'null'; - if (_typeof(node) !== 'object') return JSON.stringify(node); - var i, out; + 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 (Array.isArray(node)) { - out = '['; - for (i = 0; i < node.length; i++) { - if (i) out += ','; - out += stringify(node[i]) || 'null'; - } + function updateRtree$1(item, replace) { + _cache.rtree.remove(item, function (a, b) { + return a.data.id === b.data.id; + }); - return out + ']'; - } + if (replace) { + _cache.rtree.insert(item); + } + } // Issues shouldn't obscure each other - if (node === null) return 'null'; - if (seen.indexOf(node) !== -1) { - if (cycles) return JSON.stringify('__cycle__'); - throw new TypeError('Converting circular structure to JSON'); - } + function preventCoincident(loc) { + var coincident = false; - var seenIndex = seen.push(node) - 1; - var keys = Object.keys(node).sort(cmp && cmp(node)); - out = ''; + 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); - for (i = 0; i < keys.length; i++) { - var key = keys[i]; - var value = stringify(node[key]); - if (!value) continue; - if (out) out += ','; - out += JSON.stringify(key) + ':' + value; + return loc; + } + + 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]); + }, []); + }); + + if (!_cache) { + this.reset(); } - seen.splice(seenIndex, 1); - return '{' + out + '}'; - }(data); - }; + this.event = utilRebind(this, dispatch$5, 'on'); + }, + reset: function reset() { + var _strings = {}; + var _colors = {}; - function DEFAULT_COMPARE(a, b) { - return a > b ? 1 : a < b ? -1 : 0; - } + if (_cache) { + Object.values(_cache.inflightTile).forEach(abortRequest$4); // Strings and colors are static and should not be re-populated - var SplayTree = /*#__PURE__*/function () { - function SplayTree() { - var compare = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_COMPARE; - var noDuplicates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + _strings = _cache.strings; + _colors = _cache.colors; + } - _classCallCheck(this, SplayTree); + _cache = { + data: {}, + loadedTile: {}, + inflightTile: {}, + inflightPost: {}, + closed: {}, + rtree: new RBush(), + strings: _strings, + colors: _colors + }; + }, + loadIssues: function loadIssues(projection) { + var _this = this; - this._compare = compare; - this._root = null; - this._size = 0; - this._noDuplicates = !!noDuplicates; - } + 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 - _createClass(SplayTree, [{ - key: "rotateLeft", - value: function rotateLeft(x) { - var y = x.right; + var tiles = tiler$4.zoomExtent([_tileZoom$1, _tileZoom$1]).getTiles(projection); // abort inflight requests that are no longer needed - if (y) { - x.right = y.left; - if (y.left) y.left.parent = x; - y.parent = x.parent; - } + abortUnwantedRequests$1(_cache, tiles); // issue new requests.. - if (!x.parent) this._root = y;else if (x === x.parent.left) x.parent.left = y;else x.parent.right = y; - if (y) y.left = x; - x.parent = y; - } - }, { - key: "rotateRight", - value: function rotateRight(x) { - var y = x.left; + tiles.forEach(function (tile) { + if (_cache.loadedTile[tile.id] || _cache.inflightTile[tile.id]) return; - if (y) { - x.left = y.right; - if (y.right) y.right.parent = x; - y.parent = x.parent; - } + var _tile$xyz = _slicedToArray(tile.xyz, 3), + x = _tile$xyz[0], + y = _tile$xyz[1], + z = _tile$xyz[2]; - if (!x.parent) this._root = y;else if (x === x.parent.left) x.parent.left = y;else x.parent.right = y; - if (y) y.right = x; - x.parent = y; - } - }, { - key: "_splay", - value: function _splay(x) { - while (x.parent) { - var p = x.parent; - - if (!p.parent) { - if (p.left === x) this.rotateRight(p);else this.rotateLeft(p); - } else if (p.left === x && p.parent.left === p) { - this.rotateRight(p.parent); - this.rotateRight(p); - } else if (p.right === x && p.parent.right === p) { - this.rotateLeft(p.parent); - this.rotateLeft(p); - } else if (p.left === x && p.parent.right === p) { - this.rotateRight(p); - this.rotateLeft(p); - } else { - this.rotateLeft(p); - this.rotateRight(p); - } - } - } - }, { - key: "splay", - value: function splay(x) { - var p, gp, ggp, l, r; - - while (x.parent) { - p = x.parent; - gp = p.parent; - - if (gp && gp.parent) { - ggp = gp.parent; - if (ggp.left === gp) ggp.left = x;else ggp.right = x; - x.parent = ggp; - } else { - x.parent = null; - this._root = x; - } + var url = "".concat(_osmoseUrlRoot, "/issues/").concat(z, "/").concat(x, "/").concat(y, ".json?") + utilQsString(params); + var controller = new AbortController(); + _cache.inflightTile[tile.id] = controller; + d3_json(url, { + signal: controller.signal + }).then(function (data) { + delete _cache.inflightTile[tile.id]; + _cache.loadedTile[tile.id] = true; - l = x.left; - r = x.right; + 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) */ - if (x === p.left) { - // left - if (gp) { - if (gp.left === p) { - /* zig-zig */ - if (p.right) { - gp.left = p.right; - gp.left.parent = gp; - } else gp.left = null; + var itemType = "".concat(item, "-").concat(cl); // Filter out unsupported issue types (some are too specific or advanced) - p.right = gp; - gp.parent = p; - } else { - /* zig-zag */ - if (l) { - gp.right = l; - l.parent = gp; - } else gp.right = null; - - x.left = gp; - gp.parent = x; - } - } + if (itemType in _osmoseData.icons) { + var loc = issue.geometry.coordinates; // lon, lat - if (r) { - p.left = r; - r.parent = p; - } else p.left = null; + loc = preventCoincident(loc); + var d = new QAItem(loc, _this, itemType, id, { + item: item + }); // Setting elems here prevents UI detail requests - x.right = p; - p.parent = x; - } else { - // right - if (gp) { - if (gp.right === p) { - /* zig-zig */ - if (p.left) { - gp.right = p.left; - gp.right.parent = gp; - } else gp.right = null; - - p.left = gp; - gp.parent = p; - } else { - /* zig-zag */ - if (r) { - gp.left = r; - r.parent = gp; - } else gp.left = null; - - x.right = gp; - gp.parent = x; - } - } + if (item === 8300 || item === 8360) { + d.elems = []; + } - if (l) { - p.right = l; - l.parent = p; - } else p.right = null; + _cache.data[d.id] = d; - x.left = p; - p.parent = x; - } - } - } - }, { - key: "replace", - value: function replace(u, v) { - if (!u.parent) this._root = v;else if (u === u.parent.left) u.parent.left = v;else u.parent.right = v; - if (v) v.parent = u.parent; - } - }, { - key: "minNode", - value: function minNode() { - var u = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._root; - if (u) while (u.left) { - u = u.left; - } - return u; - } - }, { - key: "maxNode", - value: function maxNode() { - var u = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._root; - if (u) while (u.right) { - u = u.right; - } - return u; - } - }, { - key: "insert", - value: function insert(key, data) { - var z = this._root; - var p = null; - var comp = this._compare; - var cmp; - - if (this._noDuplicates) { - while (z) { - p = z; - cmp = comp(z.key, key); - if (cmp === 0) return;else if (comp(z.key, key) < 0) z = z.right;else z = z.left; - } - } else { - while (z) { - p = z; - if (comp(z.key, key) < 0) z = z.right;else z = z.left; + _cache.rtree.insert(encodeIssueRtree(d)); + } + }); } - } - z = { - key: key, - data: data, - left: null, - right: null, - parent: p - }; - if (!p) this._root = z;else if (comp(p.key, z.key) < 0) p.right = z;else p.left = z; - this.splay(z); - this._size++; - return z; + dispatch$5.call('loaded'); + })["catch"](function () { + delete _cache.inflightTile[tile.id]; + _cache.loadedTile[tile.id] = true; + }); + }); + }, + loadIssueDetail: function loadIssueDetail(issue) { + var _this2 = this; + + // Issue details only need to be fetched once + if (issue.elems !== undefined) { + return Promise.resolve(issue); } - }, { - key: "find", - value: function find(key) { - var z = this._root; - var comp = this._compare; - while (z) { - var cmp = comp(z.key, key); - if (cmp < 0) z = z.right;else if (cmp > 0) z = z.left;else return z; - } + var url = "".concat(_osmoseUrlRoot, "/issue/").concat(issue.id, "?langs=").concat(_mainLocalizer.localeCode()); - return null; - } - /** - * Whether the tree contains a node with the given key - * @param {Key} key - * @return {boolean} true/false - */ + 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 - }, { - key: "contains", - value: function contains(key) { - var node = this._root; - var comparator = this._compare; + issue.detail = data.subtitle ? marked_1(data.subtitle.auto) : ''; - while (node) { - var cmp = comparator(key, node.key); - if (cmp === 0) return true;else if (cmp < 0) node = node.left;else node = node.right; - } + _this2.replaceItem(issue); + }; - return false; - } - }, { - key: "remove", - value: function remove(key) { - var z = this.find(key); - if (!z) return false; - this.splay(z); - if (!z.left) this.replace(z, z.right);else if (!z.right) this.replace(z, z.left);else { - var y = this.minNode(z.right); + 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); - if (y.parent !== z) { - this.replace(y, y.right); - y.right = z.right; - y.right.parent = y; - } + if (locale in _cache.strings && Object.keys(_cache.strings[locale]).length === items.length) { + return Promise.resolve(_cache.strings[locale]); + } // May be partially populated already if some requests were successful - this.replace(z, y); - y.left = z.left; - y.left.parent = y; - } - this._size--; - return true; - } - }, { - key: "removeNode", - value: function removeNode(z) { - if (!z) return false; - this.splay(z); - if (!z.left) this.replace(z, z.right);else if (!z.right) this.replace(z, z.left);else { - var y = this.minNode(z.right); - if (y.parent !== z) { - this.replace(y, y.right); - y.right = z.right; - y.right.parent = y; - } + if (!(locale in _cache.strings)) { + _cache.strings[locale] = {}; + } // Only need to cache strings for supported issue types + // Using multiple individual item + class requests to reduce fetched data size - this.replace(z, y); - y.left = z.left; - y.left.parent = y; - } - this._size--; - return true; - } - }, { - key: "erase", - value: function erase(key) { - var z = this.find(key); - if (!z) return; - this.splay(z); - var s = z.left; - var t = z.right; - var sMax = null; - if (s) { - s.parent = null; - sMax = this.maxNode(s); - this.splay(sMax); - this._root = sMax; - } + var allRequests = items.map(function (itemType) { + // No need to request data we already have + if (itemType in _cache.strings[locale]) return null; - if (t) { - if (s) sMax.right = t;else this._root = t; - t.parent = sMax; - } + 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$; - this._size--; - } - /** - * Removes and returns the node with smallest key - * @return {?Node} - */ + var _cat$items = _slicedToArray(cat.items, 1), + _cat$items$ = _cat$items[0], + item = _cat$items$ === void 0 ? { + "class": [] + } : _cat$items$; - }, { - key: "pop", - value: function pop() { - var node = this._root, - returnValue = null; + 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 (node) { - while (node.left) { - node = node.left; - } - returnValue = { - key: node.key, - data: node.data - }; - this.remove(node.key); - } + if (!cl) { + /* eslint-disable no-console */ + console.log("Osmose strings request (".concat(itemType, ") had unexpected data")); + /* eslint-enable no-console */ - return returnValue; - } - /* eslint-disable class-methods-use-this */ + return; + } // Cache served item colors to automatically style issue markers later - /** - * Successor node - * @param {Node} node - * @return {?Node} - */ - }, { - key: "next", - value: function next(node) { - var successor = node; + var itemInt = item.item, + color = item.color; - if (successor) { - if (successor.right) { - successor = successor.right; + if (/^#[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/.test(color)) { + _cache.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 - while (successor && successor.left) { - successor = successor.left; - } - } else { - successor = node.parent; - while (successor && successor.right === node) { - node = successor; - successor = successor.parent; - } - } - } + var title = cl.title, + detail = cl.detail, + fix = cl.fix, + trap = cl.trap; // Osmose titles shouldn't contain markdown - return successor; - } - /** - * Predecessor node - * @param {Node} node - * @return {?Node} - */ + 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.strings[locale][itemType] = issueStrings; + }; - }, { - key: "prev", - value: function prev(node) { - var predecessor = node; + 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 (predecessor) { - if (predecessor.left) { - predecessor = predecessor.left; - while (predecessor && predecessor.right) { - predecessor = predecessor.right; - } - } else { - predecessor = node.parent; + 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.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.strings ? _cache.strings[locale][itemType] : {}; + }, + getColor: function getColor(itemType) { + return itemType in _cache.colors ? _cache.colors[itemType] : '#FFFFFF'; + }, + postUpdate: function postUpdate(issue, callback) { + var _this3 = this; - while (predecessor && predecessor.left === node) { - node = predecessor; - predecessor = predecessor.parent; - } - } - } + if (_cache.inflightPost[issue.id]) { + return callback({ + message: 'Issue update already inflight', + status: -2 + }, issue); + } // UI sets the status to either 'done' or 'false' - return predecessor; - } - /* eslint-enable class-methods-use-this */ - /** - * @param {forEachCallback} callback - * @return {SplayTree} - */ + var url = "".concat(_osmoseUrlRoot, "/issue/").concat(issue.id, "/").concat(issue.newStatus); + var controller = new AbortController(); - }, { - key: "forEach", - value: function forEach(callback) { - var current = this._root; - var s = [], - done = false, - i = 0; + var after = function after() { + delete _cache.inflightPost[issue.id]; - while (!done) { - // Reach the left most Node of the current Node - if (current) { - // Place pointer to a tree node on the stack - // before traversing the node's left subtree - s.push(current); - current = current.left; - } else { - // BackTrack from the empty subtree and visit the Node - // at the top of the stack; however, if the stack is - // empty you are done - if (s.length > 0) { - current = s.pop(); - callback(current, i++); // We have visited the node and its left - // subtree. Now, it's right subtree's turn + _this3.removeItem(issue); - current = current.right; - } else done = true; + if (issue.newStatus === 'done') { + // Keep track of the number of issues closed per `item` to tag the changeset + if (!(issue.item in _cache.closed)) { + _cache.closed[issue.item] = 0; } + + _cache.closed[issue.item] += 1; } - return this; - } - /** - * Walk key range from `low` to `high`. Stops if `fn` returns a value. - * @param {Key} low - * @param {Key} high - * @param {Function} fn - * @param {*?} ctx - * @return {SplayTree} - */ + if (callback) callback(null, issue); + }; - }, { - key: "range", - value: function range(low, high, fn, ctx) { - var Q = []; - var compare = this._compare; - var node = this._root, - cmp; - - while (Q.length !== 0 || node) { - if (node) { - Q.push(node); - node = node.left; - } else { - node = Q.pop(); - cmp = compare(node.key, high); + _cache.inflightPost[issue.id] = controller; + fetch(url, { + signal: controller.signal + }).then(after)["catch"](function (err) { + delete _cache.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.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.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.data[item.id] = item; + updateRtree$1(encodeIssueRtree(item), true); // true = replace - if (cmp > 0) { - break; - } else if (compare(node.key, low) >= 0) { - if (fn.call(ctx, node)) return this; // stop if smth is returned - } + return item; + }, + // Remove a single QAItem from the cache + removeItem: function removeItem(item) { + if (!(item instanceof QAItem) || !item.id) return; + delete _cache.data[item.id]; + updateRtree$1(encodeIssueRtree(item), false); // false = remove + }, + // Used to populate `closed:osmose:*` changeset tags + getClosedCounts: function getClosedCounts() { + return _cache.closed; + }, + itemURL: function itemURL(item) { + return "https://osmose.openstreetmap.fr/en/error/".concat(item.id); + } + }; - node = node.right; - } - } + var ieee754$1 = {}; - return this; - } - /** - * Returns all keys in order - * @return {Array
'); // linebreak - function extend(x, y) { - for (var k in y) { - x[k] = y[k]; + if (options.buttonText && options.buttonCallback) { + html += ''; } - } // get one coordinate from a coordinate array, if any - - - function coord1(v) { - return numarray(v.replace(removeSpace, '').split(',')); - } // get all coordinates from a coordinate array as [[],[]] + var classes = 'curtain-tooltip popover tooltip arrowed in ' + (options.tooltipClass || ''); + tooltip.classed(classes, true).selectAll('.popover-inner').html(html); - function coord(v) { - var coords = v.replace(trimSpace, '').split(splitSpace), - o = []; - - for (var i = 0; i < coords.length; i++) { - o.push(coord1(coords[i])); + if (options.buttonText && options.buttonCallback) { + var button = tooltip.selectAll('.button-section .button.action'); + button.on('click', function (d3_event) { + d3_event.preventDefault(); + options.buttonCallback(); + }); } - return o; - } + 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. - function coordPair(x) { - var ll = [attrf(x, 'lon'), attrf(x, 'lat')], - ele = get1(x, 'ele'), - // handle namespaced attribute in browser - heartRate = get1(x, 'gpxtpx:hr') || get1(x, 'hr'), - time = get1(x, 'time'), - e; + if (options.tooltipClass === 'intro-mouse') { + tip.height += 80; + } // trim box dimensions to just the portion that fits in the container.. - if (ele) { - e = parseFloat(nodeVal(ele)); - if (!isNaN(e)) { - ll.push(e); - } + if (tooltipBox.top + tooltipBox.height > h) { + tooltipBox.height -= tooltipBox.top + tooltipBox.height - h; } - return { - coordinates: ll, - time: time ? nodeVal(time) : null, - heartRate: heartRate ? parseFloat(nodeVal(heartRate)) : null - }; - } // create a new feature collection parent object - - - function fc() { - return { - type: 'FeatureCollection', - features: [] - }; - } - - var serializer; - - if (typeof XMLSerializer !== 'undefined') { - /* istanbul ignore next */ - serializer = new XMLSerializer(); // only require xmldom in a node environment - } else if ( (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && !process.browser) { - serializer = new domParser.XMLSerializer(); - } - - function xml2str(str) { - // IE9 will create a new XMLSerializer but it'll crash immediately. - // This line is ignored because we don't run coverage tests in IE9 - - /* istanbul ignore next */ - if (str.xml !== undefined) return str.xml; - return serializer.serializeToString(str); - } - - var t = { - kml: function kml(doc) { - var gj = fc(), - // styleindex keeps track of hashed styles in order to match features - styleIndex = {}, - styleByHash = {}, - // stylemapindex keeps track of style maps to expose in properties - styleMapIndex = {}, - // atomic geospatial types supported by KML - MultiGeometry is - // handled separately - geotypes = ['Polygon', 'LineString', 'Point', 'Track', 'gx:Track'], - // all root placemarks in the file - placemarks = get(doc, 'Placemark'), - styles = get(doc, 'Style'), - styleMaps = get(doc, 'StyleMap'); - - for (var k = 0; k < styles.length; k++) { - var hash = okhash(xml2str(styles[k])).toString(16); - styleIndex['#' + attr(styles[k], 'id')] = hash; - styleByHash[hash] = styles[k]; - } - - for (var l = 0; l < styleMaps.length; l++) { - styleIndex['#' + attr(styleMaps[l], 'id')] = okhash(xml2str(styleMaps[l])).toString(16); - var pairs = get(styleMaps[l], 'Pair'); - var pairsMap = {}; - - for (var m = 0; m < pairs.length; m++) { - pairsMap[nodeVal(get1(pairs[m], 'key'))] = nodeVal(get1(pairs[m], 'styleUrl')); - } - - styleMapIndex['#' + attr(styleMaps[l], 'id')] = pairsMap; - } - - for (var j = 0; j < placemarks.length; j++) { - gj.features = gj.features.concat(getPlacemark(placemarks[j])); - } - - function kmlColor(v) { - var color, opacity; - v = v || ''; - - if (v.substr(0, 1) === '#') { - v = v.substr(1); - } - - if (v.length === 6 || v.length === 3) { - color = v; - } - - if (v.length === 8) { - opacity = parseInt(v.substr(0, 2), 16) / 255; - color = '#' + v.substr(6, 2) + v.substr(4, 2) + v.substr(2, 2); - } - - return [color, isNaN(opacity) ? undefined : opacity]; - } + if (tooltipBox.left + tooltipBox.width > w) { + tooltipBox.width -= tooltipBox.left + tooltipBox.width - w; + } // determine tooltip placement.. - function gxCoord(v) { - return numarray(v.split(' ')); - } - function gxCoords(root) { - var elems = get(root, 'coord'), - coords = [], - times = []; - if (elems.length === 0) elems = get(root, 'gx:coord'); + 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; - for (var i = 0; i < elems.length; i++) { - coords.push(gxCoord(nodeVal(elems[i]))); + 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]; } - - var timeElems = get(root, 'when'); - - for (var j = 0; j < timeElems.length; j++) { - times.push(nodeVal(timeElems[j])); + } else { + if (tooltipBox.left + tooltipBox.width + tooltipArrow + tooltipWidth > w - 70) { + side = 'left'; + pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY]; + } else { + side = 'right'; + pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY]; } - - return { - coords: coords, - times: times - }; } + } - function getGeometry(root) { - var geomNode, - geomNodes, - i, - j, - k, - geoms = [], - coordTimes = []; - - if (get1(root, 'MultiGeometry')) { - return getGeometry(get1(root, 'MultiGeometry')); - } - - if (get1(root, 'MultiTrack')) { - return getGeometry(get1(root, 'MultiTrack')); - } - - if (get1(root, 'gx:MultiTrack')) { - return getGeometry(get1(root, 'gx:MultiTrack')); - } - - for (i = 0; i < geotypes.length; i++) { - geomNodes = get(root, geotypes[i]); - - if (geomNodes) { - for (j = 0; j < geomNodes.length; j++) { - geomNode = geomNodes[j]; - - if (geotypes[i] === 'Point') { - geoms.push({ - type: 'Point', - coordinates: coord1(nodeVal(get1(geomNode, 'coordinates'))) - }); - } else if (geotypes[i] === 'LineString') { - geoms.push({ - type: 'LineString', - coordinates: coord(nodeVal(get1(geomNode, 'coordinates'))) - }); - } else if (geotypes[i] === 'Polygon') { - var rings = get(geomNode, 'LinearRing'), - coords = []; + if (options.duration !== 0 || !tooltip.classed(side)) { + tooltip.call(uiToggle(true)); + } - for (k = 0; k < rings.length; k++) { - coords.push(coord(nodeVal(get1(rings[k], 'coordinates')))); - } + 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) - geoms.push({ - type: 'Polygon', - coordinates: coords - }); - } else if (geotypes[i] === 'Track' || geotypes[i] === 'gx:Track') { - var track = gxCoords(geomNode); - geoms.push({ - type: 'LineString', - coordinates: track.coords - }); - if (track.times.length) coordTimes.push(track.times); - } - } - } - } + var shiftY = 0; - return { - geoms: geoms, - coordTimes: coordTimes - }; + 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; } + } - function getPlacemark(root) { - var geomsAndTimes = getGeometry(root), - i, - properties = {}, - name = nodeVal(get1(root, 'name')), - address = nodeVal(get1(root, 'address')), - styleUrl = nodeVal(get1(root, 'styleUrl')), - description = nodeVal(get1(root, 'description')), - timeSpan = get1(root, 'TimeSpan'), - timeStamp = get1(root, 'TimeStamp'), - extendedData = get1(root, 'ExtendedData'), - lineStyle = get1(root, 'LineStyle'), - polyStyle = get1(root, 'PolyStyle'), - visibility = get1(root, 'visibility'); - if (!geomsAndTimes.geoms.length) return []; - if (name) properties.name = name; - if (address) properties.address = address; - - if (styleUrl) { - if (styleUrl[0] !== '#') { - styleUrl = '#' + styleUrl; - } - - properties.styleUrl = styleUrl; - - if (styleIndex[styleUrl]) { - properties.styleHash = styleIndex[styleUrl]; - } - - if (styleMapIndex[styleUrl]) { - properties.styleMapHash = styleMapIndex[styleUrl]; - properties.styleHash = styleIndex[styleMapIndex[styleUrl].normal]; - } // Try to populate the lineStyle or polyStyle since we got the style hash - + tooltip.selectAll('.popover-inner').style('top', shiftY + 'px'); + } else { + tooltip.classed('in', false).call(uiToggle(false)); + } - var style = styleByHash[properties.styleHash]; + curtain.cut(box, options.duration); + return tooltip; + }; - if (style) { - if (!lineStyle) lineStyle = get1(style, 'LineStyle'); - if (!polyStyle) polyStyle = get1(style, 'PolyStyle'); - } - } + curtain.cut = function (datum, duration) { + darkness.datum(datum).interrupt(); + var selection; - if (description) properties.description = description; + if (duration === 0) { + selection = darkness; + } else { + selection = darkness.transition().duration(duration || 600).ease(linear$1); + } - if (timeSpan) { - var begin = nodeVal(get1(timeSpan, 'begin')); - var end = nodeVal(get1(timeSpan, 'end')); - properties.timespan = { - begin: begin, - end: end - }; - } + 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'; + }); + }; - if (timeStamp) { - properties.timestamp = nodeVal(get1(timeStamp, 'when')); - } + 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. - if (lineStyle) { - var linestyles = kmlColor(nodeVal(get1(lineStyle, 'color'))), - color = linestyles[0], - opacity = linestyles[1], - width = parseFloat(nodeVal(get1(lineStyle, 'width'))); - if (color) properties.stroke = color; - if (!isNaN(opacity)) properties['stroke-opacity'] = opacity; - if (!isNaN(width)) properties['stroke-width'] = width; - } - if (polyStyle) { - var polystyles = kmlColor(nodeVal(get1(polyStyle, 'color'))), - pcolor = polystyles[0], - popacity = polystyles[1], - fill = nodeVal(get1(polyStyle, 'fill')), - outline = nodeVal(get1(polyStyle, 'outline')); - if (pcolor) properties.fill = pcolor; - if (!isNaN(popacity)) properties['fill-opacity'] = popacity; - if (fill) properties['fill-opacity'] = fill === '1' ? properties['fill-opacity'] || 1 : 0; - if (outline) properties['stroke-opacity'] = outline === '1' ? properties['stroke-opacity'] || 1 : 0; - } + function copyBox(src) { + return { + top: src.top, + right: src.right, + bottom: src.bottom, + left: src.left, + width: src.width, + height: src.height + }; + } - if (extendedData) { - var datas = get(extendedData, 'Data'), - simpleDatas = get(extendedData, 'SimpleData'); + return curtain; + } - for (i = 0; i < datas.length; i++) { - properties[datas[i].getAttribute('name')] = nodeVal(get1(datas[i], 'value')); - } + function uiIntroWelcome(context, reveal) { + var dispatch = dispatch$8('done'); + var chapter = { + title: 'intro.welcome.title' + }; - for (i = 0; i < simpleDatas.length; i++) { - properties[simpleDatas[i].getAttribute('name')] = nodeVal(simpleDatas[i]); - } - } + 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 + }); + } - if (visibility) { - properties.visibility = nodeVal(visibility); - } + function practice() { + reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.practice'), { + buttonText: _t.html('intro.ok'), + buttonCallback: words + }); + } - if (geomsAndTimes.coordTimes.length) { - properties.coordTimes = geomsAndTimes.coordTimes.length === 1 ? geomsAndTimes.coordTimes[0] : geomsAndTimes.coordTimes; - } + function words() { + reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.words'), { + buttonText: _t.html('intro.ok'), + buttonCallback: chapters + }); + } - var feature = { - type: 'Feature', - geometry: geomsAndTimes.geoms.length === 1 ? geomsAndTimes.geoms[0] : { - type: 'GeometryCollection', - geometries: geomsAndTimes.geoms - }, - properties: properties - }; - if (attr(root, 'id')) feature.id = attr(root, 'id'); - return [feature]; - } + function chapters() { + dispatch.call('done'); + reveal('.intro-nav-wrap .chapter-navigation', helpHtml('intro.welcome.chapters', { + next: _t('intro.navigation.title') + })); + } - return gj; - }, - gpx: function gpx(doc) { - var i, - tracks = get(doc, 'trk'), - routes = get(doc, 'rte'), - waypoints = get(doc, 'wpt'), - // a feature collection - gj = fc(), - feature; - - for (i = 0; i < tracks.length; i++) { - feature = getTrack(tracks[i]); - if (feature) gj.features.push(feature); - } + chapter.enter = function () { + welcome(); + }; - for (i = 0; i < routes.length; i++) { - feature = getRoute(routes[i]); - if (feature) gj.features.push(feature); - } + chapter.exit = function () { + context.container().select('.curtain-tooltip.intro-mouse').selectAll('.counter').remove(); + }; - for (i = 0; i < waypoints.length; i++) { - gj.features.push(getPoint(waypoints[i])); - } + chapter.restart = function () { + chapter.exit(); + chapter.enter(); + }; - function getPoints(node, pointname) { - var pts = get(node, pointname), - line = [], - times = [], - heartRates = [], - l = pts.length; - if (l < 2) return {}; // Invalid line in GeoJSON + return utilRebind(chapter, dispatch, 'on'); + } - for (var i = 0; i < l; i++) { - var c = coordPair(pts[i]); - line.push(c.coordinates); - if (c.time) times.push(c.time); - if (c.heartRate) heartRates.push(c.heartRate); - } + function uiIntroNavigation(context, reveal) { + var dispatch = dispatch$8('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' + }; - return { - line: line, - times: times, - heartRates: heartRates - }; - } + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } - function getTrack(node) { - var segments = get(node, 'trkseg'), - track = [], - times = [], - heartRates = [], - line; + function eventCancel(d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + } - for (var i = 0; i < segments.length; i++) { - line = getPoints(segments[i], 'trkpt'); + function isTownHallSelected() { + var ids = context.selectedIDs(); + return ids.length === 1 && ids[0] === hallId; + } - if (line) { - if (line.line) track.push(line.line); - if (line.times && line.times.length) times.push(line.times); - if (line.heartRates && line.heartRates.length) heartRates.push(line.heartRates); - } - } + function dragMap() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); + var msec = transitionTime(townHall, context.map().center()); - if (track.length === 0) return; - var properties = getProperties(node); - extend(properties, getLineStyle(get1(node, 'extensions'))); - if (times.length) properties.coordTimes = track.length === 1 ? times[0] : times; - if (heartRates.length) properties.heartRates = track.length === 1 ? heartRates[0] : heartRates; - return { - type: 'Feature', - properties: properties, - geometry: { - type: track.length === 1 ? 'LineString' : 'MultiLineString', - coordinates: track.length === 1 ? track[0] : track - } - }; - } + if (msec) { + reveal(null, null, { + duration: 0 + }); + } - function getRoute(node) { - var line = getPoints(node, 'rtept'); - if (!line.line) return; - var prop = getProperties(node); - extend(prop, getLineStyle(get1(node, 'extensions'))); - var routeObj = { - type: 'Feature', - properties: prop, - geometry: { - type: 'LineString', - coordinates: line.line - } - }; - return routeObj; - } + 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 + }); + }); + context.map().on('move.intro', function () { + var centerNow = context.map().center(); - function getPoint(node) { - var prop = getProperties(node); - extend(prop, getMulti(node, ['sym'])); - return { - type: 'Feature', - properties: prop, - geometry: { - type: 'Point', - coordinates: coordPair(node).coordinates - } - }; + if (centerStart[0] !== centerNow[0] || centerStart[1] !== centerNow[1]) { + context.map().on('move.intro', null); + timeout(function () { + continueTo(zoomMap); + }, 3000); } + }); + }, msec + 100); - function getLineStyle(extensions) { - var style = {}; - - if (extensions) { - var lineStyle = get1(extensions, 'line'); - - if (lineStyle) { - var color = nodeVal(get1(lineStyle, 'color')), - opacity = parseFloat(nodeVal(get1(lineStyle, 'opacity'))), - width = parseFloat(nodeVal(get1(lineStyle, 'width'))); - if (color) style.stroke = color; - if (!isNaN(opacity)) style['stroke-opacity'] = opacity; // GPX width is in mm, convert to px with 96 px per inch + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } - if (!isNaN(width)) style['stroke-width'] = width * 96 / 25.4; - } - } + 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); + } + }); - return style; - } + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } - function getProperties(node) { - var prop = getMulti(node, ['name', 'cmt', 'desc', 'type', 'time', 'keywords']), - links = get(node, 'link'); - if (links.length) prop.links = []; + function features() { + var onClick = function onClick() { + continueTo(pointsLinesAreas); + }; - for (var i = 0, link; i < links.length; i++) { - link = { - href: attr(links[i], 'href') - }; - extend(link, getMulti(links[i], ['text', 'type'])); - prop.links.push(link); - } + 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 + }); + }); - return prop; - } + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } + } - return gj; - } + function pointsLinesAreas() { + var onClick = function onClick() { + continueTo(nodesWays); }; - return t; - }(); - module.exports = toGeoJSON; - }); + 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 + }); + }); - var _initialized = false; - var _enabled = false; + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } + } - var _geojson; + function nodesWays() { + var onClick = function onClick() { + continueTo(clickTownHall); + }; - function svgData(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); + 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 + }); + }); - var _showLabels = true; - var detected = utilDetect(); - var layer = select(null); + function continueTo(nextStep) { + context.map().on('drawn.intro', null); + nextStep(); + } + } - var _vtService; + 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 - var _fileList; + context.history().on('change.intro', function () { + if (!context.hasEntity(hallId)) { + continueTo(clickTownHall); + } + }); - var _template; + function continueTo(nextStep) { + context.on('enter.intro', null); + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - var _src; + function selectedTownHall() { + if (!isTownHallSelected()) return clickTownHall(); + var entity = context.hasEntity(hallId); + if (!entity) return clickTownHall(); + var box = pointBox(entity.loc, context); - function init() { - if (_initialized) return; // run once + var onClick = function onClick() { + continueTo(editorTownHall); + }; - _geojson = {}; - _enabled = true; + 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 + }); + }); + context.history().on('change.intro', function () { + if (!context.hasEntity(hallId)) { + continueTo(clickTownHall); + } + }); - function over(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - d3_event.dataTransfer.dropEffect = 'copy'; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + nextStep(); } - - context.container().attr('dropzone', 'copy').on('drop.svgData', function (d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - if (!detected.filedrop) return; - drawData.fileList(d3_event.dataTransfer.files); - }).on('dragenter.svgData', over).on('dragexit.svgData', over).on('dragover.svgData', over); - _initialized = true; } - function getService() { - if (services.vectorTile && !_vtService) { - _vtService = services.vectorTile; + function editorTownHall() { + if (!isTownHallSelected()) return clickTownHall(); // disallow scrolling - _vtService.event.on('loadedData', throttledRedraw); - } else if (!services.vectorTile && _vtService) { - _vtService = null; - } + context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); - return _vtService; - } + var onClick = function onClick() { + continueTo(presetTownHall); + }; - function showLayer() { - layerOn(); - layer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end', function () { - dispatch.call('change'); + reveal('.entity-editor-pane', helpHtml('intro.navigation.editor_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); + } }); - } - function hideLayer() { - throttledRedraw.cancel(); - layer.transition().duration(250).style('opacity', 0).on('end', layerOff); + 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 layerOn() { - layer.style('display', 'block'); - } + function presetTownHall() { + if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. - function layerOff() { - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); - } // ensure that all geojson features in a collection have IDs + 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()); - function ensureIDs(gj) { - if (!gj) return null; + var onClick = function onClick() { + continueTo(fieldsTownHall); + }; - if (gj.type === 'FeatureCollection') { - for (var i = 0; i < gj.features.length; i++) { - ensureFeatureID(gj.features[i]); + 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); } - } else { - ensureFeatureID(gj); + }); + + function continueTo(nextStep) { + context.on('exit.intro', null); + context.history().on('change.intro', null); + context.container().select('.inspector-wrap').on('wheel.intro', null); + nextStep(); } + } - return gj; - } // ensure that each single Feature object has a unique ID + function fieldsTownHall() { + if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. + context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // disallow scrolling - function ensureFeatureID(feature) { - if (!feature) return; - feature.__featurehash__ = utilHashcode(fastJsonStableStringify(feature)); - return feature; - } // Prefer an array of Features instead of a FeatureCollection + context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); + var onClick = function onClick() { + continueTo(closeTownHall); + }; - function getFeatures(gj) { - if (!gj) return []; + 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); + } + }); - if (gj.type === 'FeatureCollection') { - return gj.features; - } else { - return [gj]; + 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 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(); } } - function featureKey(d) { - return d.__featurehash__; - } + function searchStreet() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); // ensure spring street exists - function isPolygon(d) { - return d.geometry.type === 'Polygon' || d.geometry.type === 'MultiPolygon'; - } + var msec = transitionTime(springStreet, context.map().center()); - function clipPathID(d) { - return 'ideditor-data-' + d.__featurehash__ + '-clippath'; - } + if (msec) { + reveal(null, null, { + duration: 0 + }); + } - function featureClasses(d) { - return ['data' + d.__featurehash__, d.geometry.type, isPolygon(d) ? 'area' : '', d.__layerID__ || ''].filter(Boolean).join(' '); + context.map().centerZoomEase(springStreet, 19, msec); // ..and user can see it + + 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 drawData(selection) { - var vtService = getService(); - var getPath = svgPath(projection).geojson; - var getAreaPath = svgPath(projection, null, true).geojson; - var hasData = drawData.hasData(); - layer = selection.selectAll('.layer-mapdata').data(_enabled && hasData ? [0] : []); - layer.exit().remove(); - layer = layer.enter().append('g').attr('class', 'layer-mapdata').merge(layer); - var surface = context.surface(); - if (!surface || surface.empty()) return; // not ready to draw yet, starting up - // Gather data + function checkSearchResult() { + var first = context.container().select('.feature-list-item:nth-child(0n+2)'); // skip "No Results" item - var geoData, polygonData; + var firstName = first.select('.entity-name'); + var name = _t('intro.graph.name.spring-street'); - if (_template && vtService) { - // fetch data from vector tile service - var sourceID = _template; - vtService.loadTiles(sourceID, _template, projection); - geoData = vtService.data(sourceID, projection); - } else { - geoData = getFeatures(_geojson); + 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); } - geoData = geoData.filter(getPath); - polygonData = geoData.filter(isPolygon); // Draw clip paths for polygons - - var clipPaths = surface.selectAll('defs').selectAll('.clipPath-data').data(polygonData, featureKey); - clipPaths.exit().remove(); - var clipPathsEnter = clipPaths.enter().append('clipPath').attr('class', 'clipPath-data').attr('id', clipPathID); - clipPathsEnter.append('path'); - clipPaths.merge(clipPathsEnter).selectAll('path').attr('d', getAreaPath); // Draw fill, shadow, stroke layers + function continueTo(nextStep) { + context.on('exit.intro', null); + context.container().select('.search-header input').on('keydown.intro', null).on('keyup.intro', null); + nextStep(); + } + } - var datagroups = layer.selectAll('g.datagroup').data(['fill', 'shadow', 'stroke']); - datagroups = datagroups.enter().append('g').attr('class', function (d) { - return 'datagroup datagroup-' + d; - }).merge(datagroups); // Draw paths + function selectedStreet() { + if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) { + return searchStreet(); + } - var pathData = { - fill: polygonData, - shadow: geoData, - stroke: geoData + var onClick = function onClick() { + continueTo(editorStreet); }; - var paths = datagroups.selectAll('path').data(function (layer) { - return pathData[layer]; - }, featureKey); // exit - paths.exit().remove(); // enter/update + 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 + }); + 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. - paths = paths.enter().append('path').attr('class', function (d) { - var datagroup = this.parentNode.__data__; - return 'pathdata ' + datagroup + ' ' + featureClasses(d); - }).attr('clip-path', function (d) { - var datagroup = this.parentNode.__data__; - return datagroup === 'fill' ? 'url(#' + clipPathID(d) + ')' : null; - }).merge(paths).attr('d', function (d) { - var datagroup = this.parentNode.__data__; - return datagroup === 'fill' ? getAreaPath(d) : getPath(d); - }); // Draw labels + context.on('enter.intro', function (mode) { + if (!context.hasEntity(springStreetId)) { + return continueTo(searchStreet); + } - layer.call(drawLabels, 'label-halo', geoData).call(drawLabels, 'label', geoData); + var ids = context.selectedIDs(); - function drawLabels(selection, textClass, data) { - var labelPath = d3_geoPath(projection); - var labelData = data.filter(function (d) { - return _showLabels && d.properties && (d.properties.desc || d.properties.name); - }); - var labels = selection.selectAll('text.' + textClass).data(labelData, featureKey); // exit + 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) + } + }); - labels.exit().remove(); // enter/update + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - labels = labels.enter().append('text').attr('class', function (d) { - return textClass + ' ' + featureClasses(d); - }).merge(labels).text(function (d) { - return d.properties.desc || d.properties.name; - }).attr('x', function (d) { - var centroid = labelPath.centroid(d); - return centroid[0] + 11; - }).attr('y', function (d) { - var centroid = labelPath.centroid(d); - return centroid[1]; + 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 continueTo(nextStep) { + context.on('exit.intro', null); + context.history().on('change.intro', null); + nextStep(); } } - function getExtension(fileName) { - if (!fileName) return; - var re = /\.(gpx|kml|(geo)?json)$/i; - var match = fileName.toLowerCase().match(re); - return match && match.length && match[0]; + function play() { + dispatch.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'); + } + }); } - function xmlToDom(textdata) { - return new DOMParser().parseFromString(textdata, 'text/xml'); - } + chapter.enter = function () { + dragMap(); + }; - drawData.setFile = function (extension, data) { - _template = null; - _fileList = null; - _geojson = null; - _src = null; - var gj; + 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); + }; - switch (extension) { - case '.gpx': - gj = togeojson.gpx(xmlToDom(data)); - break; + chapter.restart = function () { + chapter.exit(); + chapter.enter(); + }; - case '.kml': - gj = togeojson.kml(xmlToDom(data)); - break; + return utilRebind(chapter, dispatch, 'on'); + } - case '.geojson': - case '.json': - gj = JSON.parse(data); - break; - } + function uiIntroPoint(context, reveal) { + var dispatch = dispatch$8('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' + }; - gj = gj || {}; + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } - if (Object.keys(gj).length) { - _geojson = ensureIDs(gj); - _src = extension + ' data file'; - this.fitZoom(); + function eventCancel(d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + } + + function addPoint() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); + var msec = transitionTime(intersection, context.map().center()); + + if (msec) { + reveal(null, null, { + duration: 0 + }); } - dispatch.call('change'); - return this; - }; + 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); - drawData.showLabels = function (val) { - if (!arguments.length) return _showLabels; - _showLabels = val; - return this; - }; + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } + } - drawData.enabled = function (val) { - if (!arguments.length) return _enabled; - _enabled = val; + function placePoint() { + if (context.mode().id !== 'add-point') { + return chapter.restart(); + } - if (_enabled) { - showLayer(); - } else { - hideLayer(); + 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); + }); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); } + } - dispatch.call('change'); - return this; - }; + function searchPreset() { + if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { + return addPoint(); + } // disallow scrolling - drawData.hasData = function () { - var gj = _geojson || {}; - return !!(_template || Object.keys(gj).length); - }; - drawData.template = function (val, src) { - if (!arguments.length) return _template; // test source against OSM imagery blocklists.. + 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); + } - var osm = context.connection(); + var ids = context.selectedIDs(); - if (osm) { - var blocklists = osm.imageryBlocklists(); - var fail = false; - var tested = 0; - var regex; + if (mode.id !== 'select' || !ids.length || ids[0] !== _pointID) { + // keep the user's point selected.. + context.enter(modeSelect(context, [_pointID])); // disallow scrolling - for (var i = 0; i < blocklists.length; i++) { - regex = blocklists[i]; - fail = regex.test(val); - tested++; - if (fail) break; - } // ensure at least one test was run. + 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); + } + }); + function checkPresetSearch() { + var first = context.container().select('.preset-list-item:first-child'); - if (!tested) { - regex = /.*\.google(apis)?\..*\/(vt|kh)[\?\/].*([xyz]=.*){3}.*/; - fail = regex.test(val); + 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); + }); } } - _template = val; - _fileList = null; - _geojson = null; // strip off the querystring/hash from the template, - // it often includes the access token + 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(); + } + } - _src = src || 'vectortile:' + val.split(/[?#]/)[0]; - dispatch.call('change'); - return this; - }; + function aboutFeatureEditor() { + if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { + return addPoint(); + } - drawData.geojson = function (gj, src) { - if (!arguments.length) return _geojson; - _template = null; - _fileList = null; - _geojson = null; - _src = null; - gj = gj || {}; + 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); + }); - if (Object.keys(gj).length) { - _geojson = ensureIDs(gj); - _src = src || 'unknown.geojson'; + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); } + } - dispatch.call('change'); - return this; - }; + function addName() { + if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { + return addPoint(); + } // reset pane, in case user happened to change it.. - drawData.fileList = function (fileList) { - if (!arguments.length) return _fileList; - _template = null; - _fileList = fileList; - _geojson = null; - _src = null; - if (!fileList || !fileList.length) return this; - var f = fileList[0]; - var extension = getExtension(f.name); - var reader = new FileReader(); - reader.onload = function () { - return function (e) { - drawData.setFile(extension, e.target.result); - }; - }(); + 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); - reader.readAsText(f); - return this; - }; + 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); + } + }); + tooltip.select('.instruction').style('display', 'none'); + } else { + reveal('.entity-editor-pane', addNameString, { + tooltipClass: 'intro-points-describe' + }); + } + }, 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); + }); - drawData.url = function (url, defaultExtension) { - _template = null; - _fileList = null; - _geojson = null; - _src = null; // strip off any querystring/hash from the url before checking extension + function continueTo(nextStep) { + context.on('exit.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - var testUrl = url.split(/[?#]/)[0]; - var extension = getExtension(testUrl) || defaultExtension; + 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') + })); - if (extension) { - _template = null; - d3_text(url).then(function (data) { - drawData.setFile(extension, data); - })["catch"](function () { - /* ignore */ - }); - } else { - drawData.template(url); + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); } + } - return this; - }; + 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.. - drawData.getSrc = function () { - return _src || ''; - }; + 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()); - drawData.fitZoom = function () { - var features = getFeatures(_geojson); - if (!features.length) return; - var map = context.map(); - var viewport = map.trimmedExtent().polygon(); - var coords = features.reduce(function (coords, feature) { - var geom = feature.geometry; - if (!geom) return coords; - var c = geom.coordinates; - /* eslint-disable no-fallthrough */ + if (msec) { + reveal(null, null, { + duration: 0 + }); + } - switch (geom.type) { - case 'Point': - c = [c]; + 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 + }); + }); + }, 600); // after reveal.. - case 'MultiPoint': - case 'LineString': - break; + context.on('enter.intro', function (mode) { + if (mode.id !== 'select') return; + continueTo(updatePoint); + }); + }, msec + 100); - case 'MultiPolygon': - c = utilArrayFlatten(c); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - case 'Polygon': - case 'MultiLineString': - c = utilArrayFlatten(c); - break; - } - /* eslint-enable no-fallthrough */ + function updatePoint() { + if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { + return continueTo(reselectPoint); + } // reset pane, in case user happened to untag the point.. - return utilArrayUnion(coords, c); - }, []); + 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); - if (!geoPolygonIntersectsPolygon(viewport, coords, true)) { - var extent = geoExtent(d3_geoBounds({ - type: 'LineString', - coordinates: coords - })); - map.centerZoom(extent.center(), map.trimmedExtentZoom(extent)); + function continueTo(nextStep) { + context.on('exit.intro', null); + context.history().on('change.intro', null); + nextStep(); } + } - return this; - }; + function updateCloseEditor() { + if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { + return continueTo(reselectPoint); + } // reset pane, in case user happened to change it.. - init(); - return drawData; - } - function svgDebug(projection, context) { - function drawDebug(selection) { - var showTile = context.getDebug('tile'); - var showCollision = context.getDebug('collision'); - var showImagery = context.getDebug('imagery'); - var showTouchTargets = context.getDebug('target'); - var showDownloaded = context.getDebug('downloaded'); - var debugData = []; + 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); - if (showTile) { - debugData.push({ - "class": 'red', - label: 'tile' - }); + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); } + } - if (showCollision) { - debugData.push({ - "class": 'yellow', - label: 'collision' + 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 + }); + 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 - if (showImagery) { - debugData.push({ - "class": 'orange', - label: 'imagery' - }); + 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 + }); + + function continueTo(nextStep) { + context.on('enter.intro', null); + context.map().on('move.intro', null); + nextStep(); } + } - if (showTouchTargets) { - debugData.push({ - "class": 'pink', - label: 'touchTargets' - }); + function enterDelete() { + if (!_pointID) return chapter.restart(); + var entity = context.hasEntity(_pointID); + if (!entity) return chapter.restart(); + var node = selectMenuItem(context, 'delete').node(); + + if (!node) { + return continueTo(rightClickPoint); } - if (showDownloaded) { - debugData.push({ - "class": 'purple', - label: 'downloaded' + 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 - var legend = context.container().select('.main-content').selectAll('.debug-legend').data(debugData.length ? [0] : []); - legend.exit().remove(); - legend = legend.enter().append('div').attr('class', 'fillD debug-legend').merge(legend); - var legendItems = legend.selectAll('.debug-legend-item').data(debugData, function (d) { - return d.label; + context.on('exit.intro', function () { + if (!_pointID) return chapter.restart(); + var entity = context.hasEntity(_pointID); + if (entity) return continueTo(rightClickPoint); // point still exists }); - legendItems.exit().remove(); - legendItems.enter().append('span').attr('class', function (d) { - return "debug-legend-item ".concat(d["class"]); - }).text(function (d) { - return d.label; + context.history().on('change.intro', function (changed) { + if (changed.deleted().length) { + continueTo(undo); + } }); - var layer = selection.selectAll('.layer-debug').data(showImagery || showDownloaded ? [0] : []); - layer.exit().remove(); - layer = layer.enter().append('g').attr('class', 'layer-debug').merge(layer); // imagery - var extent = context.map().extent(); - _mainFileFetcher.get('imagery').then(function (d) { - var hits = showImagery && d.query.bbox(extent.rectangle(), true) || []; - var features = hits.map(function (d) { - return d.features[d.id]; - }); - var imagery = layer.selectAll('path.debug-imagery').data(features); - imagery.exit().remove(); - imagery.enter().append('path').attr('class', 'debug-imagery debug orange'); - })["catch"](function () { - /* ignore */ - }); // downloaded + function continueTo(nextStep) { + context.map().on('move.intro', null); + context.history().on('change.intro', null); + context.on('exit.intro', null); + nextStep(); + } + } - var osm = context.connection(); - var dataDownloaded = []; + function undo() { + context.history().on('change.intro', function () { + continueTo(play); + }); + reveal('.top-toolbar button.undo-button', helpHtml('intro.points.undo')); - if (osm && showDownloaded) { - var rtree = osm.caches('get').tile.rtree; - dataDownloaded = rtree.all().map(function (bbox) { - return { - type: 'Feature', - properties: { - id: bbox.id - }, - geometry: { - type: 'Polygon', - coordinates: [[[bbox.minX, bbox.minY], [bbox.minX, bbox.maxY], [bbox.maxX, bbox.maxY], [bbox.maxX, bbox.minY], [bbox.minX, bbox.minY]]] - } - }; - }); + function continueTo(nextStep) { + context.history().on('change.intro', null); + nextStep(); } + } - var downloaded = layer.selectAll('path.debug-downloaded').data(showDownloaded ? dataDownloaded : []); - downloaded.exit().remove(); - downloaded.enter().append('path').attr('class', 'debug-downloaded debug purple'); // update + function play() { + dispatch.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'); + } + }); + } - layer.selectAll('path').attr('d', svgPath(projection).geojson); - } // This looks strange because `enabled` methods on other layers are - // chainable getter/setters, and this one is just a getter. + chapter.enter = function () { + addPoint(); + }; + 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); + }; - drawDebug.enabled = function () { - if (!arguments.length) { - return context.getDebug('tile') || context.getDebug('collision') || context.getDebug('imagery') || context.getDebug('target') || context.getDebug('downloaded'); - } else { - return this; - } + chapter.restart = function () { + chapter.exit(); + chapter.enter(); }; - return drawDebug; + return utilRebind(chapter, dispatch, 'on'); } - /* - A standalone SVG element that contains only a `defs` sub-element. To be - used once globally, since defs IDs must be unique within a document. - */ + function uiIntroArea(context, reveal) { + var dispatch = dispatch$8('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 svgDefs(context) { - var _defsSelection = select(null); + var _areaID; - var _spritesheetIds = ['iD-sprite', 'maki-sprite', 'temaki-sprite', 'fa-sprite', 'community-sprite']; + var chapter = { + title: 'intro.areas.title' + }; - function drawDefs(selection) { - _defsSelection = selection.append('defs'); // add markers + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } - _defsSelection.append('marker').attr('id', 'ideditor-oneway-marker').attr('viewBox', '0 0 10 5').attr('refX', 2.5).attr('refY', 2.5).attr('markerWidth', 2).attr('markerHeight', 2).attr('markerUnits', 'strokeWidth').attr('orient', 'auto').append('path').attr('class', 'oneway-marker-path').attr('d', 'M 5,3 L 0,3 L 0,2 L 5,2 L 5,0 L 10,2.5 L 5,5 z').attr('stroke', 'none').attr('fill', '#000').attr('opacity', '0.75'); // SVG markers have to be given a colour where they're defined - // (they can't inherit it from the line they're attached to), - // so we need to manually define markers for each color of tag - // (also, it's slightly nicer if we can control the - // positioning for different tags) + function eventCancel(d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + } + 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 addSidedMarker(name, color, offset) { - _defsSelection.append('marker').attr('id', 'ideditor-sided-marker-' + name).attr('viewBox', '0 0 2 2').attr('refX', 1).attr('refY', -offset).attr('markerWidth', 1.5).attr('markerHeight', 1.5).attr('markerUnits', 'strokeWidth').attr('orient', 'auto').append('path').attr('class', 'sided-marker-path sided-marker-' + name + '-path').attr('d', 'M 0,0 L 1,1 L 2,0 z').attr('stroke', 'none').attr('fill', color); + function addArea() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); + _areaID = null; + var msec = transitionTime(playground, context.map().center()); + + if (msec) { + reveal(null, null, { + duration: 0 + }); } - addSidedMarker('natural', 'rgb(170, 170, 170)', 0); // for a coastline, the arrows are (somewhat unintuitively) on - // the water side, so let's color them blue (with a gap) to - // give a stronger indication + 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); - addSidedMarker('coastline', '#77dede', 1); - addSidedMarker('waterway', '#77dede', 1); // barriers have a dashed line, and separating the triangle - // from the line visually suits that + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } + } - addSidedMarker('barrier', '#ddd', 1); - addSidedMarker('man_made', '#fff', 0); + function startPlayground() { + if (context.mode().id !== 'add-area') { + return chapter.restart(); + } - _defsSelection.append('marker').attr('id', 'ideditor-viewfield-marker').attr('viewBox', '0 0 16 16').attr('refX', 8).attr('refY', 16).attr('markerWidth', 4).attr('markerHeight', 4).attr('markerUnits', 'strokeWidth').attr('orient', 'auto').append('path').attr('class', 'viewfield-marker-path').attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z').attr('fill', '#333').attr('fill-opacity', '0.75').attr('stroke', '#fff').attr('stroke-width', '0.5px').attr('stroke-opacity', '0.75'); + _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 - _defsSelection.append('marker').attr('id', 'ideditor-viewfield-marker-wireframe').attr('viewBox', '0 0 16 16').attr('refX', 8).attr('refY', 16).attr('markerWidth', 4).attr('markerHeight', 4).attr('markerUnits', 'strokeWidth').attr('orient', 'auto').append('path').attr('class', 'viewfield-marker-path').attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z').attr('fill', 'none').attr('stroke', '#fff').attr('stroke-width', '0.5px').attr('stroke-opacity', '0.75'); // add patterns + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } + function continuePlayground() { + if (context.mode().id !== 'draw-area') { + return chapter.restart(); + } - var patterns = _defsSelection.selectAll('pattern').data([// pattern name, pattern image name - ['beach', 'dots'], ['construction', 'construction'], ['cemetery', 'cemetery'], ['cemetery_christian', 'cemetery_christian'], ['cemetery_buddhist', 'cemetery_buddhist'], ['cemetery_muslim', 'cemetery_muslim'], ['cemetery_jewish', 'cemetery_jewish'], ['farmland', 'farmland'], ['farmyard', 'farmyard'], ['forest', 'forest'], ['forest_broadleaved', 'forest_broadleaved'], ['forest_needleleaved', 'forest_needleleaved'], ['forest_leafless', 'forest_leafless'], ['golf_green', 'grass'], ['grass', 'grass'], ['landfill', 'landfill'], ['meadow', 'grass'], ['orchard', 'orchard'], ['pond', 'pond'], ['quarry', 'quarry'], ['scrub', 'bushes'], ['vineyard', 'vineyard'], ['water_standing', 'lines'], ['waves', 'waves'], ['wetland', 'wetland'], ['wetland_marsh', 'wetland_marsh'], ['wetland_swamp', 'wetland_swamp'], ['wetland_bog', 'wetland_bog'], ['wetland_reedbed', 'wetland_reedbed']]).enter().append('pattern').attr('id', function (d) { - return 'ideditor-pattern-' + d[0]; - }).attr('width', 32).attr('height', 32).attr('patternUnits', 'userSpaceOnUse'); + _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 - patterns.append('rect').attr('x', 0).attr('y', 0).attr('width', 32).attr('height', 32).attr('class', function (d) { - return 'pattern-color-' + d[0]; + context.on('enter.intro', function (mode) { + if (mode.id === 'draw-area') { + var entity = context.hasEntity(context.selectedIDs()[0]); + + 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(); + } }); - patterns.append('image').attr('x', 0).attr('y', 0).attr('width', 32).attr('height', 32).attr('xlink:href', function (d) { - return context.imagePath('pattern/' + d[1] + '.png'); - }); // add clip paths - _defsSelection.selectAll('clipPath').data([12, 18, 20, 32, 45]).enter().append('clipPath').attr('id', function (d) { - return 'ideditor-clip-square-' + d; - }).append('rect').attr('x', 0).attr('y', 0).attr('width', function (d) { - return d; - }).attr('height', function (d) { - return d; - }); // add symbol spritesheets + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } + + function finishPlayground() { + if (context.mode().id !== 'draw-area') { + return chapter.restart(); + } + + _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 + 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(); + } + }); - addSprites(_spritesheetIds, true); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } } - function addSprites(ids, overrideColors) { - _spritesheetIds = utilArrayUniq(_spritesheetIds.concat(ids)); - - var spritesheets = _defsSelection.selectAll('.spritesheet').data(_spritesheetIds); + function searchPresets() { + if (!_areaID || !context.hasEntity(_areaID)) { + return addArea(); + } - spritesheets.enter().append('g').attr('class', function (d) { - return 'spritesheet spritesheet-' + d; - }).each(function (d) { - var url = context.imagePath(d + '.svg'); - var node = select(this).node(); - svg(url).then(function (svg) { - node.appendChild(select(svg.documentElement).attr('id', 'ideditor-' + d).node()); + var ids = context.selectedIDs(); - if (overrideColors && d !== 'iD-sprite') { - // allow icon colors to be overridden.. - select(node).selectAll('path').attr('fill', 'currentColor'); - } - })["catch"](function () { - /* ignore */ - }); - }); - spritesheets.exit().remove(); - } + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { + context.enter(modeSelect(context, [_areaID])); + } // disallow scrolling - drawDefs.addSprites = addSprites; - return drawDefs; - } - var _layerEnabled = 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.. - var _qaService; + context.on('enter.intro', function (mode) { + if (!_areaID || !context.hasEntity(_areaID)) { + return continueTo(addArea); + } - function svgKeepRight(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - return dispatch.call('change'); - }, 1000); + var ids = context.selectedIDs(); - var minZoom = 12; - var touchLayer = select(null); - var drawLayer = select(null); - var layerVisible = false; + 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.. - function markerPath(selection, klass) { - selection.attr('class', klass).attr('transform', 'translate(-4, -24)').attr('d', 'M11.6,6.2H7.1l1.4-5.1C8.6,0.6,8.1,0,7.5,0H2.2C1.7,0,1.3,0.3,1.3,0.8L0,10.2c-0.1,0.6,0.4,1.1,0.9,1.1h4.6l-1.8,7.6C3.6,19.4,4.1,20,4.7,20c0.3,0,0.6-0.2,0.8-0.5l6.9-11.9C12.7,7,12.3,6.2,11.6,6.2z'); - } // Loosely-coupled keepRight service for fetching issues. + context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling + 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); + } + }); - function getService() { - if (services.keepRight && !_qaService) { - _qaService = services.keepRight; + function checkPresetSearch() { + var first = context.container().select('.preset-list-item:first-child'); - _qaService.on('loaded', throttledRedraw); - } else if (!services.keepRight && _qaService) { - _qaService = null; + 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); + }); + } } - return _qaService; - } // Show the markers - + 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(); + } + } - function editOn() { - if (!layerVisible) { - layerVisible = true; - drawLayer.style('display', 'block'); + function clickAddField() { + if (!_areaID || !context.hasEntity(_areaID)) { + return addArea(); } - } // Immediately remove the markers and their touch targets + var ids = context.selectedIDs(); - function editOff() { - if (layerVisible) { - layerVisible = false; - drawLayer.style('display', 'none'); - drawLayer.selectAll('.qaItem.keepRight').remove(); - touchLayer.selectAll('.qaItem.keepRight').remove(); + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { + return searchPresets(); } - } // Enable the layer. This shows the markers and transitions them to visible. + if (!context.container().select('.form-field-description').empty()) { + return continueTo(describePlayground); + } // disallow scrolling - function layerOn() { - editOn(); - drawLayer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end interrupt', function () { - return dispatch.call('change'); - }); - } // Disable the layer. This transitions the layer invisible and then hides the markers. + 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. - function layerOff() { - throttledRedraw.cancel(); - drawLayer.interrupt(); - touchLayer.selectAll('.qaItem.keepRight').remove(); - drawLayer.transition().duration(250).style('opacity', 0).on('end interrupt', function () { - editOff(); - dispatch.call('change'); - }); - } // Update the issue markers + var entity = context.entity(_areaID); + if (entity.tags.description) { + return continueTo(play); + } // scroll "Add field" into view - function updateMarkers() { - if (!layerVisible || !_layerEnabled) return; - var service = getService(); - var selectedID = context.selectedErrorID(); - var data = service ? service.getItems(projection) : []; - var getTransform = svgPointTransform(projection); // Draw markers.. - var markers = drawLayer.selectAll('.qaItem.keepRight').data(data, function (d) { - return d.id; - }); // exit + var box = context.container().select('.more-fields').node().getBoundingClientRect(); - markers.exit().remove(); // enter + 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); + }; + }); + } - var markersEnter = markers.enter().append('g').attr('class', function (d) { - return "qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.parentIssueType); - }); - markersEnter.append('ellipse').attr('cx', 0.5).attr('cy', 1).attr('rx', 6.5).attr('ry', 3).attr('class', 'stroke'); - markersEnter.append('path').call(markerPath, 'shadow'); - markersEnter.append('use').attr('class', 'qaItem-fill').attr('width', '20px').attr('height', '20px').attr('x', '-8px').attr('y', '-22px').attr('xlink:href', '#iD-icon-bolt'); // update + 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 - markers.merge(markersEnter).sort(sortY).classed('selected', function (d) { - return d.id === selectedID; - }).attr('transform', getTransform); // Draw targets.. + context.on('exit.intro', function () { + return continueTo(searchPresets); + }); - if (touchLayer.empty()) return; - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var targets = touchLayer.selectAll('.qaItem.keepRight').data(data, function (d) { - return d.id; - }); // exit + 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(); + } + } - targets.exit().remove(); // enter/update + function chooseDescriptionField() { + if (!_areaID || !context.hasEntity(_areaID)) { + return addArea(); + } - targets.enter().append('rect').attr('width', '20px').attr('height', '20px').attr('x', '-8px').attr('y', '-22px').merge(targets).sort(sortY).attr('class', function (d) { - return "qaItem ".concat(d.service, " target ").concat(fillClass, " itemId-").concat(d.id); - }).attr('transform', getTransform); + var ids = context.selectedIDs(); - function sortY(a, b) { - return a.id === selectedID ? 1 : b.id === selectedID ? -1 : a.severity === 'error' && b.severity !== 'error' ? 1 : b.severity === 'error' && a.severity !== 'error' ? -1 : b.loc[1] - a.loc[1]; + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { + return searchPresets(); } - } // Draw the keepRight layer and schedule loading issues and updating markers. + if (!context.container().select('.form-field-description').empty()) { + return continueTo(describePlayground); + } // Make sure combobox is ready.. - function drawKeepRight(selection) { - var service = getService(); - var surface = context.surface(); - if (surface && !surface.empty()) { - touchLayer = surface.selectAll('.data-layer.touch .layer-touch.markers'); - } + if (context.container().select('div.combobox').empty()) { + return continueTo(clickAddField); + } // Watch for the combobox to go away.. - drawLayer = selection.selectAll('.layer-keepRight').data(service ? [0] : []); - drawLayer.exit().remove(); - drawLayer = drawLayer.enter().append('g').attr('class', 'layer-keepRight').style('display', _layerEnabled ? 'block' : 'none').merge(drawLayer); - if (_layerEnabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - service.loadIssues(projection); - updateMarkers(); - } else { - editOff(); + 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. } + }, 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(); } - } // Toggles the layer on and off + } + function describePlayground() { + if (!_areaID || !context.hasEntity(_areaID)) { + return addArea(); + } - drawKeepRight.enabled = function (val) { - if (!arguments.length) return _layerEnabled; - _layerEnabled = val; + var ids = context.selectedIDs(); - if (_layerEnabled) { - layerOn(); - } else { - layerOff(); + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { + return searchPresets(); + } // reset pane, in case user happened to change it.. - if (context.selectedErrorID()) { - context.enter(modeBrowse(context)); - } + + context.container().select('.inspector-wrap .panewrap').style('right', '0%'); + + if (context.container().select('.form-field-description').empty()) { + return continueTo(retryChooseDescription); } - dispatch.call('change'); - return this; - }; + context.on('exit.intro', function () { + continueTo(play); + }); + reveal('.entity-editor-pane', helpHtml('intro.areas.describe_playground', { + button: icon('#iD-icon-close', 'inline') + }), { + duration: 300 + }); - drawKeepRight.supported = function () { - return !!getService(); - }; + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } + } - return drawKeepRight; - } + function retryChooseDescription() { + if (!_areaID || !context.hasEntity(_areaID)) { + return addArea(); + } - function svgGeolocate(projection) { - var layer = select(null); + var ids = context.selectedIDs(); - var _position; + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { + return searchPresets(); + } // reset pane, in case user happened to change it.. - function init() { - if (svgGeolocate.initialized) return; // run once - svgGeolocate.enabled = false; - svgGeolocate.initialized = true; - } + 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); + }); - function showLayer() { - layer.style('display', 'block'); + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } } - function hideLayer() { - layer.transition().duration(250).style('opacity', 0); + function play() { + dispatch.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 layerOn() { - layer.style('opacity', 0).transition().duration(250).style('opacity', 1); - } + chapter.enter = function () { + addArea(); + }; - function layerOff() { - layer.style('display', 'none'); - } + 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); + }; - function transform(d) { - return svgPointTransform(projection)(d); - } + chapter.restart = function () { + chapter.exit(); + chapter.enter(); + }; - function accuracy(accuracy, loc) { - // converts accuracy to pixels... - var degreesRadius = geoMetersToLat(accuracy), - tangentLoc = [loc[0], loc[1] + degreesRadius], - projectedTangent = projection(tangentLoc), - projectedLoc = projection([loc[0], loc[1]]); // southern most point will have higher pixel value... + return utilRebind(chapter, dispatch, 'on'); + } - return Math.round(projectedLoc[1] - projectedTangent[1]).toString(); + function uiIntroLine(context, reveal) { + var dispatch = dispatch$8('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' + }; + + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); } - function update() { - var geolocation = { - loc: [_position.coords.longitude, _position.coords.latitude] - }; - var groups = layer.selectAll('.geolocations').selectAll('.geolocation').data([geolocation]); - groups.exit().remove(); - var pointsEnter = groups.enter().append('g').attr('class', 'geolocation'); - pointsEnter.append('circle').attr('class', 'geolocate-radius').attr('dx', '0').attr('dy', '0').attr('fill', 'rgb(15,128,225)').attr('fill-opacity', '0.3').attr('r', '0'); - pointsEnter.append('circle').attr('dx', '0').attr('dy', '0').attr('fill', 'rgb(15,128,225)').attr('stroke', 'white').attr('stroke-width', '1.5').attr('r', '6'); - groups.merge(pointsEnter).attr('transform', transform); - layer.select('.geolocate-radius').attr('r', accuracy(_position.coords.accuracy, geolocation.loc)); + function eventCancel(d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); } - function drawLocation(selection) { - var enabled = svgGeolocate.enabled; - layer = selection.selectAll('.layer-geolocate').data([0]); - layer.exit().remove(); - var layerEnter = layer.enter().append('g').attr('class', 'layer-geolocate').style('display', enabled ? 'block' : 'none'); - layerEnter.append('g').attr('class', 'geolocations'); - layer = layerEnter.merge(layer); + function addLine() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); + var msec = transitionTime(tulipRoadStart, context.map().center()); - if (enabled) { - update(); - } else { - layerOff(); + if (msec) { + reveal(null, null, { + duration: 0 + }); } - } - drawLocation.enabled = function (position, enabled) { - if (!arguments.length) return svgGeolocate.enabled; - _position = position; - svgGeolocate.enabled = enabled; + 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); - if (svgGeolocate.enabled) { - showLayer(); - layerOn(); - } else { - hideLayer(); + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); } + } - return this; - }; - - init(); - return drawLocation; - } + 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); + }); - function svgLabels(projection, context) { - var path = d3_geoPath(projection); - var detected = utilDetect(); - var baselineHack = detected.ie || detected.browser.toLowerCase() === 'edge' || detected.browser.toLowerCase() === 'firefox' && detected.version >= 70; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - var _rdrawn = new RBush(); + 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 + }); + }); + }, 550); // after easing.. - var _rskipped = new RBush(); + 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(); + } + }); - var _textWidthCache = {}; - var _entitybboxes = {}; // Listed from highest to lowest priority + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - var labelStack = [['line', 'aeroway', '*', 12], ['line', 'highway', 'motorway', 12], ['line', 'highway', 'trunk', 12], ['line', 'highway', 'primary', 12], ['line', 'highway', 'secondary', 12], ['line', 'highway', 'tertiary', 12], ['line', 'highway', '*', 12], ['line', 'railway', '*', 12], ['line', 'waterway', '*', 12], ['area', 'aeroway', '*', 12], ['area', 'amenity', '*', 12], ['area', 'building', '*', 12], ['area', 'historic', '*', 12], ['area', 'leisure', '*', 12], ['area', 'man_made', '*', 12], ['area', 'natural', '*', 12], ['area', 'shop', '*', 12], ['area', 'tourism', '*', 12], ['area', 'camp_site', '*', 12], ['point', 'aeroway', '*', 10], ['point', 'amenity', '*', 10], ['point', 'building', '*', 10], ['point', 'historic', '*', 10], ['point', 'leisure', '*', 10], ['point', 'man_made', '*', 10], ['point', 'natural', '*', 10], ['point', 'shop', '*', 10], ['point', 'tourism', '*', 10], ['point', 'camp_site', '*', 10], ['line', 'name', '*', 12], ['area', 'name', '*', 12], ['point', 'name', '*', 10]]; + function isLineConnected() { + var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); - function shouldSkipIcon(preset) { - var noIcons = ['building', 'landuse', 'natural']; - return noIcons.some(function (s) { - return preset.id.indexOf(s) >= 0; + 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; + }); }); } - function get(array, prop) { - return function (d, i) { - return array[i][prop]; - }; + 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); } - function textWidth(text, size, elem) { - var c = _textWidthCache[size]; - if (!c) c = _textWidthCache[size] = {}; + function continueLine() { + if (context.mode().id !== 'draw-line') return chapter.restart(); - if (c[text]) { - return c[text]; - } else if (elem) { - c[text] = elem.getComputedTextLength(); - return c[text]; - } else { - var str = encodeURIComponent(text).match(/%[CDEFcdef]/g); + var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); - if (str === null) { - return size / 3 * 2 * text.length; + 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 size / 3 * (2 * text.length + str.length); + return chapter.restart(); } + }); + + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); } } - function drawLinePaths(selection, entities, filter, classes, labels) { - var paths = selection.selectAll('path').filter(filter).data(entities, osmEntity.key); // exit + 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 - paths.exit().remove(); // enter/update + 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 - paths.enter().append('path').style('stroke-width', get(labels, 'font-size')).attr('id', function (d) { - return 'ideditor-labelpath-' + d.id; - }).attr('class', classes).merge(paths).attr('d', get(labels, 'lineString')); + 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(); + } } - function drawLineLabels(selection, entities, filter, classes, labels) { - var texts = selection.selectAll('text.' + classes).filter(filter).data(entities, osmEntity.key); // exit - - texts.exit().remove(); // enter + 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 + }); + }, 300); - texts.enter().append('text').attr('class', function (d, i) { - return classes + ' ' + labels[i].classes + ' ' + d.id; - }).attr('dy', baselineHack ? '0.35em' : null).append('textPath').attr('class', 'textpath'); // update + function continueTo(nextStep) { + context.container().select('.preset-list-button').on('click.intro', null); + context.on('exit.intro', null); + nextStep(); + } + } // selected wrong road type - selection.selectAll('text.' + classes).selectAll('.textpath').filter(filter).data(entities, osmEntity.key).attr('startOffset', '50%').attr('xlink:href', function (d) { - return '#ideditor-labelpath-' + d.id; - }).text(utilDisplayNameForPath); - } - function drawPointLabels(selection, entities, filter, classes, labels) { - var texts = selection.selectAll('text.' + classes).filter(filter).data(entities, osmEntity.key); // exit + function retryPresetResidential() { + if (context.mode().id !== 'select') return chapter.restart(); + context.on('exit.intro', function () { + return chapter.restart(); + }); // disallow scrolling - texts.exit().remove(); // enter/update + 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); - texts.enter().append('text').attr('class', function (d, i) { - return classes + ' ' + labels[i].classes + ' ' + d.id; - }).merge(texts).attr('x', get(labels, 'x')).attr('y', get(labels, 'y')).style('text-anchor', get(labels, 'textAnchor')).text(utilDisplayName).each(function (d, i) { - textWidth(utilDisplayName(d), labels[i].height, 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(); + } } - function drawAreaLabels(selection, entities, filter, classes, labels) { - entities = entities.filter(hasText); - labels = labels.filter(hasText); - drawPointLabels(selection, entities, filter, classes, labels); + function nameRoad() { + context.on('exit.intro', function () { + continueTo(didNameRoad); + }); + timeout(function () { + reveal('.entity-editor-pane', helpHtml('intro.lines.name_road', { + button: icon('#iD-icon-close', 'inline') + }), { + tooltipClass: 'intro-lines-name_road' + }); + }, 500); - function hasText(d, i) { - return labels[i].hasOwnProperty('x') && labels[i].hasOwnProperty('y'); + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); } } - function drawAreaIcons(selection, entities, filter, classes, labels) { - var icons = selection.selectAll('use.' + classes).filter(filter).data(entities, osmEntity.key); // exit + 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); + } + }); + }, 500); - icons.exit().remove(); // enter/update + function continueTo(nextStep) { + nextStep(); + } + } - icons.enter().append('use').attr('class', 'icon ' + classes).attr('width', '17px').attr('height', '17px').merge(icons).attr('transform', get(labels, 'transform')).attr('xlink:href', function (d) { - var preset = _mainPresetIndex.match(d, context.graph()); - var picon = preset && preset.icon; + function updateLine() { + context.history().reset('doneAddLine'); - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-15' : ''); - } - }); - } + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return chapter.restart(); + } - function drawCollisionBoxes(selection, rtree, which) { - var classes = 'debug ' + which + ' ' + (which === 'debug-skipped' ? 'orange' : 'yellow'); - var gj = []; + var msec = transitionTime(woodRoadDragMidpoint, context.map().center()); - if (context.getDebug('collision')) { - gj = rtree.all().map(function (d) { - return { - type: 'Polygon', - coordinates: [[[d.minX, d.minY], [d.maxX, d.minY], [d.maxX, d.maxY], [d.minX, d.maxY], [d.minX, d.minY]]] - }; + if (msec) { + reveal(null, null, { + duration: 0 }); } - var boxes = selection.selectAll('.' + which).data(gj); // exit + context.map().centerZoomEase(woodRoadDragMidpoint, 19, msec); + timeout(function () { + var padding = 250 * Math.pow(2, context.map().zoom() - 19); + var box = pad(woodRoadDragMidpoint, padding, context); - boxes.exit().remove(); // enter/update + var advance = function advance() { + continueTo(addNode); + }; - boxes.enter().append('path').attr('class', classes).merge(boxes).attr('d', d3_geoPath()); + 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); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } } - function drawLabels(selection, graph, entities, filter, dimensions, fullRedraw) { - var wireframe = context.surface().classed('fill-wireframe'); - var zoom = geoScaleToZoom(projection.scale()); - var labelable = []; - var renderNodeAs = {}; - var i, j, k, entity, geometry; + function addNode() { + context.history().reset('doneAddLine'); - for (i = 0; i < labelStack.length; i++) { - labelable.push([]); + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return chapter.restart(); } - if (fullRedraw) { - _rdrawn.clear(); + 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 + }); + }); + context.history().on('change.intro', function (changed) { + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return continueTo(updateLine); + } - _rskipped.clear(); + if (changed.created().length === 1) { + timeout(function () { + continueTo(startDragEndpoint); + }, 500); + } + }); + context.on('enter.intro', function (mode) { + if (mode.id !== 'select') { + continueTo(updateLine); + } + }); - _entitybboxes = {}; - } else { - for (i = 0; i < entities.length; i++) { - entity = entities[i]; - var toRemove = [].concat(_entitybboxes[entity.id] || []).concat(_entitybboxes[entity.id + 'I'] || []); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - for (j = 0; j < toRemove.length; j++) { - _rdrawn.remove(toRemove[j]); + function startDragEndpoint() { + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return continueTo(updateLine); + } - _rskipped.remove(toRemove[j]); - } + 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); } - } // Loop through all the entities to do some preprocessing + 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); - for (i = 0; i < entities.length; i++) { - entity = entities[i]; - geometry = entity.geometry(graph); // Insert collision boxes around interesting points/vertices + if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) { + continueTo(finishDragEndpoint); + } + }); - if (geometry === 'point' || geometry === 'vertex' && isInterestingVertex(entity)) { - var hasDirections = entity.directions(graph, projection).length; - var markerPadding; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } - if (!wireframe && geometry === 'point' && !(zoom >= 18 && hasDirections)) { - renderNodeAs[entity.id] = 'point'; - markerPadding = 20; // extra y for marker height - } else { - renderNodeAs[entity.id] = 'vertex'; - markerPadding = 0; - } + function finishDragEndpoint() { + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return continueTo(updateLine); + } - var coord = projection(entity.loc); - var nodePadding = 10; - var bbox = { - minX: coord[0] - nodePadding, - minY: coord[1] - nodePadding - markerPadding, - maxX: coord[0] + nodePadding, - maxY: coord[1] + nodePadding - }; - doInsert(bbox, entity.id + 'P'); - } // From here on, treat vertices like points + 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 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); - if (geometry === 'vertex') { - geometry = 'point'; - } // Determine which entities are label-able + if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) { + continueTo(startDragEndpoint); + } + }); + context.on('enter.intro', function () { + continueTo(startDragMidpoint); + }); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - var preset = geometry === 'area' && _mainPresetIndex.match(entity, graph); - var icon = preset && !shouldSkipIcon(preset) && preset.icon; - if (!icon && !utilDisplayName(entity)) continue; + function startDragMidpoint() { + if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { + return continueTo(updateLine); + } - for (k = 0; k < labelStack.length; k++) { - var matchGeom = labelStack[k][0]; - var matchKey = labelStack[k][1]; - var matchVal = labelStack[k][2]; - var hasVal = entity.tags[matchKey]; + if (context.selectedIDs().indexOf(woodRoadID) === -1) { + context.enter(modeSelect(context, [woodRoadID])); + } - if (geometry === matchGeom && hasVal && (matchVal === '*' || matchVal === hasVal)) { - labelable[k].push(entity); - break; - } + 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 + }); + }); + 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])); } + }); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + context.on('enter.intro', null); + nextStep(); } + } - var positions = { - point: [], - line: [], - area: [] - }; - var labelled = { - point: [], - line: [], - area: [] - }; // Try and find a valid label for labellable entities + 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; - for (k = 0; k < labelable.length; k++) { - var fontSize = labelStack[k][3]; + var advance = function advance() { + context.history().checkpoint('doneUpdateLine'); + continueTo(deleteLines); + }; - for (i = 0; i < labelable[k].length; i++) { - entity = labelable[k][i]; - geometry = entity.geometry(graph); - var getName = geometry === 'line' ? utilDisplayNameForPath : utilDisplayName; - var name = getName(entity); - var width = name && textWidth(name, fontSize); - var p = null; + 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); + } - if (geometry === 'point' || geometry === 'vertex') { - // no point or vertex labels in wireframe mode - // no vertex labels at low zooms (vertices have no icons) - if (wireframe) continue; - var renderAs = renderNodeAs[entity.id]; - if (renderAs === 'vertex' && zoom < 17) continue; - p = getPointLabel(entity, width, fontSize, renderAs); - } else if (geometry === 'line') { - p = getLineLabel(entity, width, fontSize); - } else if (geometry === 'area') { - p = getAreaLabel(entity, width, fontSize); - } + 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 + }); + }); - if (p) { - if (geometry === 'vertex') { - geometry = 'point'; - } // treat vertex like point + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } + function deleteLines() { + context.history().reset('doneUpdateLine'); + context.enter(modeBrowse(context)); - p.classes = geometry + ' tag-' + labelStack[k][1]; - positions[geometry].push(p); - labelled[geometry].push(entity); - } - } + if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return chapter.restart(); } - function isInterestingVertex(entity) { - var selectedIDs = context.selectedIDs(); - return entity.hasInterestingTags() || entity.isEndpoint(graph) || entity.isConnected(graph) || selectedIDs.indexOf(entity.id) !== -1 || graph.parentWays(entity).some(function (parent) { - return selectedIDs.indexOf(parent.id) !== -1; + var msec = transitionTime(deleteLinesLoc, context.map().center()); + + if (msec) { + reveal(null, null, { + duration: 0 }); } - function getPointLabel(entity, width, height, geometry) { - var y = geometry === 'point' ? -12 : 0; - var pointOffsets = { - ltr: [15, y, 'start'], - rtl: [-15, y, 'end'] - }; - var textDirection = _mainLocalizer.textDirection(); - var coord = projection(entity.loc); - var textPadding = 2; - var offset = pointOffsets[textDirection]; - var p = { - height: height, - width: width, - x: coord[0] + offset[0], - y: coord[1] + offset[1], - textAnchor: offset[2] - }; // insert a collision box for the text label.. + 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; - var bbox; + var advance = function advance() { + continueTo(rightClickIntersection); + }; - if (textDirection === 'rtl') { - bbox = { - minX: p.x - width - textPadding, - minY: p.y - height / 2 - textPadding, - maxX: p.x + textPadding, - maxY: p.y + height / 2 + textPadding - }; - } else { - bbox = { - minX: p.x - textPadding, - minY: p.y - height / 2 - textPadding, - maxX: p.x + width + textPadding, - maxY: p.y + height / 2 + textPadding - }; - } + 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 + }); + }); + context.history().on('change.intro', function () { + timeout(function () { + continueTo(deleteLines); + }, 500); // after any transition (e.g. if user deleted intersection) + }); + }, msec + 100); - if (tryInsert([bbox], entity.id, true)) { - return p; - } + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + nextStep(); } + } - function getLineLabel(entity, width, height) { - var viewport = geoExtent(context.projection.clipExtent()).polygon(); - var points = graph.childNodes(entity).map(function (node) { - return projection(node.loc); + 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 + }); }); - var length = geoPathLength(points); - if (length < width + 20) return; // % along the line to attempt to place the label + 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); - var lineOffsets = [50, 45, 55, 40, 60, 35, 65, 30, 70, 25, 75, 20, 80, 15, 95, 10, 90, 5, 95]; - var padding = 3; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - for (var i = 0; i < lineOffsets.length; i++) { - var offset = lineOffsets[i]; - var middle = offset / 100 * length; - var start = middle - width / 2; - if (start < 0 || start + width > length) continue; // generate subpath and ignore paths that are invalid or don't cross viewport. + function splitIntersection() { + if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return continueTo(deleteLines); + } - var sub = subpath(points, start, start + width); + var node = selectMenuItem(context, 'split').node(); - if (!sub || !geoPolygonIntersectsPolygon(viewport, sub, true)) { - continue; - } + if (!node) { + return continueTo(rightClickIntersection); + } - var isReverse = reverse(sub); + var wasChanged = false; + _washingtonSegmentID = null; + reveal('.edit-menu', helpHtml('intro.lines.split_intersection', { + street: _t('intro.graph.name.washington-street') + }), { + padding: 50 + }); + context.map().on('move.intro drawn.intro', function () { + var node = selectMenuItem(context, 'split').node(); - if (isReverse) { - sub = sub.reverse(); + if (!wasChanged && !node) { + return continueTo(rightClickIntersection); + } + + 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); + } else { + _washingtonSegmentID = null; + continueTo(retrySplit); } + }, 300); // after any transition (e.g. if user deleted intersection) + }); - var bboxes = []; - var boxsize = (height + 2) / 2; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - for (var j = 0; j < sub.length - 1; j++) { - var a = sub[j]; - var b = sub[j + 1]; // split up the text into small collision boxes + function retrySplit() { + context.enter(modeBrowse(context)); + context.map().centerZoomEase(eleventhAvenueEnd, 18, 500); - var num = Math.max(1, Math.floor(geoVecLength(a, b) / boxsize / 2)); + var advance = function advance() { + continueTo(rightClickIntersection); + }; - for (var box = 0; box < num; box++) { - var p = geoVecInterp(a, b, box / num); - var x0 = p[0] - boxsize - padding; - var y0 = p[1] - boxsize - padding; - var x1 = p[0] + boxsize + padding; - var y1 = p[1] + boxsize + padding; - bboxes.push({ - minX: Math.min(x0, x1), - minY: Math.min(y0, y1), - maxX: Math.max(x0, x1), - maxY: Math.max(y0, y1) - }); - } - } + 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 + }); + }); - if (tryInsert(bboxes, entity.id, false)) { - // accept this one - return { - 'font-size': height + 2, - lineString: lineString(sub), - startOffset: offset + '%' - }; - } - } + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } - function reverse(p) { - var angle = Math.atan2(p[1][1] - p[0][1], p[1][0] - p[0][0]); - return !(p[0][0] < p[p.length - 1][0] && angle < Math.PI / 2 && angle > -Math.PI / 2); - } + function didSplit() { + if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return continueTo(rightClickIntersection); + } - function lineString(points) { - return 'M' + points.join('L'); - } + 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 - function subpath(points, from, to) { - var sofar = 0; - var start, end, i0, i1; + context.on('enter.intro', function () { + var ids = context.selectedIDs(); - for (var i = 0; i < points.length - 1; i++) { - var a = points[i]; - var b = points[i + 1]; - var current = geoVecLength(a, b); - var portion; + if (ids.length === 1 && ids[0] === _washingtonSegmentID) { + 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); + } + }); - if (!start && sofar + current >= from) { - portion = (from - sofar) / current; - start = [a[0] + portion * (b[0] - a[0]), a[1] + portion * (b[1] - a[1])]; - i0 = i + 1; - } + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - if (!end && sofar + current >= to) { - portion = (to - sofar) / current; - end = [a[0] + portion * (b[0] - a[0]), a[1] + portion * (b[1] - a[1])]; - i1 = i + 1; - } + function multiSelect() { + if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return continueTo(rightClickIntersection); + } - sofar += current; - } + var ids = context.selectedIDs(); + var hasWashington = ids.indexOf(_washingtonSegmentID) !== -1; + var hasTwelfth = ids.indexOf(twelfthAvenueID) !== -1; - var result = points.slice(i0, i1); - result.unshift(start); - result.push(end); - return result; - } + if (hasWashington && hasTwelfth) { + return continueTo(multiRightClick); + } else if (!hasWashington && !hasTwelfth) { + return continueTo(didSplit); } - function getAreaLabel(entity, width, height) { - var centroid = path.centroid(entity.asGeoJSON(graph, true)); - var extent = entity.extent(graph); - var areaWidth = projection(extent[1])[0] - projection(extent[0])[0]; - if (isNaN(centroid[0]) || areaWidth < 20) return; - var preset = _mainPresetIndex.match(entity, context.graph()); - var picon = preset && preset.icon; - var iconSize = 17; - var padding = 2; - var p = {}; + context.map().centerZoomEase(twelfthAvenue, 18, 500); + timeout(function () { + var selected, other, padding, box; - if (picon) { - // icon and label.. - if (addIcon()) { - addLabel(iconSize + padding); - return p; - } + 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 { - // label only.. - if (addLabel(0)) { - return p; - } + 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; } - function addIcon() { - var iconX = centroid[0] - iconSize / 2; - var iconY = centroid[1] - iconSize / 2; - var bbox = { - minX: iconX, - minY: iconY, - maxX: iconX + iconSize, - maxY: iconY + iconSize - }; + 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; + } - if (tryInsert([bbox], entity.id + 'I', true)) { - p.transform = 'translate(' + iconX + ',' + iconY + ')'; - return true; + 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); - return false; - } + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + context.history().on('change.intro', null); + nextStep(); + } + } - function addLabel(yOffset) { - if (width && areaWidth >= width + 20) { - var labelX = centroid[0]; - var labelY = centroid[1] + yOffset; - var bbox = { - minX: labelX - width / 2 - padding, - minY: labelY - height / 2 - padding, - maxX: labelX + width / 2 + padding, - maxY: labelY + height / 2 + padding - }; + function multiRightClick() { + if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return continueTo(rightClickIntersection); + } + + 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 + }); + }); + context.ui().editMenu().on('toggled.intro', function (open) { + if (!open) return; + timeout(function () { + var ids = context.selectedIDs(); - if (tryInsert([bbox], entity.id, true)) { - p.x = labelX; - p.y = labelY; - p.textAnchor = 'middle'; - p.height = height; - return true; - } + 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); } - - return false; + }, 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); } - } // force insert a singular bounding box - // singular box only, no array, id better be unique + }); + 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(); + } + } - function doInsert(bbox, id) { - bbox.id = id; - var oldbox = _entitybboxes[id]; + function multiDelete() { + if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { + return continueTo(rightClickIntersection); + } - if (oldbox) { - _rdrawn.remove(oldbox); + 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); + } + }); - _entitybboxes[id] = bbox; - - _rdrawn.insert(bbox); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('exit.intro', null); + context.history().on('change.intro', null); + nextStep(); } + } - function tryInsert(bboxes, id, saveSkipped) { - var skipped = false; - - for (var i = 0; i < bboxes.length; i++) { - var bbox = bboxes[i]; - bbox.id = id; // Check that label is visible + 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 (bbox.minX < 0 || bbox.minY < 0 || bbox.maxX > dimensions[0] || bbox.maxY > dimensions[1]) { - skipped = true; - break; - } + function continueTo(nextStep) { + nextStep(); + } + } - if (_rdrawn.collides(bbox)) { - skipped = true; - break; - } + function play() { + dispatch.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'); } + }); + } - _entitybboxes[id] = bboxes; + chapter.enter = function () { + addLine(); + }; - if (skipped) { - if (saveSkipped) { - _rskipped.load(bboxes); - } - } else { - _rdrawn.load(bboxes); - } + 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); + }; - return !skipped; - } + chapter.restart = function () { + chapter.exit(); + chapter.enter(); + }; - var layer = selection.selectAll('.layer-osm.labels'); - layer.selectAll('.labels-group').data(['halo', 'label', 'debug']).enter().append('g').attr('class', function (d) { - return 'labels-group ' + d; - }); - var halo = layer.selectAll('.labels-group.halo'); - var label = layer.selectAll('.labels-group.label'); - var debug = layer.selectAll('.labels-group.debug'); // points + return utilRebind(chapter, dispatch, 'on'); + } - drawPointLabels(label, labelled.point, filter, 'pointlabel', positions.point); - drawPointLabels(halo, labelled.point, filter, 'pointlabel-halo', positions.point); // lines + function uiIntroBuilding(context, reveal) { + var dispatch = dispatch$8('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' + }; - drawLinePaths(layer, labelled.line, filter, '', positions.line); - drawLineLabels(label, labelled.line, filter, 'linelabel', positions.line); - drawLineLabels(halo, labelled.line, filter, 'linelabel-halo', positions.line); // areas + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } - drawAreaLabels(label, labelled.area, filter, 'arealabel', positions.area); - drawAreaLabels(halo, labelled.area, filter, 'arealabel-halo', positions.area); - drawAreaIcons(label, labelled.area, filter, 'areaicon', positions.area); - drawAreaIcons(halo, labelled.area, filter, 'areaicon-halo', positions.area); // debug + function eventCancel(d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + } - drawCollisionBoxes(debug, _rskipped, 'debug-skipped'); - drawCollisionBoxes(debug, _rdrawn, 'debug-drawn'); - layer.call(filterLabels); + 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 filterLabels(selection) { - var drawLayer = selection.selectAll('.layer-osm.labels'); - var layers = drawLayer.selectAll('.labels-group.halo, .labels-group.label'); - layers.selectAll('.nolabel').classed('nolabel', false); - var mouse = context.map().mouse(); - var graph = context.graph(); - var selectedIDs = context.selectedIDs(); - var ids = []; - var pad, bbox; // hide labels near the mouse + 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 (mouse) { - pad = 20; - bbox = { - minX: mouse[0] - pad, - minY: mouse[1] - pad, - maxX: mouse[0] + pad, - maxY: mouse[1] + pad - }; + function addHouse() { + context.enter(modeBrowse(context)); + context.history().reset('initial'); + _houseID = null; + var msec = transitionTime(house, context.map().center()); - var nearMouse = _rdrawn.search(bbox).map(function (entity) { - return entity.id; + if (msec) { + reveal(null, null, { + duration: 0 }); + } - ids.push.apply(ids, nearMouse); - } // hide labels on selected nodes (they look weird when dragging / haloed) - + 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); - for (var i = 0; i < selectedIDs.length; i++) { - var entity = graph.hasEntity(selectedIDs[i]); + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } + } - if (entity && entity.type === 'node') { - ids.push(selectedIDs[i]); - } + function startHouse() { + if (context.mode().id !== 'add-area') { + return continueTo(addHouse); } - layers.selectAll(utilEntitySelector(ids)).classed('nolabel', true); // draw the mouse bbox if debugging is on.. + _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 - var debug = selection.selectAll('.labels-group.debug'); - var gj = []; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } - if (context.getDebug('collision')) { - gj = bbox ? [{ - type: 'Polygon', - coordinates: [[[bbox.minX, bbox.minY], [bbox.maxX, bbox.minY], [bbox.maxX, bbox.maxY], [bbox.minX, bbox.maxY], [bbox.minX, bbox.minY]]] - }] : []; + function continueHouse() { + if (context.mode().id !== 'draw-area') { + return continueTo(addHouse); } - var box = debug.selectAll('.debug-mouse').data(gj); // exit + _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); + }); - box.exit().remove(); // enter/update + if (isMostlySquare(points)) { + _houseID = way.id; + return continueTo(chooseCategoryBuilding); + } else { + return continueTo(retryHouse); + } + } else { + return chapter.restart(); + } + }); - box.enter().append('path').attr('class', 'debug debug-mouse yellow').merge(box).attr('d', d3_geoPath()); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } } - var throttleFilterLabels = throttle(filterLabels, 100); - - drawLabels.observe = function (selection) { - var listener = function listener() { - throttleFilterLabels(selection); + function retryHouse() { + var onClick = function onClick() { + continueTo(addHouse); }; - selection.on('mousemove.hidelabels', listener); - context.on('enter.hidelabels', listener); - }; + 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 + }); + }); - drawLabels.off = function (selection) { - throttleFilterLabels.cancel(); - selection.on('mousemove.hidelabels', null); - context.on('enter.hidelabels', null); - }; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } - return drawLabels; - } + function chooseCategoryBuilding() { + if (!_houseID || !context.hasEntity(_houseID)) { + return addHouse(); + } - var _layerEnabled$1 = false; + var ids = context.selectedIDs(); - var _qaService$1; + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { + context.enter(modeSelect(context, [_houseID])); + } // disallow scrolling - function svgImproveOSM(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - return dispatch.call('change'); - }, 1000); - var minZoom = 12; - var touchLayer = select(null); - var drawLayer = select(null); - var layerVisible = 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%'); + 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.. - function markerPath(selection, klass) { - selection.attr('class', klass).attr('transform', 'translate(-10, -28)').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'); - } // Loosely-coupled improveOSM service for fetching issues + context.on('enter.intro', function (mode) { + if (!_houseID || !context.hasEntity(_houseID)) { + return continueTo(addHouse); + } + var ids = context.selectedIDs(); - function getService() { - if (services.improveOSM && !_qaService$1) { - _qaService$1 = services.improveOSM; + if (mode.id !== 'select' || !ids.length || ids[0] !== _houseID) { + return continueTo(chooseCategoryBuilding); + } + }); - _qaService$1.on('loaded', throttledRedraw); - } else if (!services.improveOSM && _qaService$1) { - _qaService$1 = null; + 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(); } + } - return _qaService$1; - } // Show the markers - - - function editOn() { - if (!layerVisible) { - layerVisible = true; - drawLayer.style('display', 'block'); + function choosePresetHouse() { + if (!_houseID || !context.hasEntity(_houseID)) { + return addHouse(); } - } // Immediately remove the markers and their touch targets + var ids = context.selectedIDs(); - function editOff() { - if (layerVisible) { - layerVisible = false; - drawLayer.style('display', 'none'); - drawLayer.selectAll('.qaItem.improveOSM').remove(); - touchLayer.selectAll('.qaItem.improveOSM').remove(); - } - } // Enable the layer. This shows the markers and transitions them to visible. + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { + context.enter(modeSelect(context, [_houseID])); + } // disallow scrolling - function layerOn() { - editOn(); - drawLayer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end interrupt', function () { - return dispatch.call('change'); - }); - } // Disable the layer. This transitions the layer invisible and then hides the markers. + 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.. + context.on('enter.intro', function (mode) { + if (!_houseID || !context.hasEntity(_houseID)) { + return continueTo(addHouse); + } - function layerOff() { - throttledRedraw.cancel(); - drawLayer.interrupt(); - touchLayer.selectAll('.qaItem.improveOSM').remove(); - drawLayer.transition().duration(250).style('opacity', 0).on('end interrupt', function () { - editOff(); - dispatch.call('change'); + var ids = context.selectedIDs(); + + if (mode.id !== 'select' || !ids.length || ids[0] !== _houseID) { + return continueTo(chooseCategoryBuilding); + } }); - } // Update the issue markers + 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(); + } + } - function updateMarkers() { - if (!layerVisible || !_layerEnabled$1) return; - var service = getService(); - var selectedID = context.selectedErrorID(); - var data = service ? service.getItems(projection) : []; - var getTransform = svgPointTransform(projection); // Draw markers.. + function closeEditorHouse() { + if (!_houseID || !context.hasEntity(_houseID)) { + return addHouse(); + } - var markers = drawLayer.selectAll('.qaItem.improveOSM').data(data, function (d) { - return d.id; - }); // exit + var ids = context.selectedIDs(); - markers.exit().remove(); // enter + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { + context.enter(modeSelect(context, [_houseID])); + } - var markersEnter = markers.enter().append('g').attr('class', function (d) { - return "qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.itemType); + context.history().checkpoint('hasHouse'); + context.on('exit.intro', function () { + continueTo(rightClickHouse); }); - markersEnter.append('polygon').call(markerPath, 'shadow'); - markersEnter.append('ellipse').attr('cx', 0).attr('cy', 0).attr('rx', 4.5).attr('ry', 2).attr('class', 'stroke'); - markersEnter.append('polygon').attr('fill', 'currentColor').call(markerPath, 'qaItem-fill'); - markersEnter.append('use').attr('transform', 'translate(-6.5, -23)').attr('class', 'icon-annotation').attr('width', '13px').attr('height', '13px').attr('xlink:href', function (d) { - var picon = d.icon; - - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return "#".concat(picon).concat(isMaki ? '-11' : ''); - } - }); // update + timeout(function () { + reveal('.entity-editor-pane', helpHtml('intro.buildings.close', { + button: icon('#iD-icon-close', 'inline') + })); + }, 500); - markers.merge(markersEnter).sort(sortY).classed('selected', function (d) { - return d.id === selectedID; - }).attr('transform', getTransform); // Draw targets.. + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } + } - if (touchLayer.empty()) return; - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var targets = touchLayer.selectAll('.qaItem.improveOSM').data(data, function (d) { - return d.id; - }); // exit + function rightClickHouse() { + if (!_houseID) return chapter.restart(); + context.enter(modeBrowse(context)); + context.history().reset('hasHouse'); + var zoom = context.map().zoom(); - targets.exit().remove(); // enter/update + if (zoom < 20) { + zoom = 20; + } - targets.enter().append('rect').attr('width', '20px').attr('height', '30px').attr('x', '-10px').attr('y', '-28px').merge(targets).sort(sortY).attr('class', function (d) { - return "qaItem ".concat(d.service, " target ").concat(fillClass, " itemId-").concat(d.id); - }).attr('transform', getTransform); + 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); + }); - function sortY(a, b) { - return a.id === selectedID ? 1 : b.id === selectedID ? -1 : b.loc[1] - a.loc[1]; + function continueTo(nextStep) { + context.on('enter.intro', null); + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + nextStep(); } - } // Draw the ImproveOSM layer and schedule loading issues and updating markers. - + } - function drawImproveOSM(selection) { - var service = getService(); - var surface = context.surface(); + function clickSquare() { + if (!_houseID) return chapter.restart(); + var entity = context.hasEntity(_houseID); + if (!entity) return continueTo(rightClickHouse); + var node = selectMenuItem(context, 'orthogonalize').node(); - if (surface && !surface.empty()) { - touchLayer = surface.selectAll('.data-layer.touch .layer-touch.markers'); + if (!node) { + return continueTo(rightClickHouse); } - drawLayer = selection.selectAll('.layer-improveOSM').data(service ? [0] : []); - drawLayer.exit().remove(); - drawLayer = drawLayer.enter().append('g').attr('class', 'layer-improveOSM').style('display', _layerEnabled$1 ? 'block' : 'none').merge(drawLayer); - - if (_layerEnabled$1) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - service.loadIssues(projection); - updateMarkers(); - } else { - editOff(); + 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); } - } - } // Toggles the layer on and off + }); + context.map().on('move.intro', function () { + var node = selectMenuItem(context, 'orthogonalize').node(); + if (!wasChanged && !node) { + return continueTo(rightClickHouse); + } - drawImproveOSM.enabled = function (val) { - if (!arguments.length) return _layerEnabled$1; - _layerEnabled$1 = val; + 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. - if (_layerEnabled$1) { - layerOn(); - } else { - layerOff(); + timeout(function () { + if (context.history().undoAnnotation() === _t('operations.orthogonalize.annotation.feature', { + n: 1 + })) { + continueTo(doneSquare); + } else { + continueTo(retryClickSquare); + } + }, 500); // after transitioned actions + }); - if (context.selectedErrorID()) { - context.enter(modeBrowse(context)); - } + function continueTo(nextStep) { + context.on('enter.intro', null); + context.map().on('move.intro', null); + context.history().on('change.intro', null); + nextStep(); } + } - dispatch.call('change'); - return this; - }; + function retryClickSquare() { + context.enter(modeBrowse(context)); + revealHouse(house, helpHtml('intro.buildings.retry_square'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + continueTo(rightClickHouse); + } + }); - drawImproveOSM.supported = function () { - return !!getService(); - }; + function continueTo(nextStep) { + nextStep(); + } + } - return drawImproveOSM; - } + function doneSquare() { + context.history().checkpoint('doneSquare'); + revealHouse(house, helpHtml('intro.buildings.done_square'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + continueTo(addTank); + } + }); - var _layerEnabled$2 = false; + function continueTo(nextStep) { + nextStep(); + } + } - var _qaService$2; + function addTank() { + context.enter(modeBrowse(context)); + context.history().reset('doneSquare'); + _tankID = null; + var msec = transitionTime(tank, context.map().center()); - function svgOsmose(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - return dispatch.call('change'); - }, 1000); + if (msec) { + reveal(null, null, { + duration: 0 + }); + } - var minZoom = 12; - var touchLayer = select(null); - var drawLayer = select(null); - var layerVisible = false; + 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 markerPath(selection, klass) { - selection.attr('class', klass).attr('transform', 'translate(-10, -28)').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'); - } // Loosely-coupled osmose service for fetching issues + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } + } + function startTank() { + if (context.mode().id !== 'add-area') { + return continueTo(addTank); + } - function getService() { - if (services.osmose && !_qaService$2) { - _qaService$2 = services.osmose; + _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 + }); + }); + context.on('enter.intro', function (mode) { + if (mode.id !== 'draw-area') return chapter.restart(); + continueTo(continueTank); + }); + }, 550); // after easing - _qaService$2.on('loaded', throttledRedraw); - } else if (!services.osmose && _qaService$2) { - _qaService$2 = null; + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); } + } - return _qaService$2; - } // Show the markers + function continueTank() { + if (context.mode().id !== 'draw-area') { + return continueTo(addTank); + } + _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 + }); + }); + 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); + } + }); - function editOn() { - if (!layerVisible) { - layerVisible = true; - drawLayer.style('display', 'block'); + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); } - } // Immediately remove the markers and their touch targets - + } - function editOff() { - if (layerVisible) { - layerVisible = false; - drawLayer.style('display', 'none'); - drawLayer.selectAll('.qaItem.osmose').remove(); - touchLayer.selectAll('.qaItem.osmose').remove(); + function searchPresetTank() { + if (!_tankID || !context.hasEntity(_tankID)) { + return addTank(); } - } // Enable the layer. This shows the markers and transitions them to visible. + var ids = context.selectedIDs(); - function layerOn() { - editOn(); - drawLayer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end interrupt', function () { - return dispatch.call('change'); - }); - } // Disable the layer. This transitions the layer invisible and then hides the markers. + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { + context.enter(modeSelect(context, [_tankID])); + } // disallow scrolling - function layerOff() { - throttledRedraw.cancel(); - drawLayer.interrupt(); - touchLayer.selectAll('.qaItem.osmose').remove(); - drawLayer.transition().duration(250).style('opacity', 0).on('end interrupt', function () { - editOff(); - dispatch.call('change'); - }); - } // Update the issue markers + 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.. + context.on('enter.intro', function (mode) { + if (!_tankID || !context.hasEntity(_tankID)) { + return continueTo(addTank); + } - function updateMarkers() { - if (!layerVisible || !_layerEnabled$2) return; - var service = getService(); - var selectedID = context.selectedErrorID(); - var data = service ? service.getItems(projection) : []; - var getTransform = svgPointTransform(projection); // Draw markers.. + var ids = context.selectedIDs(); - var markers = drawLayer.selectAll('.qaItem.osmose').data(data, function (d) { - return d.id; - }); // exit + 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.. - markers.exit().remove(); // enter + context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling - var markersEnter = markers.enter().append('g').attr('class', function (d) { - return "qaItem ".concat(d.service, " itemId-").concat(d.id, " itemType-").concat(d.itemType); + 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); + } }); - markersEnter.append('polygon').call(markerPath, 'shadow'); - markersEnter.append('ellipse').attr('cx', 0).attr('cy', 0).attr('rx', 4.5).attr('ry', 2).attr('class', 'stroke'); - markersEnter.append('polygon').attr('fill', function (d) { - return service.getColor(d.item); - }).call(markerPath, 'qaItem-fill'); - markersEnter.append('use').attr('transform', 'translate(-6.5, -23)').attr('class', 'icon-annotation').attr('width', '13px').attr('height', '13px').attr('xlink:href', function (d) { - var picon = d.icon; - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return "#".concat(picon).concat(isMaki ? '-11' : ''); - } - }); // update + function checkPresetSearch() { + var first = context.container().select('.preset-list-item:first-child'); - markers.merge(markersEnter).sort(sortY).classed('selected', function (d) { - return d.id === selectedID; - }).attr('transform', getTransform); // Draw targets.. + 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 (touchLayer.empty()) return; - var fillClass = context.getDebug('target') ? 'pink' : 'nocolor'; - var targets = touchLayer.selectAll('.qaItem.osmose').data(data, function (d) { - return d.id; - }); // exit + 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(); + } + } - targets.exit().remove(); // enter/update + function closeEditorTank() { + if (!_tankID || !context.hasEntity(_tankID)) { + return addTank(); + } - targets.enter().append('rect').attr('width', '20px').attr('height', '30px').attr('x', '-10px').attr('y', '-28px').merge(targets).sort(sortY).attr('class', function (d) { - return "qaItem ".concat(d.service, " target ").concat(fillClass, " itemId-").concat(d.id); - }).attr('transform', getTransform); + var ids = context.selectedIDs(); - function sortY(a, b) { - return a.id === selectedID ? 1 : b.id === selectedID ? -1 : b.loc[1] - a.loc[1]; + if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { + context.enter(modeSelect(context, [_tankID])); } - } // Draw the Osmose layer and schedule loading issues and updating markers. + 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); - function drawOsmose(selection) { - var service = getService(); - var surface = context.surface(); + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } + } - if (surface && !surface.empty()) { - touchLayer = surface.selectAll('.data-layer.touch .layer-touch.markers'); + 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(); } + } - drawLayer = selection.selectAll('.layer-osmose').data(service ? [0] : []); - drawLayer.exit().remove(); - drawLayer = drawLayer.enter().append('g').attr('class', 'layer-osmose').style('display', _layerEnabled$2 ? 'block' : 'none').merge(drawLayer); + function clickCircle() { + if (!_tankID) return chapter.restart(); + var entity = context.hasEntity(_tankID); + if (!entity) return continueTo(rightClickTank); + var node = selectMenuItem(context, 'circularize').node(); - if (_layerEnabled$2) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - service.loadIssues(projection); - updateMarkers(); - } else { - editOff(); - } + if (!node) { + return continueTo(rightClickTank); } - } // Toggles the layer on and off + 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(); - drawOsmose.enabled = function (val) { - if (!arguments.length) return _layerEnabled$2; - _layerEnabled$2 = val; + if (!wasChanged && !node) { + return continueTo(rightClickTank); + } - if (_layerEnabled$2) { - // Strings supplied by Osmose fetched before showing layer for first time - // NOTE: Currently no way to change locale in iD at runtime, would need to re-call this method if that's ever implemented - // Also, If layer is toggled quickly multiple requests are sent - getService().loadStrings().then(layerOn)["catch"](function (err) { - console.log(err); // eslint-disable-line no-console + reveal('.edit-menu', helpHtml('intro.buildings.circle_tank'), { + duration: 0, + padding: 50 }); - } else { - layerOff(); + }); + 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. - if (context.selectedErrorID()) { - context.enter(modeBrowse(context)); + timeout(function () { + if (context.history().undoAnnotation() === _t('operations.circularize.annotation.feature', { + n: 1 + })) { + continueTo(play); + } else { + continueTo(retryClickCircle); + } + }, 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(); + } + } + + function retryClickCircle() { + context.enter(modeBrowse(context)); + revealTank(tank, helpHtml('intro.buildings.retry_circle'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + continueTo(rightClickTank); } + }); + + function continueTo(nextStep) { + nextStep(); } + } - dispatch.call('change'); - return this; + function play() { + dispatch.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'); + } + }); + } + + chapter.enter = function () { + addHouse(); }; - drawOsmose.supported = function () { - return !!getService(); + 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); }; - return drawOsmose; + chapter.restart = function () { + chapter.exit(); + chapter.enter(); + }; + + return utilRebind(chapter, dispatch, 'on'); } - function svgStreetside(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); + function uiIntroStartEditing(context, reveal) { + var dispatch = dispatch$8('done', 'startEditing'); + var modalSelection = select(null); + var chapter = { + title: 'intro.startediting.title' + }; - var minZoom = 14; - var minMarkerZoom = 16; - var minViewfieldZoom = 18; - var layer = select(null); - var _viewerYaw = 0; - var _selectedSequence = null; + function showHelp() { + reveal('.map-control.help-control', helpHtml('intro.startediting.help'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + shortcuts(); + } + }); + } - var _streetside; - /** - * init(). - */ + function shortcuts() { + reveal('.map-control.help-control', helpHtml('intro.startediting.shortcuts'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + showSave(); + } + }); + } + function showSave() { + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts - function init() { - if (svgStreetside.initialized) return; // run once + reveal('.top-toolbar button.save', helpHtml('intro.startediting.save'), { + buttonText: _t.html('intro.ok'), + buttonCallback: function buttonCallback() { + showStart(); + } + }); + } - svgStreetside.enabled = false; - svgStreetside.initialized = true; + function showStart() { + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + + 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.call('startEditing'); } - /** - * getService(). - */ + chapter.enter = function () { + showHelp(); + }; - function getService() { - if (services.streetside && !_streetside) { - _streetside = services.streetside; + chapter.exit = function () { + modalSelection.remove(); + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + }; - _streetside.event.on('viewerChanged.svgStreetside', viewerChanged).on('loadedImages.svgStreetside', throttledRedraw); - } else if (!services.streetside && _streetside) { - _streetside = null; - } + return utilRebind(chapter, dispatch, 'on'); + } - return _streetside; - } - /** - * showLayer(). - */ + 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 = {}; + var _currChapter; - function showLayer() { - var service = getService(); - if (!service) return; - editOn(); - layer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end', function () { - dispatch.call('change'); + 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])); + } + } + + selection.call(startIntro); + })["catch"](function () { + /* ignore */ }); } - /** - * hideLayer(). - */ - - function hideLayer() { - throttledRedraw.cancel(); - layer.transition().duration(250).style('opacity', 0).on('end', editOff); - } - /** - * editOn(). - */ + 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)`) - function editOn() { - layer.style('display', 'block'); - } - /** - * editOff(). - */ + context.ui().sidebar.expand(); + context.container().selectAll('button.sidebar-toggle').classed('disabled', true); // Block saving + context.inIntro(true); // Load semi-real data used in intro - function editOff() { - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); - } - /** - * click() Handles 'bubble' point click event. - */ + if (osm) { + osm.toggle(false).reset(); + } + context.history().reset(); + context.history().merge(Object.values(coreGraph().load(_introGraph).entities)); + context.history().checkpoint('initial'); // Setup imagery - function click(d3_event, d) { - var service = getService(); - if (!service) return; // try to preserve the viewer rotation when staying on the same sequence + var imagery = context.background().findSource(INTRO_IMAGERY); - if (d.sequenceKey !== _selectedSequence) { - _viewerYaw = 0; // reset + if (imagery) { + context.background().baseLayerSource(imagery); + } else { + context.background().bing(); } - _selectedSequence = d.sequenceKey; - service.ensureViewerLoaded(context).then(function () { - service.selectImage(context, d.key).yaw(_viewerYaw).showViewer(context); + overlays.forEach(function (d) { + return context.background().toggleOverlayLayer(d); + }); // Setup data layers (only OSM) + + 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.map().centerEase(d.loc); - } - /** - * mouseover(). - */ + 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.. + corePreferences('walkthrough_started', 'yes'); // Restore previous walkthrough progress.. - function mouseover(d3_event, d) { - var service = getService(); - if (service) service.setStyles(context, d); - } - /** - * mouseout(). - */ + 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); + if (i < chapterFlow.length - 1) { + var next = chapterFlow[i + 1]; + context.container().select("button.chapter-".concat(next)).classed('next', true); + } // Store walkthrough progress.. - function mouseout() { - var service = getService(); - if (service) service.setStyles(context, null); - } - /** - * transform(). - */ + 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.. - function transform(d) { - var t = svgPointTransform(projection)(d); - var rot = d.ca + _viewerYaw; + var incomplete = utilArrayDifference(chapterFlow, progress); - if (rot) { - t += ' rotate(' + Math.floor(rot) + ',0,0)'; - } + if (!incomplete.length) { + corePreferences('walkthrough_completed', 'yes'); + } - return t; - } + curtain.remove(); + navwrap.remove(); + context.container().selectAll('.main-map .layer-background').style('opacity', opacity); + context.container().selectAll('button.sidebar-toggle').classed('disabled', false); - function viewerChanged() { - var service = getService(); - if (!service) return; - var viewer = service.viewer(); - if (!viewer) return; // update viewfield rotation + if (osm) { + osm.toggle(true).reset().caches(caches); + } - _viewerYaw = viewer.getYaw(); // avoid updating if the map is currently transformed - // e.g. during drags or easing. + context.history().reset().merge(Object.values(baseEntities)); + context.background().baseLayerSource(background); + overlays.forEach(function (d) { + return context.background().toggleOverlayLayer(d); + }); - if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.currentView').attr('transform', transform); - } + if (history) { + context.history().fromJSON(history, false); + } - function filterBubbles(bubbles) { - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + 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 (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - bubbles = bubbles.filter(function (bubble) { - return new Date(bubble.captured_at).getTime() >= fromTimestamp; - }); - } + function enterChapter(d3_event, newChapter) { + if (_currChapter) { + _currChapter.exit(); + } - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - bubbles = bubbles.filter(function (bubble) { - return new Date(bubble.captured_at).getTime() <= toTimestamp; - }); - } + context.enter(modeBrowse(context)); + _currChapter = newChapter; - if (usernames) { - bubbles = bubbles.filter(function (bubble) { - return usernames.indexOf(bubble.captured_by) !== -1; + _currChapter.enter(); + + buttons.classed('next', false).classed('active', function (d) { + return d.title === _currChapter.title; }); } - - return bubbles; } - function filterSequences(sequences) { - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + return intro; + } - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - sequences = sequences.filter(function (sequences) { - return new Date(sequences.properties.captured_at).getTime() >= fromTimestamp; - }); - } + 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 (toDate) { - var toTimestamp = new Date(toDate).getTime(); - sequences = sequences.filter(function (sequences) { - return new Date(sequences.properties.captured_at).getTime() <= toTimestamp; - }); + function update(selection) { + var shownItems = []; + var liveIssues = context.validator().getIssues({ + what: corePreferences('validate-what') || 'edited', + where: corePreferences('validate-where') || 'all' + }); + + if (liveIssues.length) { + warningsItem.count = liveIssues.length; + shownItems.push(warningsItem); } - if (usernames) { - sequences = sequences.filter(function (sequences) { - return usernames.indexOf(sequences.properties.captured_by) !== -1; - }); + if (corePreferences('validate-what') === 'all') { + var resolvedIssues = context.validator().getResolvedIssues(); + + if (resolvedIssues.length) { + resolvedItem.count = resolvedIssues.length; + shownItems.push(resolvedItem); + } } - return sequences; + 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 + + 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(); + }); } - /** - * update(). - */ + return function (selection) { + update(selection); + context.validator().on('validated.infobox', function () { + update(selection); + }); + }; + } - function update() { - var viewer = context.container().select('.photoviewer'); - var selected = viewer.empty() ? undefined : viewer.datum(); - var z = ~~context.map().zoom(); - var showMarkers = z >= minMarkerZoom; - var showViewfields = z >= minViewfieldZoom; - var service = getService(); - var sequences = []; - var bubbles = []; + 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) - if (context.photos().showsPanoramic()) { - sequences = service ? service.sequences(projection) : []; - bubbles = service && showMarkers ? service.bubbles(projection) : []; - sequences = filterSequences(sequences); - bubbles = filterBubbles(bubbles); - } + var _dMini; // dimensions of minimap - var traces = layer.selectAll('.sequences').selectAll('.sequence').data(sequences, function (d) { - return d.properties.key; - }); // exit - traces.exit().remove(); // enter/update + var _cMini; // center pixel of minimap - traces = traces.enter().append('path').attr('class', 'sequence').merge(traces).attr('d', svgPath(projection).geojson); - var groups = layer.selectAll('.markers').selectAll('.viewfield-group').data(bubbles, function (d) { - // force reenter once bubbles are attached to a sequence - return d.key + (d.sequenceKey ? 'v1' : 'v0'); - }); // exit - groups.exit().remove(); // enter + var _tStart; // transform at start of gesture - var groupsEnter = groups.enter().append('g').attr('class', 'viewfield-group').on('mouseenter', mouseover).on('mouseleave', mouseout).on('click', click); - groupsEnter.append('g').attr('class', 'viewfield-scale'); // update - var markers = groups.merge(groupsEnter).sort(function (a, b) { - return a === selected ? 1 : b === selected ? -1 : b.loc[1] - a.loc[1]; - }).attr('transform', transform).select('.viewfield-scale'); - markers.selectAll('circle').data([0]).enter().append('circle').attr('dx', '0').attr('dy', '0').attr('r', '6'); - var viewfields = markers.selectAll('.viewfield').data(showViewfields ? [0] : []); - viewfields.exit().remove(); // viewfields may or may not be drawn... - // but if they are, draw below the circles + var _tCurr; // transform at most recent event - viewfields.enter().insert('path', 'circle').attr('class', 'viewfield').attr('transform', 'scale(1.5,1.5),translate(-8, -13)').attr('d', viewfieldPath); - function viewfieldPath() { - var d = this.parentNode.__data__; + var _timeoutID; - if (d.pano) { - 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'; - } + function zoomStarted() { + if (_skipEvents) return; + _tStart = _tCurr = projection.transform(); + _gesture = null; } - } - /** - * drawImages() - * drawImages is the method that is returned (and that runs) every time 'svgStreetside()' is called. - * 'svgStreetside()' is called from index.js - */ + 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; + + if (!isZooming && !isPanning) { + return; // no change + } // lock in either zooming or panning, don't allow both in minimap. - function drawImages(selection) { - var enabled = svgStreetside.enabled; - var service = getService(); - layer = selection.selectAll('.layer-streetside-images').data(service ? [0] : []); - layer.exit().remove(); - var layerEnter = layer.enter().append('g').attr('class', 'layer-streetside-images').style('display', enabled ? 'block' : 'none'); - layerEnter.append('g').attr('class', 'sequences'); - layerEnter.append('g').attr('class', 'markers'); - layer = layerEnter.merge(layer); - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadBubbles(projection); - } else { - editOff(); + if (!_gesture) { + _gesture = isZooming ? 'zoom' : 'pan'; } - } - } - /** - * drawImages.enabled(). - */ + var tMini = projection.transform(); + var tX, tY, scale; - drawImages.enabled = function (_) { - if (!arguments.length) return svgStreetside.enabled; - svgStreetside.enabled = _; + 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; + } - if (svgStreetside.enabled) { - showLayer(); - context.photos().on('change.streetside', update); - } else { - hideLayer(); - context.photos().on('change.streetside', null); + 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(); } - dispatch.call('change'); - return this; - }; - /** - * drawImages.supported(). - */ - + function zoomEnded() { + if (_skipEvents) return; + if (_gesture !== 'pan') return; + updateProjection(); + _gesture = null; + context.map().center(projection.invert(_cMini)); // recenter main map.. + } - drawImages.supported = function () { - return !!getService(); - }; + 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(); - init(); - return drawImages; - } + if (_isTransformed) { + utilSetTransform(tiles, 0, 0); + utilSetTransform(viewport, 0, 0); + _isTransformed = false; + } - function svgMapillaryImages(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); + zoom.scaleExtent([geoZoomToScale(0.5), geoZoomToScale(zMain - 3)]); + _skipEvents = true; + wrap.call(zoom.transform, _tCurr); + _skipEvents = false; + } - var minZoom = 12; - var minMarkerZoom = 16; - var minViewfieldZoom = 18; - var layer = select(null); + function redraw() { + clearTimeout(_timeoutID); + if (_isHidden) return; + updateProjection(); + var zMini = geoScaleToZoom(projection.scale()); // setup tile container - var _mapillary; + tiles = wrap.selectAll('.map-in-map-tiles').data([0]); + tiles = tiles.enter().append('div').attr('class', 'map-in-map-tiles').merge(tiles); // redraw background - var viewerCompassAngle; + 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 - function init() { - if (svgMapillaryImages.initialized) return; // run once + var overlaySources = context.background().overlayLayerSources(); + var activeOverlayLayers = []; - svgMapillaryImages.enabled = false; - svgMapillaryImages.initialized = true; - } + 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)); + } + } - function getService() { - if (services.mapillary && !_mapillary) { - _mapillary = services.mapillary; + 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 - _mapillary.event.on('loadedImages', throttledRedraw); - } else if (!services.mapillary && _mapillary) { - _mapillary = null; + 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; + }); + } } - return _mapillary; - } + function queueRedraw() { + clearTimeout(_timeoutID); + _timeoutID = setTimeout(function () { + redraw(); + }, 750); + } - function showLayer() { - var service = getService(); - if (!service) return; - editOn(); - layer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end', function () { - dispatch.call('change'); - }); - } + 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); - function hideLayer() { - throttledRedraw.cancel(); - layer.transition().duration(250).style('opacity', 0).on('end', editOff); - } + 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(); + }); + } + } - function editOn() { - layer.style('display', 'block'); - } + 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.. - function editOff() { - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); - } + _dMini = [200, 150]; //utilGetDimensions(wrap); - function click(d3_event, d) { - var service = getService(); - if (!service) return; - service.ensureViewerLoaded(context).then(function () { - service.selectImage(context, d.key).showViewer(context); + _cMini = geoVecScale(_dMini, 0.5); + context.map().on('drawn.map-in-map', function (drawn) { + if (drawn.full === true) { + redraw(); + } }); - context.map().centerEase(d.loc); - } - - function mouseover(d) { - var service = getService(); - if (service) service.setStyles(context, d); + redraw(); + context.keybinding().on(_t('background.minimap.key'), toggle); } - function mouseout() { - var service = getService(); - if (service) service.setStyles(context, null); - } + return mapInMap; + } - function transform(d) { - var t = svgPointTransform(projection)(d); + 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')); - if (d.pano && viewerCompassAngle !== null && isFinite(viewerCompassAngle)) { - t += ' rotate(' + Math.floor(viewerCompassAngle) + ',0,0)'; - } else if (d.ca) { - t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + function disableTooHigh() { + var canEdit = context.map().zoom() >= context.minEditableZoom(); + div.style('display', canEdit ? 'none' : 'block'); } - return t; - } + context.map().on('move.notice', debounce(disableTooHigh, 500)); + disableTooHigh(); + }; + } - function filterImages(images) { - 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(); + function uiPhotoviewer(context) { + var dispatch = dispatch$8('resize'); - if (!showsPano || !showsFlat) { - images = images.filter(function (image) { - if (image.pano) return showsPano; - return showsFlat; - }); - } + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - images = images.filter(function (image) { - return new Date(image.captured_at).getTime() >= fromTimestamp; - }); - } + function photoviewer(selection) { + selection.append('button').attr('class', 'thumb-hide').on('click', function () { + if (services.streetside) { + services.streetside.hideViewer(context); + } - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - images = images.filter(function (image) { - return new Date(image.captured_at).getTime() <= toTimestamp; - }); - } + if (services.mapillary) { + services.mapillary.hideViewer(context); + } - if (usernames) { - images = images.filter(function (image) { - return usernames.indexOf(image.captured_by) !== -1; - }); + if (services.openstreetcam) { + services.openstreetcam.hideViewer(context); + } + }).append('div').call(svgIcon('#iD-icon-close')); + + function preventDefault(d3_event) { + d3_event.preventDefault(); } - return images; - } + selection.append('button').attr('class', 'resize-handle-xy').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch, { + resizeOnX: true, + resizeOnY: true + })); + selection.append('button').attr('class', 'resize-handle-x').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch, { + resizeOnX: true + })); + selection.append('button').attr('class', 'resize-handle-y').on('touchstart touchdown touchend', preventDefault).on(_pointerPrefix + 'down', buildResizeListener(selection, 'resize', dispatch, { + resizeOnY: true + })); - function filterSequences(sequences, service) { - 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(); + 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; - if (!showsPano || !showsFlat) { - sequences = sequences.filter(function (sequence) { - if (sequence.properties.hasOwnProperty('pano')) { - if (sequence.properties.pano) return showsPano; - return showsFlat; - } else { - // if the sequence doesn't specify pano or not, search its images - var cProps = sequence.properties.coordinateProperties; + function startResize(d3_event) { + if (pointerId !== (d3_event.pointerId || 'mouse')) return; + d3_event.preventDefault(); + d3_event.stopPropagation(); + var mapSize = context.map().dimensions(); + + if (resizeOnX) { + var maxWidth = mapSize[0]; + var newWidth = clamp(startWidth + d3_event.clientX - startX, minWidth, maxWidth); + target.style('width', newWidth + 'px'); + } - if (cProps && cProps.image_keys && cProps.image_keys.length > 0) { - for (var index in cProps.image_keys) { - var imageKey = cProps.image_keys[index]; - var image = service.cachedImage(imageKey); + if (resizeOnY) { + var maxHeight = mapSize[1] - 90; // preserve space at top/bottom of map - if (image && image.hasOwnProperty('pano')) { - if (image.pano) return showsPano; - return showsFlat; - } - } - } + var newHeight = clamp(startHeight + startY - d3_event.clientY, minHeight, maxHeight); + target.style('height', newHeight + 'px'); } - return false; - }); - } + dispatch.call(eventName, target, utilGetDimensions(target, true)); + } - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - sequences = sequences.filter(function (sequence) { - return new Date(sequence.properties.captured_at).getTime() >= fromTimestamp; - }); - } + function clamp(num, min, max) { + return Math.max(min, Math.min(num, max)); + } - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - sequences = sequences.filter(function (sequence) { - return new Date(sequence.properties.captured_at).getTime() <= toTimestamp; - }); - } + function stopResize(d3_event) { + if (pointerId !== (d3_event.pointerId || 'mouse')) return; + d3_event.preventDefault(); + d3_event.stopPropagation(); // remove all the listeners we added - if (usernames) { - sequences = sequences.filter(function (sequence) { - return usernames.indexOf(sequence.properties.username) !== -1; - }); - } + select(window).on('.' + eventName, null); + } - return sequences; + 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); + + if (_pointerPrefix === 'pointer') { + select(window).on('pointercancel.' + eventName, stopResize, false); + } + }; + } } - function update() { - var z = ~~context.map().zoom(); - var showMarkers = z >= minMarkerZoom; - var showViewfields = z >= minViewfieldZoom; - var service = getService(); - var sequences = service ? service.sequences(projection) : []; - var images = service && showMarkers ? service.images(projection) : []; - images = filterImages(images); - sequences = filterSequences(sequences, service); - service.filterViewer(context); - var traces = layer.selectAll('.sequences').selectAll('.sequence').data(sequences, function (d) { - return d.properties.key; - }); // exit + 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) - traces.exit().remove(); // enter/update + var photoDimensions = utilGetDimensions(photoviewer, true); - traces = traces.enter().append('path').attr('class', 'sequence').merge(traces).attr('d', svgPath(projection).geojson); - var groups = layer.selectAll('.markers').selectAll('.viewfield-group').data(images, function (d) { - return d.key; - }); // exit + 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.call('resize', photoviewer, setPhotoDimensions); + } + }; - groups.exit().remove(); // enter + return utilRebind(photoviewer, dispatch, 'on'); + } - var groupsEnter = groups.enter().append('g').attr('class', 'viewfield-group').on('mouseenter', mouseover).on('mouseleave', mouseout).on('click', click); - groupsEnter.append('g').attr('class', 'viewfield-scale'); // update + 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')); + 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(); + }); + 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(); + }; + } - var markers = groups.merge(groupsEnter).sort(function (a, b) { - return b.loc[1] - a.loc[1]; // sort Y - }).attr('transform', transform).select('.viewfield-scale'); - markers.selectAll('circle').data([0]).enter().append('circle').attr('dx', '0').attr('dy', '0').attr('r', '6'); - var viewfields = markers.selectAll('.viewfield').data(showViewfields ? [0] : []); - viewfields.exit().remove(); - viewfields.enter() // viewfields may or may not be drawn... - .insert('path', 'circle') // but if they are, draw below the circles - .attr('class', 'viewfield').classed('pano', function () { - return this.parentNode.__data__.pano; - }).attr('transform', 'scale(1.5,1.5),translate(-8, -13)').attr('d', viewfieldPath); + function uiScale(context) { + var projection = context.projection, + isImperial = !_mainLocalizer.usesMetric(), + maxLength = 180, + tickHeight = 8; - function viewfieldPath() { - var d = this.parentNode.__data__; + 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; - if (d.pano) { - 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 (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 - function drawImages(selection) { - var enabled = svgMapillaryImages.enabled; - var service = getService(); - layer = selection.selectAll('.layer-mapillary').data(service ? [0] : []); - layer.exit().remove(); - var layerEnter = layer.enter().append('g').attr('class', 'layer-mapillary').style('display', enabled ? 'block' : 'none'); - layerEnter.append('g').attr('class', 'sequences'); - layerEnter.append('g').attr('class', 'markers'); - layer = layerEnter.merge(layer); - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadImages(projection); + for (i = 0; i < buckets.length; i++) { + val = buckets[i]; + + if (dist >= val) { + scale.dist = Math.floor(dist / val) * val; + break; } else { - editOff(); + scale.dist = +dist.toFixed(2); } } + + 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; } - drawImages.enabled = function (_) { - if (!arguments.length) return svgMapillaryImages.enabled; - svgMapillaryImages.enabled = _; + 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); + } - if (svgMapillaryImages.enabled) { - showLayer(); - context.photos().on('change.mapillary_images', update); - } else { - hideLayer(); - context.photos().on('change.mapillary_images', null); + return function (selection) { + function switchUnits() { + isImperial = !isImperial; + selection.call(update); } - dispatch.call('change'); - return this; - }; - - drawImages.supported = function () { - return !!getService(); + 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); + }); }; - - init(); - return drawImages; } - function svgMapillaryPosition(projection, context) { - var throttledRedraw = throttle(function () { - update(); - }, 1000); + function uiShortcuts(context) { + var detected = utilDetect(); + var _activeTab = 0; - var minZoom = 12; - var minViewfieldZoom = 18; - var layer = select(null); + var _modalSelection; - var _mapillary; + var _selection = select(null); - var viewerCompassAngle; + var _dataShortcuts; - function init() { - if (svgMapillaryPosition.initialized) return; // run once + function shortcutsModal(_modalSelection) { + _modalSelection.select('.modal').classed('modal-shortcuts', true); - svgMapillaryPosition.initialized = true; + var content = _modalSelection.select('.content'); + + 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 */ + }); } - function getService() { - if (services.mapillary && !_mapillary) { - _mapillary = services.mapillary; + 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(); - _mapillary.event.on('nodeChanged', throttledRedraw); + var i = _dataShortcuts.indexOf(d); - _mapillary.event.on('bearingChanged', function (e) { - viewerCompassAngle = e; - if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.currentView').filter(function (d) { - return d.pano; - }).attr('transform', transform); + _activeTab = i; + render(selection); + }); + tabsEnter.append('span').html(function (d) { + return _t.html(d.text); + }); // Update + + 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; + }); + sectionRows.append('td'); + sectionRows.append('td').attr('class', 'shortcut-section').append('h3').html(function (d) { + return _t.html(d.text); + }); + var shortcutRows = rowsEnter.filter(function (d) { + return d.shortcuts; + }); + var shortcutKeys = shortcutRows.append('td').attr('class', 'shortcut-keys'); + var modifierKeys = shortcutKeys.filter(function (d) { + return d.modifiers; + }); + 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); }); - } else if (!services.mapillary && _mapillary) { - _mapillary = null; - } + selection.append('span').html('+'); + }); + shortcutKeys.selectAll('kbd.shortcut').data(function (d) { + var arr = d.shortcuts; - return _mapillary; - } + 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 - function editOn() { - layer.style('display', 'block'); - } - function editOff() { - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); - } + 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/); - function transform(d) { - var t = svgPointTransform(projection)(d); + 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; + }); + } - if (d.pano && viewerCompassAngle !== null && isFinite(viewerCompassAngle)) { - t += ' rotate(' + Math.floor(viewerCompassAngle) + ',0,0)'; - } else if (d.ca) { - t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; - } + 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); + } + }); + 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); + }); + }); + shortcutRows.append('td').attr('class', 'shortcut-desc').html(function (d) { + return d.text ? _t.html(d.text) : "\xA0"; + }); // Update - return t; + wrapper.selectAll('.shortcut-tab').style('display', function (d, i) { + return i === _activeTab ? 'flex' : 'none'; + }); } - function update() { - var z = ~~context.map().zoom(); - var showViewfields = z >= minViewfieldZoom; - var service = getService(); - var node = service && service.getActiveImage(); - var groups = layer.selectAll('.markers').selectAll('.viewfield-group').data(node ? [node] : [], function (d) { - return d.key; - }); // exit - - groups.exit().remove(); // enter + return function (selection, show) { + _selection = selection; - var groupsEnter = groups.enter().append('g').attr('class', 'viewfield-group currentView highlighted'); - groupsEnter.append('g').attr('class', 'viewfield-scale'); // update + if (show) { + _modalSelection = uiModal(selection); - var markers = groups.merge(groupsEnter).attr('transform', transform).select('.viewfield-scale'); - markers.selectAll('circle').data([0]).enter().append('circle').attr('dx', '0').attr('dy', '0').attr('r', '6'); - var viewfields = markers.selectAll('.viewfield').data(showViewfields ? [0] : []); - viewfields.exit().remove(); - viewfields.enter().insert('path', 'circle').attr('class', 'viewfield').classed('pano', function () { - return this.parentNode.__data__.pano; - }).attr('transform', 'scale(1.5,1.5),translate(-8, -13)').attr('d', viewfieldPath); + _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(); - function viewfieldPath() { - var d = this.parentNode.__data__; + _modalSelection = null; + } + } else { + _modalSelection = uiModal(_selection); - if (d.pano) { - 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'; - } + _modalSelection.call(shortcutsModal); + } + }); } - } + }; + } - function drawImages(selection) { - var service = getService(); - layer = selection.selectAll('.layer-mapillary-position').data(service ? [0] : []); - layer.exit().remove(); - var layerEnter = layer.enter().append('g').attr('class', 'layer-mapillary-position'); - layerEnter.append('g').attr('class', 'markers'); - layer = layerEnter.merge(layer); + function uiDataHeader() { + var _datum; - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - } else { - editOff(); - } + function dataHeader(selection) { + var header = selection.selectAll('.data-header').data(_datum ? [_datum] : [], function (d) { + return d.__featurehash__; + }); + header.exit().remove(); + var headerEnter = header.enter().append('div').attr('class', 'data-header'); + var iconEnter = headerEnter.append('div').attr('class', 'data-header-icon'); + iconEnter.append('div').attr('class', 'preset-icon-28').call(svgIcon('#iD-icon-data', 'note-fill')); + headerEnter.append('div').attr('class', 'data-header-label').html(_t.html('map_data.layers.custom.title')); } - drawImages.enabled = function () { - update(); + dataHeader.datum = function (val) { + if (!arguments.length) return _datum; + _datum = val; return this; }; - drawImages.supported = function () { - return !!getService(); - }; - - init(); - return drawImages; + return dataHeader; } - function svgMapillarySigns(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); - - var minZoom = 12; - var layer = select(null); - - var _mapillary; - - function init() { - if (svgMapillarySigns.initialized) return; // run once - - svgMapillarySigns.enabled = false; - svgMapillarySigns.initialized = true; - } - - function getService() { - if (services.mapillary && !_mapillary) { - _mapillary = services.mapillary; + // It is keyed on the `value` of the entry. Data should be an array of objects like: + // [{ + // value: 'string value', // required + // display: 'label html' // optional + // title: 'hover text' // optional + // terms: ['search terms'] // optional + // }, ...] - _mapillary.event.on('loadedSigns', throttledRedraw); - } else if (!services.mapillary && _mapillary) { - _mapillary = null; - } + var _comboHideTimerID; - return _mapillary; - } + function uiCombobox(context, klass) { + var dispatch = dispatch$8('accept', 'cancel'); + var container = context.container(); + var _suggestions = []; + var _data = []; + var _fetched = {}; + var _selected = null; + var _canAutocomplete = true; + var _caseSensitive = false; + var _cancelFetch = false; + var _minItems = 2; + var _tDown = 0; - function showLayer() { - var service = getService(); - if (!service) return; - service.loadSignResources(context); - editOn(); - } + var _mouseEnterHandler, _mouseLeaveHandler; - function hideLayer() { - throttledRedraw.cancel(); - editOff(); - } + var _fetcher = function _fetcher(val, cb) { + cb(_data.filter(function (d) { + var terms = d.terms || []; + terms.push(d.value); + return terms.some(function (term) { + return term.toString().toLowerCase().indexOf(val.toLowerCase()) !== -1; + }); + })); + }; - function editOn() { - layer.style('display', 'block'); - } + var combobox = function combobox(input, attachTo) { + if (!input || input.empty()) return; + input.classed('combobox-input', true).on('focus.combo-input', focus).on('blur.combo-input', blur).on('keydown.combo-input', keydown).on('keyup.combo-input', keyup).on('input.combo-input', change).on('mousedown.combo-input', mousedown).each(function () { + var parent = this.parentNode; + var sibling = this.nextSibling; + select(parent).selectAll('.combobox-caret').filter(function (d) { + return d === input.node(); + }).data([input.node()]).enter().insert('div', function () { + return sibling; + }).attr('class', 'combobox-caret').on('mousedown.combo-caret', function (d3_event) { + d3_event.preventDefault(); // don't steal focus from input - function editOff() { - layer.selectAll('.icon-sign').remove(); - layer.style('display', 'none'); - } + input.node().focus(); // focus the input as if it was clicked - function click(d3_event, d) { - var service = getService(); - if (!service) return; - context.map().centerEase(d.loc); - var selectedImageKey = service.getSelectedImageKey(); - var imageKey; - var highlightedDetection; // Pick one of the images the sign was detected in, - // preference given to an image already selected. + mousedown(d3_event); + }).on('mouseup.combo-caret', function (d3_event) { + d3_event.preventDefault(); // don't steal focus from input - d.detections.forEach(function (detection) { - if (!imageKey || selectedImageKey === detection.image_key) { - imageKey = detection.image_key; - highlightedDetection = detection; - } + mouseup(d3_event); + }); }); - if (imageKey === selectedImageKey) { - service.highlightDetection(highlightedDetection).selectImage(context, imageKey); - } else { - service.ensureViewerLoaded(context).then(function () { - service.highlightDetection(highlightedDetection).selectImage(context, imageKey).showViewer(context); - }); - } - } + function mousedown(d3_event) { + if (d3_event.button !== 0) return; // left click only - function filterData(detectedFeatures) { - var service = getService(); - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + _tDown = +new Date(); // clear selection - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - detectedFeatures = detectedFeatures.filter(function (feature) { - return new Date(feature.last_seen_at).getTime() >= fromTimestamp; - }); - } + var start = input.property('selectionStart'); + var end = input.property('selectionEnd'); - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - detectedFeatures = detectedFeatures.filter(function (feature) { - return new Date(feature.first_seen_at).getTime() <= toTimestamp; - }); - } + if (start !== end) { + var val = utilGetSetValue(input); + input.node().setSelectionRange(val.length, val.length); + return; + } - if (usernames && service) { - detectedFeatures = detectedFeatures.filter(function (feature) { - return feature.detections.some(function (detection) { - var imageKey = detection.image_key; - var image = service.cachedImage(imageKey); - return image && usernames.indexOf(image.captured_by) !== -1; - }); - }); + input.on('mouseup.combo-input', mouseup); } - return detectedFeatures; - } + function mouseup(d3_event) { + input.on('mouseup.combo-input', null); + if (d3_event.button !== 0) return; // left click only - function update() { - var service = getService(); - var data = service ? service.signs(projection) : []; - data = filterData(data); - var selectedImageKey = service.getSelectedImageKey(); - var transform = svgPointTransform(projection); - var signs = layer.selectAll('.icon-sign').data(data, function (d) { - return d.key; - }); // exit + if (input.node() !== document.activeElement) return; // exit if this input is not focused - signs.exit().remove(); // enter + var start = input.property('selectionStart'); + var end = input.property('selectionEnd'); + if (start !== end) return; // exit if user is selecting + // not showing or showing for a different field - try to show it. - var enter = signs.enter().append('g').attr('class', 'icon-sign icon-detected').on('click', click); - enter.append('use').attr('width', '24px').attr('height', '24px').attr('x', '-12px').attr('y', '-12px').attr('xlink:href', function (d) { - return '#' + d.value; - }); - enter.append('rect').attr('width', '24px').attr('height', '24px').attr('x', '-12px').attr('y', '-12px'); // update + var combo = container.selectAll('.combobox'); - signs.merge(enter).attr('transform', transform).classed('currentView', function (d) { - return d.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); - }).sort(function (a, b) { - var aSelected = a.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); - var bSelected = b.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); + if (combo.empty() || combo.datum() !== input.node()) { + var tOrig = _tDown; + window.setTimeout(function () { + if (tOrig !== _tDown) return; // exit if user double clicked - if (aSelected === bSelected) { - return b.loc[1] - a.loc[1]; // sort Y - } else if (aSelected) { - return 1; + fetchComboData('', function () { + show(); + render(); + }); + }, 250); + } else { + hide(); } + } - return -1; - }); - } - - function drawSigns(selection) { - var enabled = svgMapillarySigns.enabled; - var service = getService(); - layer = selection.selectAll('.layer-mapillary-signs').data(service ? [0] : []); - layer.exit().remove(); - layer = layer.enter().append('g').attr('class', 'layer-mapillary-signs layer-mapillary-detections').style('display', enabled ? 'block' : 'none').merge(layer); + function focus() { + fetchComboData(''); // prefetch values (may warm taginfo cache) + } - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadSigns(projection); - service.showSignDetections(true); - } else { - editOff(); - } - } else if (service) { - service.showSignDetections(false); + function blur() { + _comboHideTimerID = window.setTimeout(hide, 75); } - } - drawSigns.enabled = function (_) { - if (!arguments.length) return svgMapillarySigns.enabled; - svgMapillarySigns.enabled = _; + function show() { + hide(); // remove any existing - if (svgMapillarySigns.enabled) { - showLayer(); - context.photos().on('change.mapillary_signs', update); - } else { - hideLayer(); - context.photos().on('change.mapillary_signs', null); + container.insert('div', ':first-child').datum(input.node()).attr('class', 'combobox' + (klass ? ' combobox-' + klass : '')).style('position', 'absolute').style('display', 'block').style('left', '0px').on('mousedown.combo-container', function (d3_event) { + // prevent moving focus out of the input field + d3_event.preventDefault(); + }); + container.on('scroll.combo-scroll', render, true); } - dispatch.call('change'); - return this; - }; + function hide() { + if (_comboHideTimerID) { + window.clearTimeout(_comboHideTimerID); + _comboHideTimerID = undefined; + } + + container.selectAll('.combobox').remove(); + container.on('scroll.combo-scroll', null); + } - drawSigns.supported = function () { - return !!getService(); - }; + function keydown(d3_event) { + var shown = !container.selectAll('.combobox').empty(); + var tagName = input.node() ? input.node().tagName.toLowerCase() : ''; - init(); - return drawSigns; - } + switch (d3_event.keyCode) { + case 8: // â« Backspace - function svgMapillaryMapFeatures(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); + case 46: + // ⦠Delete + d3_event.stopPropagation(); + _selected = null; + render(); + input.on('input.combo-input', function () { + var start = input.property('selectionStart'); + input.node().setSelectionRange(start, start); + input.on('input.combo-input', change); + }); + break; - var minZoom = 12; - var layer = select(null); + case 9: + // ⥠Tab + accept(); + break; - var _mapillary; + case 13: + // â© Return + d3_event.preventDefault(); + d3_event.stopPropagation(); + break; - function init() { - if (svgMapillaryMapFeatures.initialized) return; // run once + case 38: + // â Up arrow + if (tagName === 'textarea' && !shown) return; + d3_event.preventDefault(); - svgMapillaryMapFeatures.enabled = false; - svgMapillaryMapFeatures.initialized = true; - } + if (tagName === 'input' && !shown) { + show(); + } - function getService() { - if (services.mapillary && !_mapillary) { - _mapillary = services.mapillary; + nav(-1); + break; - _mapillary.event.on('loadedMapFeatures', throttledRedraw); - } else if (!services.mapillary && _mapillary) { - _mapillary = null; - } + case 40: + // â Down arrow + if (tagName === 'textarea' && !shown) return; + d3_event.preventDefault(); - return _mapillary; - } + if (tagName === 'input' && !shown) { + show(); + } - function showLayer() { - var service = getService(); - if (!service) return; - service.loadObjectResources(context); - editOn(); - } + nav(+1); + break; + } + } - function hideLayer() { - throttledRedraw.cancel(); - editOff(); - } + function keyup(d3_event) { + switch (d3_event.keyCode) { + case 27: + // â Escape + cancel(); + break; - function editOn() { - layer.style('display', 'block'); - } + case 13: + // â© Return + accept(); + break; + } + } // Called whenever the input value is changed (e.g. on typing) - function editOff() { - layer.selectAll('.icon-map-feature').remove(); - layer.style('display', 'none'); - } - function click(d3_event, d) { - var service = getService(); - if (!service) return; - context.map().centerEase(d.loc); - var selectedImageKey = service.getSelectedImageKey(); - var imageKey; - var highlightedDetection; // Pick one of the images the map feature was detected in, - // preference given to an image already selected. + function change() { + fetchComboData(value(), function () { + _selected = null; + var val = input.property('value'); - d.detections.forEach(function (detection) { - if (!imageKey || selectedImageKey === detection.image_key) { - imageKey = detection.image_key; - highlightedDetection = detection; - } - }); + if (_suggestions.length) { + if (input.property('selectionEnd') === val.length) { + _selected = tryAutocomplete(); + } - if (imageKey === selectedImageKey) { - service.highlightDetection(highlightedDetection).selectImage(context, imageKey); - } else { - service.ensureViewerLoaded(context).then(function () { - service.highlightDetection(highlightedDetection).selectImage(context, imageKey).showViewer(context); - }); - } - } + if (!_selected) { + _selected = val; + } + } - function filterData(detectedFeatures) { - var service = getService(); - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + if (val.length) { + var combo = container.selectAll('.combobox'); - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - detectedFeatures = detectedFeatures.filter(function (feature) { - return new Date(feature.last_seen_at).getTime() >= fromTimestamp; - }); - } + if (combo.empty()) { + show(); + } + } else { + hide(); + } - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - detectedFeatures = detectedFeatures.filter(function (feature) { - return new Date(feature.first_seen_at).getTime() <= toTimestamp; + render(); }); - } + } // Called when the user presses up/down arrows to navigate the list - if (usernames && service) { - detectedFeatures = detectedFeatures.filter(function (feature) { - return feature.detections.some(function (detection) { - var imageKey = detection.image_key; - var image = service.cachedImage(imageKey); - return image && usernames.indexOf(image.captured_by) !== -1; - }); - }); - } - return detectedFeatures; - } + function nav(dir) { + if (_suggestions.length) { + // try to determine previously selected index.. + var index = -1; - function update() { - var service = getService(); - var data = service ? service.mapFeatures(projection) : []; - data = filterData(data); - var selectedImageKey = service && service.getSelectedImageKey(); - var transform = svgPointTransform(projection); - var mapFeatures = layer.selectAll('.icon-map-feature').data(data, function (d) { - return d.key; - }); // exit + for (var i = 0; i < _suggestions.length; i++) { + if (_selected && _suggestions[i].value === _selected) { + index = i; + break; + } + } // pick new _selected - mapFeatures.exit().remove(); // enter - var enter = mapFeatures.enter().append('g').attr('class', 'icon-map-feature icon-detected').on('click', click); - enter.append('title').text(function (d) { - var id = d.value.replace(/--/g, '.').replace(/-/g, '_'); - return _t('mapillary_map_features.' + id); - }); - enter.append('use').attr('width', '24px').attr('height', '24px').attr('x', '-12px').attr('y', '-12px').attr('xlink:href', function (d) { - if (d.value === 'object--billboard') { - // no billboard icon right now, so use the advertisement icon - return '#object--sign--advertisement'; + index = Math.max(Math.min(index + dir, _suggestions.length - 1), 0); + _selected = _suggestions[index].value; + input.property('value', _selected); } - return '#' + d.value; - }); - enter.append('rect').attr('width', '24px').attr('height', '24px').attr('x', '-12px').attr('y', '-12px'); // update + render(); + ensureVisible(); + } - mapFeatures.merge(enter).attr('transform', transform).classed('currentView', function (d) { - return d.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); - }).sort(function (a, b) { - var aSelected = a.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); - var bSelected = b.detections.some(function (detection) { - return detection.image_key === selectedImageKey; - }); + function ensureVisible() { + var combo = container.selectAll('.combobox'); + if (combo.empty()) return; + var containerRect = container.node().getBoundingClientRect(); + var comboRect = combo.node().getBoundingClientRect(); - if (aSelected === bSelected) { - return b.loc[1] - a.loc[1]; // sort Y - } else if (aSelected) { - return 1; - } + if (comboRect.bottom > containerRect.bottom) { + var node = attachTo ? attachTo.node() : input.node(); + node.scrollIntoView({ + behavior: 'instant', + block: 'center' + }); + render(); + } // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move - return -1; - }); - } - function drawMapFeatures(selection) { - var enabled = svgMapillaryMapFeatures.enabled; - var service = getService(); - layer = selection.selectAll('.layer-mapillary-map-features').data(service ? [0] : []); - layer.exit().remove(); - layer = layer.enter().append('g').attr('class', 'layer-mapillary-map-features layer-mapillary-detections').style('display', enabled ? 'block' : 'none').merge(layer); + var selected = combo.selectAll('.combobox-option.selected').node(); - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadMapFeatures(projection); - service.showFeatureDetections(true); - } else { - editOff(); + if (selected) { + selected.scrollIntoView({ + behavior: 'smooth', + block: 'nearest' + }); } - } else if (service) { - service.showFeatureDetections(false); } - } - - drawMapFeatures.enabled = function (_) { - if (!arguments.length) return svgMapillaryMapFeatures.enabled; - svgMapillaryMapFeatures.enabled = _; - if (svgMapillaryMapFeatures.enabled) { - showLayer(); - context.photos().on('change.mapillary_map_features', update); - } else { - hideLayer(); - context.photos().on('change.mapillary_map_features', null); - } + function value() { + var value = input.property('value'); + var start = input.property('selectionStart'); + var end = input.property('selectionEnd'); - dispatch.call('change'); - return this; - }; + if (start && end) { + value = value.substring(0, start); + } - drawMapFeatures.supported = function () { - return !!getService(); - }; + return value; + } - init(); - return drawMapFeatures; - } + function fetchComboData(v, cb) { + _cancelFetch = false; - function svgOpenstreetcamImages(projection, context, dispatch) { - var throttledRedraw = throttle(function () { - dispatch.call('change'); - }, 1000); + _fetcher.call(input, v, function (results) { + // already chose a value, don't overwrite or autocomplete it + if (_cancelFetch) return; + _suggestions = results; + results.forEach(function (d) { + _fetched[d.value] = d; + }); - var minZoom = 12; - var minMarkerZoom = 16; - var minViewfieldZoom = 18; - var layer = select(null); + if (cb) { + cb(); + } + }); + } - var _openstreetcam; + function tryAutocomplete() { + if (!_canAutocomplete) return; + var val = _caseSensitive ? value() : value().toLowerCase(); + if (!val) return; // Don't autocomplete if user is typing a number - #4935 - function init() { - if (svgOpenstreetcamImages.initialized) return; // run once + if (!isNaN(parseFloat(val)) && isFinite(val)) return; + var bestIndex = -1; - svgOpenstreetcamImages.enabled = false; - svgOpenstreetcamImages.initialized = true; - } + for (var i = 0; i < _suggestions.length; i++) { + var suggestion = _suggestions[i].value; + var compare = _caseSensitive ? suggestion : suggestion.toLowerCase(); // if search string matches suggestion exactly, pick it.. - function getService() { - if (services.openstreetcam && !_openstreetcam) { - _openstreetcam = services.openstreetcam; + if (compare === val) { + bestIndex = i; + break; // otherwise lock in the first result that starts with the search string.. + } else if (bestIndex === -1 && compare.indexOf(val) === 0) { + bestIndex = i; + } + } - _openstreetcam.event.on('loadedImages', throttledRedraw); - } else if (!services.openstreetcam && _openstreetcam) { - _openstreetcam = null; + if (bestIndex !== -1) { + var bestVal = _suggestions[bestIndex].value; + input.property('value', bestVal); + input.node().setSelectionRange(val.length, bestVal.length); + return bestVal; + } } - return _openstreetcam; - } - - function showLayer() { - var service = getService(); - if (!service) return; - editOn(); - layer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end', function () { - dispatch.call('change'); - }); - } + function render() { + if (_suggestions.length < _minItems || document.activeElement !== input.node()) { + hide(); + return; + } - function hideLayer() { - throttledRedraw.cancel(); - layer.transition().duration(250).style('opacity', 0).on('end', editOff); - } + var shown = !container.selectAll('.combobox').empty(); + if (!shown) return; + var combo = container.selectAll('.combobox'); + var options = combo.selectAll('.combobox-option').data(_suggestions, function (d) { + return d.value; + }); + options.exit().remove(); // enter/update - function editOn() { - layer.style('display', 'block'); - } + options.enter().append('a').attr('class', function (d) { + return 'combobox-option ' + (d.klass || ''); + }).attr('title', function (d) { + return d.title; + }).html(function (d) { + return d.display || d.value; + }).on('mouseenter', _mouseEnterHandler).on('mouseleave', _mouseLeaveHandler).merge(options).classed('selected', function (d) { + return d.value === _selected; + }).on('click.combo-option', accept).order(); + var node = attachTo ? attachTo.node() : input.node(); + var containerRect = container.node().getBoundingClientRect(); + var rect = node.getBoundingClientRect(); + combo.style('left', rect.left + 5 - containerRect.left + 'px').style('width', rect.width - 10 + 'px').style('top', rect.height + rect.top - containerRect.top + 'px'); + } // Dispatches an 'accept' event + // Then hides the combobox. - function editOff() { - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); - } - function click(d3_event, d) { - var service = getService(); - if (!service) return; - service.ensureViewerLoaded(context).then(function () { - service.selectImage(context, d.key).showViewer(context); - }); - context.map().centerEase(d.loc); - } + function accept(d3_event, d) { + _cancelFetch = true; + var thiz = input.node(); - function mouseover(d3_event, d) { - var service = getService(); - if (service) service.setStyles(context, d); - } + if (d) { + // user clicked on a suggestion + utilGetSetValue(input, d.value); // replace field contents - function mouseout() { - var service = getService(); - if (service) service.setStyles(context, null); - } + utilTriggerEvent(input, 'change'); + } // clear (and keep) selection - function transform(d) { - var t = svgPointTransform(projection)(d); - if (d.ca) { - t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; - } + var val = utilGetSetValue(input); + thiz.setSelectionRange(val.length, val.length); + d = _fetched[val]; + dispatch.call('accept', thiz, d, val); + hide(); + } // Dispatches an 'cancel' event + // Then hides the combobox. - return t; - } - function filterImages(images) { - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + function cancel() { + _cancelFetch = true; + var thiz = input.node(); // clear (and remove) selection, and replace field contents - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - images = images.filter(function (item) { - return new Date(item.captured_at).getTime() >= fromTimestamp; - }); + var val = utilGetSetValue(input); + var start = input.property('selectionStart'); + var end = input.property('selectionEnd'); + val = val.slice(0, start) + val.slice(end); + utilGetSetValue(input, val); + thiz.setSelectionRange(val.length, val.length); + dispatch.call('cancel', thiz); + hide(); } + }; - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - images = images.filter(function (item) { - return new Date(item.captured_at).getTime() <= toTimestamp; - }); - } + combobox.canAutocomplete = function (val) { + if (!arguments.length) return _canAutocomplete; + _canAutocomplete = val; + return combobox; + }; - if (usernames) { - images = images.filter(function (item) { - return usernames.indexOf(item.captured_by) !== -1; - }); - } + combobox.caseSensitive = function (val) { + if (!arguments.length) return _caseSensitive; + _caseSensitive = val; + return combobox; + }; - return images; - } + combobox.data = function (val) { + if (!arguments.length) return _data; + _data = val; + return combobox; + }; - function filterSequences(sequences) { - var fromDate = context.photos().fromDate(); - var toDate = context.photos().toDate(); - var usernames = context.photos().usernames(); + combobox.fetcher = function (val) { + if (!arguments.length) return _fetcher; + _fetcher = val; + return combobox; + }; - if (fromDate) { - var fromTimestamp = new Date(fromDate).getTime(); - sequences = sequences.filter(function (image) { - return new Date(image.properties.captured_at).getTime() >= fromTimestamp; - }); - } + combobox.minItems = function (val) { + if (!arguments.length) return _minItems; + _minItems = val; + return combobox; + }; - if (toDate) { - var toTimestamp = new Date(toDate).getTime(); - sequences = sequences.filter(function (image) { - return new Date(image.properties.captured_at).getTime() <= toTimestamp; - }); - } + combobox.itemsMouseEnter = function (val) { + if (!arguments.length) return _mouseEnterHandler; + _mouseEnterHandler = val; + return combobox; + }; - if (usernames) { - sequences = sequences.filter(function (image) { - return usernames.indexOf(image.properties.captured_by) !== -1; - }); - } + combobox.itemsMouseLeave = function (val) { + if (!arguments.length) return _mouseLeaveHandler; + _mouseLeaveHandler = val; + return combobox; + }; - return sequences; - } + return utilRebind(combobox, dispatch, 'on'); + } - function update() { - var viewer = context.container().select('.photoviewer'); - var selected = viewer.empty() ? undefined : viewer.datum(); - var z = ~~context.map().zoom(); - var showMarkers = z >= minMarkerZoom; - var showViewfields = z >= minViewfieldZoom; - var service = getService(); - var sequences = []; - var images = []; + uiCombobox.off = function (input, context) { + input.on('focus.combo-input', null).on('blur.combo-input', null).on('keydown.combo-input', null).on('keyup.combo-input', null).on('input.combo-input', null).on('mousedown.combo-input', null).on('mouseup.combo-input', null); + context.container().on('scroll.combo-scroll', null); + }; + + function uiDisclosure(context, key, expandedDefault) { + var dispatch = dispatch$8('toggled'); - if (context.photos().showsFlat()) { - sequences = service ? service.sequences(projection) : []; - images = service && showMarkers ? service.images(projection) : []; - sequences = filterSequences(sequences); - images = filterImages(images); + var _expanded; + + var _label = utilFunctor(''); + + var _updatePreference = true; + + var _content = function _content() {}; + + var disclosure = function disclosure(selection) { + if (_expanded === undefined || _expanded === null) { + // loading _expanded here allows it to be reset by calling `disclosure.expanded(null)` + var preference = corePreferences('disclosure.' + key + '.expanded'); + _expanded = preference === null ? !!expandedDefault : preference === 'true'; } - var traces = layer.selectAll('.sequences').selectAll('.sequence').data(sequences, function (d) { - return d.properties.key; - }); // exit + var hideToggle = selection.selectAll('.hide-toggle-' + key).data([0]); // enter - traces.exit().remove(); // enter/update + var hideToggleEnter = hideToggle.enter().append('a').attr('href', '#').attr('class', 'hide-toggle hide-toggle-' + key).call(svgIcon('', 'pre-text', 'hide-toggle-icon')); + hideToggleEnter.append('span').attr('class', 'hide-toggle-text'); // update - traces = traces.enter().append('path').attr('class', 'sequence').merge(traces).attr('d', svgPath(projection).geojson); - var groups = layer.selectAll('.markers').selectAll('.viewfield-group').data(images, function (d) { - return d.key; - }); // exit + hideToggle = hideToggleEnter.merge(hideToggle); + hideToggle.on('click', toggle).classed('expanded', _expanded); + hideToggle.selectAll('.hide-toggle-text').html(_label()); + hideToggle.selectAll('.hide-toggle-icon').attr('xlink:href', _expanded ? '#iD-icon-down' : _mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'); + var wrap = selection.selectAll('.disclosure-wrap').data([0]); // enter/update - groups.exit().remove(); // enter + wrap = wrap.enter().append('div').attr('class', 'disclosure-wrap disclosure-wrap-' + key).merge(wrap).classed('hide', !_expanded); - var groupsEnter = groups.enter().append('g').attr('class', 'viewfield-group').on('mouseenter', mouseover).on('mouseleave', mouseout).on('click', click); - groupsEnter.append('g').attr('class', 'viewfield-scale'); // update + if (_expanded) { + wrap.call(_content); + } - var markers = groups.merge(groupsEnter).sort(function (a, b) { - return a === selected ? 1 : b === selected ? -1 : b.loc[1] - a.loc[1]; // sort Y - }).attr('transform', transform).select('.viewfield-scale'); - markers.selectAll('circle').data([0]).enter().append('circle').attr('dx', '0').attr('dy', '0').attr('r', '6'); - var viewfields = markers.selectAll('.viewfield').data(showViewfields ? [0] : []); - viewfields.exit().remove(); - viewfields.enter() // viewfields may or may not be drawn... - .insert('path', 'circle') // but if they are, draw below the circles - .attr('class', 'viewfield').attr('transform', 'scale(1.5,1.5),translate(-8, -13)').attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'); - } + function toggle(d3_event) { + d3_event.preventDefault(); + _expanded = !_expanded; - function drawImages(selection) { - var enabled = svgOpenstreetcamImages.enabled, - service = getService(); - layer = selection.selectAll('.layer-openstreetcam').data(service ? [0] : []); - layer.exit().remove(); - var layerEnter = layer.enter().append('g').attr('class', 'layer-openstreetcam').style('display', enabled ? 'block' : 'none'); - layerEnter.append('g').attr('class', 'sequences'); - layerEnter.append('g').attr('class', 'markers'); - layer = layerEnter.merge(layer); + if (_updatePreference) { + corePreferences('disclosure.' + key + '.expanded', _expanded); + } - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadImages(projection); - } else { - editOff(); + hideToggle.classed('expanded', _expanded); + hideToggle.selectAll('.hide-toggle-icon').attr('xlink:href', _expanded ? '#iD-icon-down' : _mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'); + wrap.call(uiToggle(_expanded)); + + if (_expanded) { + wrap.call(_content); } + + dispatch.call('toggled', this, _expanded); } - } + }; - drawImages.enabled = function (_) { - if (!arguments.length) return svgOpenstreetcamImages.enabled; - svgOpenstreetcamImages.enabled = _; + disclosure.label = function (val) { + if (!arguments.length) return _label; + _label = utilFunctor(val); + return disclosure; + }; - if (svgOpenstreetcamImages.enabled) { - showLayer(); - context.photos().on('change.openstreetcam_images', update); - } else { - hideLayer(); - context.photos().on('change.openstreetcam_images', null); - } + disclosure.expanded = function (val) { + if (!arguments.length) return _expanded; + _expanded = val; + return disclosure; + }; - dispatch.call('change'); - return this; + disclosure.updatePreference = function (val) { + if (!arguments.length) return _updatePreference; + _updatePreference = val; + return disclosure; }; - drawImages.supported = function () { - return !!getService(); + disclosure.content = function (val) { + if (!arguments.length) return _content; + _content = val; + return disclosure; }; - init(); - return drawImages; + return utilRebind(disclosure, dispatch, 'on'); } - function svgOsm(projection, context, dispatch) { - var enabled = true; + // Can be labeled and collapsible. - function drawOsm(selection) { - selection.selectAll('.layer-osm').data(['covered', 'areas', 'lines', 'points', 'labels']).enter().append('g').attr('class', function (d) { - return 'layer-osm ' + d; - }); - selection.selectAll('.layer-osm.points').selectAll('.points-group').data(['points', 'midpoints', 'vertices', 'turns']).enter().append('g').attr('class', function (d) { - return 'points-group ' + d; - }); - } + function uiSection(id, context) { + var _classes = utilFunctor(''); - function showLayer() { - var layer = context.surface().selectAll('.data-layer.osm'); - layer.interrupt(); - layer.classed('disabled', false).style('opacity', 0).transition().duration(250).style('opacity', 1).on('end interrupt', function () { - dispatch.call('change'); - }); - } + var _shouldDisplay; - function hideLayer() { - var layer = context.surface().selectAll('.data-layer.osm'); - layer.interrupt(); - layer.transition().duration(250).style('opacity', 0).on('end interrupt', function () { - layer.classed('disabled', true); - dispatch.call('change'); - }); - } + var _content; - drawOsm.enabled = function (val) { - if (!arguments.length) return enabled; - enabled = val; + var _disclosure; - if (enabled) { - showLayer(); - } else { - hideLayer(); - } + var _label; - dispatch.call('change'); - return this; - }; + var _expandedByDefault = utilFunctor(true); - return drawOsm; - } + var _disclosureContent; - var _notesEnabled = false; + var _disclosureExpanded; - var _osmService; + var _containerSelection = select(null); - function svgNotes(projection, context, dispatch$1) { - if (!dispatch$1) { - dispatch$1 = dispatch('change'); - } + var section = { + id: id + }; - var throttledRedraw = throttle(function () { - dispatch$1.call('change'); - }, 1000); + section.classes = function (val) { + if (!arguments.length) return _classes; + _classes = utilFunctor(val); + return section; + }; - var minZoom = 12; - var touchLayer = select(null); - var drawLayer = select(null); - var _notesVisible = false; + section.label = function (val) { + if (!arguments.length) return _label; + _label = utilFunctor(val); + return section; + }; - function markerPath(selection, klass) { - selection.attr('class', klass).attr('transform', 'translate(-8, -22)').attr('d', 'm17.5,0l-15,0c-1.37,0 -2.5,1.12 -2.5,2.5l0,11.25c0,1.37 1.12,2.5 2.5,2.5l3.75,0l0,3.28c0,0.38 0.43,0.6 0.75,0.37l4.87,-3.65l5.62,0c1.37,0 2.5,-1.12 2.5,-2.5l0,-11.25c0,-1.37 -1.12,-2.5 -2.5,-2.5z'); - } // Loosely-coupled osm service for fetching notes. + section.expandedByDefault = function (val) { + if (!arguments.length) return _expandedByDefault; + _expandedByDefault = utilFunctor(val); + return section; + }; + section.shouldDisplay = function (val) { + if (!arguments.length) return _shouldDisplay; + _shouldDisplay = utilFunctor(val); + return section; + }; - function getService() { - if (services.osm && !_osmService) { - _osmService = services.osm; + section.content = function (val) { + if (!arguments.length) return _content; + _content = val; + return section; + }; - _osmService.on('loadedNotes', throttledRedraw); - } else if (!services.osm && _osmService) { - _osmService = null; - } + section.disclosureContent = function (val) { + if (!arguments.length) return _disclosureContent; + _disclosureContent = val; + return section; + }; - return _osmService; - } // Show the notes + section.disclosureExpanded = function (val) { + if (!arguments.length) return _disclosureExpanded; + _disclosureExpanded = val; + return section; + }; // may be called multiple times - function editOn() { - if (!_notesVisible) { - _notesVisible = true; - drawLayer.style('display', 'block'); - } - } // Immediately remove the notes and their touch targets + section.render = function (selection) { + _containerSelection = selection.selectAll('.section-' + id).data([0]); + var sectionEnter = _containerSelection.enter().append('div').attr('class', 'section section-' + id + ' ' + (_classes && _classes() || '')); - function editOff() { - if (_notesVisible) { - _notesVisible = false; - drawLayer.style('display', 'none'); - drawLayer.selectAll('.note').remove(); - touchLayer.selectAll('.note').remove(); - } - } // Enable the layer. This shows the notes and transitions them to visible. + _containerSelection = sectionEnter.merge(_containerSelection); + _containerSelection.call(renderContent); + }; - function layerOn() { - editOn(); - drawLayer.style('opacity', 0).transition().duration(250).style('opacity', 1).on('end interrupt', function () { - dispatch$1.call('change'); - }); - } // Disable the layer. This transitions the layer invisible and then hides the notes. + section.reRender = function () { + _containerSelection.call(renderContent); + }; + section.selection = function () { + return _containerSelection; + }; - function layerOff() { - throttledRedraw.cancel(); - drawLayer.interrupt(); - touchLayer.selectAll('.note').remove(); - drawLayer.transition().duration(250).style('opacity', 0).on('end interrupt', function () { - editOff(); - dispatch$1.call('change'); - }); - } // Update the note markers + section.disclosure = function () { + return _disclosure; + }; // may be called multiple times - function updateMarkers() { - if (!_notesVisible || !_notesEnabled) return; - var service = getService(); - var selectedID = context.selectedNoteID(); - var data = service ? service.notes(projection) : []; - var getTransform = svgPointTransform(projection); // Draw markers.. + function renderContent(selection) { + if (_shouldDisplay) { + var shouldDisplay = _shouldDisplay(); - var notes = drawLayer.selectAll('.note').data(data, function (d) { - return d.status + d.id; - }); // exit + selection.classed('hide', !shouldDisplay); - notes.exit().remove(); // enter + if (!shouldDisplay) { + selection.html(''); + return; + } + } - var notesEnter = notes.enter().append('g').attr('class', function (d) { - return 'note note-' + d.id + ' ' + d.status; - }).classed('new', function (d) { - return d.id < 0; - }); - notesEnter.append('ellipse').attr('cx', 0.5).attr('cy', 1).attr('rx', 6.5).attr('ry', 3).attr('class', 'stroke'); - notesEnter.append('path').call(markerPath, 'shadow'); - notesEnter.append('use').attr('class', 'note-fill').attr('width', '20px').attr('height', '20px').attr('x', '-8px').attr('y', '-22px').attr('xlink:href', '#iD-icon-note'); - notesEnter.selectAll('.icon-annotation').data(function (d) { - return [d]; - }).enter().append('use').attr('class', 'icon-annotation').attr('width', '10px').attr('height', '10px').attr('x', '-3px').attr('y', '-19px').attr('xlink:href', function (d) { - return '#iD-icon-' + (d.id < 0 ? 'plus' : d.status === 'open' ? 'close' : 'apply'); - }); // update + if (_disclosureContent) { + if (!_disclosure) { + _disclosure = uiDisclosure(context, id.replace(/-/g, '_'), _expandedByDefault()).label(_label || '') + /*.on('toggled', function(expanded) { + if (expanded) { selection.node().parentNode.scrollTop += 200; } + })*/ + .content(_disclosureContent); + } - notes.merge(notesEnter).sort(sortY).classed('selected', function (d) { - var mode = context.mode(); - var isMoving = mode && mode.id === 'drag-note'; // no shadows when dragging + if (_disclosureExpanded !== undefined) { + _disclosure.expanded(_disclosureExpanded); - return !isMoving && d.id === selectedID; - }).attr('transform', getTransform); // Draw targets.. + _disclosureExpanded = undefined; + } - if (touchLayer.empty()) return; - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var targets = touchLayer.selectAll('.note').data(data, function (d) { - return d.id; - }); // exit + selection.call(_disclosure); + return; + } - targets.exit().remove(); // enter/update + if (_content) { + selection.call(_content); + } + } - targets.enter().append('rect').attr('width', '20px').attr('height', '20px').attr('x', '-8px').attr('y', '-22px').merge(targets).sort(sortY).attr('class', function (d) { - var newClass = d.id < 0 ? 'new' : ''; - return 'note target note-' + d.id + ' ' + fillClass + newClass; - }).attr('transform', getTransform); + return section; + } - function sortY(a, b) { - return a.id === selectedID ? 1 : b.id === selectedID ? -1 : b.loc[1] - a.loc[1]; - } - } // Draw the notes layer and schedule loading notes and updating markers. + // { + // key: 'string', // required + // value: 'string' // optional + // } + // -or- + // { + // qid: 'string' // brand wikidata (e.g. 'Q37158') + // } + // + function uiTagReference(what) { + var wikibase = what.qid ? services.wikidata : services.osmWikibase; + var tagReference = {}; - function drawNotes(selection) { - var service = getService(); - var surface = context.surface(); + var _button = select(null); - if (surface && !surface.empty()) { - touchLayer = surface.selectAll('.data-layer.touch .layer-touch.markers'); - } + var _body = select(null); - drawLayer = selection.selectAll('.layer-notes').data(service ? [0] : []); - drawLayer.exit().remove(); - drawLayer = drawLayer.enter().append('g').attr('class', 'layer-notes').style('display', _notesEnabled ? 'block' : 'none').merge(drawLayer); + var _loaded; - if (_notesEnabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - service.loadNotes(projection); - updateMarkers(); - } else { - editOff(); - } - } - } // Toggles the layer on and off + var _showing; + function load() { + if (!wikibase) return; - drawNotes.enabled = function (val) { - if (!arguments.length) return _notesEnabled; - _notesEnabled = val; + _button.classed('tag-reference-loading', true); - if (_notesEnabled) { - layerOn(); - } else { - layerOff(); + wikibase.getDocs(what, gotDocs); + } - if (context.selectedNoteID()) { - context.enter(modeBrowse(context)); - } - } + function gotDocs(err, docs) { + _body.html(''); - dispatch$1.call('change'); - return this; - }; + if (!docs || !docs.title) { + _body.append('p').attr('class', 'tag-reference-description').html(_t.html('inspector.no_documentation_key')); - return drawNotes; - } + done(); + return; + } - function svgTouch() { - function drawTouch(selection) { - selection.selectAll('.layer-touch').data(['areas', 'lines', 'points', 'turns', 'markers']).enter().append('g').attr('class', function (d) { - return 'layer-touch ' + d; - }); - } + if (docs.imageURL) { + _body.append('img').attr('class', 'tag-reference-wiki-image').attr('src', docs.imageURL).on('load', function () { + done(); + }).on('error', function () { + select(this).remove(); + done(); + }); + } else { + done(); + } - return drawTouch; - } + _body.append('p').attr('class', 'tag-reference-description').html(docs.description ? _mainLocalizer.htmlForLocalizedText(docs.description, docs.descriptionLocaleCode) : _t.html('inspector.no_documentation_key')).append('a').attr('class', 'tag-reference-edit').attr('target', '_blank').attr('title', _t('inspector.edit_reference')).attr('href', docs.editURL).call(svgIcon('#iD-icon-edit', 'inline')); - function refresh(selection, node) { - var cr = node.getBoundingClientRect(); - var prop = [cr.width, cr.height]; - selection.property('__dimensions__', prop); - return prop; - } + if (docs.wiki) { + _body.append('a').attr('class', 'tag-reference-link').attr('target', '_blank').attr('href', docs.wiki.url).call(svgIcon('#iD-icon-out-link', 'inline')).append('span').html(_t.html(docs.wiki.text)); + } // Add link to info about "good changeset comments" - #2923 - function utilGetDimensions(selection, force) { - if (!selection || selection.empty()) { - return [0, 0]; - } - var node = selection.node(), - cached = selection.property('__dimensions__'); - return !cached || force ? refresh(selection, node) : cached; - } - function utilSetDimensions(selection, dimensions) { - if (!selection || selection.empty()) { - return selection; + if (what.key === 'comment') { + _body.append('a').attr('class', 'tag-reference-comment-link').attr('target', '_blank').call(svgIcon('#iD-icon-out-link', 'inline')).attr('href', _t('commit.about_changeset_comments_link')).append('span').html(_t.html('commit.about_changeset_comments')); + } } - var node = selection.node(); + function done() { + _loaded = true; - if (dimensions === null) { - refresh(selection, node); - return selection; - } + _button.classed('tag-reference-loading', false); - return selection.property('__dimensions__', [dimensions[0], dimensions[1]]).attr('width', dimensions[0]).attr('height', dimensions[1]); - } + _body.classed('expanded', true).transition().duration(200).style('max-height', '200px').style('opacity', '1'); - function svgLayers(projection, context) { - var dispatch$1 = dispatch('change'); - var svg = select(null); - var _layers = [{ - id: 'osm', - layer: svgOsm(projection, context, dispatch$1) - }, { - id: 'notes', - layer: svgNotes(projection, context, dispatch$1) - }, { - id: 'data', - layer: svgData(projection, context, dispatch$1) - }, { - id: 'keepRight', - layer: svgKeepRight(projection, context, dispatch$1) - }, { - id: 'improveOSM', - layer: svgImproveOSM(projection, context, dispatch$1) - }, { - id: 'osmose', - layer: svgOsmose(projection, context, dispatch$1) - }, { - id: 'streetside', - layer: svgStreetside(projection, context, dispatch$1) - }, { - id: 'mapillary', - layer: svgMapillaryImages(projection, context, dispatch$1) - }, { - id: 'mapillary-position', - layer: svgMapillaryPosition(projection, context) - }, { - id: 'mapillary-map-features', - layer: svgMapillaryMapFeatures(projection, context, dispatch$1) - }, { - id: 'mapillary-signs', - layer: svgMapillarySigns(projection, context, dispatch$1) - }, { - id: 'openstreetcam', - layer: svgOpenstreetcamImages(projection, context, dispatch$1) - }, { - id: 'debug', - layer: svgDebug(projection, context) - }, { - id: 'geolocate', - layer: svgGeolocate(projection) - }, { - id: 'touch', - layer: svgTouch() - }]; + _showing = true; - function drawLayers(selection) { - svg = selection.selectAll('.surface').data([0]); - svg = svg.enter().append('svg').attr('class', 'surface').merge(svg); - var defs = svg.selectAll('.surface-defs').data([0]); - defs.enter().append('defs').attr('class', 'surface-defs'); - var groups = svg.selectAll('.data-layer').data(_layers); - groups.exit().remove(); - groups.enter().append('g').attr('class', function (d) { - return 'data-layer ' + d.id; - }).merge(groups).each(function (d) { - select(this).call(d.layer); - }); - } + _button.selectAll('svg.icon use').each(function () { + var iconUse = select(this); - drawLayers.all = function () { - return _layers; - }; + if (iconUse.attr('href') === '#iD-icon-info') { + iconUse.attr('href', '#iD-icon-info-filled'); + } + }); + } - drawLayers.layer = function (id) { - var obj = _layers.find(function (o) { - return o.id === id; + function hide() { + _body.transition().duration(200).style('max-height', '0px').style('opacity', '0').on('end', function () { + _body.classed('expanded', false); }); - return obj && obj.layer; - }; + _showing = false; - drawLayers.only = function (what) { - var arr = [].concat(what); + _button.selectAll('svg.icon use').each(function () { + var iconUse = select(this); - var all = _layers.map(function (layer) { - return layer.id; + if (iconUse.attr('href') === '#iD-icon-info-filled') { + iconUse.attr('href', '#iD-icon-info'); + } }); + } - return drawLayers.remove(utilArrayDifference(all, arr)); - }; + tagReference.button = function (selection, klass, iconName) { + _button = selection.selectAll('.tag-reference-button').data([0]); + _button = _button.enter().append('button').attr('class', 'tag-reference-button ' + (klass || '')).attr('title', _t('icons.information')).call(svgIcon('#iD-icon-' + (iconName || 'inspect'))).merge(_button); - drawLayers.remove = function (what) { - var arr = [].concat(what); - arr.forEach(function (id) { - _layers = _layers.filter(function (o) { - return o.id !== id; - }); + _button.on('click', function (d3_event) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + this.blur(); // avoid keeping focus on the button - #4641 + + if (_showing) { + hide(); + } else if (_loaded) { + done(); + } else { + load(); + } }); - dispatch$1.call('change'); - return this; }; - drawLayers.add = function (what) { - var arr = [].concat(what); - arr.forEach(function (obj) { - if ('id' in obj && 'layer' in obj) { - _layers.push(obj); - } + tagReference.body = function (selection) { + var itemID = what.qid || what.key + '-' + (what.value || ''); + _body = selection.selectAll('.tag-reference-body').data([itemID], function (d) { + return d; }); - dispatch$1.call('change'); - return this; + + _body.exit().remove(); + + _body = _body.enter().append('div').attr('class', 'tag-reference-body').style('max-height', '0').style('opacity', '0').merge(_body); + + if (_showing === false) { + hide(); + } }; - drawLayers.dimensions = function (val) { - if (!arguments.length) return utilGetDimensions(svg); - utilSetDimensions(svg, val); - return this; + tagReference.showing = function (val) { + if (!arguments.length) return _showing; + _showing = val; + return tagReference; }; - return utilRebind(drawLayers, dispatch$1, 'on'); + return tagReference; } - function svgLines(projection, context) { - var detected = utilDetect(); - var highway_stack = { - motorway: 0, - motorway_link: 1, - trunk: 2, - trunk_link: 3, - primary: 4, - primary_link: 5, - secondary: 6, - tertiary: 7, - unclassified: 8, - residential: 9, - service: 10, - footway: 11 - }; + function uiSectionRawTagEditor(id, context) { + var section = uiSection(id, context).classes('raw-tag-editor').label(function () { + var count = Object.keys(_tags).filter(function (d) { + return d; + }).length; + return _t('inspector.title_count', { + title: _t.html('inspector.tags'), + count: count + }); + }).expandedByDefault(false).disclosureContent(renderDisclosureContent); + var taginfo = services.taginfo; + var dispatch = dispatch$8('change'); + var availableViews = [{ + id: 'list', + icon: '#fas-th-list' + }, { + id: 'text', + icon: '#fas-i-cursor' + }]; - function drawTargets(selection, graph, entities, filter) { - var targetClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var nopeClass = context.getDebug('target') ? 'red ' : 'nocolor '; - var getPath = svgPath(projection).geojson; - var activeID = context.activeID(); - var base = context.history().base(); // The targets and nopes will be MultiLineString sub-segments of the ways + var _tagView = corePreferences('raw-tag-editor-view') || 'list'; // 'list, 'text' - var data = { - targets: [], - nopes: [] - }; - entities.forEach(function (way) { - var features = svgSegmentWay(way, graph, activeID); - data.targets.push.apply(data.targets, features.passive); - data.nopes.push.apply(data.nopes, features.active); - }); // Targets allow hover and vertex snapping - var targetData = data.targets.filter(getPath); - var targets = selection.selectAll('.line.target-allowed').filter(function (d) { - return filter(d.properties.entity); - }).data(targetData, function key(d) { - return d.id; - }); // exit + var _readOnlyTags = []; // the keys in the order we want them to display - targets.exit().remove(); + var _orderedKeys = []; + var _showBlank = false; + var _pendingChange = null; - var segmentWasEdited = function segmentWasEdited(d) { - var wayID = d.properties.entity.id; // if the whole line was edited, don't draw segment changes + var _state; - if (!base.entities[wayID] || !fastDeepEqual(graph.entities[wayID].nodes, base.entities[wayID].nodes)) { - return false; - } + var _presets; - return d.properties.nodes.some(function (n) { - return !base.entities[n.id] || !fastDeepEqual(graph.entities[n.id].loc, base.entities[n.id].loc); - }); - }; // enter/update + var _tags; + var _entityIDs; - targets.enter().append('path').merge(targets).attr('d', getPath).attr('class', function (d) { - return 'way line target target-allowed ' + targetClass + d.id; - }).classed('segment-edited', segmentWasEdited); // NOPE + var _didInteract = false; - var nopeData = data.nopes.filter(getPath); - var nopes = selection.selectAll('.line.target-nope').filter(function (d) { - return filter(d.properties.entity); - }).data(nopeData, function key(d) { - return d.id; - }); // exit + function interacted() { + _didInteract = true; + } - nopes.exit().remove(); // enter/update + function renderDisclosureContent(wrap) { + // remove deleted keys + _orderedKeys = _orderedKeys.filter(function (key) { + return _tags[key] !== undefined; + }); // When switching to a different entity or changing the state (hover/select) + // reorder the keys alphabetically. + // We trigger this by emptying the `_orderedKeys` array, then it will be rebuilt here. + // Otherwise leave their order alone - #5857, #5927 - nopes.enter().append('path').merge(nopes).attr('d', getPath).attr('class', function (d) { - return 'way line target target-nope ' + nopeClass + d.id; - }).classed('segment-edited', segmentWasEdited); - } + var all = Object.keys(_tags).sort(); + var missingKeys = utilArrayDifference(all, _orderedKeys); - function drawLines(selection, graph, entities, filter) { - var base = context.history().base(); + for (var i in missingKeys) { + _orderedKeys.push(missingKeys[i]); + } // assemble row data - function waystack(a, b) { - var selected = context.selectedIDs(); - var scoreA = selected.indexOf(a.id) !== -1 ? 20 : 0; - var scoreB = selected.indexOf(b.id) !== -1 ? 20 : 0; - if (a.tags.highway) { - scoreA -= highway_stack[a.tags.highway]; - } + var rowData = _orderedKeys.map(function (key, i) { + return { + index: i, + key: key, + value: _tags[key] + }; + }); // append blank row last, if necessary - if (b.tags.highway) { - scoreB -= highway_stack[b.tags.highway]; - } - return scoreA - scoreB; - } + if (!rowData.length || _showBlank) { + _showBlank = false; + rowData.push({ + index: rowData.length, + key: '', + value: '' + }); + } // View Options - function drawLineGroup(selection, klass, isSelected) { - // Note: Don't add `.selected` class in draw modes - var mode = context.mode(); - var isDrawing = mode && /^draw/.test(mode.id); - var selectedClass = !isDrawing && isSelected ? 'selected ' : ''; - var lines = selection.selectAll('path').filter(filter).data(getPathData(isSelected), osmEntity.key); - lines.exit().remove(); // Optimization: Call expensive TagClasses only on enter selection. This - // works because osmEntity.key is defined to include the entity v attribute. - lines.enter().append('path').attr('class', function (d) { - var prefix = 'way line'; // if this line isn't styled by its own tags + var options = wrap.selectAll('.raw-tag-options').data([0]); + options.exit().remove(); + var optionsEnter = options.enter().insert('div', ':first-child').attr('class', 'raw-tag-options'); + var optionEnter = optionsEnter.selectAll('.raw-tag-option').data(availableViews, function (d) { + return d.id; + }).enter(); + optionEnter.append('button').attr('class', function (d) { + return 'raw-tag-option raw-tag-option-' + d.id + (_tagView === d.id ? ' selected' : ''); + }).attr('title', function (d) { + return _t('icons.' + d.id); + }).on('click', function (d3_event, d) { + _tagView = d.id; + corePreferences('raw-tag-editor-view', d.id); + wrap.selectAll('.raw-tag-option').classed('selected', function (datum) { + return datum === d; + }); + wrap.selectAll('.tag-text').classed('hide', d.id !== 'text').each(setTextareaHeight); + wrap.selectAll('.tag-list, .add-row').classed('hide', d.id !== 'list'); + }).each(function (d) { + select(this).call(svgIcon(d.icon)); + }); // View as Text - if (!d.hasInterestingTags()) { - var parentRelations = graph.parentRelations(d); - var parentMultipolygons = parentRelations.filter(function (relation) { - return relation.isMultipolygon(); - }); // and if it's a member of at least one multipolygon relation + var textData = rowsToText(rowData); + var textarea = wrap.selectAll('.tag-text').data([0]); + textarea = textarea.enter().append('textarea').attr('class', 'tag-text' + (_tagView !== 'text' ? ' hide' : '')).call(utilNoAuto).attr('placeholder', _t('inspector.key_value')).attr('spellcheck', 'false').merge(textarea); + textarea.call(utilGetSetValue, textData).each(setTextareaHeight).on('input', setTextareaHeight).on('focus', interacted).on('blur', textChanged).on('change', textChanged); // View as List - if (parentMultipolygons.length > 0 && // and only multipolygon relations - parentRelations.length === parentMultipolygons.length) { - // then fudge the classes to style this as an area edge - prefix = 'relation area'; - } - } + var list = wrap.selectAll('.tag-list').data([0]); + list = list.enter().append('ul').attr('class', 'tag-list' + (_tagView !== 'list' ? ' hide' : '')).merge(list); // Container for the Add button - var oldMPClass = oldMultiPolygonOuters[d.id] ? 'old-multipolygon ' : ''; - return prefix + ' ' + klass + ' ' + selectedClass + oldMPClass + d.id; - }).classed('added', function (d) { - return !base.entities[d.id]; - }).classed('geometry-edited', function (d) { - return graph.entities[d.id] && base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].nodes, base.entities[d.id].nodes); - }).classed('retagged', function (d) { - return graph.entities[d.id] && base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].tags, base.entities[d.id].tags); - }).call(svgTagClasses()).merge(lines).sort(waystack).attr('d', getPath).call(svgTagClasses().tags(svgRelationMemberTags(graph))); - return selection; - } + var addRowEnter = wrap.selectAll('.add-row').data([0]).enter().append('div').attr('class', 'add-row' + (_tagView !== 'list' ? ' hide' : '')); + addRowEnter.append('button').attr('class', 'add-tag').call(svgIcon('#iD-icon-plus', 'light')).on('click', addTag); + addRowEnter.append('div').attr('class', 'space-value'); // preserve space - function getPathData(isSelected) { - return function () { - var layer = this.parentNode.__data__; - var data = pathdata[layer] || []; - return data.filter(function (d) { - if (isSelected) return context.selectedIDs().indexOf(d.id) !== -1;else return context.selectedIDs().indexOf(d.id) === -1; - }); - }; - } + addRowEnter.append('div').attr('class', 'space-buttons'); // preserve space + // Tag list items - function addMarkers(layergroup, pathclass, groupclass, groupdata, marker) { - var markergroup = layergroup.selectAll('g.' + groupclass).data([pathclass]); - markergroup = markergroup.enter().append('g').attr('class', groupclass).merge(markergroup); - var markers = markergroup.selectAll('path').filter(filter).data(function data() { - return groupdata[this.parentNode.__data__] || []; - }, function key(d) { - return [d.id, d.index]; - }); - markers.exit().remove(); - markers = markers.enter().append('path').attr('class', pathclass).merge(markers).attr('marker-mid', marker).attr('d', function (d) { - return d.d; - }); + var items = list.selectAll('.tag-row').data(rowData, function (d) { + return d.key; + }); + items.exit().each(unbind).remove(); // Enter - if (detected.ie) { - markers.each(function () { - this.parentNode.insertBefore(this, this); - }); + var itemsEnter = items.enter().append('li').attr('class', 'tag-row').classed('readonly', isReadOnly); + var innerWrap = itemsEnter.append('div').attr('class', 'inner-wrap'); + innerWrap.append('div').attr('class', 'key-wrap').append('input').property('type', 'text').attr('class', 'key').call(utilNoAuto).on('focus', interacted).on('blur', keyChange).on('change', keyChange); + innerWrap.append('div').attr('class', 'value-wrap').append('input').property('type', 'text').attr('class', 'value').call(utilNoAuto).on('focus', interacted).on('blur', valueChange).on('change', valueChange).on('keydown.push-more', pushMore); + innerWrap.append('button').attr('class', 'form-field-button remove').attr('title', _t('icons.remove')).call(svgIcon('#iD-operation-delete')); // Update + + items = items.merge(itemsEnter).sort(function (a, b) { + return a.index - b.index; + }); + items.each(function (d) { + var row = select(this); + var key = row.select('input.key'); // propagate bound data + + var value = row.select('input.value'); // propagate bound data + + if (_entityIDs && taginfo && _state !== 'hover') { + bindTypeahead(key, value); } - } - var getPath = svgPath(projection, graph); - var ways = []; - var onewaydata = {}; - var sideddata = {}; - var oldMultiPolygonOuters = {}; + var referenceOptions = { + key: d.key + }; - for (var i = 0; i < entities.length; i++) { - var entity = entities[i]; - var outer = osmOldMultipolygonOuterMember(entity, graph); + if (typeof d.value === 'string') { + referenceOptions.value = d.value; + } - if (outer) { - ways.push(entity.mergeTags(outer.tags)); - oldMultiPolygonOuters[outer.id] = true; - } else if (entity.geometry(graph) === 'line') { - ways.push(entity); + var reference = uiTagReference(referenceOptions); + + if (_state === 'hover') { + reference.showing(false); } - } - ways = ways.filter(getPath); - var pathdata = utilArrayGroupBy(ways, function (way) { - return way.layer(); + row.select('.inner-wrap') // propagate bound data + .call(reference.button); + row.call(reference.body); + row.select('button.remove'); // propagate bound data }); - Object.keys(pathdata).forEach(function (k) { - var v = pathdata[k]; - var onewayArr = v.filter(function (d) { - return d.isOneWay(); - }); - var onewaySegments = svgMarkerSegments(projection, graph, 35, function shouldReverse(entity) { - return entity.tags.oneway === '-1'; - }, function bothDirections(entity) { - return entity.tags.oneway === 'reversible' || entity.tags.oneway === 'alternating'; - }); - onewaydata[k] = utilArrayFlatten(onewayArr.map(onewaySegments)); - var sidedArr = v.filter(function (d) { - return d.isSided(); - }); - var sidedSegments = svgMarkerSegments(projection, graph, 30, function shouldReverse() { - return false; - }, function bothDirections() { - return false; - }); - sideddata[k] = utilArrayFlatten(sidedArr.map(sidedSegments)); + items.selectAll('input.key').attr('title', function (d) { + return d.key; + }).call(utilGetSetValue, function (d) { + return d.key; + }).attr('readonly', function (d) { + return isReadOnly(d) || typeof d.value !== 'string' || null; }); - var covered = selection.selectAll('.layer-osm.covered'); // under areas + items.selectAll('input.value').attr('title', function (d) { + return Array.isArray(d.value) ? d.value.filter(Boolean).join('\n') : d.value; + }).classed('mixed', function (d) { + return Array.isArray(d.value); + }).attr('placeholder', function (d) { + return typeof d.value === 'string' ? null : _t('inspector.multiple_values'); + }).call(utilGetSetValue, function (d) { + return typeof d.value === 'string' ? d.value : ''; + }).attr('readonly', function (d) { + return isReadOnly(d) || null; + }); + items.selectAll('button.remove').on(('PointerEvent' in window ? 'pointer' : 'mouse') + 'down', removeTag); // 'click' fires too late - #5878 + } - var uncovered = selection.selectAll('.layer-osm.lines'); // over areas + function isReadOnly(d) { + for (var i = 0; i < _readOnlyTags.length; i++) { + if (d.key.match(_readOnlyTags[i]) !== null) { + return true; + } + } - var touchLayer = selection.selectAll('.layer-touch.lines'); // Draw lines.. + return false; + } - [covered, uncovered].forEach(function (selection) { - var range$1 = selection === covered ? range(-10, 0) : range(0, 11); - var layergroup = selection.selectAll('g.layergroup').data(range$1); - layergroup = layergroup.enter().append('g').attr('class', function (d) { - return 'layergroup layer' + String(d); - }).merge(layergroup); - layergroup.selectAll('g.linegroup').data(['shadow', 'casing', 'stroke', 'shadow-highlighted', 'casing-highlighted', 'stroke-highlighted']).enter().append('g').attr('class', function (d) { - return 'linegroup line-' + d; - }); - layergroup.selectAll('g.line-shadow').call(drawLineGroup, 'shadow', false); - layergroup.selectAll('g.line-casing').call(drawLineGroup, 'casing', false); - layergroup.selectAll('g.line-stroke').call(drawLineGroup, 'stroke', false); - layergroup.selectAll('g.line-shadow-highlighted').call(drawLineGroup, 'shadow', true); - layergroup.selectAll('g.line-casing-highlighted').call(drawLineGroup, 'casing', true); - layergroup.selectAll('g.line-stroke-highlighted').call(drawLineGroup, 'stroke', true); - addMarkers(layergroup, 'oneway', 'onewaygroup', onewaydata, 'url(#ideditor-oneway-marker)'); - addMarkers(layergroup, 'sided', 'sidedgroup', sideddata, function marker(d) { - var category = graph.entity(d.id).sidednessIdentifier(); - return 'url(#ideditor-sided-marker-' + category + ')'; - }); - }); // Draw touch targets.. + function setTextareaHeight() { + if (_tagView !== 'text') return; + var selection = select(this); + var matches = selection.node().value.match(/\n/g); + var lineCount = 2 + Number(matches && matches.length); + var lineHeight = 20; + selection.style('height', lineCount * lineHeight + 'px'); + } - touchLayer.call(drawTargets, graph, ways, filter); + function stringify(s) { + return JSON.stringify(s).slice(1, -1); // without leading/trailing " } - return drawLines; - } + function unstringify(s) { + var leading = ''; + var trailing = ''; - function svgMidpoints(projection, context) { - var targetRadius = 8; + if (s.length < 1 || s.charAt(0) !== '"') { + leading = '"'; + } - function drawTargets(selection, graph, entities, filter) { - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var getTransform = svgPointTransform(projection).geojson; - var data = entities.map(function (midpoint) { - return { - type: 'Feature', - id: midpoint.id, - properties: { - target: true, - entity: midpoint - }, - geometry: { - type: 'Point', - coordinates: midpoint.loc - } - }; + if (s.length < 2 || s.charAt(s.length - 1) !== '"' || s.charAt(s.length - 1) === '"' && s.charAt(s.length - 2) === '\\') { + trailing = '"'; + } + + return JSON.parse(leading + s + trailing); + } + + function rowsToText(rows) { + var str = rows.filter(function (row) { + return row.key && row.key.trim() !== ''; + }).map(function (row) { + var rawVal = row.value; + if (typeof rawVal !== 'string') rawVal = '*'; + var val = rawVal ? stringify(rawVal) : ''; + return stringify(row.key) + '=' + val; + }).join('\n'); + + if (_state !== 'hover' && str.length) { + return str + '\n'; + } + + return str; + } + + function textChanged() { + var newText = this.value.trim(); + var newTags = {}; + newText.split('\n').forEach(function (row) { + var m = row.match(/^\s*([^=]+)=(.*)$/); + + if (m !== null) { + var k = context.cleanTagKey(unstringify(m[1].trim())); + var v = context.cleanTagValue(unstringify(m[2].trim())); + newTags[k] = v; + } }); - var targets = selection.selectAll('.midpoint.target').filter(function (d) { - return filter(d.properties.entity); - }).data(data, function key(d) { - return d.id; - }); // exit + var tagDiff = utilTagDiff(_tags, newTags); + if (!tagDiff.length) return; + _pendingChange = _pendingChange || {}; + tagDiff.forEach(function (change) { + if (isReadOnly({ + key: change.key + })) return; // skip unchanged multiselection placeholders + + if (change.newVal === '*' && typeof change.oldVal !== 'string') return; + + if (change.type === '-') { + _pendingChange[change.key] = undefined; + } else if (change.type === '+') { + _pendingChange[change.key] = change.newVal || ''; + } + }); + + if (Object.keys(_pendingChange).length === 0) { + _pendingChange = null; + return; + } - targets.exit().remove(); // enter/update + scheduleChange(); + } - targets.enter().append('circle').attr('r', targetRadius).merge(targets).attr('class', function (d) { - return 'node midpoint target ' + fillClass + d.id; - }).attr('transform', getTransform); + function pushMore(d3_event) { + // if pressing Tab on the last value field with content, add a blank row + if (d3_event.keyCode === 9 && !d3_event.shiftKey && section.selection().selectAll('.tag-list li:last-child input.value').node() === this && utilGetSetValue(select(this))) { + addTag(); + } } - function drawMidpoints(selection, graph, entities, filter, extent) { - var drawLayer = selection.selectAll('.layer-osm.points .points-group.midpoints'); - var touchLayer = selection.selectAll('.layer-touch.points'); - var mode = context.mode(); + function bindTypeahead(key, value) { + if (isReadOnly(key.datum())) return; - if (mode && mode.id !== 'select' || !context.map().withinEditableZoom()) { - drawLayer.selectAll('.midpoint').remove(); - touchLayer.selectAll('.midpoint.target').remove(); + if (Array.isArray(value.datum().value)) { + value.call(uiCombobox(context, 'tag-value').minItems(1).fetcher(function (value, callback) { + var keyString = utilGetSetValue(key); + if (!_tags[keyString]) return; + + var data = _tags[keyString].filter(Boolean).map(function (tagValue) { + return { + value: tagValue, + title: tagValue + }; + }); + + callback(data); + })); return; } - var poly = extent.polygon(); - var midpoints = {}; + var geometry = context.graph().geometry(_entityIDs[0]); + key.call(uiCombobox(context, 'tag-key').fetcher(function (value, callback) { + taginfo.keys({ + debounce: true, + geometry: geometry, + query: value + }, function (err, data) { + if (!err) { + var filtered = data.filter(function (d) { + return _tags[d.value] === undefined; + }); + callback(sort(value, filtered)); + } + }); + })); + value.call(uiCombobox(context, 'tag-value').fetcher(function (value, callback) { + taginfo.values({ + debounce: true, + key: utilGetSetValue(key), + geometry: geometry, + query: value + }, function (err, data) { + if (!err) callback(sort(value, data)); + }); + })); - for (var i = 0; i < entities.length; i++) { - var entity = entities[i]; - if (entity.type !== 'way') continue; - if (!filter(entity)) continue; - if (context.selectedIDs().indexOf(entity.id) < 0) continue; - var nodes = graph.childNodes(entity); + function sort(value, data) { + var sameletter = []; + var other = []; - for (var j = 0; j < nodes.length - 1; j++) { - var a = nodes[j]; - var b = nodes[j + 1]; - var id = [a.id, b.id].sort().join('-'); + 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]); + } + } - if (midpoints[id]) { - midpoints[id].parents.push(entity); - } else if (geoVecLength(projection(a.loc), projection(b.loc)) > 40) { - var point = geoVecInterp(a.loc, b.loc, 0.5); - var loc = null; + return sameletter.concat(other); + } + } - if (extent.intersects(point)) { - loc = point; - } else { - for (var k = 0; k < 4; k++) { - point = geoLineIntersection([a.loc, b.loc], [poly[k], poly[k + 1]]); + function unbind() { + var row = select(this); + row.selectAll('input.key').call(uiCombobox.off, context); + row.selectAll('input.value').call(uiCombobox.off, context); + } - if (point && geoVecLength(projection(a.loc), projection(point)) > 20 && geoVecLength(projection(b.loc), projection(point)) > 20) { - loc = point; - break; - } - } - } + function keyChange(d3_event, d) { + if (select(this).attr('readonly')) return; + var kOld = d.key; // exit if we are currently about to delete this row anyway - #6366 - if (loc) { - midpoints[id] = { - type: 'midpoint', - id: id, - loc: loc, - edge: [a.id, b.id], - parents: [entity] - }; - } - } - } + if (_pendingChange && _pendingChange.hasOwnProperty(kOld) && _pendingChange[kOld] === undefined) return; + var kNew = context.cleanTagKey(this.value.trim()); // allow no change if the key should be readonly + + if (isReadOnly({ + key: kNew + })) { + this.value = kOld; + return; } - function midpointFilter(d) { - if (midpoints[d.id]) return true; + if (kNew && kNew !== kOld && _tags[kNew] !== undefined) { + // new key is already in use, switch focus to the existing row + this.value = kOld; // reset the key - for (var i = 0; i < d.parents.length; i++) { - if (filter(d.parents[i])) { - return true; + section.selection().selectAll('.tag-list input.value').each(function (d) { + if (d.key === kNew) { + // send focus to that other value combo instead + var input = select(this).node(); + input.focus(); + input.select(); } - } - - return false; + }); + return; } - var groups = drawLayer.selectAll('.midpoint').filter(midpointFilter).data(Object.values(midpoints), function (d) { - return d.id; - }); - groups.exit().remove(); - var enter = groups.enter().insert('g', ':first-child').attr('class', 'midpoint'); - enter.append('polygon').attr('points', '-6,8 10,0 -6,-8').attr('class', 'shadow'); - enter.append('polygon').attr('points', '-3,4 5,0 -3,-4').attr('class', 'fill'); - groups = groups.merge(enter).attr('transform', function (d) { - var translate = svgPointTransform(projection); - var a = graph.entity(d.edge[0]); - var b = graph.entity(d.edge[1]); - var angle = geoAngle(a, b, projection) * (180 / Math.PI); - return translate(d) + ' rotate(' + angle + ')'; - }).call(svgTagClasses().tags(function (d) { - return d.parents[0].tags; - })); // Propagate data bindings. + var row = this.parentNode.parentNode; + var inputVal = select(row).selectAll('input.value'); + var vNew = context.cleanTagValue(utilGetSetValue(inputVal)); + _pendingChange = _pendingChange || {}; - groups.select('polygon.shadow'); - groups.select('polygon.fill'); // Draw touch targets.. + if (kOld) { + _pendingChange[kOld] = undefined; + } - touchLayer.call(drawTargets, graph, Object.values(midpoints), midpointFilter); - } + _pendingChange[kNew] = vNew; // update the ordered key index so this row doesn't change position - return drawMidpoints; - } + var existingKeyIndex = _orderedKeys.indexOf(kOld); - function svgPoints(projection, context) { - function markerPath(selection, klass) { - selection.attr('class', klass).attr('transform', 'translate(-8, -23)').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'); + if (existingKeyIndex !== -1) _orderedKeys[existingKeyIndex] = kNew; + d.key = kNew; // update datum to avoid exit/enter on tag update + + d.value = vNew; + this.value = kNew; + utilGetSetValue(inputVal, vNew); + scheduleChange(); } - function sortY(a, b) { - return b.loc[1] - a.loc[1]; - } // Avoid exit/enter if we're just moving stuff around. - // The node will get a new version but we only need to run the update selection. + function valueChange(d3_event, d) { + if (isReadOnly(d)) return; // exit if this is a multiselection and no value was entered + if (typeof d.value !== 'string' && !this.value) return; // exit if we are currently about to delete this row anyway - #6366 - function fastEntityKey(d) { - var mode = context.mode(); - var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id); - return isMoving ? d.id : osmEntity.key(d); + if (_pendingChange && _pendingChange.hasOwnProperty(d.key) && _pendingChange[d.key] === undefined) return; + _pendingChange = _pendingChange || {}; + _pendingChange[d.key] = context.cleanTagValue(this.value); + scheduleChange(); } - function drawTargets(selection, graph, entities, filter) { - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var getTransform = svgPointTransform(projection).geojson; - var activeID = context.activeID(); - var data = []; - entities.forEach(function (node) { - if (activeID === node.id) return; // draw no target on the activeID + function removeTag(d3_event, d) { + if (isReadOnly(d)) return; - data.push({ - type: 'Feature', - id: node.id, - properties: { - target: true, - entity: node - }, - geometry: node.asGeoJSON() + if (d.key === '') { + // removing the blank row + _showBlank = false; + section.reRender(); + } else { + // remove the key from the ordered key index + _orderedKeys = _orderedKeys.filter(function (key) { + return key !== d.key; }); - }); - var targets = selection.selectAll('.point.target').filter(function (d) { - return filter(d.properties.entity); - }).data(data, function key(d) { - return d.id; - }); // exit - - targets.exit().remove(); // enter/update + _pendingChange = _pendingChange || {}; + _pendingChange[d.key] = undefined; + scheduleChange(); + } + } - targets.enter().append('rect').attr('x', -10).attr('y', -26).attr('width', 20).attr('height', 30).merge(targets).attr('class', function (d) { - return 'node point target ' + fillClass + d.id; - }).attr('transform', getTransform); + function addTag() { + // Delay render in case this click is blurring an edited combo. + // Without the setTimeout, the `content` render would wipe out the pending tag change. + window.setTimeout(function () { + _showBlank = true; + section.reRender(); + section.selection().selectAll('.tag-list li:last-child input.key').node().focus(); + }, 20); } - function drawPoints(selection, graph, entities, filter) { - var wireframe = context.surface().classed('fill-wireframe'); - var zoom = geoScaleToZoom(projection.scale()); - var base = context.history().base(); // Points with a direction will render as vertices at higher zooms.. + function scheduleChange() { + // Cache IDs in case the editor is reloaded before the change event is called. - #6028 + var entityIDs = _entityIDs; // Delay change in case this change is blurring an edited combo. - #5878 - function renderAsPoint(entity) { - return entity.geometry(graph) === 'point' && !(zoom >= 18 && entity.directions(graph, projection).length); - } // All points will render as vertices in wireframe mode too.. + window.setTimeout(function () { + if (!_pendingChange) return; + dispatch.call('change', this, entityIDs, _pendingChange); + _pendingChange = null; + }, 10); + } + section.state = function (val) { + if (!arguments.length) return _state; - var points = wireframe ? [] : entities.filter(renderAsPoint); - points.sort(sortY); - var drawLayer = selection.selectAll('.layer-osm.points .points-group.points'); - var touchLayer = selection.selectAll('.layer-touch.points'); // Draw points.. + if (_state !== val) { + _orderedKeys = []; + _state = val; + } - var groups = drawLayer.selectAll('g.point').filter(filter).data(points, fastEntityKey); - groups.exit().remove(); - var enter = groups.enter().append('g').attr('class', function (d) { - return 'node point ' + d.id; - }).order(); - enter.append('path').call(markerPath, 'shadow'); - enter.append('ellipse').attr('cx', 0.5).attr('cy', 1).attr('rx', 6.5).attr('ry', 3).attr('class', 'stroke'); - enter.append('path').call(markerPath, 'stroke'); - enter.append('use').attr('transform', 'translate(-5, -19)').attr('class', 'icon').attr('width', '11px').attr('height', '11px'); - groups = groups.merge(enter).attr('transform', svgPointTransform(projection)).classed('added', function (d) { - return !base.entities[d.id]; // if it doesn't exist in the base graph, it's new - }).classed('moved', function (d) { - return base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].loc, base.entities[d.id].loc); - }).classed('retagged', function (d) { - return base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].tags, base.entities[d.id].tags); - }).call(svgTagClasses()); - groups.select('.shadow'); // propagate bound data + return section; + }; - groups.select('.stroke'); // propagate bound data + section.presets = function (val) { + if (!arguments.length) return _presets; + _presets = val; - groups.select('.icon') // propagate bound data - .attr('xlink:href', function (entity) { - var preset = _mainPresetIndex.match(entity, graph); - var picon = preset && preset.icon; + if (_presets && _presets.length && _presets[0].isFallback()) { + section.disclosureExpanded(true); // don't collapse the disclosure if the mapper used the raw tag editor - #1881 + } else if (!_didInteract) { + section.disclosureExpanded(null); + } - if (!picon) { - return ''; - } else { - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-11' : ''); - } - }); // Draw touch targets.. + return section; + }; - touchLayer.call(drawTargets, graph, points, filter); - } + section.tags = function (val) { + if (!arguments.length) return _tags; + _tags = val; + return section; + }; - return drawPoints; - } + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; - function svgTurns(projection, context) { - function icon(turn) { - var u = turn.u ? '-u' : ''; - if (turn.no) return '#iD-turn-no' + u; - if (turn.only) return '#iD-turn-only' + u; - return '#iD-turn-yes' + u; - } + if (!_entityIDs || !val || !utilArrayIdentical(_entityIDs, val)) { + _entityIDs = val; + _orderedKeys = []; + } - function drawTurns(selection, graph, turns) { - function turnTransform(d) { - var pxRadius = 50; - var toWay = graph.entity(d.to.way); - var toPoints = graph.childNodes(toWay).map(function (n) { - return n.loc; - }).map(projection); - var toLength = geoPathLength(toPoints); - var mid = toLength / 2; // midpoint of destination way + return section; + }; // pass an array of regular expressions to test against the tag key - var toNode = graph.entity(d.to.node); - var toVertex = graph.entity(d.to.vertex); - var a = geoAngle(toVertex, toNode, projection); - var o = projection(toVertex.loc); - var r = d.u ? 0 // u-turn: no radius - : !toWay.__via ? pxRadius // leaf way: put marker at pxRadius - : Math.min(mid, pxRadius); // via way: prefer pxRadius, fallback to mid for very short ways - return 'translate(' + (r * Math.cos(a) + o[0]) + ',' + (r * Math.sin(a) + o[1]) + ') ' + 'rotate(' + a * 180 / Math.PI + ')'; - } + section.readOnlyTags = function (val) { + if (!arguments.length) return _readOnlyTags; + _readOnlyTags = val; + return section; + }; - var drawLayer = selection.selectAll('.layer-osm.points .points-group.turns'); - var touchLayer = selection.selectAll('.layer-touch.turns'); // Draw turns.. + return utilRebind(section, dispatch, 'on'); + } - var groups = drawLayer.selectAll('g.turn').data(turns, function (d) { - return d.key; - }); // exit + function uiDataEditor(context) { + var dataHeader = uiDataHeader(); + var rawTagEditor = uiSectionRawTagEditor('custom-data-tag-editor', context).expandedByDefault(true).readOnlyTags([/./]); - groups.exit().remove(); // enter + var _datum; - var groupsEnter = groups.enter().append('g').attr('class', function (d) { - return 'turn ' + d.key; - }); - var turnsEnter = groupsEnter.filter(function (d) { - return !d.u; - }); - turnsEnter.append('rect').attr('transform', 'translate(-22, -12)').attr('width', '44').attr('height', '24'); - turnsEnter.append('use').attr('transform', 'translate(-22, -12)').attr('width', '44').attr('height', '24'); - var uEnter = groupsEnter.filter(function (d) { - return d.u; - }); - uEnter.append('circle').attr('r', '16'); - uEnter.append('use').attr('transform', 'translate(-16, -16)').attr('width', '32').attr('height', '32'); // update + function dataEditor(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('map_data.title')); + var body = selection.selectAll('.body').data([0]); + body = body.enter().append('div').attr('class', 'body').merge(body); + var editor = body.selectAll('.data-editor').data([0]); // enter/update - groups = groups.merge(groupsEnter).attr('opacity', function (d) { - return d.direct === false ? '0.7' : null; - }).attr('transform', turnTransform); - groups.select('use').attr('xlink:href', icon); - groups.select('rect'); // propagate bound data + editor.enter().append('div').attr('class', 'modal-section data-editor').merge(editor).call(dataHeader.datum(_datum)); + var rte = body.selectAll('.raw-tag-editor').data([0]); // enter/update - groups.select('circle'); // propagate bound data - // Draw touch targets.. + rte.enter().append('div').attr('class', 'raw-tag-editor data-editor').merge(rte).call(rawTagEditor.tags(_datum && _datum.properties || {}).state('hover').render).selectAll('textarea.tag-text').attr('readonly', true).classed('readonly', true); + } - var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - groups = touchLayer.selectAll('g.turn').data(turns, function (d) { - return d.key; - }); // exit + dataEditor.datum = function (val) { + if (!arguments.length) return _datum; + _datum = val; + return this; + }; - groups.exit().remove(); // enter + return dataEditor; + } - groupsEnter = groups.enter().append('g').attr('class', function (d) { - return 'turn ' + d.key; - }); - turnsEnter = groupsEnter.filter(function (d) { - return !d.u; - }); - turnsEnter.append('rect').attr('class', 'target ' + fillClass).attr('transform', 'translate(-22, -12)').attr('width', '44').attr('height', '24'); - uEnter = groupsEnter.filter(function (d) { - return d.u; - }); - uEnter.append('circle').attr('class', 'target ' + fillClass).attr('r', '16'); // update + var sexagesimal = {exports: {}}; - groups = groups.merge(groupsEnter).attr('transform', turnTransform); - groups.select('rect'); // propagate bound data + sexagesimal.exports = element; + var pair_1 = sexagesimal.exports.pair = pair; + sexagesimal.exports.format = format; + sexagesimal.exports.formatPair = formatPair; + sexagesimal.exports.coordToDMS = coordToDMS; - groups.select('circle'); // propagate bound data + function element(input, dims) { + var result = search(input, dims); + return result === null ? null : result.val; + } - return this; - } + function formatPair(input) { + return format(input.lat, 'lat') + ' ' + format(input.lon, 'lon'); + } // Is 0 North or South? - return drawTurns; + + function format(input, dim) { + var dms = coordToDMS(input, dim); + return dms.whole + '° ' + (dms.minutes ? dms.minutes + '\' ' : '') + (dms.seconds ? dms.seconds + '" ' : '') + dms.dir; } - function svgVertices(projection, context) { - var radiuses = { - // z16-, z17, z18+, w/icon - shadow: [6, 7.5, 7.5, 12], - stroke: [2.5, 3.5, 3.5, 8], - fill: [1, 1.5, 1.5, 1.5] + function coordToDMS(input, dim) { + var dirs = { + lat: ['N', 'S'], + lon: ['E', 'W'] + }[dim] || ''; + var dir = dirs[input >= 0 ? 0 : 1]; + var abs = Math.abs(input); + var whole = Math.floor(abs); + var fraction = abs - whole; + var fractionMinutes = fraction * 60; + var minutes = Math.floor(fractionMinutes); + var seconds = Math.floor((fractionMinutes - minutes) * 60); + return { + whole: whole, + minutes: minutes, + seconds: seconds, + dir: dir }; + } - var _currHoverTarget; + 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 - var _currPersistent = {}; - var _currHover = {}; - var _prevHover = {}; - var _currSelected = {}; - var _prevSelected = {}; - var _radii = {}; + var matched = m[0]; // extract dimension.. m[1] = leading, m[5] = trailing - function sortY(a, b) { - return b.loc[1] - a.loc[1]; - } // Avoid exit/enter if we're just moving stuff around. - // The node will get a new version but we only need to run the update selection. + var dim; + if (m[1] && m[5]) { + // if matched both.. + dim = m[1]; // keep leading - function fastEntityKey(d) { - var mode = context.mode(); - var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id); - return isMoving ? d.id : osmEntity.key(d); - } + matched = matched.slice(0, -1); // remove trailing dimension from match + } else { + dim = m[1] || m[5]; + } // if unrecognized dimension - function draw(selection, graph, vertices, sets, filter) { - sets = sets || { - selected: {}, - important: {}, - hovered: {} - }; - var icons = {}; - var directions = {}; - var wireframe = context.surface().classed('fill-wireframe'); - var zoom = geoScaleToZoom(projection.scale()); - var z = zoom < 17 ? 0 : zoom < 18 ? 1 : 2; - var activeID = context.activeID(); - var base = context.history().base(); - function getIcon(d) { - // always check latest entity, as fastEntityKey avoids enter/exit now - var entity = graph.entity(d.id); - if (entity.id in icons) return icons[entity.id]; - icons[entity.id] = entity.hasInterestingTags() && _mainPresetIndex.match(entity, graph).icon; - return icons[entity.id]; - } // memoize directions results, return false for empty arrays (for use in filter) + if (dim && dims.indexOf(dim) === -1) return null; // extract DMS + + 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) + }; + } + 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; - function getDirections(entity) { - if (entity.id in directions) return directions[entity.id]; - var angles = entity.directions(graph, projection); - directions[entity.id] = angles.length ? angles : false; - return angles; - } + if (one.dim) { + return swapdim(one.val, two.val, one.dim); + } else { + return [one.val, two.val]; + } + } - function updateAttributes(selection) { - ['shadow', 'stroke', 'fill'].forEach(function (klass) { - var rads = radiuses[klass]; - selection.selectAll('.' + klass).each(function (entity) { - var i = z && getIcon(entity); - var r = rads[i ? 3 : z]; // slightly increase the size of unconnected endpoints #3775 + function swapdim(a, b, dim) { + if (dim === 'N' || dim === 'S') return [a, b]; + if (dim === 'W' || dim === 'E') return [b, a]; + } - if (entity.id !== activeID && entity.isEndpoint(graph) && !entity.isConnected(graph)) { - r += 1.5; - } + function uiFeatureList(context) { + var _geocodeResults; - if (klass === 'shadow') { - // remember this value, so we don't need to - _radii[entity.id] = r; // recompute it when we draw the touch targets - } + 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); - select(this).attr('r', r).attr('visibility', i && klass === 'fill' ? 'hidden' : null); - }); - }); + function focusSearch(d3_event) { + var mode = context.mode() && context.mode().id; + if (mode !== 'browse') return; + d3_event.preventDefault(); + search.node().focus(); } - vertices.sort(sortY); - var groups = selection.selectAll('g.vertex').filter(filter).data(vertices, fastEntityKey); // exit + function keydown(d3_event) { + if (d3_event.keyCode === 27) { + // escape + search.node().blur(); + } + } - groups.exit().remove(); // enter + function keypress(d3_event) { + var q = search.property('value'), + items = list.selectAll('.feature-list-item'); - var enter = groups.enter().append('g').attr('class', function (d) { - return 'node vertex ' + d.id; - }).order(); - enter.append('circle').attr('class', 'shadow'); - enter.append('circle').attr('class', 'stroke'); // Vertices with tags get a fill. + if (d3_event.keyCode === 13 && // â© Return + q.length && items.size()) { + click(d3_event, items.datum()); + } + } - enter.filter(function (d) { - return d.hasInterestingTags(); - }).append('circle').attr('class', 'fill'); // update + function inputevent() { + _geocodeResults = undefined; + drawList(); + } - groups = groups.merge(enter).attr('transform', svgPointTransform(projection)).classed('sibling', function (d) { - return d.id in sets.selected; - }).classed('shared', function (d) { - return graph.isShared(d); - }).classed('endpoint', function (d) { - return d.isEndpoint(graph); - }).classed('added', function (d) { - return !base.entities[d.id]; // if it doesn't exist in the base graph, it's new - }).classed('moved', function (d) { - return base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].loc, base.entities[d.id].loc); - }).classed('retagged', function (d) { - return base.entities[d.id] && !fastDeepEqual(graph.entities[d.id].tags, base.entities[d.id].tags); - }).call(updateAttributes); // Vertices with icons get a `use`. + function clearSearch() { + search.property('value', ''); + drawList(); + } - var iconUse = groups.selectAll('.icon').data(function data(d) { - return zoom >= 17 && getIcon(d) ? [d] : []; - }, fastEntityKey); // exit + function mapDrawn(e) { + if (e.full) { + drawList(); + } + } - iconUse.exit().remove(); // enter + 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*)$/); - iconUse.enter().append('use').attr('class', 'icon').attr('width', '11px').attr('height', '11px').attr('transform', 'translate(-5.5, -5.5)').attr('xlink:href', function (d) { - var picon = getIcon(d); - var isMaki = /^maki-/.test(picon); - return '#' + picon + (isMaki ? '-11' : ''); - }); // Vertices with directions get viewfields + 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 - var dgroups = groups.selectAll('.viewfieldgroup').data(function data(d) { - return zoom >= 18 && getDirections(d) ? [d] : []; - }, fastEntityKey); // exit - dgroups.exit().remove(); // enter/update + var idMatch = !locationMatch && q.match(/(?:^|\W)(node|way|relation|[nwr])\W?0*([1-9]\d*)(?:\W|$)/i); - dgroups = dgroups.enter().insert('g', '.shadow').attr('class', 'viewfieldgroup').merge(dgroups); - var viewfields = dgroups.selectAll('.viewfield').data(getDirections, function key(d) { - return osmEntity.key(d); - }); // exit + 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 + }); + } - viewfields.exit().remove(); // enter/update + var allEntities = graph.entities; + var localResults = []; - viewfields.enter().append('path').attr('class', 'viewfield').attr('d', 'M0,0H0').merge(viewfields).attr('marker-start', 'url(#ideditor-viewfield-marker' + (wireframe ? '-wireframe' : '') + ')').attr('transform', function (d) { - return 'rotate(' + d + ')'; - }); - } + 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; + } - function drawTargets(selection, graph, entities, filter) { - var targetClass = context.getDebug('target') ? 'pink ' : 'nocolor '; - var nopeClass = context.getDebug('target') ? 'red ' : 'nocolor '; - var getTransform = svgPointTransform(projection).geojson; - var activeID = context.activeID(); - var data = { - targets: [], - nopes: [] - }; - entities.forEach(function (node) { - if (activeID === node.id) return; // draw no target on the activeID + localResults = localResults.sort(function byDistance(a, b) { + return a.distance - b.distance; + }); + result = result.concat(localResults); - var vertexType = svgPassiveVertex(node, graph, activeID); + (_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 + }; - if (vertexType !== 0) { - // passive or adjacent - allow to connect - data.targets.push({ - type: 'Feature', - id: node.id, - properties: { - target: true, - entity: node - }, - geometry: node.asGeoJSON() + if (d.osm_type === 'way') { + // for ways, add some fake closed nodes + attrs.nodes = ['a', 'a']; // so that geometry area is possible + } + + 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])]) + }); + } + }); + + 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 }); - } else { - data.nopes.push({ - type: 'Feature', - id: node.id + '-nope', - properties: { - nope: true, - target: true, - entity: node - }, - geometry: node.asGeoJSON() + 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 }); } - }); // Targets allow hover and vertex snapping - var targets = selection.selectAll('.vertex.target-allowed').filter(function (d) { - return filter(d.properties.entity); - }).data(data.targets, function key(d) { - return d.id; - }); // exit + return result; + } - targets.exit().remove(); // enter/update + 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')); - targets.enter().append('circle').attr('r', function (d) { - return _radii[d.id] || radiuses.shadow[3]; - }).merge(targets).attr('class', function (d) { - return 'node vertex target target-allowed ' + targetClass + d.id; - }).attr('transform', getTransform); // NOPE + 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')); + } - var nopes = selection.selectAll('.vertex.target-nope').filter(function (d) { - return filter(d.properties.entity); - }).data(data.nopes, function key(d) { - return d.id; - }); // exit + 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(); + } - nopes.exit().remove(); // enter/update + function mouseover(d3_event, d) { + if (d.id === -1) return; + utilHighlightEntities([d.id], true, context); + } - nopes.enter().append('circle').attr('r', function (d) { - return _radii[d.properties.entity.id] || radiuses.shadow[3]; - }).merge(nopes).attr('class', function (d) { - return 'node vertex target target-nope ' + nopeClass + d.id; - }).attr('transform', getTransform); - } // Points can also render as vertices: - // 1. in wireframe mode or - // 2. at higher zooms if they have a direction + function mouseout(d3_event, d) { + if (d.id === -1) return; + utilHighlightEntities([d.id], false, context); + } + function click(d3_event, d) { + d3_event.preventDefault(); - function renderAsVertex(entity, graph, wireframe, zoom) { - var geometry = entity.geometry(graph); - return geometry === 'vertex' || geometry === 'point' && (wireframe || zoom >= 18 && entity.directions(graph, projection).length); - } + 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); + } + } - function isEditedNode(node, base, head) { - var baseNode = base.entities[node.id]; - var headNode = head.entities[node.id]; - return !headNode || !baseNode || !fastDeepEqual(headNode.tags, baseNode.tags) || !fastDeepEqual(headNode.loc, baseNode.loc); + function geocoderSearch() { + services.geocoder.search(search.property('value'), function (err, resp) { + _geocodeResults = resp || []; + drawList(); + }); + } } - function getSiblingAndChildVertices(ids, graph, wireframe, zoom) { - var results = {}; - var seenIds = {}; + return featureList; + } - function addChildVertices(entity) { - // avoid redundant work and infinite recursion of circular relations - if (seenIds[entity.id]) return; - seenIds[entity.id] = true; - var geometry = entity.geometry(graph); + var $$1 = _export; + var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f; + var toLength$1 = toLength$q; + var notARegExp$1 = notARegexp; + var requireObjectCoercible$1 = requireObjectCoercible$e; + var correctIsRegExpLogic$1 = correctIsRegexpLogic; - if (!context.features().isHiddenFeature(entity, graph, geometry)) { - var i; + // eslint-disable-next-line es/no-string-prototype-startswith -- safe + var $startsWith = ''.startsWith; + var min$1 = Math.min; - if (entity.type === 'way') { - for (i = 0; i < entity.nodes.length; i++) { - var child = graph.hasEntity(entity.nodes[i]); + var CORRECT_IS_REGEXP_LOGIC$1 = correctIsRegExpLogic$1('startsWith'); + // https://github.com/zloirock/core-js/pull/702 + var MDN_POLYFILL_BUG$1 = !CORRECT_IS_REGEXP_LOGIC$1 && !!function () { + var descriptor = getOwnPropertyDescriptor$1(String.prototype, 'startsWith'); + return descriptor && !descriptor.writable; + }(); - if (child) { - addChildVertices(child); - } - } - } else if (entity.type === 'relation') { - for (i = 0; i < entity.members.length; i++) { - var member = graph.hasEntity(entity.members[i].id); + // `String.prototype.startsWith` method + // https://tc39.es/ecma262/#sec-string.prototype.startswith + $$1({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG$1 && !CORRECT_IS_REGEXP_LOGIC$1 }, { + startsWith: function startsWith(searchString /* , position = 0 */) { + var that = String(requireObjectCoercible$1(this)); + notARegExp$1(searchString); + var index = toLength$1(min$1(arguments.length > 1 ? arguments[1] : undefined, that.length)); + var search = String(searchString); + return $startsWith + ? $startsWith.call(that, search, index) + : that.slice(index, index + search.length) === search; + } + }); - if (member) { - addChildVertices(member); - } - } - } else if (renderAsVertex(entity, graph, wireframe, zoom)) { - results[entity.id] = entity; - } - } - } + function uiSectionEntityIssues(context) { + // Does the user prefer to expand the active issue? Useful for viewing tag diff. + // Expand by default so first timers see it - #6408, #8143 + var preference = corePreferences('entity-issues.reference.expanded'); - ids.forEach(function (id) { - var entity = graph.hasEntity(id); - if (!entity) return; + var _expanded = preference === null ? true : preference === 'true'; - if (entity.type === 'node') { - if (renderAsVertex(entity, graph, wireframe, zoom)) { - results[entity.id] = entity; - graph.parentWays(entity).forEach(function (entity) { - addChildVertices(entity); - }); - } - } else { - // way, relation - addChildVertices(entity); - } + var _entityIDs = []; + var _issues = []; + + var _activeIssueID; + + 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); + }); + + function reloadIssues() { + _issues = context.validator().getSharedEntityIssues(_entityIDs, { + includeDisabledRules: true }); - return results; } - function drawVertices(selection, graph, entities, filter, extent, fullRedraw) { - var wireframe = context.surface().classed('fill-wireframe'); - var visualDiff = context.surface().classed('highlight-edited'); - var zoom = geoScaleToZoom(projection.scale()); - var mode = context.mode(); - var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id); - var base = context.history().base(); - var drawLayer = selection.selectAll('.layer-osm.points .points-group.vertices'); - var touchLayer = selection.selectAll('.layer-touch.points'); + function makeActiveIssue(issueID) { + _activeIssueID = issueID; + section.selection().selectAll('.issue-container').classed('active', function (d) { + return d.id === _activeIssueID; + }); + } - if (fullRedraw) { - _currPersistent = {}; - _radii = {}; - } // Collect important vertices from the `entities` list.. - // (during a partial redraw, it will not contain everything) + 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.key; + }); // Exit + containers.exit().remove(); // Enter - for (var i = 0; i < entities.length; i++) { - var entity = entities[i]; - var geometry = entity.geometry(graph); - var keep = false; // a point that looks like a vertex.. + 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 - if (geometry === 'point' && renderAsVertex(entity, graph, wireframe, zoom)) { - _currPersistent[entity.id] = entity; - keep = true; // a vertex of some importance.. - } else if (geometry === 'vertex' && (entity.hasInterestingTags() || entity.isEndpoint(graph) || entity.isConnected(graph) || visualDiff && isEditedNode(entity, base, graph))) { - _currPersistent[entity.id] = entity; - keep = true; - } // whatever this is, it's not a persistent vertex.. + var extent = d.extent(context.graph()); + + 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 + var container = select(this.parentNode.parentNode.parentNode); + var info = container.selectAll('.issue-info'); + var isExpanded = info.classed('expanded'); + _expanded = !isExpanded; + corePreferences('entity-issues.reference.expanded', _expanded); // update preference - if (!keep && !fullRedraw) { - delete _currPersistent[entity.id]; + if (isExpanded) { + info.transition().duration(200).style('max-height', '0px').style('opacity', '0').on('end', function () { + info.classed('expanded', false); + }); + } else { + info.classed('expanded', true).transition().duration(200).style('max-height', '200px').style('opacity', '1').on('end', function () { + info.style('max-height', null); + }); } - } // 3 sets of vertices to consider: + }); + itemsEnter.append('ul').attr('class', 'issue-fix-list'); + containersEnter.append('div').attr('class', 'issue-info' + (_expanded ? ' expanded' : '')).style('max-height', _expanded ? null : '0').style('opacity', _expanded ? '1' : '0').each(function (d) { + if (typeof d.reference === 'function') { + select(this).call(d.reference); + } else { + select(this).html(_t.html('inspector.no_documentation_key')); + } + }); // 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 - var sets = { - persistent: _currPersistent, - // persistent = important vertices (render always) - selected: _currSelected, - // selected + siblings of selected (render always) - hovered: _currHover // hovered + siblings of hovered (render only in draw modes) + 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) - }; - var all = Object.assign({}, isMoving ? _currHover : {}, _currSelected, _currPersistent); // Draw the vertices.. - // The filter function controls the scope of what objects d3 will touch (exit/enter/update) - // Adjust the filter function to expand the scope beyond whatever entities were passed in. + if (d.issue.dateLastRanFix && new Date() - d.issue.dateLastRanFix < 1000) return; + d.issue.dateLastRanFix = new Date(); // remove hover-highlighting - var filterRendered = function filterRendered(d) { - return d.id in _currPersistent || d.id in _currSelected || d.id in _currHover || filter(d); - }; + utilHighlightEntities(d.issue.entityIds.concat(d.entityIds), false, context); + new Promise(function (resolve, reject) { + d.onClick(context, resolve, reject); - drawLayer.call(draw, graph, currentVisible(all), sets, filterRendered); // Draw touch targets.. - // When drawing, render all targets (not just those affected by a partial redraw) + 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'; - var filterTouch = function filterTouch(d) { - return isMoving ? true : filterRendered(d); - }; + if (iconName.startsWith('maki')) { + iconName += '-15'; + } - touchLayer.call(drawTargets, graph, currentVisible(all), filterTouch); + 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; + } - function currentVisible(which) { - return Object.keys(which).map(graph.hasEntity, graph) // the current version of this entity - .filter(function (entity) { - return entity && entity.intersects(extent, graph); - }); + return null; + }); + } + + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + + if (!_entityIDs || !val || !utilArrayIdentical(_entityIDs, val)) { + _entityIDs = val; + _activeIssueID = null; + reloadIssues(); } - } // partial redraw - only update the selected items.. + return section; + }; - drawVertices.drawSelected = function (selection, graph, extent) { - var wireframe = context.surface().classed('fill-wireframe'); - var zoom = geoScaleToZoom(projection.scale()); - _prevSelected = _currSelected || {}; + return section; + } - if (context.map().isInWideSelection()) { - _currSelected = {}; - context.selectedIDs().forEach(function (id) { - var entity = graph.hasEntity(id); - if (!entity) return; + function uiPresetIcon() { + var _preset; - if (entity.type === 'node') { - if (renderAsVertex(entity, graph, wireframe, zoom)) { - _currSelected[entity.id] = entity; - } - } - }); - } else { - _currSelected = getSiblingAndChildVertices(context.selectedIDs(), graph, wireframe, zoom); - } // note that drawVertices will add `_currSelected` automatically if needed.. + var _geometry; + var _sizeClass = 'medium'; - var filter = function filter(d) { - return d.id in _prevSelected; - }; + function isSmall() { + return _sizeClass === 'small'; + } - drawVertices(selection, graph, Object.values(_prevSelected), filter, extent, false); - }; // partial redraw - only update the hovered items.. + function presetIcon(selection) { + selection.each(render); + } + function getIcon(p, geom) { + if (isSmall() && p.isFallback && p.isFallback()) return 'iD-icon-' + p.id; + if (p.icon) return p.icon; + if (geom === 'line') return 'iD-other-line'; + if (geom === 'vertex') return p.isFallback() ? '' : 'temaki-vertex'; + if (isSmall() && geom === 'point') return ''; + return 'maki-marker-stroked'; + } - drawVertices.drawHover = function (selection, graph, target, extent) { - if (target === _currHoverTarget) return; // continue only if something changed + 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); + } - var wireframe = context.surface().classed('fill-wireframe'); - var zoom = geoScaleToZoom(projection.scale()); - _prevHover = _currHover || {}; - _currHoverTarget = target; - var entity = target && target.properties && target.properties.entity; + function renderCategoryBorder(container, category) { + var categoryBorder = container.selectAll('.preset-icon-category-border').data(category ? [0] : []); + categoryBorder.exit().remove(); + var categoryBorderEnter = categoryBorder.enter(); + var d = 60; + var svgEnter = categoryBorderEnter.append('svg').attr('class', 'preset-icon-fill preset-icon-category-border').attr('width', d).attr('height', d).attr('viewBox', "0 0 ".concat(d, " ").concat(d)); + ['fill', 'stroke'].forEach(function (klass) { + svgEnter.append('path').attr('class', "area ".concat(klass)).attr('d', 'M9.5,7.5 L25.5,7.5 L28.5,12.5 L49.5,12.5 C51.709139,12.5 53.5,14.290861 53.5,16.5 L53.5,43.5 C53.5,45.709139 51.709139,47.5 49.5,47.5 L10.5,47.5 C8.290861,47.5 6.5,45.709139 6.5,43.5 L6.5,12.5 L9.5,7.5 Z'); + }); + categoryBorder = categoryBorderEnter.merge(categoryBorder); - if (entity) { - _currHover = getSiblingAndChildVertices([entity.id], graph, wireframe, zoom); - } else { - _currHover = {}; - } // note that drawVertices will add `_currHover` automatically if needed.. + if (category) { + var tagClasses = svgTagClasses().getClassesString(category.members.collection[0].addTags, ''); + categoryBorder.selectAll('path.stroke').attr('class', "area stroke ".concat(tagClasses)); + categoryBorder.selectAll('path.fill').attr('class', "area fill ".concat(tagClasses)); + } + } + 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); + } - var filter = function filter(d) { - return d.id in _prevHover; - }; + 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', "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); + }); - drawVertices(selection, graph, Object.values(_prevHover), filter, extent, false); - }; + 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); + }); + } - return drawVertices; - } + fill = fillEnter.merge(fill); + fill.selectAll('path.stroke').attr('class', "area stroke ".concat(tagClasses)); + fill.selectAll('path.fill').attr('class', "area fill ".concat(tagClasses)); + } - function utilBindOnce(target, type, listener, capture) { - var typeOnce = type + '.once'; + 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 one() { - target.on(typeOnce, null); - listener.apply(this, arguments); + 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)); + }); + [[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); + }); + line = lineEnter.merge(line); + line.selectAll('path.stroke').attr('class', "line stroke ".concat(tagClasses)); + line.selectAll('path.casing').attr('class', "line casing ".concat(tagClasses)); } - target.on(typeOnce, one, capture); - return this; - } + 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 defaultFilter$2(d3_event) { - return !d3_event.ctrlKey && !d3_event.button; - } + 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); + }); + route = routeEnter.merge(route); - function defaultExtent$1() { - var e = this; + if (drawRoute) { + var routeType = p.tags.type === 'waterway' ? 'waterway' : p.tags.route; + var segmentPresetIDs = routeSegments[routeType]; - if (e instanceof SVGElement) { - e = e.ownerSVGElement || e; + 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 (e.hasAttribute('viewBox')) { - e = e.viewBox.baseVal; - return [[e.x, e.y], [e.x + e.width, e.y + e.height]]; + function renderSvgIcon(container, picon, geom, isFramed, category, tagClasses) { + 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 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('category', category).classed('framed', isFramed).classed('preset-icon-iD', isiDIcon); + icon.selectAll('svg').attr('class', 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line' ? '' : tagClasses)); + var suffix = ''; + + if (isMaki) { + suffix = isSmall() && geom === 'point' ? '-11' : '-15'; } - return [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]]; + icon.selectAll('use').attr('href', '#' + picon + suffix); } - return [[0, 0], [e.clientWidth, e.clientHeight]]; - } + function renderImageIcon(container, imageURL) { + 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); + } // 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. - function defaultWheelDelta$1(d3_event) { - return -d3_event.deltaY * (d3_event.deltaMode === 1 ? 0.05 : d3_event.deltaMode ? 1 : 0.002); - } - function defaultConstrain$1(transform, extent, translateExtent) { - var dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0], - dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0], - dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1], - dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1]; - return transform.translate(dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1), dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)); - } + 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'], + mtb: ['highway/path', 'highway/track', 'highway/bridleway'], + 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 utilZoomPan() { - var filter = defaultFilter$2, - extent = defaultExtent$1, - constrain = defaultConstrain$1, - wheelDelta = defaultWheelDelta$1, - scaleExtent = [0, Infinity], - translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], - interpolate = interpolateZoom, - dispatch$1 = dispatch('start', 'zoom', 'end'), - _wheelDelay = 150, - _transform = identity$2, - _activeGesture; + function render() { + var p = _preset.apply(this, arguments); - function zoom(selection) { - selection.on('pointerdown.zoom', pointerdown).on('wheel.zoom', wheeled).style('touch-action', 'none').style('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); - select(window).on('pointermove.zoompan', pointermove).on('pointerup.zoompan pointercancel.zoompan', pointerup); - } + var geom = _geometry ? _geometry.apply(this, arguments) : null; - zoom.transform = function (collection, transform, point) { - var selection = collection.selection ? collection.selection() : collection; + if (geom === 'relation' && p.tags && (p.tags.type === 'route' && p.tags.route && routeSegments[p.tags.route] || p.tags.type === 'waterway')) { + geom = 'route'; + } - if (collection !== selection) { - schedule(collection, transform, point); - } else { - selection.interrupt().each(function () { - gesture(this, arguments).start(null).zoom(null, null, typeof transform === 'function' ? transform.apply(this, arguments) : transform).end(null); - }); + 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 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 && !isCategory; + var drawRoute = picon && geom === 'route'; + var isFramed = drawVertex || drawArea || drawLine || drawRoute || isCategory; + var tags = !isCategory ? p.setTags({}, geom) : {}; + + for (var k in tags) { + if (tags[k] === '*') { + tags[k] = 'yes'; + } } - }; - zoom.scaleBy = function (selection, k, p) { - zoom.scaleTo(selection, function () { - var k0 = _transform.k, - k1 = typeof k === 'function' ? k.apply(this, arguments) : k; - return k0 * k1; - }, p); - }; + 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); + renderCategoryBorder(container, isCategory && p); + renderPointBorder(container, drawPoint); + renderCircleFill(container, drawVertex); + renderSquareFill(container, drawArea, tagClasses); + renderLine(container, drawLine, tagClasses); + renderRoute(container, drawRoute, p); + renderSvgIcon(container, picon, geom, isFramed, isCategory, tagClasses); + renderImageIcon(container, imageURL); + } - zoom.scaleTo = function (selection, k, p) { - zoom.transform(selection, function () { - var e = extent.apply(this, arguments), - t0 = _transform, - p0 = !p ? centroid(e) : typeof p === 'function' ? p.apply(this, arguments) : p, - p1 = t0.invert(p0), - k1 = typeof k === 'function' ? k.apply(this, arguments) : k; - return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent); - }, p); + presetIcon.preset = function (val) { + if (!arguments.length) return _preset; + _preset = utilFunctor(val); + return presetIcon; }; - zoom.translateBy = function (selection, x, y) { - zoom.transform(selection, function () { - return constrain(_transform.translate(typeof x === 'function' ? x.apply(this, arguments) : x, typeof y === 'function' ? y.apply(this, arguments) : y), extent.apply(this, arguments), translateExtent); - }); + presetIcon.geometry = function (val) { + if (!arguments.length) return _geometry; + _geometry = utilFunctor(val); + return presetIcon; }; - zoom.translateTo = function (selection, x, y, p) { - zoom.transform(selection, function () { - var e = extent.apply(this, arguments), - t = _transform, - p0 = !p ? centroid(e) : typeof p === 'function' ? p.apply(this, arguments) : p; - return constrain(identity$2.translate(p0[0], p0[1]).scale(t.k).translate(typeof x === 'function' ? -x.apply(this, arguments) : -x, typeof y === 'function' ? -y.apply(this, arguments) : -y), e, translateExtent); - }, p); + presetIcon.sizeClass = function (val) { + if (!arguments.length) return _sizeClass; + _sizeClass = val; + return presetIcon; }; - function scale(transform, k) { - k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k)); - return k === transform.k ? transform : new Transform(k, transform.x, transform.y); - } + return presetIcon; + } - function translate(transform, p0, p1) { - var x = p0[0] - p1[0] * transform.k, - y = p0[1] - p1[1] * transform.k; - return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y); - } + function uiSectionFeatureType(context) { + var dispatch = dispatch$8('choose'); + var _entityIDs = []; + var _presets = []; - function centroid(extent) { - return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2]; - } + var _tagReference; - function schedule(transition, transform, point) { - transition.on('start.zoom', function () { - gesture(this, arguments).start(null); - }).on('interrupt.zoom end.zoom', function () { - gesture(this, arguments).end(null); - }).tween('zoom', function () { - var that = this, - args = arguments, - g = gesture(that, args), - e = extent.apply(that, args), - p = !point ? centroid(e) : typeof point === 'function' ? point.apply(that, args) : point, - w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), - a = _transform, - b = typeof transform === 'function' ? transform.apply(that, args) : transform, - i = interpolate(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k)); - return function (t) { - if (t === 1) t = b; // Avoid rounding error on end. - else { - var l = i(t), - k = w / l[2]; - t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k); - } - g.zoom(null, null, t); - }; + var section = uiSection('feature-type', context).label(_t.html('inspector.feature_type')).disclosureContent(renderDisclosureContent); + + 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 + + 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); + } + + selection.selectAll('.preset-reset').on('click', function () { + dispatch.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; }); } - function gesture(that, args, clean) { - return !clean && _activeGesture || new Gesture(that, args); - } + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return section; + }; - function Gesture(that, args) { - this.that = that; - this.args = args; - this.active = 0; - this.extent = extent.apply(that, args); - } + section.presets = function (val) { + if (!arguments.length) return _presets; // don't reload the same preset - Gesture.prototype = { - start: function start(d3_event) { - if (++this.active === 1) { - _activeGesture = this; - dispatch$1.call('start', this, d3_event); - } + if (!utilArrayIdentical(val, _presets)) { + _presets = val; - return this; - }, - zoom: function zoom(d3_event, key, transform) { - if (this.mouse && key !== 'mouse') this.mouse[1] = transform.invert(this.mouse[0]); - if (this.pointer0 && key !== 'touch') this.pointer0[1] = transform.invert(this.pointer0[0]); - if (this.pointer1 && key !== 'touch') this.pointer1[1] = transform.invert(this.pointer1[0]); - _transform = transform; - dispatch$1.call('zoom', this, d3_event, key, transform); - return this; - }, - end: function end(d3_event) { - if (--this.active === 0) { - _activeGesture = null; - dispatch$1.call('end', this, d3_event); + if (_presets.length === 1) { + _tagReference = uiTagReference(_presets[0].reference()).showing(false); } - - return this; } - }; - function wheeled(d3_event) { - if (!filter.apply(this, arguments)) return; - var g = gesture(this, arguments), - t = _transform, - k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))), - p = utilFastMouse(this)(d3_event); // If the mouse is in the same location as before, reuse it. - // If there were recent wheel events, reset the wheel idle timeout. + return section; + }; - if (g.wheel) { - if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) { - g.mouse[1] = t.invert(g.mouse[0] = p); - } + function entityGeometries() { + var counts = {}; - clearTimeout(g.wheel); // Otherwise, capture the mouse point and location at the start. - } else { - g.mouse = [p, t.invert(p)]; - interrupt(this); - g.start(d3_event); + for (var i in _entityIDs) { + var geometry = context.graph().geometry(_entityIDs[i]); + if (!counts[geometry]) counts[geometry] = 0; + counts[geometry] += 1; } - d3_event.preventDefault(); - d3_event.stopImmediatePropagation(); - g.wheel = setTimeout(wheelidled, _wheelDelay); - g.zoom(d3_event, 'mouse', constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent)); - - function wheelidled() { - g.wheel = null; - g.end(d3_event); - } + return Object.keys(counts).sort(function (geom1, geom2) { + return counts[geom2] - counts[geom1]; + }); } - var _downPointerIDs = new Set(); - - var _pointerLocGetter; - - function pointerdown(d3_event) { - _downPointerIDs.add(d3_event.pointerId); + return utilRebind(section, dispatch, 'on'); + } - if (!filter.apply(this, arguments)) return; - var g = gesture(this, arguments, _downPointerIDs.size === 1); - var started; - d3_event.stopImmediatePropagation(); - _pointerLocGetter = utilFastMouse(this); + // It borrows some code from uiHelp - var loc = _pointerLocGetter(d3_event); + function uiFieldHelp(context, fieldName) { + var fieldHelp = {}; - var p = [loc, _transform.invert(loc), d3_event.pointerId]; + var _inspector = select(null); - if (!g.pointer0) { - g.pointer0 = p; - started = true; - } else if (!g.pointer1 && g.pointer0[2] !== p[2]) { - g.pointer1 = p; - } + var _wrap = select(null); - if (started) { - interrupt(this); - g.start(d3_event); - } - } + var _body = select(null); - function pointermove(d3_event) { - if (!_downPointerIDs.has(d3_event.pointerId)) return; - if (!_activeGesture || !_pointerLocGetter) return; - var g = gesture(this, arguments); - var isPointer0 = g.pointer0 && g.pointer0[2] === d3_event.pointerId; - var isPointer1 = !isPointer0 && g.pointer1 && g.pointer1[2] === d3_event.pointerId; + 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']]] + }; + 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 - if ((isPointer0 || isPointer1) && 'buttons' in d3_event && !d3_event.buttons) { - // The pointer went up without ending the gesture somehow, e.g. - // a down mouse was moved off the map and released. End it here. - if (g.pointer0) _downPointerIDs["delete"](g.pointer0[2]); - if (g.pointer1) _downPointerIDs["delete"](g.pointer1[2]); - g.end(d3_event); - return; - } + 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? - d3_event.preventDefault(); - d3_event.stopImmediatePropagation(); + var hhh = depth ? Array(depth + 1).join('#') + ' ' : ''; // if so, prepend with some ##'s - var loc = _pointerLocGetter(d3_event); + return all + hhh + _t.html(subkey, replacements) + '\n\n'; + }, ''); + return { + key: helpkey, + title: _t.html(helpkey + '.title'), + html: marked_1(text.trim()) + }; + }); - var t, p, l; - if (isPointer0) g.pointer0[0] = loc;else if (isPointer1) g.pointer1[0] = loc; - t = _transform; + function show() { + updatePosition(); - if (g.pointer1) { - var p0 = g.pointer0[0], - l0 = g.pointer0[1], - p1 = g.pointer1[0], - l1 = g.pointer1[1], - dp = (dp = p1[0] - p0[0]) * dp + (dp = p1[1] - p0[1]) * dp, - dl = (dl = l1[0] - l0[0]) * dl + (dl = l1[1] - l0[1]) * dl; - t = scale(t, Math.sqrt(dp / dl)); - p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2]; - l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2]; - } else if (g.pointer0) { - p = g.pointer0[0]; - l = g.pointer0[1]; - } else return; + _body.classed('hide', false).style('opacity', '0').transition().duration(200).style('opacity', '1'); + } - g.zoom(d3_event, 'touch', constrain(translate(t, p, l), g.extent, translateExtent)); + function hide() { + _body.classed('hide', true).transition().duration(200).style('opacity', '0').on('end', function () { + _body.classed('hide', true); + }); } - function pointerup(d3_event) { - if (!_downPointerIDs.has(d3_event.pointerId)) return; + function clickHelp(index) { + var d = docs[index]; + var tkeys = fieldHelpKeys[fieldName][index][1]; - _downPointerIDs["delete"](d3_event.pointerId); + _body.selectAll('.field-help-nav-item').classed('active', function (d, i) { + return i === index; + }); - if (!_activeGesture) return; - var g = gesture(this, arguments); - d3_event.stopImmediatePropagation(); - if (g.pointer0 && g.pointer0[2] === d3_event.pointerId) delete g.pointer0;else if (g.pointer1 && g.pointer1[2] === d3_event.pointerId) delete g.pointer1; + var content = _body.selectAll('.field-help-content').html(d.html); // class the paragraphs so we can find and style them - if (g.pointer1 && !g.pointer0) { - g.pointer0 = g.pointer1; - delete g.pointer1; - } - if (g.pointer0) g.pointer0[1] = _transform.invert(g.pointer0[0]);else { - g.end(d3_event); + content.selectAll('p').attr('class', function (d, i) { + return tkeys[i]; + }); // insert special content for certain help sections + + 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')); } } - zoom.wheelDelta = function (_) { - return arguments.length ? (wheelDelta = utilFunctor(+_), zoom) : wheelDelta; - }; + fieldHelp.button = function (selection) { + if (_body.empty()) return; + var button = selection.selectAll('.field-help-button').data([0]); // enter/update - zoom.filter = function (_) { - return arguments.length ? (filter = utilFunctor(!!_), zoom) : filter; - }; + 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(); - zoom.extent = function (_) { - return arguments.length ? (extent = utilFunctor([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent; + if (_body.classed('hide')) { + show(); + } else { + hide(); + } + }); }; - zoom.scaleExtent = function (_) { - return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]]; - }; + function updatePosition() { + var wrap = _wrap.node(); - zoom.translateExtent = function (_) { - return arguments.length ? (translateExtent[0][0] = +_[0][0], translateExtent[1][0] = +_[1][0], translateExtent[0][1] = +_[0][1], translateExtent[1][1] = +_[1][1], zoom) : [[translateExtent[0][0], translateExtent[0][1]], [translateExtent[1][0], translateExtent[1][1]]]; - }; + var inspector = _inspector.node(); - zoom.constrain = function (_) { - return arguments.length ? (constrain = _, zoom) : constrain; - }; + var wRect = wrap.getBoundingClientRect(); + var iRect = inspector.getBoundingClientRect(); - zoom.interpolate = function (_) { - return arguments.length ? (interpolate = _, zoom) : interpolate; - }; + _body.style('top', wRect.top + inspector.scrollTop - iRect.top + 'px'); + } - zoom._transform = function (_) { - return arguments.length ? (_transform = _, zoom) : _transform; + 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]); + + var enter = _body.enter().append('div').attr('class', 'field-help-body hide'); // initially hidden + + + 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); }; - return utilRebind(zoom, dispatch$1, 'on'); + return fieldHelp; } - // if pointer events are supported. Falls back to default `dblclick` event. - - function utilDoubleUp() { - var dispatch$1 = dispatch('doubleUp'); - var _maxTimespan = 500; // milliseconds + function uiFieldCheck(field, context) { + var dispatch = dispatch$8('change'); + var options = field.options; + var values = []; + var texts = []; - var _maxDistance = 20; // web pixels; be somewhat generous to account for touch devices + var _tags; - var _pointer; // object representing the pointer that could trigger double up + var input = select(null); + var text = select(null); + var label = select(null); + var reverser = select(null); + var _impliedYes; - function pointerIsValidFor(loc) { - // second pointerup must occur within a small timeframe after the first pointerdown - return new Date().getTime() - _pointer.startTime <= _maxTimespan && // all pointer events must occur within a small distance of the first pointerdown - geoVecLength(_pointer.startLoc, loc) <= _maxDistance; - } + var _entityIDs = []; - function pointerdown(d3_event) { - // ignore right-click - if (d3_event.ctrlKey || d3_event.button === 2) return; - var loc = [d3_event.clientX, d3_event.clientY]; // Don't rely on pointerId here since it can change between pointerdown - // events on touch devices + var _value; - if (_pointer && !pointerIsValidFor(loc)) { - // if this pointer is no longer valid, clear it so another can be started - _pointer = undefined; + if (options) { + for (var i in options) { + var v = options[i]; + values.push(v === 'undefined' ? undefined : v); + texts.push(field.t.html('options.' + v, { + 'default': v + })); } + } else { + values = [undefined, 'yes']; + texts = [_t.html('inspector.unknown'), _t.html('inspector.check.yes')]; - if (!_pointer) { - _pointer = { - startLoc: loc, - startTime: new Date().getTime(), - upCount: 0, - pointerId: d3_event.pointerId - }; - } else { - // double down - _pointer.pointerId = d3_event.pointerId; + if (field.type !== 'defaultCheck') { + values.push('no'); + texts.push(_t.html('inspector.check.no')); } - } - - function pointerup(d3_event) { - // ignore right-click - if (d3_event.ctrlKey || d3_event.button === 2) return; - if (!_pointer || _pointer.pointerId !== d3_event.pointerId) return; - _pointer.upCount += 1; + } // Checks tags to see whether an undefined value is "Assumed to be Yes" - if (_pointer.upCount === 2) { - // double up! - var loc = [d3_event.clientX, d3_event.clientY]; - if (pointerIsValidFor(loc)) { - var locInThis = utilFastMouse(this)(d3_event); - dispatch$1.call('doubleUp', this, d3_event, locInThis); - } // clear the pointer info in any case + 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]); - _pointer = undefined; + for (var key in entity.tags) { + if (key in osmOneWayTags && entity.tags[key] in osmOneWayTags[key]) { + _impliedYes = true; + texts[0] = _t.html('_tagging.presets.fields.oneway_yes.options.undefined'); + break; + } + } } } - function doubleUp(selection) { - if ('PointerEvent' in window) { - // dblclick isn't well supported on touch devices so manually use - // pointer events if they're available - selection.on('pointerdown.doubleUp', pointerdown).on('pointerup.doubleUp', pointerup); - } else { - // fallback to dblclick - selection.on('dblclick.doubleUp', function (d3_event) { - dispatch$1.call('doubleUp', this, d3_event, utilFastMouse(this)(d3_event)); - }); - } + function reverserHidden() { + if (!context.container().select('div.inspector-hover').empty()) return true; + return !(_value === 'yes' || _impliedYes && !_value); } - doubleUp.off = function (selection) { - selection.on('pointerdown.doubleUp', null).on('pointerup.doubleUp', null).on('dblclick.doubleUp', null); - }; - - return utilRebind(doubleUp, dispatch$1, 'on'); - } - - var TILESIZE = 256; - var minZoom = 2; - var maxZoom = 24; - var kMin = geoZoomToScale(minZoom, TILESIZE); - var kMax = geoZoomToScale(maxZoom, TILESIZE); - - function clamp(num, min, max) { - return Math.max(min, Math.min(num, max)); - } - - function rendererMap(context) { - var dispatch$1 = dispatch('move', 'drawn', 'crossEditableZoom', 'hitMinZoom', 'changeHighlighting', 'changeAreaFill'); - var projection = context.projection; - var curtainProjection = context.curtainProjection; - var drawLayers; - var drawPoints; - var drawVertices; - var drawLines; - var drawAreas; - var drawMidpoints; - var drawLabels; - - var _selection = select(null); - - var supersurface = select(null); - var wrapper = select(null); - var surface = select(null); - var _dimensions = [1, 1]; - var _dblClickZoomEnabled = true; - var _redrawEnabled = true; - - var _gestureTransformStart; - - var _transformStart = projection.transform(); - - var _transformLast; + 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 _isTransformed = false; - var _minzoom = 0; + 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'); - var _getMouseCoords; + if (field.type === 'onewayCheck') { + enter.append('button').attr('class', 'reverser' + (reverserHidden() ? ' hide' : '')).append('span').attr('class', 'reverser-span'); + } - var _lastPointerEvent; + label = label.merge(enter); + input = label.selectAll('input'); + text = label.selectAll('span.value'); + input.on('click', function (d3_event) { + d3_event.stopPropagation(); + var t = {}; - var _lastWithinEditableZoom; // whether a pointerdown event started the zoom + 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 _pointerDown = false; // use pointer events on supported platforms; fallback to mouse events + if (t[field.key] === 'reversible' || t[field.key] === 'alternating') { + t[field.key] = values[0]; + } - var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; // use pointer event interaction if supported; fallback to touch/mouse events in d3-zoom + dispatch.call('change', this, t); + }); + 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); + } - var _zoomerPannerFunction = 'PointerEvent' in window ? utilZoomPan : d3_zoom; + return graph; + }, _t('operations.reverse.annotation.line', { + n: 1 + })); // must manually revalidate since no 'change' event was called - var _zoomerPanner = _zoomerPannerFunction().scaleExtent([kMin, kMax]).interpolate(interpolate).filter(zoomEventFilter).on('zoom.map', zoomPan).on('start.map', function (d3_event) { - _pointerDown = d3_event && (d3_event.type === 'pointerdown' || d3_event.sourceEvent && d3_event.sourceEvent.type === 'pointerdown'); - }).on('end.map', function () { - _pointerDown = false; - }); + context.validator().validate(); + select(this).call(reverserSetText); + }); + } + }; - var _doubleUpHandler = utilDoubleUp(); + check.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return check; + }; - var scheduleRedraw = throttle(redraw, 750); // var isRedrawScheduled = false; - // var pendingRedrawCall; - // function scheduleRedraw() { - // // Only schedule the redraw if one has not already been set. - // if (isRedrawScheduled) return; - // isRedrawScheduled = true; - // var that = this; - // var args = arguments; - // pendingRedrawCall = window.requestIdleCallback(function () { - // // Reset the boolean so future redraws can be set. - // isRedrawScheduled = false; - // redraw.apply(that, args); - // }, { timeout: 1400 }); - // } + check.tags = function (tags) { + _tags = tags; + function isChecked(val) { + return val !== 'no' && val !== '' && val !== undefined && val !== null; + } - function cancelPendingRedraw() { - scheduleRedraw.cancel(); // isRedrawScheduled = false; - // window.cancelIdleCallback(pendingRedrawCall); - } + function textFor(val) { + if (val === '') val = undefined; + var index = values.indexOf(val); + return index !== -1 ? texts[index] : '"' + val + '"'; + } - function map(selection) { - _selection = selection; - context.on('change.map', immediateRedraw); - var osm = context.connection(); + checkImpliedYes(); + var isMixed = Array.isArray(tags[field.key]); + _value = !isMixed && tags[field.key] && tags[field.key].toLowerCase(); - if (osm) { - osm.on('change.map', immediateRedraw); + if (field.type === 'onewayCheck' && (_value === '1' || _value === '-1')) { + _value = 'yes'; } - function didUndoOrRedo(targetTransform) { - var mode = context.mode().id; - if (mode !== 'browse' && mode !== 'select') return; + 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 (targetTransform) { - map.transformEase(targetTransform); - } + if (field.type === 'onewayCheck') { + reverser.classed('hide', reverserHidden()).call(reverserSetText); } + }; - context.history().on('merge.map', function () { - scheduleRedraw(); - }).on('change.map', immediateRedraw).on('undone.map', function (stack, fromStack) { - didUndoOrRedo(fromStack.transform); - }).on('redone.map', function (stack) { - didUndoOrRedo(stack.transform); - }); - context.background().on('change.map', immediateRedraw); - context.features().on('redraw.map', immediateRedraw); - drawLayers.on('change.map', function () { - context.background().updateImagery(); - immediateRedraw(); - }); - selection.on('wheel.map mousewheel.map', function (d3_event) { - // disable swipe-to-navigate browser pages on trackpad/magic mouse â #5552 - d3_event.preventDefault(); - }).call(_zoomerPanner).call(_zoomerPanner.transform, projection.transform()).on('dblclick.zoom', null); // override d3-zoom dblclick handling + check.focus = function () { + input.node().focus(); + }; - map.supersurface = supersurface = selection.append('div').attr('class', 'supersurface').call(utilSetTransform, 0, 0); // Need a wrapper div because Opera can't cope with an absolutely positioned - // SVG element: http://bl.ocks.org/jfirebaugh/6fbfbd922552bf776c16 + return utilRebind(check, dispatch, 'on'); + } - wrapper = supersurface.append('div').attr('class', 'layer layer-data'); - map.surface = surface = wrapper.call(drawLayers).selectAll('.surface'); - surface.call(drawLabels.observe).call(_doubleUpHandler).on(_pointerPrefix + 'down.zoom', function (d3_event) { - _lastPointerEvent = d3_event; + function uiFieldCombo(field, context) { + var dispatch = dispatch$8('change'); - if (d3_event.button === 2) { - d3_event.stopPropagation(); - } - }, true).on(_pointerPrefix + 'up.zoom', function (d3_event) { - _lastPointerEvent = d3_event; + var _isMulti = field.type === 'multiCombo' || field.type === 'manyCombo'; - if (resetTransform()) { - immediateRedraw(); - } - }).on(_pointerPrefix + 'move.map', function (d3_event) { - _lastPointerEvent = d3_event; - }).on(_pointerPrefix + 'over.vertices', function (d3_event) { - if (map.editableDataEnabled() && !_isTransformed) { - var hover = d3_event.target.__data__; - surface.call(drawVertices.drawHover, context.graph(), hover, map.extent()); - dispatch$1.call('drawn', this, { - full: false - }); - } - }).on(_pointerPrefix + 'out.vertices', function (d3_event) { - if (map.editableDataEnabled() && !_isTransformed) { - var hover = d3_event.relatedTarget && d3_event.relatedTarget.__data__; - surface.call(drawVertices.drawHover, context.graph(), hover, map.extent()); - dispatch$1.call('drawn', this, { - full: false - }); - } - }); - var detected = utilDetect(); // only WebKit supports gesture events + var _isNetwork = field.type === 'networkCombo'; - if ('GestureEvent' in window && // Listening for gesture events on iOS 13.4+ breaks double-tapping, - // but we only need to do this on desktop Safari anyway. â #7694 - !detected.isMobileWebKit) { - // Desktop Safari sends gesture events for multitouch trackpad pinches. - // We can listen for these and translate them into map zooms. - surface.on('gesturestart.surface', function (d3_event) { - d3_event.preventDefault(); - _gestureTransformStart = projection.transform(); - }).on('gesturechange.surface', gestureChange); - } // must call after surface init + var _isSemi = field.type === 'semiCombo'; + var _optarray = field.options; - updateAreaFill(); + var _showTagInfoSuggestions = field.type !== 'manyCombo' && field.autoSuggestions !== false; - _doubleUpHandler.on('doubleUp.map', function (d3_event, p0) { - if (!_dblClickZoomEnabled) return; // don't zoom if targeting something other than the map itself + var _allowCustomValues = field.type !== 'manyCombo' && field.customValues !== false; - if (_typeof(d3_event.target.__data__) === 'object' && // or area fills - !select(d3_event.target).classed('fill')) return; - var zoomOut = d3_event.shiftKey; - var t = projection.transform(); - var p1 = t.invert(p0); - t = t.scale(zoomOut ? 0.5 : 2); - t.x = p0[0] - p1[0] * t.k; - t.y = p0[1] - p1[1] * t.k; - map.transformEase(t); - }); + var _snake_case = field.snake_case || field.snake_case === undefined; - context.on('enter.map', function () { - if (!map.editableDataEnabled(true - /* skip zoom check */ - )) return; // redraw immediately any objects affected by a change in selectedIDs. + var _combobox = uiCombobox(context, 'combo-' + field.safeid).caseSensitive(field.caseSensitive).minItems(_isMulti || _isSemi ? 1 : 2); - var graph = context.graph(); - var selectedAndParents = {}; - context.selectedIDs().forEach(function (id) { - var entity = graph.hasEntity(id); + var _container = select(null); - if (entity) { - selectedAndParents[entity.id] = entity; + var _inputWrap = select(null); - if (entity.type === 'node') { - graph.parentWays(entity).forEach(function (parent) { - selectedAndParents[parent.id] = parent; - }); - } - } - }); - var data = Object.values(selectedAndParents); + var _input = select(null); - var filter = function filter(d) { - return d.id in selectedAndParents; - }; + var _comboData = []; + var _multiData = []; + var _entityIDs = []; - data = context.features().filter(data, graph); - surface.call(drawVertices.drawSelected, graph, map.extent()).call(drawLines, graph, data, filter).call(drawAreas, graph, data, filter).call(drawMidpoints, graph, data, filter, map.trimmedExtent()); - dispatch$1.call('drawn', this, { - full: false - }); // redraw everything else later + var _tags; - scheduleRedraw(); - }); - map.dimensions(utilGetDimensions(selection)); + var _countryCode; + + var _staticPlaceholder; // initialize deprecated tags array + + + var _dataDeprecated = []; + _mainFileFetcher.get('deprecated').then(function (d) { + _dataDeprecated = d; + })["catch"](function () { + /* ignore */ + }); // ensure multiCombo field.key ends with a ':' + + if (_isMulti && field.key && /[^:]$/.test(field.key)) { + field.key += ':'; } - function zoomEventFilter(d3_event) { - // Fix for #2151, (see also d3/d3-zoom#60, d3/d3-brush#18) - // Intercept `mousedown` and check if there is an orphaned zoom gesture. - // This can happen if a previous `mousedown` occurred without a `mouseup`. - // If we detect this, dispatch `mouseup` to complete the orphaned gesture, - // so that d3-zoom won't stop propagation of new `mousedown` events. - if (d3_event.type === 'mousedown') { - var hasOrphan = false; - var listeners = window.__on; + function snake(s) { + return s.replace(/\s+/g, '_').toLowerCase(); + } - for (var i = 0; i < listeners.length; i++) { - var listener = listeners[i]; + 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 (listener.name === 'zoom' && listener.type === 'mouseup') { - hasOrphan = true; - break; - } - } - if (hasOrphan) { - var event = window.CustomEvent; + function tagValue(dval) { + dval = clean(dval || ''); - if (event) { - event = new event('mouseup'); - } else { - event = window.document.createEvent('Event'); - event.initEvent('mouseup', false, false); - } // Event needs to be dispatched with an event.view property. + var found = _comboData.find(function (o) { + return o.key && clean(o.value) === dval; + }); + if (found) return found.key; - event.view = window; - window.dispatchEvent(event); - } + if (field.type === 'typeCombo' && !dval) { + return 'yes'; } - return d3_event.button !== 2; // ignore right clicks - } + 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) - function pxCenter() { - return [_dimensions[0] / 2, _dimensions[1] / 2]; - } - function drawEditable(difference, extent) { - var mode = context.mode(); - var graph = context.graph(); - var features = context.features(); - var all = context.history().intersects(map.extent()); - var fullRedraw = false; - var data; - var set; - var filter; - var applyFeatureLayerFilters = true; + function displayValue(tval) { + tval = tval || ''; - if (map.isInWideSelection()) { - data = []; - utilEntityAndDeepMemberIDs(mode.selectedIDs(), context.graph()).forEach(function (id) { - var entity = context.hasEntity(id); - if (entity) data.push(entity); + if (field.hasTextForStringId('options.' + tval)) { + return field.t('options.' + tval, { + "default": tval }); - fullRedraw = true; - filter = utilFunctor(true); // selected features should always be visible, so we can skip filtering + } - applyFeatureLayerFilters = false; - } else if (difference) { - var complete = difference.complete(map.extent()); - data = Object.values(complete).filter(Boolean); - set = new Set(Object.keys(complete)); + if (field.type === 'typeCombo' && tval.toLowerCase() === 'yes') { + return ''; + } - filter = function filter(d) { - return set.has(d.id); - }; + return tval; + } // Compute the difference between arrays of objects by `value` property + // + // objectDifference([{value:1}, {value:2}, {value:3}], [{value:2}]) + // > [{value:1}, {value:3}] + // - features.clear(data); - } else { - // force a full redraw if gatherStats detects that a feature - // should be auto-hidden (e.g. points or buildings).. - if (features.gatherStats(all, graph, _dimensions)) { - extent = undefined; - } - if (extent) { - data = context.history().intersects(map.extent().intersection(extent)); - set = new Set(data.map(function (entity) { - return entity.id; - })); + function objectDifference(a, b) { + return a.filter(function (d1) { + return !b.some(function (d2) { + return !d2.isMixed && d1.value === d2.value; + }); + }); + } - filter = function filter(d) { - return set.has(d.id); - }; - } else { - data = all; - fullRedraw = true; - filter = utilFunctor(true); - } + function initCombo(selection, attachTo) { + if (!_allowCustomValues) { + selection.attr('readonly', 'readonly'); } - if (applyFeatureLayerFilters) { - data = features.filter(data, graph); + if (_showTagInfoSuggestions && services.taginfo) { + selection.call(_combobox.fetcher(setTaginfoValues), attachTo); + setTaginfoValues('', setPlaceholder); } else { - context.features().resetStats(); - } - - if (mode && mode.id === 'select') { - // update selected vertices - the user might have just double-clicked a way, - // creating a new vertex, triggering a partial redraw without a mode change - surface.call(drawVertices.drawSelected, graph, map.extent()); + selection.call(_combobox, attachTo); + setStaticValues(setPlaceholder); } + } - surface.call(drawVertices, graph, data, filter, map.extent(), fullRedraw).call(drawLines, graph, data, filter).call(drawAreas, graph, data, filter).call(drawMidpoints, graph, data, filter, map.trimmedExtent()).call(drawLabels, graph, data, filter, _dimensions, fullRedraw).call(drawPoints, graph, data, filter); - dispatch$1.call('drawn', this, { - full: true + function setStaticValues(callback) { + if (!_optarray) return; + _comboData = _optarray.map(function (v) { + return { + key: v, + value: field.t('options.' + v, { + "default": v + }), + title: v, + display: field.t.html('options.' + v, { + "default": v + }), + klass: field.hasTextForStringId('options.' + v) ? '' : 'raw-option' + }; }); + + _combobox.data(objectDifference(_comboData, _multiData)); + + if (callback) callback(_comboData); } - map.init = function () { - drawLayers = svgLayers(projection, context); - drawPoints = svgPoints(projection, context); - drawVertices = svgVertices(projection, context); - drawLines = svgLines(projection, context); - drawAreas = svgAreas(projection, context); - drawMidpoints = svgMidpoints(projection, context); - drawLabels = svgLabels(projection, context); - }; + function setTaginfoValues(q, callback) { + var fn = _isMulti ? 'multikeys' : 'values'; + var query = (_isMulti ? field.key : '') + q; + var hasCountryPrefix = _isNetwork && _countryCode && _countryCode.indexOf(q.toLowerCase()) === 0; - function editOff() { - context.features().resetStats(); - surface.selectAll('.layer-osm *').remove(); - surface.selectAll('.layer-touch:not(.markers) *').remove(); - var allowed = { - 'browse': true, - 'save': true, - 'select-note': true, - 'select-data': true, - 'select-error': true + if (hasCountryPrefix) { + query = _countryCode + ':'; + } + + var params = { + debounce: q !== '', + key: field.key, + query: query }; - var mode = context.mode(); - if (mode && !allowed[mode.id]) { - context.enter(modeBrowse(context)); + if (_entityIDs.length) { + params.geometry = context.graph().geometry(_entityIDs[0]); } - dispatch$1.call('drawn', this, { - full: true - }); - } + 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 - function gestureChange(d3_event) { - // Remap Safari gesture events to wheel events - #5492 - // We want these disabled most places, but enabled for zoom/unzoom on map surface - // https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent - var e = d3_event; - e.preventDefault(); - var props = { - deltaMode: 0, - // dummy values to ignore in zoomPan - deltaY: 1, - // dummy values to ignore in zoomPan - clientX: e.clientX, - clientY: e.clientY, - screenX: e.screenX, - screenY: e.screenY, - x: e.x, - y: e.y - }; - var e2 = new WheelEvent('wheel', props); - e2._scale = e.scale; // preserve the original scale - e2._rotation = e.rotation; // preserve the original rotation + return !d.count || d.count > 10; + }); + var deprecatedValues = osmEntity.deprecatedTagValuesByKey(_dataDeprecated)[field.key]; - _selection.node().dispatchEvent(e2); - } + if (deprecatedValues) { + // don't suggest deprecated tag values + data = data.filter(function (d) { + return deprecatedValues.indexOf(d.value) === -1; + }); + } - function zoomPan(event, key, transform) { - var source = event && event.sourceEvent || event; - var eventTransform = transform || event && event.transform; - var x = eventTransform.x; - var y = eventTransform.y; - var k = eventTransform.k; // Special handling of 'wheel' events: - // They might be triggered by the user scrolling the mouse wheel, - // or 2-finger pinch/zoom gestures, the transform may need adjustment. + if (hasCountryPrefix) { + data = data.filter(function (d) { + return d.value.toLowerCase().indexOf(_countryCode + ':') === 0; + }); + } // hide the caret if there are no suggestions - if (source && source.type === 'wheel') { - // assume that the gesture is already handled by pointer events - if (_pointerDown) return; - var detected = utilDetect(); - var dX = source.deltaX; - var dY = source.deltaY; - var x2 = x; - var y2 = y; - var k2 = k; - var t0, p0, p1; // Normalize mousewheel scroll speed (Firefox) - #3029 - // If wheel delta is provided in LINE units, recalculate it in PIXEL units - // We are essentially redoing the calculations that occur here: - // https://github.com/d3/d3-zoom/blob/78563a8348aa4133b07cac92e2595c2227ca7cd7/src/zoom.js#L203 - // See this for more info: - // https://github.com/basilfx/normalize-wheel/blob/master/src/normalizeWheel.js - if (source.deltaMode === 1 - /* LINE */ - ) { - // Convert from lines to pixels, more if the user is scrolling fast. - // (I made up the exp function to roughly match Firefox to what Chrome does) - // These numbers should be floats, because integers are treated as pan gesture below. - var lines = Math.abs(source.deltaY); - var sign = source.deltaY > 0 ? 1 : -1; - dY = sign * clamp(Math.exp((lines - 1) * 0.75) * 4.000244140625, 4.000244140625, // min - 350.000244140625 // max - ); // On Firefox Windows and Linux we always get +/- the scroll line amount (default 3) - // There doesn't seem to be any scroll acceleration. - // This multiplier increases the speed a little bit - #5512 + _container.classed('empty-combobox', data.length === 0); - if (detected.os !== 'mac') { - dY *= 5; - } // recalculate x2,y2,k2 + _comboData = data.map(function (d) { + var k = d.value; + if (_isMulti) k = k.replace(field.key, ''); + var label = field.t('options.' + k, { + "default": k + }); + return { + key: k, + value: label, + display: field.t.html('options.' + k, { + "default": k + }), + title: d.title || label, + klass: field.hasTextForStringId('options.' + k) ? '' : 'raw-option' + }; + }); + _comboData = objectDifference(_comboData, _multiData); + if (callback) callback(_comboData); + }); + } + + 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(', '); + } + if (!/(â¦|\.\.\.)$/.test(_staticPlaceholder)) { + _staticPlaceholder += 'â¦'; + } - t0 = _isTransformed ? _transformLast : _transformStart; - p0 = _getMouseCoords(source); - p1 = t0.invert(p0); - k2 = t0.k * Math.pow(2, -dY / 500); - k2 = clamp(k2, kMin, kMax); - x2 = p0[0] - p1[0] * k2; - y2 = p0[1] - p1[1] * k2; // 2 finger map pinch zooming (Safari) - #5492 - // These are fake `wheel` events we made from Safari `gesturechange` events.. - } else if (source._scale) { - // recalculate x2,y2,k2 - t0 = _gestureTransformStart; - p0 = _getMouseCoords(source); - p1 = t0.invert(p0); - k2 = t0.k * source._scale; - k2 = clamp(k2, kMin, kMax); - x2 = p0[0] - p1[0] * k2; - y2 = p0[1] - p1[1] * k2; // 2 finger map pinch zooming (all browsers except Safari) - #5492 - // Pinch zooming via the `wheel` event will always have: - // - `ctrlKey = true` - // - `deltaY` is not round integer pixels (ignore `deltaX`) - } else if (source.ctrlKey && !isInteger(dY)) { - dY *= 6; // slightly scale up whatever the browser gave us - // recalculate x2,y2,k2 + var ph; - t0 = _isTransformed ? _transformLast : _transformStart; - p0 = _getMouseCoords(source); - p1 = t0.invert(p0); - k2 = t0.k * Math.pow(2, -dY / 500); - k2 = clamp(k2, kMin, kMax); - x2 = p0[0] - p1[0] * k2; - y2 = p0[1] - p1[1] * k2; // Trackpad scroll zooming with shift or alt/option key down - } else if ((source.altKey || source.shiftKey) && isInteger(dY)) { - // recalculate x2,y2,k2 - t0 = _isTransformed ? _transformLast : _transformStart; - p0 = _getMouseCoords(source); - p1 = t0.invert(p0); - k2 = t0.k * Math.pow(2, -dY / 500); - k2 = clamp(k2, kMin, kMax); - x2 = p0[0] - p1[0] * k2; - y2 = p0[1] - p1[1] * k2; // 2 finger map panning (Mac only, all browsers) - #5492, #5512 - // Panning via the `wheel` event will always have: - // - `ctrlKey = false` - // - `deltaX`,`deltaY` are round integer pixels - } else if (detected.os === 'mac' && !source.ctrlKey && isInteger(dX) && isInteger(dY)) { - p1 = projection.translate(); - x2 = p1[0] - dX; - y2 = p1[1] - dY; - k2 = projection.scale(); - k2 = clamp(k2, kMin, kMax); - } // something changed - replace the event transform + if (!_isMulti && !_isSemi && _tags && Array.isArray(_tags[field.key])) { + ph = _t('inspector.multiple_values'); + } else { + ph = _staticPlaceholder; + } + + _container.selectAll('input').attr('placeholder', ph); + } + + function change() { + var t = {}; + var val; + if (_isMulti || _isSemi) { + val = tagValue(utilGetSetValue(_input).replace(/,/g, ';')) || ''; - if (x2 !== x || y2 !== y || k2 !== k) { - x = x2; - y = y2; - k = k2; - eventTransform = identity$2.translate(x2, y2).scale(k2); + _container.classed('active', false); - if (_zoomerPanner._transform) { - // utilZoomPan interface - _zoomerPanner._transform(eventTransform); - } else { - // d3_zoom interface - _selection.node().__zoom = eventTransform; - } + utilGetSetValue(_input, ''); + var vals = val.split(';').filter(Boolean); + if (!vals.length) return; + + if (_isMulti) { + utilArrayUniq(vals).forEach(function (v) { + var key = (field.key || '') + v; + + 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; + }); + + 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 + + if (!rawValue && Array.isArray(_tags[field.key])) return; + val = context.cleanTagValue(tagValue(rawValue)); + t[field.key] = val || undefined; } - if (_transformStart.x === x && _transformStart.y === y && _transformStart.k === k) { - return; // no change + dispatch.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); + + arr = utilArrayUniq(arr); + t[field.key] = arr.length ? arr.join(';') : undefined; } - var withinEditableZoom = map.withinEditableZoom(); + dispatch.call('change', this, t); + } - if (_lastWithinEditableZoom !== withinEditableZoom) { - if (_lastWithinEditableZoom !== undefined) { - // notify that the map zoomed in or out over the editable zoom threshold - dispatch$1.call('crossEditableZoom', this, withinEditableZoom); + 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 (_isMulti || _isSemi) { + _container = _container.selectAll('.chiplist').data([0]); + var listClass = 'chiplist'; // Use a separate line for each value in the Destinations and Via fields + // to mimic highway exit signs + + if (field.key === 'destination' || field.key === 'via') { + listClass += ' full-line-chips'; } - _lastWithinEditableZoom = withinEditableZoom; + _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]); } - if (geoScaleToZoom(k, TILESIZE) < _minzoom) { - surface.interrupt(); - dispatch$1.call('hitMinZoom', this, map); - setCenterZoom(map.center(), context.minEditableZoom(), 0, true); - scheduleRedraw(); - dispatch$1.call('move', this, map); - return; + _input = _input.enter().append('input').attr('type', 'text').attr('id', field.domId).call(utilNoAuto).call(initCombo, selection).merge(_input); + + if (_isNetwork) { + var extent = combinedEntityExtent(); + var countryCode = extent && iso1A2Code(extent.center()); + _countryCode = countryCode && countryCode.toLowerCase(); } - projection.transform(eventTransform); - var scale = k / _transformStart.k; - var tX = (x / scale - _transformStart.x) * scale; - var tY = (y / scale - _transformStart.y) * scale; + _input.on('change', change).on('blur', change); - if (context.inIntro()) { - curtainProjection.transform({ - x: x - tX, - y: y - tY, - k: k - }); - } + _input.on('keydown.field', function (d3_event) { + switch (d3_event.keyCode) { + case 13: + // â© Return + _input.node().blur(); // blurring also enters the value - if (source) { - _lastPointerEvent = event; - } - _isTransformed = true; - _transformLast = eventTransform; - utilSetTransform(supersurface, tX, tY, scale); - scheduleRedraw(); - dispatch$1.call('move', this, map); + d3_event.stopPropagation(); + break; + } + }); - function isInteger(val) { - return typeof val === 'number' && isFinite(val) && Math.floor(val) === val; + if (_isMulti || _isSemi) { + _combobox.on('accept', function () { + _input.node().blur(); + + _input.node().focus(); + }); + + _input.on('focus', function () { + _container.classed('active', true); + }); } } - function resetTransform() { - if (!_isTransformed) return false; - utilSetTransform(supersurface, 0, 0); - _isTransformed = false; + combo.tags = function (tags) { + _tags = tags; - if (context.inIntro()) { - curtainProjection.transform(projection.transform()); - } + if (_isMulti || _isSemi) { + _multiData = []; + var maxLength; - return true; - } + 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; - function redraw(difference, extent) { - if (surface.empty() || !_redrawEnabled) return; // If we are in the middle of a zoom/pan, we can't do differenced redraws. - // It would result in artifacts where differenced entities are redrawn with - // one transform and unchanged entities with another. + _multiData.push({ + key: k, + value: displayValue(suffix), + isMixed: Array.isArray(v) + }); + } - if (resetTransform()) { - difference = extent = undefined; - } + 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 - var zoom = map.zoom(); - var z = String(~~zoom); + maxLength = context.maxCharsForTagKey() - utilUnicodeCharsCount(field.key); + } else { + maxLength = context.maxCharsForTagKey(); + } + } else if (_isSemi) { + var allValues = []; + var commonValues; - if (surface.attr('data-zoom') !== z) { - surface.attr('data-zoom', z); - } // class surface as `lowzoom` around z17-z18.5 (based on latitude) + if (Array.isArray(tags[field.key])) { + tags[field.key].forEach(function (tagVal) { + var thisVals = utilArrayUniq((tagVal || '').split(';')).filter(Boolean); + allValues = allValues.concat(thisVals); + 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; + } - var lat = map.center()[1]; - var lowzoom = linear$2().domain([-60, 0, 60]).range([17, 18.5, 17]).clamp(true); - surface.classed('low-zoom', zoom <= lowzoom(lat)); + _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 - if (!difference) { - supersurface.call(context.background()); - wrapper.call(drawLayers); - } // OSM + maxLength = context.maxCharsForTagValue() - currLength; + 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 (map.editableDataEnabled() || map.isInWideSelection()) { - context.loadTiles(projection); - drawEditable(difference, extent); - } else { - editOff(); - } - _transformStart = projection.transform(); - return map; - } + 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 immediateRedraw = function immediateRedraw(difference, extent) { - if (!difference && !extent) cancelPendingRedraw(); - redraw(difference, extent); - }; + var available = objectDifference(_comboData, _multiData); - map.lastPointerEvent = function () { - return _lastPointerEvent; - }; + _combobox.data(available); // Hide 'Add' button if this field uses fixed set of + // options and they're all currently used, + // or if the field is already at its character limit - map.mouse = function (d3_event) { - var event = _lastPointerEvent || d3_event; - if (event) { - var s; + var hideAdd = !_allowCustomValues && !available.length || maxLength <= 0; - while (s = event.sourceEvent) { - event = s; + _container.selectAll('.chiplist .input-wrap').style('display', hideAdd ? 'none' : null); // Render chips + + + var chips = _container.selectAll('.chip').data(_multiData); + + 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('raw-value', function (d) { + var k = d.key; + if (_isMulti) k = k.replace(field.key, ''); + return !field.hasTextForStringId('options.' + k); + }).classed('draggable', allowDragAndDrop).classed('mixed', function (d) { + return d.isMixed; + }).attr('title', function (d) { + return d.isMixed ? _t('inspector.unshared_value_tooltip') : null; + }); + + if (allowDragAndDrop) { + registerDragAndDrop(chips); } - return _getMouseCoords(event); + chips.select('span').html(function (d) { + return d.value; + }); + 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); + var showsValue = !isMixed && tags[field.key] && !(field.type === 'typeCombo' && tags[field.key] === 'yes'); + var isRawValue = showsValue && !field.hasTextForStringId('options.' + tags[field.key]); + var isKnownValue = showsValue && !isRawValue; + var isReadOnly = !_allowCustomValues || isKnownValue; + utilGetSetValue(_input, !isMixed ? displayValue(tags[field.key]) : '').classed('raw-value', isRawValue).classed('known-value', isKnownValue).attr('readonly', isReadOnly ? 'readonly' : undefined).attr('title', isMixed ? mixedValues.join('\n') : undefined).attr('placeholder', isMixed ? _t('inspector.multiple_values') : _staticPlaceholder || '').classed('mixed', isMixed).on('keydown.deleteCapture', function (d3_event) { + if (isReadOnly && isKnownValue && (d3_event.keyCode === utilKeybinding.keyCodes['â«'] || d3_event.keyCode === utilKeybinding.keyCodes['â¦'])) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + var t = {}; + t[field.key] = undefined; + dispatch.call('change', this, t); + } + }); } + }; - return null; - }; // returns Lng/Lat + 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' || field.key === 'via') { + // meaning tags are full width + _container.selectAll('.chip').style('transform', function (d2, index2) { + var node = select(this).node(); - map.mouseCoordinates = function () { - var coord = map.mouse() || pxCenter(); - return projection.invert(coord); - }; + 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; + } - map.dblclickZoomEnable = function (val) { - if (!arguments.length) return _dblClickZoomEnabled; - _dblClickZoomEnabled = val; - return map; - }; + 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; + } - map.redrawEnable = function (val) { - if (!arguments.length) return _redrawEnabled; - _redrawEnabled = val; - return map; - }; + return 'translateY(100%)'; + } - map.isTransformed = function () { - return _isTransformed; - }; + return null; + }); + } else { + _container.selectAll('.chip').each(function (d2, index2) { + var node = select(this).node(); // check the cursor is in the bounding box - function setTransform(t2, duration, force) { - var t = projection.transform(); - if (!force && t2.k === t.k && t2.x === t.x && t2.y === t.y) return false; + 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(); - if (duration) { - _selection.transition().duration(duration).on('start', function () { - map.startEase(); - }).call(_zoomerPanner.transform, identity$2.translate(t2.x, t2.y).scale(t2.k)); - } else { - projection.transform(t2); - _transformStart = t2; + if (index === index2) { + return 'translate(' + x + 'px, ' + y + 'px)'; + } // only translate tags in the same row - _selection.call(_zoomerPanner.transform, _transformStart); - } - return true; - } + if (node.offsetTop === targetIndexOffsetTop) { + if (index2 < index && index2 >= targetIndex) { + return 'translateX(' + draggedTagWidth + 'px)'; + } else if (index2 > index && index2 <= targetIndex) { + return 'translateX(-' + draggedTagWidth + 'px)'; + } + } - function setCenterZoom(loc2, z2, duration, force) { - var c = map.center(); - var z = map.zoom(); - if (loc2[0] === c[0] && loc2[1] === c[1] && z2 === z && !force) return false; - var proj = geoRawMercator().transform(projection.transform()); // copy projection + return null; + }); + } + }).on('end', function () { + if (!select(this).classed('dragging')) { + return; + } - var k2 = clamp(geoZoomToScale(z2, TILESIZE), kMin, kMax); - proj.scale(k2); - var t = proj.translate(); - var point = proj(loc2); - var center = pxCenter(); - t[0] += center[0] - point[0]; - t[1] += center[1] - point[1]; - return setTransform(identity$2.translate(t[0], t[1]).scale(k2), duration, force); - } + var index = selection.nodes().indexOf(this); + select(this).classed('dragging', false); - map.pan = function (delta, duration) { - var t = projection.translate(); - var k = projection.scale(); - t[0] += delta[0]; - t[1] += delta[1]; + _container.selectAll('.chip').style('transform', null); - if (duration) { - _selection.transition().duration(duration).on('start', function () { - map.startEase(); - }).call(_zoomerPanner.transform, identity$2.translate(t[0], t[1]).scale(k)); - } else { - projection.translate(t); - _transformStart = projection.transform(); + if (typeof targetIndex === 'number') { + var element = _multiData[index]; - _selection.call(_zoomerPanner.transform, _transformStart); + _multiData.splice(index, 1); - dispatch$1.call('move', this, map); - immediateRedraw(); - } + _multiData.splice(targetIndex, 0, element); - return map; - }; + var t = {}; - map.dimensions = function (val) { - if (!arguments.length) return _dimensions; - _dimensions = val; - drawLayers.dimensions(_dimensions); - context.background().dimensions(_dimensions); - projection.clipExtent([[0, 0], _dimensions]); - _getMouseCoords = utilFastMouse(supersurface.node()); - scheduleRedraw(); - return map; - }; + if (_multiData.length) { + t[field.key] = _multiData.map(function (element) { + return element.key; + }).join(';'); + } else { + t[field.key] = undefined; + } - function zoomIn(delta) { - setCenterZoom(map.center(), ~~map.zoom() + delta, 250, true); - } + dispatch.call('change', this, t); + } - function zoomOut(delta) { - setCenterZoom(map.center(), ~~map.zoom() - delta, 250, true); + dragOrigin = undefined; + targetIndex = undefined; + })); } - map.zoomIn = function () { - zoomIn(1); - }; - - map.zoomInFurther = function () { - zoomIn(4); + combo.focus = function () { + _input.node().focus(); }; - map.canZoomIn = function () { - return map.zoom() < maxZoom; + combo.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return combo; }; - map.zoomOut = function () { - zoomOut(1); - }; + function combinedEntityExtent() { + return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + } - map.zoomOutFurther = function () { - zoomOut(4); - }; + return utilRebind(combo, dispatch, 'on'); + } - map.canZoomOut = function () { - return map.zoom() > minZoom; - }; + function uiFieldText(field, context) { + var dispatch = dispatch$8('change'); + var input = select(null); + var outlinkButton = select(null); + var _entityIDs = []; - map.center = function (loc2) { - if (!arguments.length) { - return projection.invert(pxCenter()); - } + var _tags; - if (setCenterZoom(loc2, map.zoom())) { - dispatch$1.call('move', this, map); - } + var _phoneFormats = {}; - scheduleRedraw(); - return map; - }; + if (field.type === 'tel') { + _mainFileFetcher.get('phone_formats').then(function (d) { + _phoneFormats = d; + updatePhonePlaceholder(); + })["catch"](function () { + /* ignore */ + }); + } - map.unobscuredCenterZoomEase = function (loc, zoom) { - var offset = map.unobscuredOffsetPx(); - var proj = geoRawMercator().transform(projection.transform()); // copy projection - // use the target zoom to calculate the offset center + function calcLocked() { + // Protect certain fields that have a companion `*:wikidata` value + var isLocked = (field.id === 'brand' || field.id === 'network' || field.id === 'operator' || field.id === 'flag') && _entityIDs.length && _entityIDs.some(function (entityID) { + var entity = context.graph().hasEntity(entityID); + if (!entity) return false; // Features linked to Wikidata are likely important and should be protected - proj.scale(geoZoomToScale(zoom, TILESIZE)); - var locPx = proj(loc); - var offsetLocPx = [locPx[0] + offset[0], locPx[1] + offset[1]]; - var offsetLoc = proj.invert(offsetLocPx); - map.centerZoomEase(offsetLoc, zoom); - }; + if (entity.tags.wikidata) return true; + var preset = _mainPresetIndex.match(entity, context.graph()); + var isSuggestion = preset && preset.suggestion; // Lock the field if there is a value and a companion `*:wikidata` value - map.unobscuredOffsetPx = function () { - var openPane = context.container().select('.map-panes .map-pane.shown'); + var which = field.id; // 'brand', 'network', 'operator', 'flag' - if (!openPane.empty()) { - return [openPane.node().offsetWidth / 2, 0]; - } + return isSuggestion && !!entity.tags[which] && !!entity.tags[which + ':wikidata']; + }); - return [0, 0]; - }; + field.locked(isLocked); + } - map.zoom = function (z2) { - if (!arguments.length) { - return Math.max(geoScaleToZoom(projection.scale(), TILESIZE), 0); - } + function i(selection) { + calcLocked(); + var isLocked = field.locked(); + 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()); - if (z2 < _minzoom) { - surface.interrupt(); - dispatch$1.call('hitMinZoom', this, map); - z2 = context.minEditableZoom(); - } + 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()(); + }); + } 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); - if (setCenterZoom(map.center(), z2)) { - dispatch$1.call('move', this, map); - } + if (domainResults.length >= 2 && domainResults[1]) { + var domain = domainResults[1]; + return _t('icons.view_on', { + domain: domain + }); + } - scheduleRedraw(); - return map; - }; + return ''; + }).on('click', function (d3_event) { + d3_event.preventDefault(); + var value = validIdentifierValueForLink(); - map.centerZoom = function (loc2, z2) { - if (setCenterZoom(loc2, z2)) { - dispatch$1.call('move', this, map); + if (value) { + var url = field.urlFormat.replace(/{value}/, encodeURIComponent(value)); + window.open(url, '_blank'); + } + }).merge(outlinkButton); + } else if (field.type === 'url') { + 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 () { + return _t('icons.visit_website'); + }).on('click', function (d3_event) { + d3_event.preventDefault(); + var value = validIdentifierValueForLink(); + if (value) window.open(value, '_blank'); + }).merge(outlinkButton); } + } - scheduleRedraw(); - return map; - }; - - map.zoomTo = function (entity) { - var extent = entity.extent(context.graph()); - if (!isFinite(extent.area())) return map; - var z2 = clamp(map.trimmedExtentZoom(extent), 0, 20); - return map.centerZoom(extent.center(), z2); - }; + function updatePhonePlaceholder() { + if (input.empty() || !Object.keys(_phoneFormats).length) return; + var extent = combinedEntityExtent(); + var countryCode = extent && iso1A2Code(extent.center()); - map.centerEase = function (loc2, duration) { - duration = duration || 250; - setCenterZoom(loc2, map.zoom(), duration); - return map; - }; + var format = countryCode && _phoneFormats[countryCode.toLowerCase()]; - map.zoomEase = function (z2, duration) { - duration = duration || 250; - setCenterZoom(map.center(), z2, duration, false); - return map; - }; + if (format) input.attr('placeholder', format); + } - map.centerZoomEase = function (loc2, z2, duration) { - duration = duration || 250; - setCenterZoom(loc2, z2, duration, false); - return map; - }; + function validIdentifierValueForLink() { + var value = utilGetSetValue(input).trim().split(';')[0]; + if (field.type === 'url' && value) return value; - map.transformEase = function (t2, duration) { - duration = duration || 250; - setTransform(t2, duration, false - /* don't force */ - ); - return map; - }; + if (field.type === 'identifier' && field.pattern) { + return value && value.match(new RegExp(field.pattern)); + } - map.zoomToEase = function (obj, duration) { - var extent; + return null; + } // clamp number to min/max - if (Array.isArray(obj)) { - obj.forEach(function (entity) { - var entityExtent = entity.extent(context.graph()); - if (!extent) { - extent = entityExtent; - } else { - extent = extent.extend(entityExtent); - } - }); - } else { - extent = obj.extent(context.graph()); + function clamped(num) { + if (field.minValue !== undefined) { + num = Math.max(num, field.minValue); } - if (!isFinite(extent.area())) return map; - var z2 = clamp(map.trimmedExtentZoom(extent), 0, 20); - return map.centerZoomEase(extent.center(), z2, duration); - }; - - map.startEase = function () { - utilBindOnce(surface, _pointerPrefix + 'down.ease', function () { - map.cancelEase(); - }); - return map; - }; + if (field.maxValue !== undefined) { + num = Math.min(num, field.maxValue); + } - map.cancelEase = function () { - _selection.interrupt(); + return num; + } - return map; - }; + 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 - map.extent = function (val) { - if (!arguments.length) { - return new geoExtent(projection.invert([0, _dimensions[1]]), projection.invert([_dimensions[0], 0])); - } else { - var extent = geoExtent(val); - map.centerZoom(extent.center(), map.extentZoom(extent)); - } - }; + if (!val && Array.isArray(_tags[field.key])) return; - map.trimmedExtent = function (val) { - if (!arguments.length) { - var headerY = 71; - var footerY = 30; - var pad = 10; - return new geoExtent(projection.invert([pad, _dimensions[1] - footerY - pad]), projection.invert([_dimensions[0] - pad, headerY + pad])); - } else { - var extent = geoExtent(val); - map.centerZoom(extent.center(), map.trimmedExtentZoom(extent)); - } - }; + 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 calcExtentZoom(extent, dim) { - var tl = projection([extent[0][0], extent[1][1]]); - var br = projection([extent[1][0], extent[0][1]]); // Calculate maximum zoom that fits extent + utilGetSetValue(input, val); + } - var hFactor = (br[0] - tl[0]) / dim[0]; - var vFactor = (br[1] - tl[1]) / dim[1]; - var hZoomDiff = Math.log(Math.abs(hFactor)) / Math.LN2; - var vZoomDiff = Math.log(Math.abs(vFactor)) / Math.LN2; - var newZoom = map.zoom() - Math.max(hZoomDiff, vZoomDiff); - return newZoom; + t[field.key] = val || undefined; + dispatch.call('change', this, t, onInput); + }; } - map.extentZoom = function (val) { - return calcExtentZoom(geoExtent(val), _dimensions); + i.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return i; }; - map.trimmedExtentZoom = function (val) { - var trimY = 120; - var trimX = 40; - var trimmed = [_dimensions[0] - trimX, _dimensions[1] - trimY]; - return calcExtentZoom(geoExtent(val), trimmed); - }; + 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); - map.withinEditableZoom = function () { - return map.zoom() >= context.minEditableZoom(); + if (outlinkButton && !outlinkButton.empty()) { + var disabled = !validIdentifierValueForLink(); + outlinkButton.classed('disabled', disabled); + } }; - map.isInWideSelection = function () { - return !map.withinEditableZoom() && context.selectedIDs().length; + i.focus = function () { + var node = input.node(); + if (node) node.focus(); }; - map.editableDataEnabled = function (skipZoomCheck) { - var layer = context.layers().layer('osm'); - if (!layer || !layer.enabled()) return false; - return skipZoomCheck || map.withinEditableZoom(); - }; + function combinedEntityExtent() { + return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + } - map.notesEditable = function () { - var layer = context.layers().layer('notes'); - if (!layer || !layer.enabled()) return false; - return map.withinEditableZoom(); - }; + return utilRebind(i, dispatch, 'on'); + } - map.minzoom = function (val) { - if (!arguments.length) return _minzoom; - _minzoom = val; - return map; - }; + function uiFieldAccess(field, context) { + var dispatch = dispatch$8('change'); + var items = select(null); - map.toggleHighlightEdited = function () { - surface.classed('highlight-edited', !surface.classed('highlight-edited')); - map.pan([0, 0]); // trigger a redraw + var _tags; - dispatch$1.call('changeHighlighting', this); - }; + 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 - map.areaFillOptions = ['wireframe', 'partial', 'full']; + 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 - map.activeAreaFill = function (val) { - if (!arguments.length) return corePreferences('area-fill') || 'partial'; - corePreferences('area-fill', val); + items = items.merge(enter); + wrap.selectAll('.preset-input-access').on('change', change).on('blur', change); + } - if (val !== 'wireframe') { - corePreferences('area-fill-toggle', val); - } + function change(d3_event, d) { + var tag = {}; + var value = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string - updateAreaFill(); - map.pan([0, 0]); // trigger a redraw + if (!value && typeof _tags[d] !== 'string') return; + tag[d] = value || undefined; + dispatch.call('change', this, tag); + } - dispatch$1.call('changeAreaFill', this); - return map; - }; + access.options = function (type) { + var options = ['no', 'permissive', 'private', 'permit', 'destination']; - map.toggleWireframe = function () { - var activeFill = map.activeAreaFill(); + if (type !== 'access') { + options.unshift('yes'); + options.push('designated'); - if (activeFill === 'wireframe') { - activeFill = corePreferences('area-fill-toggle') || 'partial'; - } else { - activeFill = 'wireframe'; + if (type === 'bicycle') { + options.push('dismount'); + } } - map.activeAreaFill(activeFill); - }; - - function updateAreaFill() { - var activeFill = map.activeAreaFill(); - map.areaFillOptions.forEach(function (opt) { - surface.classed('fill-' + opt, Boolean(opt === activeFill)); + return options.map(function (option) { + return { + title: field.t('options.' + option + '.description'), + value: option + }; }); - } - - map.layers = function () { - return drawLayers; }; - map.doubleUpHandler = function () { - return _doubleUpHandler; + 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' + } }; - return utilRebind(map, dispatch$1, 'on'); - } - - function rendererPhotos(context) { - var dispatch$1 = dispatch('change'); - var _layerIDs = ['streetside', 'mapillary', 'mapillary-map-features', 'mapillary-signs', 'openstreetcam']; - var _allPhotoTypes = ['flat', 'panoramic']; - - var _shownPhotoTypes = _allPhotoTypes.slice(); // shallow copy + 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'; + } - var _dateFilters = ['fromDate', 'toDate']; + if (tags.access && typeof tags.access === 'string') { + return tags.access; + } - var _fromDate; + 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); - var _toDate; + 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]; + } + } + } - var _usernames; + return field.placeholder(); + }); + }; - function photos() {} + access.focus = function () { + items.selectAll('.preset-input-access').node().focus(); + }; - function updateStorage() { - if (window.mocha) return; - var hash = utilStringQs(window.location.hash); - var enabled = context.layers().all().filter(function (d) { - return _layerIDs.indexOf(d.id) !== -1 && d.layer && d.layer.supported() && d.layer.enabled(); - }).map(function (d) { - return d.id; - }); + return utilRebind(access, dispatch, 'on'); + } - if (enabled.length) { - hash.photo_overlay = enabled.join(','); - } else { - delete hash.photo_overlay; - } + function uiFieldAddress(field, context) { + var dispatch = dispatch$8('change'); - window.location.replace('#' + utilQsString(hash, true)); - } + var _selection = select(null); - photos.overlayLayerIDs = function () { - return _layerIDs; - }; + var _wrap = select(null); - photos.allPhotoTypes = function () { - return _allPhotoTypes; - }; + var addrField = _mainPresetIndex.field('address'); // needed for placeholder strings - photos.dateFilters = function () { - return _dateFilters; - }; + var _entityIDs = []; - photos.dateFilterValue = function (val) { - return val === _dateFilters[0] ? _fromDate : _toDate; - }; + var _tags; - photos.setDateFilter = function (type, val, updateUrl) { - // validate the date - var date = val && new Date(val); + var _countryCode; - if (date && !isNaN(date)) { - val = date.toISOString().substr(0, 10); - } else { - val = null; + 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 */ + }); - if (type === _dateFilters[0]) { - _fromDate = val; + 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'); - if (_fromDate && _toDate && new Date(_toDate) < new Date(_fromDate)) { - _toDate = _fromDate; - } + function isAddressable(d) { + return d.tags.highway && d.tags.name && d.type === 'way'; } + } - if (type === _dateFilters[1]) { - _toDate = val; + 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'); - if (_fromDate && _toDate && new Date(_toDate) < new Date(_fromDate)) { - _fromDate = _toDate; + 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 (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'); + } - dispatch$1.call('change', this); + function updateForCountryCode() { + if (!_countryCode) return; + var addressFormat; - if (updateUrl) { - var rangeString; + for (var i = 0; i < _addressFormats.length; i++) { + var format = _addressFormats[i]; - if (_fromDate || _toDate) { - rangeString = (_fromDate || '') + '_' + (_toDate || ''); + 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 + + break; } + } - setUrlFilterValue('photo_dates', rangeString); + 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 + }; + + 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 + }; + }); } - }; - photos.setUsernameFilter = function (val, updateUrl) { - if (val && typeof val === 'string') val = val.replace(/;/g, ',').split(','); + var rows = _wrap.selectAll('.addr-row').data(addressFormat.format, function (d) { + return d.toString(); + }); - if (val) { - val = val.map(function (d) { - return d.trim(); - }).filter(Boolean); + 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 (!val.length) { - val = null; - } + function addDropdown(d) { + if (dropdowns.indexOf(d.id) === -1) return; // not a dropdown + + 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)); + })); } - _usernames = val; - dispatch$1.call('change', this); + _wrap.selectAll('input').on('blur', change()).on('change', change()); - if (updateUrl) { - var hashString; + _wrap.selectAll('input:not(.combobox-input)').on('input', change(true)); - if (_usernames) { - hashString = _usernames.join(','); - } + if (_tags) updateTags(_tags); + } - setUrlFilterValue('photo_username', hashString); - } - }; + 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 setUrlFilterValue(property, val) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); + if (extent) { + var countryCode; - if (val) { - if (hash[property] === val) return; - hash[property] = val; + if (context.inIntro()) { + // localize the address format for the walkthrough + countryCode = _t('intro.graph.countrycode'); } else { - if (!(property in hash)) return; - delete hash[property]; + var center = extent.center(); + countryCode = iso1A2Code(center); } - window.location.replace('#' + utilQsString(hash, true)); + if (countryCode) { + _countryCode = countryCode.toLowerCase(); + updateForCountryCode(); + } } } - function showsLayer(id) { - var layer = context.layers().layer(id); - return layer && layer.supported() && layer.enabled(); - } + function change(onInput) { + return function () { + var tags = {}; - photos.shouldFilterByDate = function () { - return showsLayer('mapillary') || showsLayer('openstreetcam') || showsLayer('streetside'); - }; + _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 - photos.shouldFilterByPhotoType = function () { - return showsLayer('mapillary') || showsLayer('streetside') && showsLayer('openstreetcam'); - }; + if (Array.isArray(_tags[key]) && !value) return; + tags[key] = value || undefined; + }); - photos.shouldFilterByUsername = function () { - return showsLayer('mapillary') || showsLayer('openstreetcam') || showsLayer('streetside'); - }; + dispatch.call('change', this, tags, onInput); + }; + } - photos.showsPhotoType = function (val) { - if (!photos.shouldFilterByPhotoType()) return true; - return _shownPhotoTypes.indexOf(val) !== -1; - }; + function updatePlaceholder(inputSelection) { + return inputSelection.attr('placeholder', function (subfield) { + if (_tags && Array.isArray(_tags[field.key + ':' + subfield.id])) { + return _t('inspector.multiple_values'); + } - photos.showsFlat = function () { - return photos.showsPhotoType('flat'); - }; + if (_countryCode) { + var localkey = subfield.id + '!' + _countryCode; + var tkey = addrField.hasTextForStringId('placeholders.' + localkey) ? localkey : subfield.id; + return addrField.t('placeholders.' + tkey); + } + }); + } - photos.showsPanoramic = function () { - return photos.showsPhotoType('panoramic'); - }; + 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); + } - photos.fromDate = function () { - return _fromDate; - }; + function combinedEntityExtent() { + return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + } - photos.toDate = function () { - return _toDate; + address.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return address; }; - photos.togglePhotoType = function (val) { - var index = _shownPhotoTypes.indexOf(val); + address.tags = function (tags) { + _tags = tags; + updateTags(tags); + }; - if (index !== -1) { - _shownPhotoTypes.splice(index, 1); - } else { - _shownPhotoTypes.push(val); - } + address.focus = function () { + var node = _wrap.selectAll('input').node(); - dispatch$1.call('change', this); - return photos; + if (node) node.focus(); }; - photos.usernames = function () { - return _usernames; - }; + return utilRebind(address, dispatch, 'on'); + } - photos.init = function () { - var hash = utilStringQs(window.location.hash); + function uiFieldCycleway(field, context) { + var dispatch = dispatch$8('change'); + var items = select(null); + var wrap = select(null); - if (hash.photo_dates) { - // expect format like `photo_dates=2019-01-01_2020-12-31`, but allow a couple different separators - var parts = /^(.*)[â_](.*)$/g.exec(hash.photo_dates.trim()); - this.setDateFilter('fromDate', parts && parts.length >= 2 && parts[1], false); - this.setDateFilter('toDate', parts && parts.length >= 3 && parts[2], false); - } + var _tags; - if (hash.photo_username) { - this.setUsernameFilter(hash.photo_username, false); + function cycleway(selection) { + function stripcolon(s) { + return s.replace(':', ''); } - if (hash.photo_overlay) { - // support enabling photo layers by default via a URL parameter, e.g. `photo_overlay=openstreetcam;mapillary;streetside` - var hashOverlayIDs = hash.photo_overlay.replace(/;/g, ',').split(','); - hashOverlayIDs.forEach(function (id) { - var layer = _layerIDs.indexOf(id) !== -1 && context.layers().layer(id); - if (layer && !layer.enabled()) layer.enabled(true); - }); - } + 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 - if (hash.photo) { - // support opening a photo via a URL parameter, e.g. `photo=mapillary-fztgSDtLpa08ohPZFZjeRQ` - var photoIds = hash.photo.replace(/;/g, ',').split(','); - var photoId = photoIds.length && photoIds[0].trim(); - var results = /(.*)\/(.*)/g.exec(photoId); + wrap.selectAll('.preset-input-cycleway').on('change', change).on('blur', change); + } - if (results && results.length >= 3) { - var serviceId = results[1]; - var photoKey = results[2]; - var service = services[serviceId]; + function change(d3_event, key) { + var newValue = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string - if (service && service.ensureViewerLoaded) { - // if we're showing a photo then make sure its layer is enabled too - var layer = _layerIDs.indexOf(serviceId) !== -1 && context.layers().layer(serviceId); - if (layer && !layer.enabled()) layer.enabled(true); - var baselineTime = Date.now(); - service.on('loadedImages.rendererPhotos', function () { - // don't open the viewer if too much time has elapsed - if (Date.now() - baselineTime > 45000) { - service.on('loadedImages.rendererPhotos', null); - return; - } + if (!newValue && (Array.isArray(_tags.cycleway) || Array.isArray(_tags[key]))) return; - if (!service.cachedImage(photoKey)) return; - service.on('loadedImages.rendererPhotos', null); - service.ensureViewerLoaded(context).then(function () { - service.selectImage(context, photoKey).showViewer(context); - }); - }); - } - } + if (newValue === 'none' || newValue === '') { + newValue = undefined; } - context.layers().on('change.rendererPhotos', updateStorage); - }; - - return utilRebind(photos, dispatch$1, 'on'); - } - - function uiAccount(context) { - var osm = context.connection(); - - function update(selection) { - if (!osm) return; + var otherKey = key === 'cycleway:left' ? 'cycleway:right' : 'cycleway:left'; + var otherValue = typeof _tags.cycleway === 'string' ? _tags.cycleway : _tags[otherKey]; - if (!osm.authenticated()) { - selection.selectAll('.userLink, .logoutLink').classed('hide', true); - return; + if (otherValue && Array.isArray(otherValue)) { + // we must always have an explicit value for comparison + otherValue = otherValue[0]; } - osm.userDetails(function (err, details) { - var userLink = selection.select('.userLink'), - logoutLink = selection.select('.logoutLink'); - userLink.html(''); - logoutLink.html(''); - if (err || !details) return; - selection.selectAll('.userLink, .logoutLink').classed('hide', false); // Link - - var userLinkA = userLink.append('a').attr('href', osm.userURL(details.display_name)).attr('target', '_blank'); // Add thumbnail or dont + if (otherValue === 'none' || otherValue === '') { + otherValue = undefined; + } - if (details.image_url) { - userLinkA.append('img').attr('class', 'icon pre-text user-icon').attr('src', details.image_url); - } else { - userLinkA.call(svgIcon('#iD-icon-avatar', 'pre-text light')); - } // Add user name + var tag = {}; // If the left and right tags match, use the cycleway tag to tag both + // sides the same way + 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; + } - userLinkA.append('span').attr('class', 'label').html(details.display_name); - logoutLink.append('a').attr('class', 'logout').attr('href', '#').html(_t.html('logout')).on('click.logout', function (d3_event) { - d3_event.preventDefault(); - osm.logout(); - }); - }); + dispatch.call('change', this, tag); } - return function (selection) { - selection.append('li').attr('class', 'userLink').classed('hide', true); - selection.append('li').attr('class', 'logoutLink').classed('hide', true); - - if (osm) { - osm.on('change.account', function () { - update(selection); - }); - update(selection); - } + cycleway.options = function () { + return field.options.map(function (option) { + return { + title: field.t('options.' + option + '.description'), + value: option + }; + }); }; - } - function uiAttribution(context) { - var _selection = select(null); - - function render(selection, data, klass) { - var div = selection.selectAll(".".concat(klass)).data([0]); - div = div.enter().append('div').attr('class', klass).merge(div); - var attributions = div.selectAll('.attribution').data(data, function (d) { - return d.id; - }); - attributions.exit().remove(); - attributions = attributions.enter().append('span').attr('class', 'attribution').each(function (d, i, nodes) { - var attribution = select(nodes[i]); + cycleway.tags = function (tags) { + _tags = tags; // If cycleway is set, use that instead of individual values - if (d.terms_html) { - attribution.html(d.terms_html); - return; - } + 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 (d.terms_url) { - attribution = attribution.append('a').attr('href', d.terms_url).attr('target', '_blank'); - } + if (Array.isArray(tags.cycleway)) { + vals = vals.concat(tags.cycleway); + } - var sourceID = d.id.replace(/\./g, '
'); - }); - 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')); - }); + 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; + } } - selection.classed('hide', !hiddenList.length); + dispatch.call('change', this, t); } - return function (selection) { - update(selection); - context.features().on('change.feature_info', function () { - update(selection); - }); - }; - } + radio.tags = function (tags) { + radios.property('checked', function (d) { + if (field.key) { + return tags[field.key] === d; + } - function uiFlash(context) { - var _flashTimer; + return !!(typeof tags[d] === 'string' && tags[d].toLowerCase() !== 'no'); + }); - var _duration = 2000; - var _iconName = '#iD-icon-no'; - var _iconClass = 'disabled'; - var _label = ''; + function isMixed(d) { + if (field.key) { + return Array.isArray(tags[field.key]) && tags[field.key].includes(d); + } - function flash() { - if (_flashTimer) { - _flashTimer.stop(); + return Array.isArray(tags[d]); } - 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 + labels.classed('active', function (d) { + if (field.key) { + return Array.isArray(tags[field.key]) && tags[field.key].includes(d) || tags[field.key] === d; + } - 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 + 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; + }); + var selection = radios.filter(function () { + return this.checked; + }); - 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; - } + if (selection.empty()) { + placeholder.html(_t.html('inspector.none')); + } else { + placeholder.html(selection.attr('value')); + _oldType[selection.datum()] = tags[selection.datum()]; + } - flash.duration = function (_) { - if (!arguments.length) return _duration; - _duration = _; - return flash; + 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'; + } + + wrap.call(structureExtras, tags); + } }; - flash.label = function (_) { - if (!arguments.length) return _label; - _label = _; - return flash; + radio.focus = function () { + radios.node().focus(); }; - flash.iconName = function (_) { - if (!arguments.length) return _iconName; - _iconName = _; - return flash; + radio.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + _oldType = {}; + return radio; }; - flash.iconClass = function (_) { - if (!arguments.length) return _iconClass; - _iconClass = _; - return flash; + radio.isAllowed = function () { + return _entityIDs.length === 1; }; - return flash; + return utilRebind(radio, dispatch, 'on'); } - function uiFullScreen(context) { - var element = context.container().node(); // var button = d3_select(null); + function uiFieldRestrictions(field, context) { + var dispatch = dispatch$8('change'); + var breathe = behaviorBreathe(); + corePreferences('turn-restriction-via-way', null); // remove old key - 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; - } - } + var storedViaWay = corePreferences('turn-restriction-via-way0'); // use new key #6922 - 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; - } - } + var storedDistance = corePreferences('turn-restriction-distance'); - function isFullScreen() { - return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; - } + var _maxViaWay = storedViaWay !== null ? +storedViaWay : 0; - function isSupported() { - return !!getFullScreenFn(); - } + var _maxDistance = storedDistance ? +storedDistance : 30; - function fullScreen(d3_event) { - d3_event.preventDefault(); + var _initialized = false; - if (!isFullScreen()) { - // button.classed('active', true); - getFullScreenFn().apply(element); - } else { - // button.classed('active', false); - getExitFullScreenFn().apply(document); - } - } + var _parent = select(null); // the entire field - 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); - }; - } + var _container = select(null); // just the map - 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 _oldTurns; - var _locating = uiLoading(context).message(_t.html('geolocate.locating')).blocking(true); + var _graph; - var _layer = context.layers().layer('geolocate'); + var _vertexID; - var _position; + var _intersection; - var _extent; + var _fromWayID; - var _timeoutID; + var _lastXPos; - var _button = select(null); + function restrictions(selection) { + _parent = selection; // try to reuse the intersection, but always rebuild it if the graph has changed - function click() { - if (context.inIntro()) return; + 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. - 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 - navigator.geolocation.getCurrentPosition(success, error, _geolocationOptions); - } else { - _locating.close(); + 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 - _layer.enabled(null, false); + select(selection.node().parentNode).classed('hide', !isOK); // if form field is hidden or has detached from dom, clean up. - updateButtonState(); + if (!isOK || !context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode || !selection.node().parentNode.parentNode) { + selection.call(restrictions.off); + return; } - } - function zoomTo() { - context.enter(modeBrowse(context)); - var map = context.map(); + 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 - _layer.enabled(_position, true); + var containerEnter = container.enter().append('div').attr('class', 'restriction-container'); + containerEnter.append('div').attr('class', 'restriction-help'); // update - updateButtonState(); - map.centerZoomEase(_extent.center(), Math.min(20, map.extentZoom(_extent))); - } + _container = containerEnter.merge(container).call(renderViewer); + var controls = wrap.selectAll('.restriction-controls').data([0]); // enter/update - function success(geolocation) { - _position = geolocation; - var coords = _position.coords; - _extent = geoExtent([coords.longitude, coords.latitude]).padByMeters(coords.accuracy); - zoomTo(); - finish(); + controls.enter().append('div').attr('class', 'restriction-controls-container').append('div').attr('class', 'restriction-controls').merge(controls).call(renderControls); } - 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')(); - } + 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 - finish(); - } + selection.selectAll('.restriction-distance-input').property('value', _maxDistance).on('input', function () { + var val = select(this).property('value'); + _maxDistance = +val; + _intersection = null; - function finish() { - _locating.close(); // unblock ui + _container.selectAll('.layer-osm .layer-turns *').remove(); + corePreferences('turn-restriction-distance', _maxDistance); - if (_timeoutID) { - clearTimeout(_timeoutID); - } + _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 - _timeoutID = undefined; - } + selection.selectAll('.restriction-via-way-input').property('value', _maxViaWay).on('input', function () { + var val = select(this).property('value'); + _maxViaWay = +val; - function updateButtonState() { - _button.classed('active', _layer.enabled()); + _container.selectAll('.layer-osm .layer-turns *').remove(); + + corePreferences('turn-restriction-via-way0', _maxViaWay); + + _parent.call(restrictions); + }); + selection.selectAll('.restriction-via-way-text').html(displayMaxVia(_maxViaWay)); } - 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); - }; - } + 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 uiPanelBackground(context) { - var background = context.background(); - var _currSourceName = null; - var _metadata = {}; - var _metadataKeys = ['zoom', 'vintage', 'source', 'description', 'resolution', 'accuracy']; + 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 - var debouncedRedraw = debounce(redraw, 250); + var extent = geoExtent(); - function redraw(selection) { - var source = background.baseLayerSource(); - if (!source) return; - var isDG = source.id.match(/^DigitalGlobe/i) !== null; - var sourceLabel = source.label(); + 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 (_currSourceName !== sourceLabel) { - _currSourceName = sourceLabel; - _metadata = {}; + + if (_intersection.vertices.length > 1) { + var padding = 180; // in z22 pixels + + 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)); } - selection.html(''); - var list = selection.append('ul').attr('class', 'background-info'); - list.append('li').html(_currSourceName); + var padTop = 35; // reserve top space for hint text - _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 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); - 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); - }); + 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 (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 + if (_fromWayID && !vgraph.hasEntity(_fromWayID)) { + _fromWayID = null; + _oldTurns = null; + } + + 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; + + if (_fromWayID) { + way = vgraph.entity(_fromWayID); + surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true); + } + + document.addEventListener('resizeWindow', function () { + utilSetDimensions(_container, null); + redraw(1); + }, false); + updateHints(null); - ['DigitalGlobe-Premium', 'DigitalGlobe-Standard'].forEach(function (layerId) { - if (source.id !== layerId) { - var key = layerId + '-vintage'; - var sourceVintage = context.background().findSource(key); + function click(d3_event) { + surface.call(breathe.off).call(breathe); + var datum = d3_event.target.__data__; + var entity = datum && datum.properties && datum.properties.entity; - if (context.background().showsLayer(sourceVintage)) { - context.background().toggleOverlayLayer(sourceVintage); - } + if (entity) { + datum = entity; } - }); - } - - var debouncedGetMetadata = debounce(getMetadata, 250); - function getMetadata(selection) { - var tile = context.container().select('.layer-background img.tile-center'); // tile near viewport center + 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); - 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 (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 - _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 + datumOnly.only = true; // but change this property - 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 + 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. - _metadataKeys.forEach(function (k) { - if (k === 'zoom' || k === 'vintage') return; // done already + turns = _intersection.turns(_fromWayID, 2); + extraActions = []; + _oldTurns = []; - var val = result[k]; - _metadata[k] = val; - selection.selectAll('.background-info-list-' + k).classed('hide', !val).selectAll('.background-info-span-' + k).html(val); - }); - }); - } + for (i = 0; i < turns.length; i++) { + var turn = turns[i]; + if (seen[turn.restrictionID]) continue; // avoid deleting the turn twice (#4968, #4928) - 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); - }); - }; + if (turn.direct && turn.path[1] === datum.path[1]) { + seen[turns[i].restrictionID] = true; + turn.restrictionType = osmInferRestriction(vgraph, turn, projection); - panel.off = function () { - context.map().on('drawn.info-background', null).on('move.info-background', null); - }; + _oldTurns.push(turn); - panel.id = 'background'; - panel.label = _t.html('info_panels.background.title'); - panel.key = _t('info_panels.background.key'); - return panel; - } + extraActions.push(actionUnrestrictTurn(turn)); + } + } - function uiPanelHistory(context) { - var osm; + 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 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); - } + for (i = 0; i < turns.length; i++) { + if (turns[i].key !== datum.key) { + extraActions.push(actionRestrictTurn(turns[i], turns[i].restrictionType)); + } + } - function displayUser(selection, userName) { - if (!userName) { - selection.append('span').html(_t.html('info_panels.history.unknown')); - return; - } + _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')]); + } - selection.append('span').attr('class', 'user-name').html(userName); - var links = selection.append('div').attr('class', 'links'); + context.perform.apply(context, actions); // At this point the datum will be changed, but will have same key.. + // Refresh it and update the help.. - if (osm) { - links.append('a').attr('class', 'user-osm-link').attr('href', osm.userURL(userName)).attr('target', '_blank').html('OSM'); + var s = surface.selectAll('.' + datum.key); + datum = s.empty() ? null : s.datum(); + updateHints(datum); + } else { + _fromWayID = null; + _oldTurns = null; + redraw(); + } } - links.append('a').attr('class', 'user-hdyc-link').attr('href', 'https://hdyc.neis-one.org/?' + userName).attr('target', '_blank').attr('tabindex', -1).html('HDYC'); - } - - function displayChangeset(selection, changeset) { - if (!changeset) { - selection.append('span').html(_t.html('info_panels.history.unknown')); - return; + function mouseover(d3_event) { + var datum = d3_event.target.__data__; + updateHints(datum); } - selection.append('span').attr('class', 'changeset-id').html(changeset); - var links = selection.append('div').attr('class', 'links'); - - if (osm) { - links.append('a').attr('class', 'changeset-osm-link').attr('href', osm.changesetURL(changeset)).attr('target', '_blank').html('OSM'); - } + _lastXPos = _lastXPos || sdims[0]; - 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 redraw(minChange) { + var xPos = -1; - function redraw(selection) { - var selectedNoteID = context.selectedNoteID(); - osm = context.connection(); - var selected, note, entity; + if (minChange) { + xPos = utilGetDimensions(context.container().select('.sidebar'))[0]; + } - 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); - }); + if (!minChange || minChange && Math.abs(xPos - _lastXPos) >= minChange) { + if (context.hasEntity(_vertexID)) { + _lastXPos = xPos; - if (selected.length) { - entity = context.entity(selected[0]); + _container.call(renderViewer); + } } } - 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; - - if (entity) { - selection.call(redrawEntity, entity); - } else if (note) { - selection.call(redrawNote, note); - } - } + function highlightPathsFrom(wayID) { + surface.selectAll('.related').classed('related', false).classed('allow', false).classed('restrict', false).classed('only', false); + surface.selectAll('.' + wayID).classed('related', true); - function redrawNote(selection, note) { - if (!note || note.isNew()) { - selection.append('div').html(_t.html('info_panels.history.note_no_history')); - return; - } + if (wayID) { + var turns = _intersection.turns(wayID, _maxViaWay); - var list = selection.append('ul'); - list.append('li').html(_t.html('info_panels.history.note_comments') + ':').append('span').html(note.comments.length); + 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 (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 (turn.only || turns.length === 1) { + if (turn.via.ways) { + ids = ids.concat(turn.via.ways); + } + } else if (turn.to.way === wayID) { + continue; + } - 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')); + surface.selectAll(utilEntitySelector(ids)).classed('related', true).classed('allow', klass === 'allow').classed('restrict', klass === 'restrict').classed('only', klass === 'only'); + } + } } - } - function redrawEntity(selection, entity) { - if (!entity || entity.isNew()) { - selection.append('div').html(_t.html('info_panels.history.no_history')); - return; - } + function updateHints(datum) { + var help = _container.selectAll('.restriction-help').html(''); - var links = selection.append('div').attr('class', 'links'); + var placeholders = {}; + ['from', 'via', 'to'].forEach(function (k) { + placeholders[k] = '' + _t('restriction.help.' + k) + ''; + }); + var entity = datum && datum.properties && datum.properties.entity; - 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 (entity) { + datum = entity; + } - 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); - } + if (_fromWayID) { + way = vgraph.entity(_fromWayID); + surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true); + } // Hovering a way - 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); - }); - }; - panel.off = function () { - context.map().on('drawn.info-history', null); - context.on('enter.info-history', null); - }; + 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; - panel.id = 'history'; - panel.label = _t.html('info_panels.history.title'); - panel.key = _t('info_panels.history.key'); - return panel; - } + 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: '' + }); + } - 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 - */ + 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 displayLength(m, isImperial) { - var d = m * (isImperial ? 3.28084 : 1); - var unit; + if (datum.via.ways && datum.via.ways.length) { + var names = []; - if (isImperial) { - if (d >= 5280) { - d /= 5280; - unit = 'miles'; - } else { - unit = 'feet'; - } - } else { - if (d >= 1000) { - d /= 1000; - unit = 'kilometers'; - } else { - unit = 'meters'; - } - } + for (var i = 0; i < datum.via.ways.length; i++) { + var prev = names[names.length - 1]; + var curr = displayName(datum.via.ways[i], vgraph); - 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 - */ + if (!prev || curr !== prev) { + // collapse identical names + names.push(curr); + } + } - function displayArea(m2, isImperial) { - var locale = _mainLocalizer.localeCode(); - var d = m2 * (isImperial ? 10.7639111056 : 1); - var d1, d2, area; - var unit1 = ''; - var unit2 = ''; + help.append('div') // "VIA {viaNames}" + .html(_t.html('restriction.help.via_names', { + via: placeholders.via, + viaNames: names.join(', ') + })); + } - if (isImperial) { - if (d >= 6969600) { - // > 0.25mi² show mi² - d1 = d / 27878400; - unit1 = 'square_miles'; - } else { - d1 = d; - unit1 = 'square_feet'; - } + if (!indirect) { + help.append('div') // Click for "No Right Turn" + .html(_t.html('restriction.help.toggle', { + turn: nextText.trim() + })); + } - 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'; - } else { - d1 = d; - unit1 = 'square_meters'; - } + 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 (d > 1000 && d < 10000000) { - // 0.1 - 1000 hectares - d2 = d / 10000; - unit2 = 'hectares'; + 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 + })); + } + } } } - area = _t('units.' + unit1, { - quantity: d1.toLocaleString(locale, { - maximumSignificantDigits: 4 - }) - }); + function displayMaxDistance(maxDist) { + var isImperial = !_mainLocalizer.usesMetric(); + var opts; - if (d2) { - return _t('units.area_pair', { - area1: area, - area2: _t('units.' + unit2, { - quantity: d2.toLocaleString(locale, { - maximumSignificantDigits: 2 + 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 { - return area; - } - } - - function wrap$2(x, min, max) { - var d = max - min; - return ((x - min) % d + d) % d + min; - } - - function clamp$1(x, min, max) { - return Math.max(min, Math.min(x, max)); - } + }; + } else { + opts = { + distance: _t('units.meters', { + quantity: maxDist + }) + }; + } - 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; + return _t.html('restriction.controls.distance_up_to', opts); + } - 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) - }); + 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'); } - if (deg === 0) { - return displayCoordinate; - } else { - return _t('units.coordinate', { - coordinate: displayCoordinate, - direction: _t('units.' + (deg > 0 ? pos : neg)) - }); + 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; } - } - /** - * Returns given coordinate pair in degree-minute-second format. - * - * @param {Array
'); // linebreak + if (options.wrap) { + var labelEnter = enter.append('label').attr('class', 'field-label').attr('for', function (d) { + return d.domId; + }); + var textEnter = labelEnter.append('span').attr('class', 'label-text'); + textEnter.append('span').attr('class', 'label-textvalue').html(function (d) { + return d.label(); + }); + textEnter.append('span').attr('class', 'label-textannotation'); - if (options.buttonText && options.buttonCallback) { - html += ''; + if (options.remove) { + labelEnter.append('button').attr('class', 'remove-icon').attr('title', _t('icons.remove')).call(svgIcon('#iD-operation-delete')); } - var classes = 'curtain-tooltip popover tooltip arrowed in ' + (options.tooltipClass || ''); - tooltip.classed(classes, true).selectAll('.popover-inner').html(html); - - 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 (options.revert) { + labelEnter.append('button').attr('class', 'modified-icon').attr('title', _t('icons.undo')).call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo')); } + } // Update - 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. - - if (options.tooltipClass === 'intro-mouse') { - tip.height += 80; - } // trim box dimensions to just the portion that fits in the container.. + container = container.merge(enter); + container.select('.field-label > .remove-icon') // propagate bound data + .on('click', remove); + container.select('.field-label > .modified-icon') // propagate bound data + .on('click', revert); + container.each(function (d) { + var selection = select(this); - if (tooltipBox.top + tooltipBox.height > h) { - tooltipBox.height -= tooltipBox.top + tooltipBox.height - h; + if (!d.impl) { + createField(); } - if (tooltipBox.left + tooltipBox.width > w) { - tooltipBox.width -= tooltipBox.left + tooltipBox.width - w; - } // determine tooltip placement.. - + var reference, help; // instantiate field help - 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; + if (options.wrap && field.type === 'restrictions') { + help = uiFieldHelp(context, 'restrictions'); + } // instantiate tag reference - 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]; - } else { - side = 'right'; - pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY]; - } - } - } - if (options.duration !== 0 || !tooltip.classed(side)) { - tooltip.call(uiToggle(true)); - } + if (options.wrap && options.info) { + var referenceKey = d.key || ''; - 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) + if (d.type === 'multiCombo') { + // lookup key without the trailing ':' + referenceKey = referenceKey.replace(/:$/, ''); + } - var shiftY = 0; + reference = uiTagReference(d.reference || { + key: referenceKey + }); - 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 (_state === 'hover') { + reference.showing(false); } } - tooltip.selectAll('.popover-inner').style('top', shiftY + 'px'); - } else { - tooltip.classed('in', false).call(uiToggle(false)); - } + selection.call(d.impl); // add field help components - curtain.cut(box, options.duration); - return tooltip; - }; + if (help) { + selection.call(help.body).select('.field-label').call(help.button); + } // add tag reference components - 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); - } + if (reference) { + selection.call(reference.body).select('.field-label').call(reference.button); + } - 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'; + d.impl.tags(_tags); }); - }; - - 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. - - - function copyBox(src) { - return { - top: src.top, - right: src.right, - bottom: src.bottom, - left: src.left, - width: src.width, - height: src.height - }; - } - - return curtain; - } + container.classed('locked', _locked).classed('modified', isModified()).classed('present', tagsContainFieldKey()); // show a tip and lock icon if the field is locked - function uiIntroWelcome(context, reveal) { - var dispatch$1 = dispatch('done'); - var chapter = { - title: 'intro.welcome.title' + var annotation = container.selectAll('.field-label .label-textannotation'); + var icon = annotation.selectAll('.icon').data(_locked ? [0] : []); + icon.exit().remove(); + icon.enter().append('svg').attr('class', 'icon').append('use').attr('xlink:href', '#fas-lock'); + container.call(_locked ? _lockedTip : _lockedTip.destroy); }; - 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 - }); - } + field.state = function (val) { + if (!arguments.length) return _state; + _state = val; + return field; + }; - function practice() { - reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.practice'), { - buttonText: _t.html('intro.ok'), - buttonCallback: words - }); - } + field.tags = function (val) { + if (!arguments.length) return _tags; + _tags = val; - function words() { - reveal('.intro-nav-wrap .chapter-welcome', helpHtml('intro.welcome.words'), { - buttonText: _t.html('intro.ok'), - buttonCallback: chapters - }); - } + if (tagsContainFieldKey() && !_show) { + // always show a field if it has a value to display + _show = true; - function chapters() { - dispatch$1.call('done'); - reveal('.intro-nav-wrap .chapter-navigation', helpHtml('intro.welcome.chapters', { - next: _t('intro.navigation.title') - })); - } + if (!field.impl) { + createField(); + } + } - chapter.enter = function () { - welcome(); + return field; }; - chapter.exit = function () { - context.container().select('.curtain-tooltip.intro-mouse').selectAll('.counter').remove(); + field.locked = function (val) { + if (!arguments.length) return _locked; + _locked = val; + return field; }; - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + field.show = function () { + _show = true; - return utilRebind(chapter, dispatch$1, 'on'); - } + if (!field.impl) { + createField(); + } - 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' - }; + if (field["default"] && field.key && _tags[field.key] !== field["default"]) { + var t = {}; + t[field.key] = field["default"]; + dispatch.call('change', this, t); + } + }; // A shown field has a visible UI, a non-shown field is in the 'Add field' dropdown - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + field.isShown = function () { + return _show; + }; // An allowed field can appear in the UI or in the 'Add field' dropdown. + // A non-allowed field is hidden from the user altogether - function isTownHallSelected() { - var ids = context.selectedIDs(); - return ids.length === 1 && ids[0] === hallId; - } - function dragMap() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(townHall, context.map().center()); + field.isAllowed = function () { + if (entityIDs && entityIDs.length > 1 && uiFields[field.type].supportsMultiselection === false) return false; + if (field.geometry && !entityIDs.every(function (entityID) { + return field.matchGeometry(context.graph().geometry(entityID)); + })) return false; - if (msec) { - reveal(null, null, { - duration: 0 - }); + if (entityIDs && _entityExtent && field.locationSetID) { + // is field allowed in this location? + var validLocations = _mainLocations.locationsAt(_entityExtent.center()); + if (!validLocations[field.locationSetID]) return false; } - 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 - }); - }); - context.map().on('move.intro', function () { - var centerNow = context.map().center(); + var prerequisiteTag = field.prerequisiteTag; - if (centerStart[0] !== centerNow[0] || centerStart[1] !== centerNow[1]) { - context.map().on('move.intro', null); - timeout(function () { - continueTo(zoomMap); - }, 3000); + if (entityIDs && !tagsContainFieldKey() && // ignore tagging prerequisites if a value is already present + prerequisiteTag) { + if (!entityIDs.every(function (entityID) { + var entity = context.graph().entity(entityID); + + if (prerequisiteTag.key) { + var value = entity.tags[prerequisiteTag.key]; + if (!value) return false; + + if (prerequisiteTag.valueNot) { + return prerequisiteTag.valueNot !== value; + } + + if (prerequisiteTag.value) { + return prerequisiteTag.value === value; + } + } else if (prerequisiteTag.keyNot) { + if (entity.tags[prerequisiteTag.keyNot]) return false; } - }); - }, msec + 100); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); + return true; + })) return false; } - } - 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); - } - }); + return true; + }; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); + field.focus = function () { + if (field.impl) { + field.impl.focus(); } - } - - function features() { - var onClick = function onClick() { - continueTo(pointsLinesAreas); - }; + }; - 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 - }); - }); + return utilRebind(field, dispatch, 'on'); + } - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); - } - } + function uiFormFields(context) { + var moreCombo = uiCombobox(context, 'more-fields').minItems(1); + var _fieldsArr = []; + var _lastPlaceholder = ''; + var _state = ''; + var _klass = ''; - function pointsLinesAreas() { - var onClick = function onClick() { - continueTo(nodesWays); - }; + function formFields(selection) { + var allowedFields = _fieldsArr.filter(function (field) { + return field.isAllowed(); + }); - reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick + var shown = allowedFields.filter(function (field) { + return field.isShown(); }); - context.map().on('drawn.intro', function () { - reveal('.surface', helpHtml('intro.navigation.points_lines_areas'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); + var notShown = allowedFields.filter(function (field) { + return !field.isShown(); }); + var container = selection.selectAll('.form-fields-container').data([0]); + container = container.enter().append('div').attr('class', 'form-fields-container ' + (_klass || '')).merge(container); + var fields = container.selectAll('.wrap-form-field').data(shown, function (d) { + return d.id + (d.entityIDs ? d.entityIDs.join() : ''); + }); + fields.exit().remove(); // Enter - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); - } - } - - function nodesWays() { - var onClick = function onClick() { - continueTo(clickTownHall); - }; + var enter = fields.enter().append('div').attr('class', function (d) { + return 'wrap-form-field wrap-form-field-' + d.safeid; + }); // Update - reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { - buttonText: _t.html('intro.ok'), - buttonCallback: onClick + fields = fields.merge(enter); + fields.order().each(function (d) { + select(this).call(d.render); }); - context.map().on('drawn.intro', function () { - reveal('.surface', helpHtml('intro.navigation.nodes_ways'), { - duration: 0, - buttonText: _t.html('intro.ok'), - buttonCallback: onClick - }); + var titles = []; + var moreFields = notShown.map(function (field) { + var title = field.title(); + titles.push(title); + var terms = field.terms(); + if (field.key) terms.push(field.key); + if (field.keys) terms = terms.concat(field.keys); + return { + display: field.label(), + value: title, + title: title, + field: field, + terms: terms + }; }); + var placeholder = titles.slice(0, 3).join(', ') + (titles.length > 3 ? 'â¦' : ''); + var more = selection.selectAll('.more-fields').data(_state === 'hover' || moreFields.length === 0 ? [] : [0]); + more.exit().remove(); + var moreEnter = more.enter().append('div').attr('class', 'more-fields').append('label'); + moreEnter.append('span').html(_t.html('inspector.add_fields')); + more = moreEnter.merge(more); + var input = more.selectAll('.value').data([0]); + input.exit().remove(); + input = input.enter().append('input').attr('class', 'value').attr('type', 'text').attr('placeholder', placeholder).call(utilNoAuto).merge(input); + input.call(utilGetSetValue, '').call(moreCombo.data(moreFields).on('accept', function (d) { + if (!d) return; // user entered something that was not matched - function continueTo(nextStep) { - context.map().on('drawn.intro', null); - nextStep(); + var field = d.field; + field.show(); + selection.call(formFields); // rerender + + field.focus(); + })); // avoid updating placeholder excessively (triggers style recalc) + + if (_lastPlaceholder !== placeholder) { + input.attr('placeholder', placeholder); + _lastPlaceholder = placeholder; } } - 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 + formFields.fieldsArr = function (val) { + if (!arguments.length) return _fieldsArr; + _fieldsArr = val || []; + return formFields; + }; - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } - }); + formFields.state = function (val) { + if (!arguments.length) return _state; + _state = val; + return formFields; + }; - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + formFields.klass = function (val) { + if (!arguments.length) return _klass; + _klass = val; + return formFields; + }; - function selectedTownHall() { - if (!isTownHallSelected()) return clickTownHall(); - var entity = context.hasEntity(hallId); - if (!entity) return clickTownHall(); - var box = pointBox(entity.loc, context); + return formFields; + } - var onClick = function onClick() { - continueTo(editorTownHall); - }; + function uiSectionPresetFields(context) { + var section = uiSection('preset-fields', context).label(_t.html('inspector.fields')).disclosureContent(renderDisclosureContent); + var dispatch = dispatch$8('change', 'revert'); + var formFields = uiFormFields(context); - 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 - }); - }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); - } - }); + var _state; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + var _fieldsArr; - function editorTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // disallow scrolling + var _presets = []; - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); + var _tags; - var onClick = function onClick() { - continueTo(presetTownHall); - }; + var _entityIDs; - reveal('.entity-editor-pane', helpHtml('intro.navigation.editor_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); - } - }); + function renderDisclosureContent(selection) { + if (!_fieldsArr) { + var graph = context.graph(); + var geometries = Object.keys(_entityIDs.reduce(function (geoms, entityID) { + geoms[graph.entity(entityID).geometry(graph)] = true; + return geoms; + }, {})); + var presetsManager = _mainPresetIndex; + var allFields = []; + var allMoreFields = []; + var sharedTotalFields; - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - nextStep(); - } - } + _presets.forEach(function (preset) { + var fields = preset.fields(); + var moreFields = preset.moreFields(); + allFields = utilArrayUnion(allFields, fields); + allMoreFields = utilArrayUnion(allMoreFields, moreFields); - function presetTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. + if (!sharedTotalFields) { + sharedTotalFields = utilArrayUnion(fields, moreFields); + } else { + sharedTotalFields = sharedTotalFields.filter(function (field) { + return fields.indexOf(field) !== -1 || moreFields.indexOf(field) !== -1; + }); + } + }); - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // disallow scrolling + var sharedFields = allFields.filter(function (field) { + return sharedTotalFields.indexOf(field) !== -1; + }); + var sharedMoreFields = allMoreFields.filter(function (field) { + return sharedTotalFields.indexOf(field) !== -1; + }); + _fieldsArr = []; + sharedFields.forEach(function (field) { + if (field.matchAllGeometry(geometries)) { + _fieldsArr.push(uiField(context, field, _entityIDs)); + } + }); + var singularEntity = _entityIDs.length === 1 && graph.hasEntity(_entityIDs[0]); - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); // preset match, in case the user happened to change it. + if (singularEntity && singularEntity.isHighwayIntersection(graph) && presetsManager.field('restrictions')) { + _fieldsArr.push(uiField(context, presetsManager.field('restrictions'), _entityIDs)); + } - var entity = context.entity(context.selectedIDs()[0]); - var preset = _mainPresetIndex.match(entity, context.graph()); + var additionalFields = utilArrayUnion(sharedMoreFields, presetsManager.universal()); + additionalFields.sort(function (field1, field2) { + return field1.label().localeCompare(field2.label(), _mainLocalizer.localeCode()); + }); + additionalFields.forEach(function (field) { + if (sharedFields.indexOf(field) === -1 && field.matchAllGeometry(geometries)) { + _fieldsArr.push(uiField(context, field, _entityIDs, { + show: false + })); + } + }); - var onClick = function onClick() { - continueTo(fieldsTownHall); - }; + _fieldsArr.forEach(function (field) { + field.on('change', function (t, onInput) { + dispatch.call('change', field, _entityIDs, t, onInput); + }).on('revert', function (keys) { + dispatch.call('revert', field, keys); + }); + }); + } - 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); + _fieldsArr.forEach(function (field) { + field.state(_state).tags(_tags); }); - context.history().on('change.intro', function () { - if (!context.hasEntity(hallId)) { - continueTo(clickTownHall); + + selection.call(formFields.fieldsArr(_fieldsArr).state(_state).klass('grouped-items-area')); + selection.selectAll('.wrap-form-field input').on('keydown', function (d3_event) { + // if user presses enter, and combobox is not active, accept edits.. + if (d3_event.keyCode === 13 && // â© Return + context.container().select('.combobox').empty()) { + context.enter(modeBrowse(context)); } }); + } - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.container().select('.inspector-wrap').on('wheel.intro', null); - nextStep(); + section.presets = function (val) { + if (!arguments.length) return _presets; + + if (!_presets || !val || !utilArrayIdentical(_presets, val)) { + _presets = val; + _fieldsArr = null; } - } - function fieldsTownHall() { - if (!isTownHallSelected()) return clickTownHall(); // reset pane, in case user happened to change it.. + return section; + }; - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); // disallow scrolling + section.state = function (val) { + if (!arguments.length) return _state; + _state = val; + return section; + }; - context.container().select('.inspector-wrap').on('wheel.intro', eventCancel); + section.tags = function (val) { + if (!arguments.length) return _tags; + _tags = val; // Don't reset _fieldsArr here. - var onClick = function onClick() { - continueTo(closeTownHall); - }; + return section; + }; - 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); - } - }); + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; - 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 (!val || !_entityIDs || !utilArrayIdentical(_entityIDs, val)) { + _entityIDs = val; + _fieldsArr = null; } - } - 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 - }); + return section; + }; + + return utilRebind(section, dispatch, 'on'); + } + + function uiSectionRawMemberEditor(context) { + var section = uiSection('raw-member-editor', context).shouldDisplay(function () { + if (!_entityIDs || _entityIDs.length !== 1) return false; + var entity = context.hasEntity(_entityIDs[0]); + return entity && entity.type === 'relation'; + }).label(function () { + var entity = context.hasEntity(_entityIDs[0]); + if (!entity) return ''; + var gt = entity.members.length > _maxMembers ? '>' : ''; + var count = gt + entity.members.slice(0, _maxMembers).length; + return _t('inspector.title_count', { + title: _t.html('inspector.members'), + count: count }); + }).disclosureContent(renderDisclosureContent); + var taginfo = services.taginfo; - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + var _entityIDs; - function searchStreet() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); // ensure spring street exists + var _maxMembers = 1000; - var msec = transitionTime(springStreet, context.map().center()); + function downloadMember(d3_event, d) { + d3_event.preventDefault(); // display the loading indicator - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + select(this.parentNode).classed('tag-reference-loading', true); + context.loadEntity(d.id, function () { + section.reRender(); + }); + } - context.map().centerZoomEase(springStreet, 19, msec); // ..and user can see it + function zoomToMember(d3_event, d) { + d3_event.preventDefault(); + var entity = context.entity(d.id); + context.map().zoomToEase(entity); // highlight the feature in case it wasn't previously on-screen - 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); + utilHighlightEntities([d.id], true, context); } - function checkSearchResult() { - var first = context.container().select('.feature-list-item:nth-child(0n+2)'); // skip "No Results" item + function selectMember(d3_event, d) { + d3_event.preventDefault(); // remove the hover-highlight styling - var firstName = first.select('.entity-name'); - var name = _t('intro.graph.name.spring-street'); + utilHighlightEntities([d.id], false, context); + var entity = context.entity(d.id); + var mapExtent = context.map().extent(); - 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); + if (!entity.intersects(mapExtent, context.graph())) { + // zoom to the entity if its extent is not visible now + context.map().zoomToEase(entity); } - function continueTo(nextStep) { - context.on('exit.intro', null); - context.container().select('.search-header input').on('keydown.intro', null).on('keyup.intro', null); - nextStep(); - } + context.enter(modeSelect(context, [d.id])); } - function selectedStreet() { - if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) { - return searchStreet(); + function changeRole(d3_event, d) { + var oldRole = d.role; + var newRole = context.cleanRelationRole(select(this).property('value')); + + if (oldRole !== newRole) { + var member = { + id: d.id, + type: d.type, + role: newRole + }; + context.perform(actionChangeMember(d.relation.id, member, d.index), _t('operations.change_role.annotation', { + n: 1 + })); + context.validator().validate(); } + } - var onClick = function onClick() { - continueTo(editorStreet); - }; + function deleteMember(d3_event, d) { + // remove the hover-highlight styling + utilHighlightEntities([d.id], false, context); + context.perform(actionDeleteMember(d.relation.id, d.index), _t('operations.delete_member.annotation', { + n: 1 + })); - 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 + if (!context.hasEntity(d.relation.id)) { + // Removing the last member will also delete the relation. + // If this happens we need to exit the selection mode + context.enter(modeBrowse(context)); + } else { + // Changing the mode also runs `validate`, but otherwise we need to + // rerun it manually + context.validator().validate(); + } + } + + function renderDisclosureContent(selection) { + var entityID = _entityIDs[0]; + var memberships = []; + var entity = context.entity(entityID); + entity.members.slice(0, _maxMembers).forEach(function (member, index) { + memberships.push({ + index: index, + id: member.id, + type: member.type, + role: member.role, + relation: entity, + member: context.hasEntity(member.id), + domId: utilUniqueDomId(entityID + '-member-' + index) + }); }); - 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 + var list = selection.selectAll('.member-list').data([0]); + list = list.enter().append('ul').attr('class', 'member-list').merge(list); + var items = list.selectAll('li').data(memberships, function (d) { + return osmEntity.key(d.relation) + ',' + d.index + ',' + (d.member ? osmEntity.key(d.member) : 'incomplete'); + }); + items.exit().each(unbind).remove(); + var itemsEnter = items.enter().append('li').attr('class', 'member-row form-field').classed('member-incomplete', function (d) { + return !d.member; + }); + itemsEnter.each(function (d) { + var item = select(this); + var label = item.append('label').attr('class', 'field-label').attr('for', d.domId); + + if (d.member) { + // highlight the member feature in the map while hovering on the list item + item.on('mouseover', function () { + utilHighlightEntities([d.id], true, context); + }).on('mouseout', function () { + utilHighlightEntities([d.id], false, context); + }); + var labelLink = label.append('span').attr('class', 'label-text').append('a').attr('href', '#').on('click', selectMember); + labelLink.append('span').attr('class', 'member-entity-type').html(function (d) { + var matched = _mainPresetIndex.match(d.member, context.graph()); + return matched && matched.name() || utilDisplayType(d.member.id); + }); + labelLink.append('span').attr('class', 'member-entity-name').html(function (d) { + return utilDisplayName(d.member); }); + label.append('button').attr('title', _t('icons.remove')).attr('class', 'remove member-delete').call(svgIcon('#iD-operation-delete')); + label.append('button').attr('class', 'member-zoom').attr('title', _t('icons.zoom_to')).call(svgIcon('#iD-icon-framed-dot', 'monochrome')).on('click', zoomToMember); + } else { + var labelText = label.append('span').attr('class', 'label-text'); + labelText.append('span').attr('class', 'member-entity-type').html(_t.html('inspector.' + d.type, { + id: d.id + })); + labelText.append('span').attr('class', 'member-entity-name').html(_t.html('inspector.incomplete', { + id: d.id + })); + label.append('button').attr('class', 'member-download').attr('title', _t('icons.download')).call(svgIcon('#iD-icon-load')).on('click', downloadMember); + } + }); + 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').attr('placeholder', _t('inspector.role')).call(utilNoAuto); + + if (taginfo) { + wrapEnter.each(bindTypeahead); + } // update + + + 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 (index === index2) { + return 'translate(' + x + 'px, ' + y + 'px)'; + } else if (index2 > index && d3_event.y > node.offsetTop) { + if (targetIndex === null || index2 > targetIndex) { + targetIndex = index2; + } + + return 'translateY(-100%)'; + } else if (index2 < index && d3_event.y < node.offsetTop + node.offsetHeight) { + if (targetIndex === null || index2 < targetIndex) { + targetIndex = index2; + } + + return 'translateY(100%)'; + } + + return null; }); - }, 600); // after reveal. + }).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); - context.on('enter.intro', function (mode) { - if (!context.hasEntity(springStreetId)) { - return continueTo(searchStreet); + 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(); } + })); - var ids = context.selectedIDs(); + function bindTypeahead(d) { + var row = select(this); + var role = row.selectAll('input.member-role'); + var origValue = role.property('value'); - 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 sort(value, data) { + var sameletter = []; + var other = []; + + 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]); + } + } + + return sameletter.concat(other); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + 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; - 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 - }); - }); + 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'; + } - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); + 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); + })); } - } - 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'); - } - }); + function unbind() { + var row = select(this); + row.selectAll('input.member-role').call(uiCombobox.off, context); + } } - chapter.enter = function () { - dragMap(); + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return section; }; - 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 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 utilRebind(chapter, dispatch$1, 'on'); - } + for (var i in memberIndexes) { + graph = actionDeleteMember(relationId, memberIndexes[i])(graph); + } - 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' + return graph; }; + } - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + 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 eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + var _showBlank; - function addPoint() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(intersection, context.map().center()); + var _maxMemberships = 1000; - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + function getSharedParentRelations() { + var parents = []; - 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); + for (var i = 0; i < _entityIDs.length; i++) { + var entity = context.graph().hasEntity(_entityIDs[i]); + if (!entity) continue; - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } - } + if (i === 0) { + parents = context.graph().parentRelations(entity); + } else { + parents = utilArrayIntersection(parents, context.graph().parentRelations(entity)); + } - function placePoint() { - if (context.mode().id !== 'add-point') { - return chapter.restart(); + if (!parents.length) break; } - 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); - }); - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } + return parents; } - function searchPreset() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return addPoint(); - } // disallow scrolling - - - 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); - } - - var ids = context.selectedIDs(); + function getMemberships() { + var memberships = []; + var relations = getSharedParentRelations().slice(0, _maxMemberships); + var isMultiselect = _entityIDs.length > 1; + var i, relation, membership, index, member, indexedMember; - if (mode.id !== 'select' || !ids.length || ids[0] !== _pointID) { - // keep the user's point selected.. - context.enter(modeSelect(context, [_pointID])); // disallow scrolling + for (i = 0; i < relations.length; i++) { + relation = relations[i]; + membership = { + relation: relation, + members: [], + hash: osmEntity.key(relation) + }; - 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); - } - }); + for (index = 0; index < relation.members.length; index++) { + member = relation.members[index]; - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + if (_entityIDs.indexOf(member.id) !== -1) { + indexedMember = Object.assign({}, member, { + index: index + }); + membership.members.push(indexedMember); + membership.hash += ',' + index.toString(); - 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); - }); + 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) + }; + } + } } - } - - 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(); + if (membership.members.length) memberships.push(membership); } - 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); - } + 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); }); - }, 400); - context.on('exit.intro', function () { - // if user leaves select mode here, just continue with the tutorial. - continueTo(reselectPoint); + membership.role = roles.length === 1 ? roles[0] : roles; }); - - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } + return memberships; } - function addName() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return addPoint(); - } // reset pane, in case user happened to change it.. - + function selectRelation(d3_event, d) { + d3_event.preventDefault(); // remove the hover-highlight styling - 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); + utilHighlightEntities([d.relation.id], false, context); + context.enter(modeSelect(context, [d.relation.id])); + } - 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); - } - }); - tooltip.select('.instruction').style('display', 'none'); - } else { - reveal('.entity-editor-pane', addNameString, { - tooltipClass: 'intro-points-describe' - }); - } - }, 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); - }); + 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.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + utilHighlightEntities([d.relation.id], true, context); } - 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); + function changeRole(d3_event, d) { + if (d === 0) return; // called on newrow (shouldn't happen) + + 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; }); - reveal('.entity-editor-pane', helpHtml('intro.points.add_close', { - button: icon(href, 'inline') - })); - function continueTo(nextStep) { - context.on('exit.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 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.. + function addMembership(d, role) { + this.blur(); // avoid keeping focus on the button - 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()); + _showBlank = false; - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + 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); + } - 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 - }); - }); - }, 600); // after reveal.. + return graph; + }; + } - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') return; - continueTo(updatePoint); - }); - }, msec + 100); + 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('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + context.enter(modeSelect(context, [relation.id]).newFeature(true)); } } - function updatePoint() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return continueTo(reselectPoint); - } // reset pane, in case user happened to untag the point.. + function deleteMembership(d3_event, d) { + this.blur(); // avoid keeping focus on the button + if (d === 0) return; // called on newrow (shouldn't happen) + // remove the hover-highlight styling - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); - context.on('exit.intro', function () { - continueTo(reselectPoint); - }); - context.history().on('change.intro', function () { - continueTo(updateCloseEditor); + utilHighlightEntities([d.relation.id], false, context); + var indexes = d.members.map(function (member) { + return member.index; }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.points.update'), { - tooltipClass: 'intro-points-describe' - }); - }, 400); - - function continueTo(nextStep) { - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + context.perform(actionDeleteMembers(d.relation.id, indexes), _t('operations.delete_member.annotation', { + n: _entityIDs.length + })); + context.validator().validate(); } - function updateCloseEditor() { - if (context.mode().id !== 'select' || !_pointID || !context.hasEntity(_pointID)) { - return continueTo(reselectPoint); - } // reset pane, in case user happened to change it.. + 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(); + function baseDisplayLabel(entity) { + var matched = _mainPresetIndex.match(entity, graph); + var presetName = matched && matched.name() || _t('inspector.relation'); + var entityName = utilDisplayName(entity) || ''; + return presetName + ' ' + entityName; + } - 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); + var explicitRelation = q && context.hasEntity(q.toLowerCase()); - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); - } - } + 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 + }); + } 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 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 - }); - 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 + 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; }); }); - }, 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 + result.forEach(function (obj) { + obj.title = obj.value; }); - - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - nextStep(); - } + result.unshift(newRelation); + callback(result); } - function enterDelete() { - if (!_pointID) return chapter.restart(); - var entity = context.hasEntity(_pointID); - if (!entity) return chapter.restart(); - var node = selectMenuItem(context, 'delete').node(); + 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 - if (!node) { - return continueTo(rightClickPoint); - } + 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('.edit-menu', helpHtml('intro.points.delete'), { - padding: 50 + 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); }); - 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 + var labelEnter = itemsEnter.append('label').attr('class', 'field-label').attr('for', function (d) { + return d.domId; }); - context.history().on('change.intro', function (changed) { - if (changed.deleted().length) { - continueTo(undo); - } + 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.map().on('move.intro', null); - context.history().on('change.intro', null); - context.on('exit.intro', null); - nextStep(); + if (taginfo) { + wrapEnter.each(bindTypeahead); } - } - function undo() { - context.history().on('change.intro', function () { - continueTo(play); + var newMembership = list.selectAll('.member-row-new').data(_showBlank ? [0] : []); // Exit + + newMembership.exit().remove(); // Enter + + 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(); }); - reveal('.top-toolbar button.undo-button', helpHtml('intro.points.undo')); + 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.history().on('change.intro', null); - nextStep(); - } - } + 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 - 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 addRow = selection.selectAll('.add-row').data([0]); // enter + + 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 + + addRowEnter.append('div').attr('class', 'space-buttons'); // preserve space + // update + + addRow = addRow.merge(addRowEnter); + addRow.select('.add-relation').on('click', function () { + _showBlank = true; + section.reRender(); + list.selectAll('.member-entity-input').node().focus(); }); - } - chapter.enter = function () { - addPoint(); - }; + function acceptEntity(d) { + if (!d) { + cancelEntity(); + return; + } // remove hover-higlighting - 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); - }; - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + 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); + } - return utilRebind(chapter, dispatch$1, 'on'); - } + function cancelEntity() { + var input = newMembership.selectAll('.member-entity-input'); + input.property('value', ''); // remove hover-higlighting - 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 = []; + context.surface().selectAll('.highlighted').classed('highlighted', false); + } - var _areaID; + function bindTypeahead(d) { + var row = select(this); + var role = row.selectAll('input.member-role'); + var origValue = role.property('value'); - var chapter = { - title: 'intro.areas.title' - }; + function sort(value, data) { + var sameletter = []; + var other = []; - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + 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]); + } + } - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + return sameletter.concat(other); + } - 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); + 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 unbind() { + var row = select(this); + row.selectAll('input.member-role').call(uiCombobox.off, context); + } } - function addArea() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - _areaID = null; - var msec = transitionTime(playground, context.map().center()); + section.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + _showBlank = false; + return section; + }; - if (msec) { - reveal(null, null, { - duration: 0 - }); + return section; + } + + 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 + }); + }).disclosureContent(renderDisclosureContent); + context.history().on('change.selectionList', function (difference) { + if (difference) { + section.reRender(); } + }); - 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); + section.entityIDs = function (val) { + if (!arguments.length) return _selectedIDs; + _selectedIDs = val; + return section; + }; - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } + function selectEntity(d3_event, entity) { + context.enter(modeSelect(context, [entity.id])); } - function startPlayground() { - if (context.mode().id !== 'add-area') { - return chapter.restart(); - } + function deselectEntity(d3_event, entity) { + var selectedIDs = _selectedIDs.slice(); - _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 + var index = selectedIDs.indexOf(entity.id); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + if (index > -1) { + selectedIDs.splice(index, 1); + context.enter(modeSelect(context, selectedIDs)); } } - function continuePlayground() { - if (context.mode().id !== 'draw-area') { - return chapter.restart(); - } + function renderDisclosureContent(selection) { + var list = selection.selectAll('.feature-list').data([0]); + list = list.enter().append('ul').attr('class', 'feature-list').merge(list); - _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 + var entities = _selectedIDs.map(function (id) { + return context.hasEntity(id); + }).filter(Boolean); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-area') { - var entity = context.hasEntity(context.selectedIDs()[0]); + var items = list.selectAll('.feature-list-item').data(entities, osmEntity.key); + items.exit().remove(); // Enter - 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(); - } + 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.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } + 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); + }); } - function finishPlayground() { - if (context.mode().id !== 'draw-area') { - return chapter.restart(); - } + return section; + } + + function uiEntityEditor(context) { + var dispatch = dispatch$8('choose'); + var _state = 'select'; + var _coalesceChanges = false; + var _modified = false; + + var _base; - _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 _entityIDs; - 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(); - } - }); + var _activePresets = []; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + var _newFeature; - function searchPresets() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + var _sections; - var ids = context.selectedIDs(); + function entityEditor(selection) { + var combinedTags = utilCombinedTags(_entityIDs, context.graph()); // Header - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - context.enter(modeSelect(context, [_areaID])); - } // disallow scrolling + var header = selection.selectAll('.header').data([0]); // Enter + 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 - 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.. + 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 - context.on('enter.intro', function (mode) { - if (!_areaID || !context.hasEntity(_areaID)) { - return continueTo(addArea); - } + var body = selection.selectAll('.inspector-body').data([0]); // Enter - var ids = context.selectedIDs(); + var bodyEnter = body.enter().append('div').attr('class', 'entity-editor inspector-body sep-top'); // Update - 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.. + body = body.merge(bodyEnter); - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling + 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.areas.search_playground', { - preset: playgroundPreset.name() - })); - context.history().on('change.intro', null); + _sections.forEach(function (section) { + if (section.entityIDs) { + section.entityIDs(_entityIDs); } - }); - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + if (section.presets) { + section.presets(_activePresets); + } - 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 (section.tags) { + section.tags(combinedTags); } - } - 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(); - } - } + if (section.state) { + section.state(_state); + } - function clickAddField() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + body.call(section.render); + }); - var ids = context.selectedIDs(); + context.history().on('change.entity-editor', historyChanged); - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } + 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 (!context.container().select('.form-field-description').empty()) { - return continueTo(describePlayground); - } // disallow scrolling + 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. - 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. + function changeTags(entityIDs, changed, onInput) { + var actions = []; - var entity = context.entity(_areaID); + for (var i in entityIDs) { + var entityID = entityIDs[i]; + var entity = context.entity(entityID); + var tags = Object.assign({}, entity.tags); // shallow copy - if (entity.tags.description) { - return continueTo(play); - } // scroll "Add field" into view + for (var k in changed) { + if (!k) continue; + var v = changed[k]; + if (v !== undefined || tags.hasOwnProperty(k)) { + tags[k] = v; + } + } - var box = context.container().select('.more-fields').node().getBoundingClientRect(); + if (!onInput) { + tags = utilCleanTags(tags); + } - 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); - }; - }); + if (!fastDeepEqual(entity.tags, tags)) { + actions.push(actionChangeTags(entityID, tags)); } + } - 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); + if (actions.length) { + var combinedAction = function combinedAction(graph) { + actions.forEach(function (action) { + graph = action(graph); }); - }, 300); // after "Add Field" visible - }, 400); // after editor pane visible + return graph; + }; - context.on('exit.intro', function () { - return continueTo(searchPresets); - }); + var annotation = _t('operations.change_tags.annotation'); - 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(); + if (_coalesceChanges) { + context.overwrite(combinedAction, annotation); + } else { + context.perform(combinedAction, annotation); + _coalesceChanges = !!onInput; + } + } // if leaving field (blur event), rerun validation + + + if (!onInput) { + context.validator().validate(); } } - function chooseDescriptionField() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + function revertTags(keys) { + var actions = []; - var ids = context.selectedIDs(); + for (var i in _entityIDs) { + var entityID = _entityIDs[i]; + var original = context.graph().base().entities[entityID]; + var changed = {}; - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } + for (var j in keys) { + var key = keys[j]; + changed[key] = original ? original.tags[key] : undefined; + } - if (!context.container().select('.form-field-description').empty()) { - return continueTo(describePlayground); - } // Make sure combobox is ready.. + var entity = context.entity(entityID); + var tags = Object.assign({}, entity.tags); // shallow copy + for (var k in changed) { + if (!k) continue; + var v = changed[k]; - if (context.container().select('div.combobox').empty()) { - return continueTo(clickAddField); - } // Watch for the combobox to go away.. + if (v !== undefined || tags.hasOwnProperty(k)) { + tags[k] = v; + } + } + tags = utilCleanTags(tags); - 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 (!fastDeepEqual(entity.tags, tags)) { + actions.push(actionChangeTags(entityID, tags)); } - }, 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(); } - } - function describePlayground() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + if (actions.length) { + var combinedAction = function combinedAction(graph) { + actions.forEach(function (action) { + graph = action(graph); + }); + return graph; + }; - var ids = context.selectedIDs(); + var annotation = _t('operations.change_tags.annotation'); - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } // reset pane, in case user happened to change it.. + if (_coalesceChanges) { + context.overwrite(combinedAction, annotation); + } else { + context.perform(combinedAction, annotation); + _coalesceChanges = false; + } + } + context.validator().validate(); + } - context.container().select('.inspector-wrap .panewrap').style('right', '0%'); + entityEditor.modified = function (val) { + if (!arguments.length) return _modified; + _modified = val; + return entityEditor; + }; - if (context.container().select('.form-field-description').empty()) { - return continueTo(retryChooseDescription); - } + entityEditor.state = function (val) { + if (!arguments.length) return _state; + _state = val; + return entityEditor; + }; - context.on('exit.intro', function () { - continueTo(play); - }); - reveal('.entity-editor-pane', helpHtml('intro.areas.describe_playground', { - button: icon('#iD-icon-close', 'inline') - }), { - duration: 300 - }); + 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); - nextStep(); - } - } + _base = context.graph(); + _coalesceChanges = false; + if (val && _entityIDs && utilArrayIdentical(_entityIDs, val)) return entityEditor; // exit early if no change - function retryChooseDescription() { - if (!_areaID || !context.hasEntity(_areaID)) { - return addArea(); - } + _entityIDs = val; + loadActivePresets(true); + return entityEditor.modified(false); + }; - var ids = context.selectedIDs(); + entityEditor.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return entityEditor; + }; - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _areaID) { - return searchPresets(); - } // reset pane, in case user happened to change it.. + function loadActivePresets(isForNewSelection) { + var graph = context.graph(); + var counts = {}; + 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; + } - 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 matches = Object.keys(counts).sort(function (p1, p2) { + return counts[p2] - counts[p1]; + }).map(function (pID) { + return _mainPresetIndex.item(pID); }); - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); + 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") + + if (weakPreset && matches.length === 1 && matches[0].isFallback()) return; } - } - 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'); - } - }); + entityEditor.presets(matches); } - chapter.enter = function () { - addArea(); - }; + entityEditor.presets = function (val) { + if (!arguments.length) return _activePresets; // don't reload the same preset - 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 (!utilArrayIdentical(val, _activePresets)) { + _activePresets = val; + } - chapter.restart = function () { - chapter.exit(); - chapter.enter(); + return entityEditor; }; - return utilRebind(chapter, dispatch$1, 'on'); + return utilRebind(entityEditor, dispatch, 'on'); } - 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' - }; + function uiPresetList(context) { + var dispatch = dispatch$8('cancel', 'choose'); - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + var _entityIDs; - function eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + var _currLoc; - function addLine() { - context.enter(modeBrowse(context)); - context.history().reset('initial'); - var msec = transitionTime(tulipRoadStart, context.map().center()); + var _currentPresets; - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + var _autofocus = false; - 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 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 continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); + 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); + } } - } - 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); - }); + 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 - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + var buttons = list.selectAll('.preset-list-button'); + if (!buttons.empty()) buttons.nodes()[0].focus(); + } } - } - 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 - }); - }); - }, 550); // after easing.. + function keypress(d3_event) { + // enter + var value = search.property('value'); - context.history().on('change.intro', function () { - if (isLineConnected()) { - continueTo(continueLine); + if (d3_event.keyCode === 13 && // â© Return + value.length) { + list.selectAll('.preset-list-item:first-child').each(function (d) { + d.choose.call(this); + }); } - }); - context.on('enter.intro', function (mode) { - if (mode.id === 'draw-line') { - return; - } else if (mode.id === 'select') { - continueTo(retryIntersect); - return; + } + + function inputevent() { + var value = search.property('value'); + list.classed('filtered', value.length); + var results, messageText; + + if (value.length) { + results = presets.search(value, entityGeometries()[0], _currLoc); + messageText = _t('inspector.results', { + n: results.collection.length, + search: value + }); } else { - return chapter.restart(); + results = _mainPresetIndex.defaults(entityGeometries()[0], 36, !context.inIntro(), _currLoc); + messageText = _t('inspector.choose'); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); + list.call(drawList, results); + message.html(messageText); } - } - function isLineConnected() { - var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); + 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', debounce(inputevent)); - 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; - }); - }); - } + if (_autofocus) { + search.node().focus(); // Safari 14 doesn't always like to focus immediately, + // so try again on the next pass - 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); + 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 continueLine() { - if (context.mode().id !== 'draw-line') return chapter.restart(); + function drawList(list, presets) { + presets = presets.matchAllGeometry(entityGeometries()); + var collection = presets.collection.reduce(function (collection, preset) { + if (!preset) return collection; - var entity = _tulipRoadID && context.hasEntity(_tulipRoadID); + 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)); + } - 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(); + return collection; + }, []); + var items = list.selectAll('.preset-list-item').data(collection, function (d) { + return d.preset.id; }); - - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); - } + 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 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 + 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 - 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 + if (d3_event.keyCode === utilKeybinding.keyCodes['â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // the next item in the list at the same level - 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(); - } - } + var nextItem = select(item.node().nextElementSibling); // if there is no next item in this list - 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 - }); - }, 300); + 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 - function continueTo(nextStep) { - context.container().select('.preset-list-button').on('click.intro', null); - context.on('exit.intro', null); - nextStep(); - } - } // selected wrong road type + } else if (select(this).classed('expanded')) { + // select the first subitem instead + nextItem = item.select('.subgrid .preset-list-item:first-child'); + } + 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 retryPresetResidential() { - if (context.mode().id !== 'select') return chapter.restart(); - context.on('exit.intro', function () { - return chapter.restart(); - }); // disallow scrolling + } else if (d3_event.keyCode === utilKeybinding.keyCodes['â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // the previous item in the list at the same level - 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); + var previousItem = select(item.node().previousElementSibling); // if there is no previous item in this list - 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 (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 - function nameRoad() { - context.on('exit.intro', function () { - continueTo(didNameRoad); - }); - timeout(function () { - reveal('.entity-editor-pane', helpHtml('intro.lines.name_road', { - button: icon('#iD-icon-close', 'inline') - }), { - tooltipClass: 'intro-lines-name_road' - }); - }, 500); + } 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.on('exit.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 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); - } - }); - }, 500); + } 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 - function continueTo(nextStep) { - nextStep(); + if (!parentItem.empty()) { + parentItem.select('.preset-list-button').node().focus(); + } // arrow right, choose this item + + } else if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); + item.datum().choose.call(select(this).node()); } } - function updateLine() { - context.history().reset('doneAddLine'); + function CategoryItem(preset) { + var box, + sublist, + shown = false; - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return chapter.restart(); - } + function item(selection) { + var wrap = selection.append('div').attr('class', 'preset-list-button-wrap category'); - var msec = transitionTime(woodRoadDragMidpoint, context.map().center()); + 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(); + } - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + 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 - context.map().centerZoomEase(woodRoadDragMidpoint, 19, msec); - timeout(function () { - var padding = 250 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragMidpoint, padding, context); + if (!select(this).classed('expanded')) { + // toggle expansion (expand the item) + click.call(this, d3_event); + } // left arrow, collapse the focused item - var advance = function advance() { - continueTo(addNode); - }; + } else if (d3_event.keyCode === utilKeybinding.keyCodes[_mainLocalizer.textDirection() === 'rtl' ? 'â' : 'â']) { + d3_event.preventDefault(); + d3_event.stopPropagation(); // if the item is expanded - reveal(box, helpHtml('intro.lines.update_line'), { - buttonText: _t.html('intro.ok'), - buttonCallback: advance + if (select(this).classed('expanded')) { + // toggle expansion (collapse the item) + click.call(this, d3_event); + } + } else { + itemKeydown.call(this, d3_event); + } }); - 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 - }); + 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() + '…'; }); - }, msec + 100); - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); + 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 addNode() { - context.history().reset('doneAddLine'); + item.choose = function () { + if (!box || !sublist) return; - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return chapter.restart(); - } + 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'); + } + }; - 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 + item.preset = preset; + return item; + } + + 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; }); - }); - context.history().on('change.intro', function (changed) { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + wrap.call(item.reference.button); + selection.call(item.reference.body); + } - if (changed.created().length === 1) { - timeout(function () { - continueTo(startDragEndpoint); - }, 500); - } - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'select') { - continueTo(updateLine); + item.choose = function () { + if (select(this).classed('disabled')) return; + + if (!context.inIntro()) { + _mainPresetIndex.setMostRecent(preset, entityGeometries()[0]); } - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); - } + 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 + + dispatch.call('choose', this, preset); + }; + + item.help = function (d3_event) { + d3_event.stopPropagation(); + item.reference.toggle(); + }; + + item.preset = preset; + item.reference = uiTagReference(preset.reference()); + return item; } - function startDragEndpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + 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 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); + button.call(uiTooltip().destroyAny); + button.each(function (item, index) { + var hiddenPresetFeaturesId; + + for (var i in geometries) { + hiddenPresetFeaturesId = context.features().isHiddenPreset(item.preset, geometries[i]); + if (hiddenPresetFeaturesId) break; } - 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); + var isHiddenPreset = !context.inIntro() && !!hiddenPresetFeaturesId && (_currentPresets.length !== 1 || item.preset !== _currentPresets[0]); + select(this).classed('disabled', isHiddenPreset); - if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) { - continueTo(finishDragEndpoint); + 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.map().on('move.intro drawn.intro', null); - nextStep(); - } } - function finishDragEndpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + presetList.autofocus = function (val) { + if (!arguments.length) return _autofocus; + _autofocus = val; + return presetList; + }; - 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); - } + presetList.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + _currLoc = null; - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, finishDragString, { - duration: 0 + 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()); }); - var entity = context.entity(woodRoadEndID); - if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) { - continueTo(startDragEndpoint); + presetList.presets(presets); + } + + return presetList; + }; + + presetList.presets = function (val) { + if (!arguments.length) return _currentPresets; + _currentPresets = val; + return presetList; + }; + + 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) + + if (geometry === 'vertex' && entity.isOnAddressLine(context.graph())) { + geometry = 'point'; } - }); - context.on('enter.intro', function () { - continueTo(startDragMidpoint); - }); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + if (!counts[geometry]) counts[geometry] = 0; + counts[geometry] += 1; } + + return Object.keys(counts).sort(function (geom1, geom2) { + return counts[geom2] - counts[geom1]; + }); } - function startDragMidpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + return utilRebind(presetList, dispatch, 'on'); + } - if (context.selectedIDs().indexOf(woodRoadID) === -1) { - context.enter(modeSelect(context, [woodRoadID])); - } + function uiViewOnOSM(context) { + var _what; // an osmEntity or osmNote - 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 - }); - }); - 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])); - } - }); + function viewOnOSM(selection) { + var url; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', null); - nextStep(); + if (_what instanceof osmEntity) { + url = context.connection().entityURL(_what); + } else if (_what instanceof osmNote) { + url = context.connection().noteURL(_what); } + + var data = !_what || _what.isNew() ? [] : [_what]; + var link = selection.selectAll('.view-on-osm').data(data, function (d) { + return d.id; + }); // exit + + link.exit().remove(); // enter + + 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')); } - function continueDragMidpoint() { - if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { - return continueTo(updateLine); - } + viewOnOSM.what = function (_) { + if (!arguments.length) return _what; + _what = _; + return viewOnOSM; + }; - var padding = 100 * Math.pow(2, context.map().zoom() - 19); - var box = pad(woodRoadDragEndpoint, padding, context); - box.height += 400; + return viewOnOSM; + } - var advance = function advance() { - context.history().checkpoint('doneUpdateLine'); - continueTo(deleteLines); - }; + function uiInspector(context) { + var presetList = uiPresetList(context); + var entityEditor = uiEntityEditor(context); + var wrap = select(null), + presetPane = select(null), + editorPane = select(null); + var _state = 'select'; - 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 _entityIDs; - 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 - }); + var _newFeature = false; + + 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'); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } + function shouldDefaultToPresetList() { + // always show the inspector on hover + if (_state !== 'select') return false; // can only change preset on single selection - function deleteLines() { - context.history().reset('doneUpdateLine'); - context.enter(modeBrowse(context)); + 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 - if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return chapter.restart(); - } + if (entity.hasNonGeometryTags()) return false; // prompt to select preset if feature is new and untagged - var msec = transitionTime(deleteLinesLoc, context.map().center()); + if (_newFeature) return true; // all existing features except vertices should default to inspector - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + if (entity.geometry(context.graph()) !== 'vertex') return false; // show vertex relations if any - 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 (context.graph().parentRelations(entity).length) return false; // show vertex issues if there are any - var advance = function advance() { - continueTo(rightClickIntersection); - }; + if (context.validator().getEntityIssues(entityID).length) return false; // show turn retriction editor for junction vertices - 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 - }); - }); - context.history().on('change.intro', function () { - timeout(function () { - continueTo(deleteLines); - }, 500); // after any transition (e.g. if user deleted intersection) - }); - }, msec + 100); + if (entity.isHighwayIntersection(context.graph())) return false; // otherwise show preset list for uninteresting vertices - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); + return true; } - } - - 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); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.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 splitIntersection() { - if (!context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(deleteLines); + 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); + }); + + if (presets) { + presetList.presets(presets); } - var node = selectMenuItem(context, 'split').node(); + presetPane.call(presetList.autofocus(true)); + }; - if (!node) { - return continueTo(rightClickIntersection); + 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); + }); + + if (preset) { + entityEditor.presets([preset]); + } + + editorPane.call(entityEditor); } + }; - var wasChanged = false; - _washingtonSegmentID = null; - reveal('.edit-menu', helpHtml('intro.lines.split_intersection', { - street: _t('intro.graph.name.washington-street') - }), { - padding: 50 - }); - context.map().on('move.intro drawn.intro', function () { - var node = selectMenuItem(context, 'split').node(); + 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 (!wasChanged && !node) { - return continueTo(rightClickIntersection); - } + context.container().selectAll('.field-help-body').remove(); + return inspector; + }; - 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); - } else { - _washingtonSegmentID = null; - continueTo(retrySplit); - } - }, 300); // after any transition (e.g. if user deleted intersection) - }); + inspector.entityIDs = function (val) { + if (!arguments.length) return _entityIDs; + _entityIDs = val; + return inspector; + }; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + inspector.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return inspector; + }; - function retrySplit() { - context.enter(modeBrowse(context)); - context.map().centerZoomEase(eleventhAvenueEnd, 18, 500); + return inspector; + } - var advance = function advance() { - continueTo(rightClickIntersection); - }; + function uiImproveOsmComments() { + var _qaItem; - 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 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 continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - nextStep(); - } - } + services.improveOSM.getComments(_qaItem).then(function (d) { + if (!d.comments) return; // nothing to do here - function didSplit() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + 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); - 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 + if (osm && d.username) { + selection = selection.append('a').attr('class', 'comment-author-link').attr('href', osm.userURL(d.username)).attr('target', '_blank'); + } + + selection.html(function (d) { + return d.username; }); }); - }, 600); // after initial reveal and curtain cut + 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 - context.on('enter.intro', function () { - var ids = context.selectedIDs(); + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(_mainLocalizer.localeCode(), options); + } - if (ids.length === 1 && ids[0] === _washingtonSegmentID) { - 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); - } - }); + issueComments.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return issueComments; + }; - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.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 multiSelect() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + function improveOsmDetails(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 - var ids = context.selectedIDs(); - var hasWashington = ids.indexOf(_washingtonSegmentID) !== -1; - var hasTwelfth = ids.indexOf(twelfthAvenueID) !== -1; + 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.. - if (hasWashington && hasTwelfth) { - return continueTo(multiRightClick); - } else if (!hasWashington && !hasTwelfth) { - return 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 - context.map().centerZoomEase(twelfthAvenue, 18, 500); - timeout(function () { - var selected, other, padding, box; + 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 (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; - } + if (!osmlayer.enabled()) { + osmlayer.enabled(true); + } - 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; + context.map().centerZoom(_qaItem.loc, 20); + + if (entity) { + context.enter(modeSelect(context, [entityID])); } 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; + 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) - 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); + 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 } - }); - }, 600); - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + if (name) { + this.innerText = name; + } + } + }); // Don't hide entities related to this error - #5880 + + context.features().forceVisible(relatedEntities); + context.map().pan([0, 0]); // trigger a redraw } - function multiRightClick() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + improveOsmDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmDetails; + }; - 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 - }); - }); - context.ui().editMenu().on('toggled.intro', function (open) { - if (!open) return; - timeout(function () { - var ids = context.selectedIDs(); + return improveOsmDetails; + } - 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); - } - }); + function uiImproveOsmHeader() { + var _qaItem; - 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(); - } - } + 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 - function multiDelete() { - if (!_washingtonSegmentID || !context.hasEntity(_washingtonSegmentID) || !context.hasEntity(washingtonStreetID) || !context.hasEntity(twelfthAvenueID) || !context.hasEntity(eleventhAvenueEndID)) { - return continueTo(rightClickIntersection); - } + return _t.html("QA.improveOSM.error_types.".concat(issueKey, ".title"), d.replacements); + } - 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 - }); + function improveOsmHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - context.on('exit.intro', function () { - if (context.hasEntity(_washingtonSegmentID) || context.hasEntity(twelfthAvenueID)) { - return continueTo(multiSelect); // left select mode but roads still exist - } + 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.history().on('change.intro', function () { - if (context.hasEntity(_washingtonSegmentID) || context.hasEntity(twelfthAvenueID)) { - continueTo(retryDelete); // changed something but roads still exist + 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 { - continueTo(play); + var isMaki = /^maki-/.test(picon); + return "#".concat(picon).concat(isMaki ? '-11' : ''); } }); - - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('exit.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + headerEnter.append('div').attr('class', 'qa-header-label').html(issueTitle); } - 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); - } - }); + improveOsmHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmHeader; + }; - function continueTo(nextStep) { - nextStep(); - } - } + return improveOsmHeader; + } - 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'); - } - }); - } + function uiImproveOsmEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiImproveOsmDetails(context); + var qaComments = uiImproveOsmComments(); + var qaHeader = uiImproveOsmHeader(); - chapter.enter = function () { - addLine(); - }; + var _qaItem; - 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); - }; + 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); + } - chapter.restart = function () { - chapter.exit(); - chapter.enter(); - }; + function improveOsmSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - return utilRebind(chapter, dispatch$1, 'on'); - } + 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 - 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' - }; + saveSection.exit().remove(); // enter - function timeout(f, t) { - timeouts.push(window.setTimeout(f, t)); - } + 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 eventCancel(d3_event) { - d3_event.stopPropagation(); - d3_event.preventDefault(); - } + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); - 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 changeInput() { + var input = select(this); + var val = input.property('value').trim(); - 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 (val === '') { + val = undefined; + } // store the unsaved comment with the issue itself - 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 + _qaItem = _qaItem.update({ + newComment: val }); - } + var qaService = services.improveOSM; - 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 (qaService) { + qaService.replaceItem(_qaItem); + } - function continueTo(nextStep) { - context.on('enter.intro', null); - nextStep(); + saveSection.call(qaSaveButtons); } } - function startHouse() { - if (context.mode().id !== 'add-area') { - return continueTo(addHouse); - } + function qaSaveButtons(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - _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 + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_qaItem] : [], function (d) { + return d.status + d.id; + }); // exit - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } + buttonSection.exit().remove(); // enter - function continueHouse() { - if (context.mode().id !== 'draw-area') { - return continueTo(addHouse); - } + 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 - _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 - }); + 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 + + var qaService = services.improveOSM; + + if (qaService) { + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); + } }); - 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); + 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 + + var qaService = services.improveOSM; + + 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 qaService = services.improveOSM; + + if (qaService) { + d.newStatus = 'INVALID'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); }); + } + }); + } // NOTE: Don't change method name until UI v3 is merged + + + improveOsmEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return improveOsmEditor; + }; + + return utilRebind(improveOsmEditor, dispatch, 'on'); + } + + function uiKeepRightDetails(context) { + var _qaItem; - if (isMostlySquare(points)) { - _houseID = way.id; - return continueTo(chooseCategoryBuilding); - } else { - return continueTo(retryHouse); - } - } else { - return chapter.restart(); - } - }); + 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 - function continueTo(nextStep) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); + var detail = _t.html("QA.keepRight.errorTypes.".concat(itemType, ".description"), replacements); + + if (detail === unknown) { + detail = _t.html("QA.keepRight.errorTypes.".concat(parentIssueType, ".description"), replacements); } - } - function retryHouse() { - var onClick = function onClick() { - continueTo(addHouse); - }; + return detail; + } - 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 - }); + function keepRightDetails(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 continueTo(nextStep) { - context.map().on('move.intro drawn.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 chooseCategoryBuilding() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } + 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 - 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().centerZoomEase(_qaItem.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 && !isObjectLink) { + 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(relatedEntities); + context.map().pan([0, 0]); // trigger a redraw } - function choosePresetHouse() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } + keepRightDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightDetails; + }; - var ids = context.selectedIDs(); + return keepRightDetails; + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { - context.enter(modeSelect(context, [_houseID])); - } // disallow scrolling + function uiKeepRightHeader() { + var _qaItem; + 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 - 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.. + var title = _t.html("QA.keepRight.errorTypes.".concat(itemType, ".title"), replacements); - context.on('enter.intro', function (mode) { - if (!_houseID || !context.hasEntity(_houseID)) { - return continueTo(addHouse); - } + if (title === unknown) { + title = _t.html("QA.keepRight.errorTypes.".concat(parentIssueType, ".title"), replacements); + } - var ids = context.selectedIDs(); + return title; + } - if (mode.id !== 'select' || !ids.length || ids[0] !== _houseID) { - return continueTo(chooseCategoryBuilding); - } + function keepRightHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - - 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(); - } + 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; + }); + 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 closeEditorHouse() { - if (!_houseID || !context.hasEntity(_houseID)) { - return addHouse(); - } + keepRightHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightHeader; + }; - var ids = context.selectedIDs(); + return keepRightHeader; + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _houseID) { - context.enter(modeSelect(context, [_houseID])); - } + function uiViewOnKeepRight() { + 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 viewOnKeepRight(selection) { + var url; - function continueTo(nextStep) { - context.on('exit.intro', null); - nextStep(); + if (services.keepRight && _qaItem instanceof QAItem) { + url = services.keepRight.issueURL(_qaItem); } + + var link = selection.selectAll('.view-on-keepRight').data(url ? [url] : []); // exit + + link.exit().remove(); // enter + + 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')); } - function rightClickHouse() { - if (!_houseID) return chapter.restart(); - context.enter(modeBrowse(context)); - context.history().reset('hasHouse'); - var zoom = context.map().zoom(); + viewOnKeepRight.what = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return viewOnKeepRight; + }; - if (zoom < 20) { - zoom = 20; - } + return viewOnKeepRight; + } - 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); - }); + function uiKeepRightEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiKeepRightDetails(context); + var qaHeader = uiKeepRightHeader(); - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } + 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 clickSquare() { - if (!_houseID) return chapter.restart(); - var entity = context.hasEntity(_houseID); - if (!entity) return continueTo(rightClickHouse); - var node = selectMenuItem(context, 'orthogonalize').node(); + function keepRightSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - if (!node) { - return continueTo(rightClickHouse); - } + 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 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(); + saveSection.exit().remove(); // enter - if (!wasChanged && !node) { - return continueTo(rightClickHouse); - } + 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 - 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. + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); - timeout(function () { - if (context.history().undoAnnotation() === _t('operations.orthogonalize.annotation.feature', { - n: 1 - })) { - continueTo(doneSquare); - } else { - continueTo(retryClickSquare); - } - }, 500); // after transitioned actions - }); + function changeInput() { + var input = select(this); + var val = input.property('value').trim(); - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + if (val === _qaItem.comment) { + val = undefined; + } // store the unsaved comment with the issue itself - function retryClickSquare() { - context.enter(modeBrowse(context)); - revealHouse(house, helpHtml('intro.buildings.retry_square'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(rightClickHouse); - } - }); - function continueTo(nextStep) { - nextStep(); - } - } + _qaItem = _qaItem.update({ + newComment: val + }); + var qaService = services.keepRight; - 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) { + qaService.replaceItem(_qaItem); // update keepright cache } - }); - function continueTo(nextStep) { - nextStep(); + saveSection.call(qaSaveButtons); } } - function addTank() { - context.enter(modeBrowse(context)); - context.history().reset('doneSquare'); - _tankID = null; - var msec = transitionTime(tank, context.map().center()); + function qaSaveButtons(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - if (msec) { - reveal(null, null, { - duration: 0 - }); - } + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_qaItem] : [], function (d) { + return d.status + d.id; + }); // exit - 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); + buttonSection.exit().remove(); // enter - function continueTo(nextStep) { - context.on('enter.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 startTank() { - if (context.mode().id !== 'add-area') { - return continueTo(addTank); - } + 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 - _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 + var qaService = services.keepRight; + + if (qaService) { + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); }); - }); - context.on('enter.intro', function (mode) { - if (mode.id !== 'draw-area') return chapter.restart(); - continueTo(continueTank); - }); - }, 550); // after easing + } + }); + 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('enter.intro', null); - nextStep(); - } - } + var qaService = services.keepRight; - function continueTank() { - if (context.mode().id !== 'draw-area') { - return continueTo(addTank); - } + if (qaService) { + d.newStatus = 'ignore_t'; // ignore temporarily (item fixed) - _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 - }); + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); + } }); - 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); + 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 + + var qaService = services.keepRight; + + if (qaService) { + d.newStatus = 'ignore'; // ignore permanently (false positive) + + 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) { - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - nextStep(); - } - } - function searchPresetTank() { - if (!_tankID || !context.hasEntity(_tankID)) { - return addTank(); - } + keepRightEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return keepRightEditor; + }; - var ids = context.selectedIDs(); + return utilRebind(keepRightEditor, dispatch, 'on'); + } - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { - context.enter(modeSelect(context, [_tankID])); - } // disallow scrolling + function uiOsmoseDetails(context) { + var _qaItem; + function issueString(d, type) { + if (!d) return ''; // Issue strings are cached from Osmose API - 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.. + var s = services.osmose.getStrings(d.itemType); + return type in s ? s[type] : ''; + } - context.on('enter.intro', function (mode) { - if (!_tankID || !context.hasEntity(_tankID)) { - return continueTo(addTank); - } + 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 - var ids = context.selectedIDs(); + 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) - 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.. - context.container().select('.inspector-wrap .panewrap').style('right', '-100%'); // disallow scrolling + 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.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); - } - }); + if (issueString(_qaItem, 'fix')) { + var _div = detailsEnter.append('div').attr('class', 'qa-details-subsection'); - function checkPresetSearch() { - var first = context.container().select('.preset-list-item:first-child'); + _div.append('h4').html(_t.html('QA.osmose.fix_title')); - 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); - }); - } - } + _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) - 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(); - } - } - function closeEditorTank() { - if (!_tankID || !context.hasEntity(_tankID)) { - return addTank(); - } + if (issueString(_qaItem, 'trap')) { + var _div2 = detailsEnter.append('div').attr('class', 'qa-details-subsection'); - var ids = context.selectedIDs(); + _div2.append('h4').html(_t.html('QA.osmose.trap_title')); - if (context.mode().id !== 'select' || !ids.length || ids[0] !== _tankID) { - context.enter(modeSelect(context, [_tankID])); - } + _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 - 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); - function continueTo(nextStep) { - context.on('exit.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 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); + 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 - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + 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 clickCircle() { - if (!_tankID) return chapter.restart(); - var entity = context.hasEntity(_tankID); - if (!entity) return continueTo(rightClickTank); - var node = selectMenuItem(context, 'circularize').node(); - if (!node) { - return continueTo(rightClickTank); - } + 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 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(); + 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 (!wasChanged && !node) { - return continueTo(rightClickTank); - } + if (!osmlayer.enabled()) { + osmlayer.enabled(true); + } - reveal('.edit-menu', helpHtml('intro.buildings.circle_tank'), { - 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. + context.map().centerZoom(d.loc, 20); - timeout(function () { - if (context.history().undoAnnotation() === _t('operations.circularize.annotation.feature', { - n: 1 - })) { - continueTo(play); - } else { - continueTo(retryClickCircle); - } - }, 500); // after transitioned actions - }); + 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) - function continueTo(nextStep) { - context.on('enter.intro', null); - context.map().on('move.intro', null); - context.history().on('change.intro', null); - nextStep(); - } - } + if (entity) { + var name = utilDisplayName(entity); // try to use common name - function retryClickCircle() { - context.enter(modeBrowse(context)); - revealTank(tank, helpHtml('intro.buildings.retry_circle'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - continueTo(rightClickTank); - } - }); + if (!name) { + var preset = _mainPresetIndex.match(entity, context.graph()); + name = preset && !preset.isFallback() && preset.name(); // fallback to preset name + } - function continueTo(nextStep) { - nextStep(); - } - } + if (name) { + this.innerText = name; + } + } + }); // Don't hide entities related to this issue - #5880 - 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'); - } + context.features().forceVisible(d.elems); + context.map().pan([0, 0]); // trigger a redraw + })["catch"](function (err) { + console.log(err); // eslint-disable-line no-console }); } - chapter.enter = function () { - addHouse(); - }; - - 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); - }; - - chapter.restart = function () { - chapter.exit(); - chapter.enter(); + osmoseDetails.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseDetails; }; - return utilRebind(chapter, dispatch$1, 'on'); + return osmoseDetails; } - function uiIntroStartEditing(context, reveal) { - var dispatch$1 = dispatch('done', 'startEditing'); - var modalSelection = select(null); - var chapter = { - title: 'intro.startediting.title' - }; + function uiOsmoseHeader() { + var _qaItem; - function showHelp() { - reveal('.map-control.help-control', helpHtml('intro.startediting.help'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - shortcuts(); - } - }); - } + function issueTitle(d) { + var unknown = _t('inspector.unknown'); + if (!d) return unknown; // Issue titles supplied by Osmose - function shortcuts() { - reveal('.map-control.help-control', helpHtml('intro.startediting.shortcuts'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - showSave(); - } - }); + var s = services.osmose.getStrings(d.itemType); + return 'title' in s ? s.title : unknown; } - function showSave() { - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts - - reveal('.top-toolbar button.save', helpHtml('intro.startediting.save'), { - buttonText: _t.html('intro.ok'), - buttonCallback: function buttonCallback() { - showStart(); - } + function osmoseHeader(selection) { + var header = selection.selectAll('.qa-header').data(_qaItem ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); }); - } - - function showStart() { - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + 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; - 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(); + if (!picon) { + return ''; + } else { + var isMaki = /^maki-/.test(picon); + return "#".concat(picon).concat(isMaki ? '-11' : ''); + } }); - 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'); + headerEnter.append('div').attr('class', 'qa-header-label').html(issueTitle); } - chapter.enter = function () { - showHelp(); - }; - - chapter.exit = function () { - modalSelection.remove(); - context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + osmoseHeader.issue = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseHeader; }; - return utilRebind(chapter, dispatch$1, 'on'); + return osmoseHeader; } - 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 = {}; + function uiViewOnOsmose() { + var _qaItem; - var _currChapter; + function viewOnOsmose(selection) { + var url; - 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])); - } - } + if (services.osmose && _qaItem instanceof QAItem) { + url = services.osmose.itemURL(_qaItem); + } - selection.call(startIntro); - })["catch"](function () { - /* ignore */ - }); + var link = selection.selectAll('.view-on-osmose').data(url ? [url] : []); // exit + + link.exit().remove(); // enter + + 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 startIntro(selection) { - context.enter(modeBrowse(context)); // Save current map state + viewOnOsmose.what = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return viewOnOsmose; + }; - 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)`) + return viewOnOsmose; + } - context.ui().sidebar.expand(); - context.container().selectAll('button.sidebar-toggle').classed('disabled', true); // Block saving + function uiOsmoseEditor(context) { + var dispatch = dispatch$8('change'); + var qaDetails = uiOsmoseDetails(context); + var qaHeader = uiOsmoseHeader(); - context.inIntro(true); // Load semi-real data used in intro + var _qaItem; - if (osm) { - osm.toggle(false).reset(); - } + 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)); + } - context.history().reset(); - context.history().merge(Object.values(coreGraph().load(_introGraph).entities)); - context.history().checkpoint('initial'); // Setup imagery + function osmoseSaveSection(selection) { + var isSelected = _qaItem && _qaItem.id === context.selectedErrorID(); - var imagery = context.background().findSource(INTRO_IMAGERY); + var isShown = _qaItem && isSelected; + var saveSection = selection.selectAll('.qa-save').data(isShown ? [_qaItem] : [], function (d) { + return "".concat(d.id, "-").concat(d.status || 0); + }); // exit - if (imagery) { - context.background().baseLayerSource(imagery); - } else { - context.background().bing(); - } + saveSection.exit().remove(); // enter - overlays.forEach(function (d) { - return context.background().toggleOverlayLayer(d); - }); // Setup data layers (only OSM) + var saveSectionEnter = saveSection.enter().append('div').attr('class', 'qa-save save-section cf'); // update - 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.. + saveSection = saveSectionEnter.merge(saveSection).call(qaSaveButtons); + } - corePreferences('walkthrough_started', 'yes'); // Restore previous walkthrough progress.. + 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 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); + 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 - if (i < chapterFlow.length - 1) { - var next = chapterFlow[i + 1]; - context.container().select("button.chapter-".concat(next)).classed('next', true); - } // Store walkthrough progress.. + 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; - progress.push(chapter); - corePreferences('walkthrough_progress', utilArrayUniq(progress).join(';')); - }); - return s; + if (qaService) { + d.newStatus = 'done'; + qaService.postUpdate(d, function (err, item) { + return dispatch.call('change', item); + }); + } }); - chapters[chapters.length - 1].on('startEditing', function () { - // Store walkthrough progress.. - progress.push('startEditing'); - corePreferences('walkthrough_progress', utilArrayUniq(progress).join(';')); // Store if walkthrough is completed.. + 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 - var incomplete = utilArrayDifference(chapterFlow, progress); + var qaService = services.osmose; - if (!incomplete.length) { - corePreferences('walkthrough_completed', 'yes'); + 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 - curtain.remove(); - navwrap.remove(); - context.container().selectAll('.main-map .layer-background').style('opacity', opacity); - context.container().selectAll('button.sidebar-toggle').classed('disabled', false); - if (osm) { - osm.toggle(true).reset().caches(caches); - } + osmoseEditor.error = function (val) { + if (!arguments.length) return _qaItem; + _qaItem = val; + return osmoseEditor; + }; - context.history().reset().merge(Object.values(baseEntities)); - context.background().baseLayerSource(background); - overlays.forEach(function (d) { - return context.background().toggleOverlayLayer(d); - }); + return utilRebind(osmoseEditor, dispatch, 'on'); + } - if (history) { - context.history().fromJSON(history, false); + function uiNoteComments() { + var _note; + + function noteComments(selection) { + if (_note.isNew()) return; // don't draw .comments-container + + 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; + + if (osm && d.user) { + selection = selection.append('a').attr('class', 'comment-author-link').attr('href', osm.userURL(d.user)).attr('target', '_blank'); } - context.map().centerZoom(center, zoom); - window.location.replace(hash); - context.inIntro(false); + selection.html(function (d) { + return d.user || _t.html('note.anonymous'); + }); }); - 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); + metadataEnter.append('div').attr('class', 'comment-date').html(function (d) { + return _t('note.status.' + d.action, { + when: localeDateString(d.date) + }); }); - buttons.append('span').attr('class', 'status').call(svgIcon(_mainLocalizer.textDirection() === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward', 'inline')); - enterChapter(null, chapters[0]); - - function enterChapter(d3_event, newChapter) { - if (_currChapter) { - _currChapter.exit(); - } + 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); + } - context.enter(modeBrowse(context)); - _currChapter = newChapter; + 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 - _currChapter.enter(); + _note.comments.forEach(function (d) { + if (d.uid) uids[d.uid] = true; + }); - buttons.classed('next', false).classed('active', function (d) { - return d.title === _currChapter.title; + 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); }); - } + }); } - return intro; - } + function localeDateString(s) { + if (!s) return null; + var options = { + day: 'numeric', + month: 'short', + year: 'numeric' + }; + s = s.replace(/-/g, '/'); // fix browser-specific Date() issues - 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' + var d = new Date(s); + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(_mainLocalizer.localeCode(), options); + } + + noteComments.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteComments; }; - function update(selection) { - var shownItems = []; - var liveIssues = context.validator().getIssues({ - what: corePreferences('validate-what') || 'edited', - where: corePreferences('validate-where') || 'all' - }); + return noteComments; + } - if (liveIssues.length) { - warningsItem.count = liveIssues.length; - shownItems.push(warningsItem); - } + function uiNoteHeader() { + var _note; - if (corePreferences('validate-what') === 'all') { - var resolvedIssues = context.validator().getResolvedIssues(); + 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; - if (resolvedIssues.length) { - resolvedItem.count = resolvedIssues.length; - shownItems.push(resolvedItem); + if (d.id < 0) { + statusIcon = '#iD-icon-plus'; + } else if (d.status === 'open') { + statusIcon = '#iD-icon-close'; + } else { + statusIcon = '#iD-icon-apply'; } - } - var chips = selection.selectAll('.chip').data(shownItems, function (d) { - return d.id; + iconEnter.append('div').attr('class', 'note-icon-annotation').call(svgIcon(statusIcon, 'icon-annotation')); }); - 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 + headerEnter.append('div').attr('class', 'note-header-label').html(function (d) { + if (_note.isNew()) { + return _t('note.new'); + } - 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(); + return _t('note.note') + ' ' + d.id + ' ' + (d.status === 'closed' ? _t('note.closed') : ''); }); } - return function (selection) { - update(selection); - context.validator().on('validated.infobox', function () { - update(selection); - }); + noteHeader.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteHeader; }; - } - - 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 _dMini; // dimensions of minimap - - - var _cMini; // center pixel of minimap + return noteHeader; + } + function uiNoteReport() { + var _note; - var _tStart; // transform at start of gesture + function noteReport(selection) { + var url; + if (services.osm && _note instanceof osmNote && !_note.isNew()) { + url = services.osm.noteReportURL(_note); + } - var _tCurr; // transform at most recent event + var link = selection.selectAll('.note-report').data(url ? [url] : []); // exit + link.exit().remove(); // enter - var _timeoutID; + 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 zoomStarted() { - if (_skipEvents) return; - _tStart = _tCurr = projection.transform(); - _gesture = null; - } + noteReport.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteReport; + }; - 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; + return noteReport; + } - if (!isZooming && !isPanning) { - return; // no change - } // lock in either zooming or panning, don't allow both in minimap. + function uiNoteEditor(context) { + var dispatch = dispatch$8('change'); + var noteComments = uiNoteComments(); + var noteHeader = uiNoteHeader(); // var formFields = uiFormFields(context); + var _note; - if (!_gesture) { - _gesture = isZooming ? 'zoom' : 'pan'; - } + var _newNote; // var _fieldsArr; - 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; - } + 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 - 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(); - } + var osm = services.osm; - function zoomEnded() { - if (_skipEvents) return; - if (_gesture !== 'pan') return; - updateProjection(); - _gesture = null; - context.map().center(projection.invert(_cMini)); // recenter main map.. + if (osm) { + osm.on('change.note-save', function () { + selection.call(noteEditor); + }); } + } - 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(); + function noteSaveSection(selection) { + var isSelected = _note && _note.id === context.selectedNoteID(); - if (_isTransformed) { - utilSetTransform(tiles, 0, 0); - utilSetTransform(viewport, 0, 0); - _isTransformed = false; - } + var noteSave = selection.selectAll('.note-save').data(isSelected ? [_note] : [], function (d) { + return d.status + d.id; + }); // exit - zoom.scaleExtent([geoZoomToScale(0.5), geoZoomToScale(zMain - 3)]); - _skipEvents = true; - wrap.call(zoom.transform, _tCurr); - _skipEvents = false; - } + noteSave.exit().remove(); // enter - function redraw() { - clearTimeout(_timeoutID); - if (_isHidden) return; - updateProjection(); - var zMini = geoScaleToZoom(projection.scale()); // setup tile container + 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); + // } - tiles = wrap.selectAll('.map-in-map-tiles').data([0]); - tiles = tiles.enter().append('div').attr('class', 'map-in-map-tiles').merge(tiles); // redraw background + noteSaveEnter.append('h4').attr('class', '.note-save-header').html(function () { + return _note.isNew() ? _t('note.newDescription') : _t('note.newComment'); + }); + 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); - 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 + if (!commentTextarea.empty() && _newNote) { + // autofocus the comment field for new notes + commentTextarea.node().focus(); + } // update - 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)); - } - } + noteSave = noteSaveEnter.merge(noteSave).call(userDetails).call(noteSaveButtons); // fast submit if user presses cmd+enter - 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 + 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 - 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; - }); - } + window.setTimeout(function () { + if (_note.isNew()) { + noteSave.selectAll('.save-button').node().focus(); + clickSave(); + } else { + noteSave.selectAll('.comment-button').node().focus(); + clickComment(); + } + }, 10); } - function queueRedraw() { - clearTimeout(_timeoutID); - _timeoutID = setTimeout(function () { - redraw(); - }, 750); - } + function changeInput() { + var input = select(this); + var val = input.property('value').trim() || undefined; // store the unsaved comment with the note itself - 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); + _note = _note.update({ + newComment: val + }); + var osm = services.osm; - 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 (osm) { + osm.replaceNote(_note); // update note cache } + + noteSave.call(noteSaveButtons); } + } - 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.. + 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 - _dMini = [200, 150]; //utilGetDimensions(wrap); + 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')); - _cMini = geoVecScale(_dMini, 0.5); - context.map().on('drawn.map-in-map', function (drawn) { - if (drawn.full === true) { - redraw(); + 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('note.upload_explanation_with_user', { + user: userLink.html() + })); }); - 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 noteSaveButtons(selection) { + var osm = services.osm; + var hasAuth = osm && osm.authenticated(); - function disableTooHigh() { - var canEdit = context.map().zoom() >= context.minEditableZoom(); - div.style('display', canEdit ? 'none' : 'block'); - } + var isSelected = _note && _note.id === context.selectedNoteID(); - context.map().on('move.notice', debounce(disableTooHigh, 500)); - disableTooHigh(); - }; - } + var buttonSection = selection.selectAll('.buttons').data(isSelected ? [_note] : [], function (d) { + return d.status + d.id; + }); // exit - function uiPhotoviewer(context) { - var dispatch$1 = dispatch('resize'); + buttonSection.exit().remove(); // enter - var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; + var buttonEnter = buttonSection.enter().append('div').attr('class', 'buttons'); - function photoviewer(selection) { - selection.append('button').attr('class', 'thumb-hide').on('click', function () { - if (services.streetside) { - services.streetside.hideViewer(context); - } + 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 - if (services.mapillary) { - services.mapillary.hideViewer(context); - } - if (services.openstreetcam) { - services.openstreetcam.hideViewer(context); - } - }).append('div').call(svgIcon('#iD-icon-close')); + 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); - function preventDefault(d3_event) { - d3_event.preventDefault(); + function isSaveDisabled(d) { + return hasAuth && d.status === 'open' && d.newComment ? null : true; } + } - 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 - })); - - 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; - - function startResize(d3_event) { - if (pointerId !== (d3_event.pointerId || 'mouse')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); - var mapSize = context.map().dimensions(); + function clickCancel(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - if (resizeOnX) { - var maxWidth = mapSize[0]; - var newWidth = clamp(startWidth + d3_event.clientX - startX, minWidth, maxWidth); - target.style('width', newWidth + 'px'); - } + var osm = services.osm; - if (resizeOnY) { - var maxHeight = mapSize[1] - 90; // preserve space at top/bottom of map + if (osm) { + osm.removeNote(d); + } - var newHeight = clamp(startHeight + startY - d3_event.clientY, minHeight, maxHeight); - target.style('height', newHeight + 'px'); - } + context.enter(modeBrowse(context)); + dispatch.call('change'); + } - dispatch.call(eventName, target, utilGetDimensions(target, true)); - } + function clickSave(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - function clamp(num, min, max) { - return Math.max(min, Math.min(num, max)); - } + var osm = services.osm; - function stopResize(d3_event) { - if (pointerId !== (d3_event.pointerId || 'mouse')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); // remove all the listeners we added + if (osm) { + osm.postNoteCreate(d, function (err, note) { + dispatch.call('change', note); + }); + } + } - select(window).on('.' + eventName, null); - } + function clickStatus(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - 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); + var osm = services.osm; - if (_pointerPrefix === 'pointer') { - select(window).on('pointercancel.' + eventName, stopResize, false); - } - }; + if (osm) { + var setStatus = d.status === 'open' ? 'closed' : 'open'; + osm.postNoteUpdate(d, setStatus, function (err, note) { + dispatch.call('change', note); + }); } } - 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 clickComment(d3_event, d) { + this.blur(); // avoid keeping focus on the button - #4641 - var photoDimensions = utilGetDimensions(photoviewer, true); + var osm = services.osm; - 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 (osm) { + osm.postNoteUpdate(d, d.status, function (err, note) { + dispatch.call('change', note); + }); } - }; + } - return utilRebind(photoviewer, dispatch$1, 'on'); - } + noteEditor.note = function (val) { + if (!arguments.length) return _note; + _note = val; + return noteEditor; + }; - 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')); - 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(); - }); - 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(); + noteEditor.newNote = function (val) { + if (!arguments.length) return _newNote; + _newNote = val; + return noteEditor; }; + + return utilRebind(noteEditor, dispatch, 'on'); } - function uiScale(context) { - var projection = context.projection, - isImperial = !_mainLocalizer.usesMetric(), - maxLength = 180, - tickHeight = 8; + 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); - 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; + var _current; - 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 + var _wasData = false; + var _wasNote = false; + var _wasQaItem = false; // use pointer events on supported platforms; fallback to mouse events + var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse'; - for (i = 0; i < buckets.length; i++) { - val = buckets[i]; + function sidebar(selection) { + var container = context.container(); + var minWidth = 240; + var sidebarWidth; + var containerWidth; + var dragOffset; // Set the initial width constraints - if (dist >= val) { - scale.dist = Math.floor(dist / val) * val; - break; - } else { - scale.dist = +dist.toFixed(2); - } - } + 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; - 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; - } + 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 - 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); - } + 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 - return function (selection) { - function switchUnits() { - isImperial = !isImperial; - selection.call(update); + 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); } - 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); - }); - }; - } + 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); - function uiShortcuts(context) { - var detected = utilDetect(); - var _activeTab = 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 + '%'); - var _modalSelection; + if (isCollapsed) { + context.ui().onResize([-sidebarWidth * scaleX, 0]); + } else { + context.ui().onResize([-dx * scaleX, 0]); + } + } + } - var _selection = select(null); + 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); + } - var _dataShortcuts; + var featureListWrap = selection.append('div').attr('class', 'feature-list-pane').call(uiFeatureList(context)); + var inspectorWrap = selection.append('div').attr('class', 'inspector-hidden inspector-wrap'); - function shortcutsModal(_modalSelection) { - _modalSelection.select('.modal').classed('modal-shortcuts', true); + var hoverModeSelect = function hoverModeSelect(targets) { + context.container().selectAll('.feature-list-item button').classed('hover', false); - var content = _modalSelection.select('.content'); + 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; + }); - 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 */ - }); - } + if (!elements.empty()) { + elements.classed('hover', true); + } + } + }; - 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(); + sidebar.hoverModeSelect = throttle(hoverModeSelect, 200); - var i = _dataShortcuts.indexOf(d); + function hover(targets) { + var datum = targets && targets.length && targets[0]; - _activeTab = i; - render(selection); - }); - tabsEnter.append('span').html(function (d) { - return _t.html(d.text); - }); // Update + 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; - 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; - }); - sectionRows.append('td'); - sectionRows.append('td').attr('class', 'shortcut-section').append('h3').html(function (d) { - return _t.html(d.text); - }); - var shortcutRows = rowsEnter.filter(function (d) { - return d.shortcuts; - }); - var shortcutKeys = shortcutRows.append('td').attr('class', 'shortcut-keys'); - var modifierKeys = shortcutKeys.filter(function (d) { - return d.modifiers; - }); - 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('+'); - }); - shortcutKeys.selectAll('kbd.shortcut').data(function (d) { - var arr = d.shortcuts; + if (osm) { + datum = osm.getNote(datum.id); // marker may contain stale data - get latest + } - 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 + 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]; + if (errService) { + // marker may contain stale data - get latest + datum = errService.getError(datum.id); + } // Currently only three possible services - 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/); - 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; + var errEditor; + + 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); - 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); + 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(); } - }); - 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); - }); - }); - shortcutRows.append('td').attr('class', 'shortcut-desc').html(function (d) { - return d.text ? _t.html(d.text) : "\xA0"; - }); // Update - - wrapper.selectAll('.shortcut-tab').style('display', function (d, i) { - return i === _activeTab ? 'flex' : 'none'; - }); - } + } - return function (selection, show) { - _selection = selection; + sidebar.hover = throttle(hover, 200); - if (show) { - _modalSelection = uiModal(selection); + sidebar.intersects = function (extent) { + var rect = selection.node().getBoundingClientRect(); + return extent.intersects([context.projection.invert([0, rect.height]), context.projection.invert([rect.width, 0])]); + }; - _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(); + sidebar.select = function (ids, newFeature) { + sidebar.hide(); - _modalSelection = null; - } - } else { - _modalSelection = uiModal(_selection); + if (ids && ids.length) { + var entity = ids.length === 1 && context.entity(ids[0]); - _modalSelection.call(shortcutsModal); + if (entity && newFeature && selection.classed('collapsed')) { + // uncollapse the sidebar + var extent = entity.extent(context.graph()); + sidebar.expand(sidebar.intersects(extent)); } - }); - } - }; - } - var pair_1 = pair; + 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 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 + inspector.state('select').entityIDs(ids).newFeature(newFeature); + inspectorWrap.call(inspector); + } else { + inspector.state('hide'); + } + }; - var matched = m[0]; // extract dimension.. m[1] = leading, m[5] = trailing + sidebar.showPresetList = function () { + inspector.showList(); + }; - var dim; + 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); + }; - if (m[1] && m[5]) { - // if matched both.. - dim = m[1]; // keep leading + sidebar.hide = function () { + featureListWrap.classed('inspector-hidden', false); + inspectorWrap.classed('inspector-hidden', true); + if (_current) _current.remove(); + _current = null; + }; - matched = matched.slice(0, -1); // remove trailing dimension from match - } else { - dim = m[1] || m[5]; - } // if unrecognized dimension + sidebar.expand = function (moveMap) { + if (selection.classed('collapsed')) { + sidebar.toggle(moveMap); + } + }; + sidebar.collapse = function (moveMap) { + if (!selection.classed('collapsed')) { + sidebar.toggle(moveMap); + } + }; - if (dim && dims.indexOf(dim) === -1) return null; // extract DMS + 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 - 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) - }; - } + selection.style('width', sidebarWidth + 'px'); + var startMargin, endMargin, lastMargin; - 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; + if (isCollapsing) { + startMargin = lastMargin = 0; + endMargin = -sidebarWidth; + } else { + startMargin = lastMargin = -sidebarWidth; + endMargin = 0; + } - if (one.dim) { - return swapdim(one.val, two.val, one.dim); - } else { - return [one.val, two.val]; - } - } + if (!isCollapsing) { + // unhide the sidebar's content before it transitions onscreen + selection.classed('collapsed', isCollapsing); + } - function swapdim(a, b, dim) { - if (dim === 'N' || dim === 'S') return [a, b]; - if (dim === 'W' || dim === 'E') return [b, a]; - } + 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 % - function uiFeatureList(context) { - var _geocodeResults; - 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); + if (!isCollapsing) { + var containerWidth = container.node().getBoundingClientRect().width; + var widthPct = sidebarWidth / containerWidth * 100; + selection.style(xMarginProperty, null).style('width', widthPct + '%'); + } + }); + }; // toggle the sidebar collapse when double-clicking the resizer - function focusSearch(d3_event) { - var mode = context.mode() && context.mode().id; - if (mode !== 'browse') return; + + resizer.on('dblclick', function (d3_event) { d3_event.preventDefault(); - search.node().focus(); - } - function keydown(d3_event) { - if (d3_event.keyCode === 27) { - // escape - search.node().blur(); + if (d3_event.sourceEvent) { + d3_event.sourceEvent.preventDefault(); } - } - function keypress(d3_event) { - var q = search.property('value'), - items = list.selectAll('.feature-list-item'); + sidebar.toggle(); + }); // ensure hover sidebar is closed when zooming out beyond editable zoom - if (d3_event.keyCode === 13 && // â© Return - q.length && items.size()) { - click(items.datum()); + context.map().on('crossEditableZoom.sidebar', function (within) { + if (!within && !selection.select('.inspector-hover').empty()) { + hover([]); } - } + }); + } - function inputevent() { - _geocodeResults = undefined; - drawList(); - } + sidebar.showPresetList = function () {}; - function clearSearch() { - search.property('value', ''); - drawList(); - } + sidebar.hover = function () {}; - function mapDrawn(e) { - if (e.full) { - drawList(); - } - } + sidebar.hover.cancel = function () {}; - 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*)$/); + sidebar.intersects = function () {}; - 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 + sidebar.select = function () {}; + sidebar.show = function () {}; - var idMatch = !locationMatch && q.match(/(?:^|\W)(node|way|relation|[nwr])\W?0*([1-9]\d*)(?:\W|$)/i); + sidebar.hide = function () {}; - 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 - }); - } + sidebar.expand = function () {}; - var allEntities = graph.entities; - var localResults = []; + sidebar.collapse = function () {}; - 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; - } + sidebar.toggle = function () {}; - localResults = localResults.sort(function byDistance(a, b) { - return a.distance - b.distance; - }); - result = result.concat(localResults); + return sidebar; + } - (_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 - }; + function uiSourceSwitch(context) { + var keys; - if (d.osm_type === 'way') { - // for ways, add some fake closed nodes - attrs.nodes = ['a', 'a']; // so that geometry area is possible - } + 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 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])]) - }); - } - }); + context.flush(); // remove stored data - 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 - }); - } + 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) + } - return result; - } + var sourceSwitch = function sourceSwitch(selection) { + selection.append('a').attr('href', '#').html(_t.html('source_switch.live')).attr('class', 'live chip').on('click', click); + }; - 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')); + sourceSwitch.keys = function (_) { + if (!arguments.length) return keys; + keys = _; + return sourceSwitch; + }; - 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')); - } + return sourceSwitch; + } - 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; + 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 (osm) { + osm.on('loading.spinner', function () { + img.transition().style('opacity', 1); + }).on('loaded.spinner', function () { + img.transition().style('opacity', 0); }); - enter.style('opacity', 0).transition().style('opacity', 1); - items.order(); - items.exit().remove(); } + }; + } - function mouseover(d3_event, d) { - if (d.id === -1) return; - utilHighlightEntities([d.id], true, context); + 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 updateMessage = ''; + var sawPrivacyVersion = corePreferences('sawPrivacyVersion'); + var showSplash = !corePreferences('sawSplash'); + + if (sawPrivacyVersion !== context.privacyVersion) { + updateMessage = _t('splash.privacy_update'); + showSplash = true; } - function mouseout(d3_event, d) { - if (d.id === -1) return; - utilHighlightEntities([d.id], false, context); - } + if (!showSplash) return; + corePreferences('sawSplash', true); + corePreferences('sawPrivacyVersion', context.privacyVersion); // fetch intro graph data now, while user is looking at the splash screen + + _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 walkthrough = buttonWrap.append('button').attr('class', 'walkthrough').on('click', function () { + context.container().call(uiIntro(context)); + modalSelection.close(); + }); + 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 uiStatus(context) { + var osm = context.connection(); + return function (selection) { + if (!osm) return; + + function update(err, apiStatus) { + selection.html(''); + + 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 - function click(d3_event, d) { - d3_event.preventDefault(); - 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); + 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')); } - } - function geocoderSearch() { - services.geocoder.search(search.property('value'), function (err, resp) { - _geocodeResults = resp || []; - drawList(); - }); + selection.attr('class', 'api-status ' + (err ? 'error' : apiStatus)); } - } - - return featureList; - } - var getOwnPropertyDescriptor$4 = objectGetOwnPropertyDescriptor.f; + osm.on('apiStatusChange.uiStatus', update); + context.history().on('storage_error', function () { + selection.html(_t.html('osm_api_status.message.local_storage_full')); + selection.attr('class', 'api-status error'); + }); // reload the status periodically regardless of other factors + window.setInterval(function () { + osm.reloadApiStatus(); + }, 90000); // load the initial status in case no OSM data was loaded yet + osm.reloadApiStatus(); + }; + } + 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; + mode.enter = function () { + context.install(behavior); + }; + mode.exit = function () { + context.uninstall(behavior); + }; - var nativeStartsWith = ''.startsWith; - var min$9 = Math.min; + mode.selectedIDs = function () { + return [wayID]; + }; - 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; - }(); + mode.activeID = function () { + return behavior && behavior.activeID() || []; + }; - // `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 mode; + } - function uiSectionEntityIssues(context) { - var _entityIDs = []; - var _issues = []; + 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'); - var _activeIssueID; + function actionClose(wayId) { + return function (graph) { + return graph.replace(graph.entity(wayId).close()); + }; + } - 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 + function start(loc) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - }).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); - }); + var way = osmWay({ + tags: defaultTags + }); + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id), actionClose(way.id)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); + } - function reloadIssues() { - _issues = context.validator().getSharedEntityIssues(_entityIDs, { - includeDisabledRules: true + 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), actionClose(way.id), actionAddMidpoint({ + loc: loc, + edge: edge + }, node)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); } - function makeActiveIssue(issueID) { - _activeIssueID = issueID; - section.selection().selectAll('.issue-container').classed('active', function (d) { - return d.id === _activeIssueID; + function startFromNode(node) { + var startGraph = context.graph(); + var way = osmWay({ + tags: defaultTags }); + context.perform(actionAddEntity(way), actionAddVertex(way.id, node.id), actionClose(way.id)); + context.enter(modeDrawArea(context, way.id, startGraph, mode.button)); } - 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 + mode.enter = function () { + context.install(behavior); + }; - containers.exit().remove(); // Enter + mode.exit = function () { + context.uninstall(behavior); + }; - 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 + return mode; + } - var extent = d.extent(context.graph()); + 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 (extent) { - var setZoom = Math.max(context.map().zoom(), 19); - context.map().unobscuredCenterZoomEase(extent.center(), setZoom); - } + function start(loc) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - textEnter.each(function (d) { - var iconName = '#iD-icon-' + (d.severity === 'warning' ? 'alert' : 'error'); - select(this).call(svgIcon(iconName, 'issue-icon')); + var way = osmWay({ + tags: defaultTags }); - 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 - - var container = select(this.parentNode.parentNode.parentNode); - var info = container.selectAll('.issue-info'); - var isExpanded = info.classed('expanded'); + context.perform(actionAddEntity(node), actionAddEntity(way), actionAddVertex(way.id, node.id)); + context.enter(modeDrawLine(context, way.id, startGraph, mode.button)); + } - if (isExpanded) { - info.transition().duration(200).style('max-height', '0px').style('opacity', '0').on('end', function () { - info.classed('expanded', false); - }); - } else { - info.classed('expanded', true).transition().duration(200).style('max-height', '200px').style('opacity', '1').on('end', function () { - info.style('max-height', null); - }); - } + function startFromWay(loc, edge) { + var startGraph = context.graph(); + var node = osmNode({ + loc: loc }); - 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')); - } - }); // Update - - containers = containers.merge(containersEnter).classed('active', function (d) { - return d.id === _activeIssueID; + var way = osmWay({ + tags: defaultTags }); - containers.selectAll('.issue-message').html(function (d) { - return d.message(context); - }); // fixes + 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)); + } - 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; + function startFromNode(node) { + var startGraph = context.graph(); + var way = osmWay({ + tags: defaultTags }); - 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) + context.perform(actionAddEntity(way), actionAddVertex(way.id, node.id)); + context.enter(modeDrawLine(context, way.id, startGraph, mode.button)); + } - if (d.issue.dateLastRanFix && new Date() - d.issue.dateLastRanFix < 1000) return; - d.issue.dateLastRanFix = new Date(); // remove hover-highlighting + mode.enter = function () { + context.install(behavior); + }; - utilHighlightEntities(d.issue.entityIds.concat(d.entityIds), false, context); - new Promise(function (resolve, reject) { - d.onClick(context, resolve, reject); + mode.exit = function () { + context.uninstall(behavior); + }; - 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'; + return mode; + } - if (iconName.startsWith('maki')) { - iconName += '-15'; - } + 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'); - select(this).call(svgIcon('#' + iconName, 'fix-icon')); - }); - buttons.append('span').attr('class', 'fix-message').html(function (d) { - return d.title; + function add(loc) { + var node = osmNode({ + loc: loc, + tags: defaultTags }); - 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; - } + context.perform(actionAddEntity(node), _t('operations.add.annotation.point')); + enterSelectMode(node); + } - return null; + function addWay(loc, edge) { + var node = osmNode({ + tags: defaultTags }); + context.perform(actionAddMidpoint({ + loc: loc, + edge: edge + }, node), _t('operations.add.annotation.vertex')); + enterSelectMode(node); } - section.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; + function enterSelectMode(node) { + context.enter(modeSelect(context, [node.id]).newFeature(true)); + } - if (!_entityIDs || !val || !utilArrayIdentical(_entityIDs, val)) { - _entityIDs = val; - _activeIssueID = null; - reloadIssues(); + function addNode(node) { + if (Object.keys(defaultTags).length === 0) { + enterSelectMode(node); + return; } - return section; + var tags = Object.assign({}, node.tags); // shallow copy + + for (var key in defaultTags) { + tags[key] = defaultTags[key]; + } + + context.perform(actionChangeTags(node.id, tags), _t('operations.add.annotation.point')); + enterSelectMode(node); + } + + function cancel() { + context.enter(modeBrowse(context)); + } + + mode.enter = function () { + context.install(behavior); }; - return section; + mode.exit = function () { + context.uninstall(behavior); + }; + + return mode; } - function uiPresetIcon() { - var _preset; + function modeSelectNote(context, selectedNoteID) { + var mode = { + id: 'select-note', + button: 'browse' + }; - var _geometry; + var _keybinding = utilKeybinding('select-note'); - var _sizeClass = 'medium'; + var _noteEditor = uiNoteEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - function isSmall() { - return _sizeClass === 'small'; - } + var note = checkSelectedID(); + if (!note) return; + context.ui().sidebar.show(_noteEditor.note(note)); + }); - function presetIcon(selection) { - selection.each(render); - } + var _behaviors = [behaviorBreathe(), behaviorHover(context), behaviorSelect(context), behaviorLasso(context), modeDragNode(context).behavior, modeDragNote(context).behavior]; + var _newFeature = false; - 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 checkSelectedID() { + if (!services.osm) return; + var note = services.osm.getNote(selectedNoteID); - 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); + if (!note) { + context.enter(modeBrowse(context)); + } + + return note; + } // class the note as selected, or return to browse mode if the note is gone + + + function selectNote(d3_event, drawn) { + if (!checkSelectedID()) return; + var selection = context.surface().selectAll('.layer-notes .note-' + selectedNoteID); + + 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 (drawn && source && (source.type === 'pointermove' || source.type === 'mousemove' || source.type === 'touchmove')) { + context.enter(modeBrowse(context)); + } + } else { + selection.classed('selected', true); + context.selectedNoteID(selectedNoteID); + } } - 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 esc() { + if (context.container().select('.combobox').size()) return; + context.enter(modeBrowse(context)); } - 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); + mode.zoomToSelected = function () { + if (!services.osm) return; + var note = services.osm.getNote(selectedNoteID); + + if (note) { + context.map().centerZoomEase(note.loc, 20); + } + }; + + mode.newFeature = function (val) { + if (!arguments.length) return _newFeature; + _newFeature = val; + return mode; + }; + + mode.enter = function () { + var note = checkSelectedID(); + if (!note) return; + + _behaviors.forEach(context.install); + + _keybinding.on(_t('inspector.zoom_to.key'), mode.zoomToSelected).on('â', esc, true); + + 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 + + sidebar.expand(sidebar.intersects(note.extent())); + context.map().on('drawn.select', selectNote); + }; + + mode.exit = function () { + _behaviors.forEach(context.uninstall); + + 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); + }; + + return mode; + } + + 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 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 (!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); - }); - } + context.map().pan([0, 0]); + context.selectedNoteID(note.id).enter(modeSelectNote(context, note.id).newFeature(true)); + } - fill = fillEnter.merge(fill); - fill.selectAll('path.stroke').attr('class', "area stroke ".concat(tagClasses)); - fill.selectAll('path.fill').attr('class', "area fill ".concat(tagClasses)); + function cancel() { + context.enter(modeBrowse(context)); } - 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 + mode.enter = function () { + context.install(behavior); + }; - 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)); - }); - [[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); - }); - line = lineEnter.merge(line); - line.selectAll('path.stroke').attr('class', "line stroke ".concat(tagClasses)); - line.selectAll('path.casing').attr('class', "line casing ".concat(tagClasses)); - } + mode.exit = function () { + context.uninstall(behavior); + }; - 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 + return mode; + } - 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); - }); - route = routeEnter.merge(route); + var JXON = new function () { + var sValueProp = 'keyValue', + sAttributesProp = 'keyAttributes', + sAttrPref = '@', - if (drawRoute) { - var routeType = p.tags.type === 'waterway' ? 'waterway' : p.tags.route; - var segmentPresetIDs = routeSegments[routeType]; + /* you can customize these values */ + aCache = [], + rIsNull = /^\s*$/, + rIsBool = /^(?:true|false)$/i; - 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)); - } + function parseText(sValue) { + if (rIsNull.test(sValue)) { + return null; } - } // 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. + if (rIsBool.test(sValue)) { + return sValue.toLowerCase() === 'true'; + } - 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'] + if (isFinite(sValue)) { + return parseFloat(sValue); + } + + if (isFinite(Date.parse(sValue))) { + return new Date(sValue); + } + + return sValue; + } + + function EmptyTree() {} + + EmptyTree.prototype.toString = function () { + return 'null'; }; - function render() { - var p = _preset.apply(this, arguments); + EmptyTree.prototype.valueOf = function () { + return null; + }; - var geom = _geometry ? _geometry.apply(this, arguments) : null; + function objectify(vValue) { + return vValue === null ? new EmptyTree() : vValue instanceof Object ? vValue : new vValue.constructor(vValue); + } - if (geom === 'relation' && p.tags && (p.tags.type === 'route' && p.tags.route && routeSegments[p.tags.route] || p.tags.type === 'waterway')) { - geom = 'route'; - } + 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; - 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) : {}; + if (bChildren) { + for (var oNode, nItem = 0; nItem < oParentNode.childNodes.length; nItem++) { + oNode = oParentNode.childNodes.item(nItem); - for (var k in tags) { - if (tags[k] === '*') { - tags[k] = 'yes'; + 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 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); - } + var nLevelEnd = aCache.length, + vBuiltVal = parseText(sCollectedTxt); - presetIcon.preset = function (val) { - if (!arguments.length) return _preset; - _preset = utilFunctor(val); - return presetIcon; - }; + if (!bHighVerb && (bChildren || bAttributes)) { + vResult = nVerb === 0 ? objectify(vBuiltVal) : {}; + } - presetIcon.geometry = function (val) { - if (!arguments.length) return _geometry; - _geometry = utilFunctor(val); - return presetIcon; - }; + for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) { + sProp = aCache[nElId].nodeName.toLowerCase(); + vContent = createObjTree(aCache[nElId], nVerb, bFreeze, bNesteAttr); - presetIcon.sizeClass = function (val) { - if (!arguments.length) return _sizeClass; - _sizeClass = val; - return presetIcon; - }; + if (vResult.hasOwnProperty(sProp)) { + if (vResult[sProp].constructor !== Array) { + vResult[sProp] = [vResult[sProp]]; + } - return presetIcon; - } + vResult[sProp].push(vContent); + } else { + vResult[sProp] = vContent; + nLength++; + } + } - function uiSectionFeatureType(context) { - var dispatch$1 = dispatch('choose'); - var _entityIDs = []; - var _presets = []; + if (bAttributes) { + var nAttrLen = oParentNode.attributes.length, + sAPrefix = bNesteAttr ? '' : sAttrPref, + oAttrParent = bNesteAttr ? {} : vResult; - var _tagReference; + for (var oAttrib, nAttrib = 0; nAttrib < nAttrLen; nLength++, nAttrib++) { + oAttrib = oParentNode.attributes.item(nAttrib); + oAttrParent[sAPrefix + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim()); + } - var section = uiSection('feature-type', context).label(_t.html('inspector.feature_type')).disclosureContent(renderDisclosureContent); + if (bNesteAttr) { + if (bFreeze) { + Object.freeze(oAttrParent); + } - 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 + vResult[sAttributesProp] = oAttrParent; + nLength -= nAttrLen - 1; + } + } - 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); + if (nVerb === 3 || (nVerb === 2 || nVerb === 1 && nLength > 0) && sCollectedTxt) { + vResult[sValueProp] = vBuiltVal; + } else if (!bHighVerb && nLength === 0 && sCollectedTxt) { + vResult = vBuiltVal; } - 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; - }); + if (bFreeze && (bHighVerb || nLength > 0)) { + Object.freeze(vResult); + } + + aCache.length = nLevelStart; + return vResult; } - section.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return section; - }; + function loadObjTree(oXMLDoc, oParentEl, oParentObj) { + var vValue, oChild; - section.presets = function (val) { - if (!arguments.length) return _presets; // don't reload the same preset + 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())); + } - if (!utilArrayIdentical(val, _presets)) { - _presets = val; + for (var sName in oParentObj) { + vValue = oParentObj[sName]; - if (_presets.length === 1) { - _tagReference = uiTagReference(_presets[0].reference()).showing(false); + 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())); + } + + oParentEl.appendChild(oChild); } } + } - return section; + 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; + + return createObjTree(oXMLParent, _nVerb, bFreeze || false, arguments.length > 3 ? bNesteAttributes : _nVerb === 3); }; - function entityGeometries() { - var counts = {}; + this.unbuild = function (oObjTree) { + var oNewDoc = document.implementation.createDocument('', '', null); + loadObjTree(oNewDoc, oNewDoc, oObjTree); + return oNewDoc; + }; - for (var i in _entityIDs) { - var geometry = context.graph().geometry(_entityIDs[i]); - if (!counts[geometry]) counts[geometry] = 0; - counts[geometry] += 1; - } + 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)); - return Object.keys(counts).sort(function (geom1, geom2) { - return counts[geom2] - counts[geom1]; - }); - } + function uiConflicts(context) { + var dispatch = dispatch$8('cancel', 'save'); + var keybinding = utilKeybinding('conflicts'); - return utilRebind(section, dispatch$1, 'on'); - } + var _origChanges; - // It borrows some code from uiHelp + var _conflictList; - function uiFieldHelp(context, fieldName) { - var fieldHelp = {}; + var _shownConflictIndex; - var _inspector = select(null); + function keybindingOn() { + select(document).call(keybinding.on('â', cancel, true)); + } - var _wrap = select(null); + function keybindingOff() { + select(document).call(keybinding.unbind); + } - var _body = select(null); + function tryAgain() { + keybindingOff(); + dispatch.call('save'); + } - 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']]] - }; - 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 + function cancel() { + keybindingOff(); + dispatch.call('cancel'); + } - 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? + 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 hhh = depth ? Array(depth + 1).join('#') + ' ' : ''; // if so, prepend with some ##'s + var detected = utilDetect(); + var changeset = new osmChangeset(); + delete changeset.id; // Export without changeset_id - return all + hhh + _t.html(subkey, replacements) + '\n\n'; - }, ''); - return { - key: helpkey, - title: _t.html(helpkey + '.title'), - html: marked_1(text.trim()) - }; - }); + 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'); - function show() { - updatePosition(); + 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); + }); + } - _body.classed('hide', false).style('opacity', '0').transition().duration(200).style('opacity', '1'); + 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 hide() { - _body.classed('hide', true).transition().duration(200).style('opacity', '0').on('end', function () { - _body.classed('hide', true); + 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.. + + 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); + }); + 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); }); } - function clickHelp(index) { - var d = docs[index]; - var tkeys = fieldHelpKeys[fieldName][index][1]; + function addChoices(selection) { + var choices = selection.append('ul').attr('class', 'layer-list').selectAll('li').data(function (d) { + return d.choices || []; + }); // enter - _body.selectAll('.field-help-nav-item').classed('active', function (d, i) { - return i === index; + 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); }); + labelEnter.append('span').html(function (d) { + return d.text; + }); // update - var content = _body.selectAll('.field-help-content').html(d.html); // class the paragraphs so we can find and style them - - - content.selectAll('p').attr('class', function (d, i) { - return tkeys[i]; - }); // insert special content for certain help sections + choicesEnter.merge(choices).each(function (d) { + var ul = this.parentNode; - 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')); - } + if (ul.__data__.chosen === d.id) { + choose(null, ul, d); + } + }); } - fieldHelp.button = function (selection) { - if (_body.empty()) return; - var button = selection.selectAll('.field-help-button').data([0]); // enter/update + 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); + } - 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(); + function zoomToEntity(id, extent) { + context.surface().selectAll('.hover').classed('hover', false); + var entity = context.graph().hasEntity(id); - if (_body.classed('hide')) { - show(); + if (entity) { + if (extent) { + context.map().trimmedExtent(extent); } else { - hide(); + context.map().zoomToEase(entity); } - }); - }; - function updatePosition() { - var wrap = _wrap.node(); + 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 inspector = _inspector.node(); - var wRect = wrap.getBoundingClientRect(); - var iRect = inspector.getBoundingClientRect(); + conflicts.conflictList = function (_) { + if (!arguments.length) return _conflictList; + _conflictList = _; + return conflicts; + }; - _body.style('top', wRect.top + inspector.scrollTop - iRect.top + 'px'); - } + conflicts.origChanges = function (_) { + if (!arguments.length) return _origChanges; + _origChanges = _; + return conflicts; + }; - 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 + conflicts.shownEntityIds = function () { + if (_conflictList && typeof _shownConflictIndex === 'number') { + return [_conflictList[_shownConflictIndex].id]; + } - _inspector = context.container().select('.sidebar .entity-editor-pane .inspector-body'); - if (_inspector.empty()) return; - _body = _inspector.selectAll('.field-help-body').data([0]); + return []; + }; - var enter = _body.enter().append('div').attr('class', 'field-help-body hide'); // initially hidden + return utilRebind(conflicts, dispatch, 'on'); + } + 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 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); + 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; }; - return fieldHelp; + return modalSelection; } - function uiFieldCheck(field, context) { - var dispatch$1 = dispatch('change'); - var options = field.strings && field.strings.options; - var values = []; - var texts = []; + function uiChangesetEditor(context) { + var dispatch = dispatch$8('change'); + var formFields = uiFormFields(context); + var commentCombo = uiCombobox(context, 'comment').caseSensitive(true); + + var _fieldsArr; var _tags; - var input = select(null); - var text = select(null); - var label = select(null); - var reverser = select(null); + var _changesetID; - var _impliedYes; + function changesetEditor(selection) { + render(selection); + } - var _entityIDs = []; + function render(selection) { + var initial = false; - var _value; + 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 + })]; - if (options) { - for (var k in options) { - values.push(k === 'undefined' ? undefined : k); - texts.push(field.t.html('options.' + k, { - 'default': options[k] - })); + _fieldsArr.forEach(function (field) { + field.on('change', function (t, onInput) { + dispatch.call('change', field, undefined, t, onInput); + }); + }); } - } 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')); - } - } // Checks tags to see whether an undefined value is "Assumed to be Yes" + _fieldsArr.forEach(function (field) { + field.tags(_tags); + }); + selection.call(formFields.fieldsArr(_fieldsArr)); - 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 (initial) { + var commentField = selection.select('.form-field-comment textarea'); + var commentNode = commentField.node(); - if (field.id === 'oneway') { - var entity = context.entity(_entityIDs[0]); + 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 - 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; - } + + 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 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 hasGoogle = _tags.comment.match(/google/i); + + 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 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'); + changesetEditor.tags = function (_) { + if (!arguments.length) return _tags; + _tags = _; // Don't reset _fieldsArr here. - if (field.type === 'onewayCheck') { - enter.append('button').attr('class', 'reverser' + (reverserHidden() ? ' hide' : '')).append('span').attr('class', 'reverser-span'); - } + return changesetEditor; + }; - label = label.merge(enter); - input = label.selectAll('input'); - text = label.selectAll('span.value'); - input.on('click', function (d3_event) { - d3_event.stopPropagation(); - var t = {}; + changesetEditor.changesetID = function (_) { + if (!arguments.length) return _changesetID; + if (_changesetID === _) return changesetEditor; + _changesetID = _; + _fieldsArr = null; + return changesetEditor; + }; - 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) + return utilRebind(changesetEditor, dispatch, 'on'); + } + 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); - if (t[field.key] === 'reversible' || t[field.key] === 'alternating') { - t[field.key] = values[0]; + 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 = ''; + + if (name !== '') { + string += ':'; } - dispatch$1.call('change', this, t); + return string += ' ' + name; }); + items = itemsEnter.merge(items); // Download changeset link - 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); - } + var changeset = new osmChangeset().update({ + id: undefined + }); + var changes = history.changes(actionDiscardTags(history.difference(), _discardTags)); + delete changeset.id; // Export without chnageset_id - return graph; - }, _t('operations.reverse.annotation.line', { - n: 1 - })); // must manually revalidate since no 'change' event was called + 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'); - context.validator().validate(); - select(this).call(reverserSetText); + 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); }); } - }; - - check.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return check; - }; - check.tags = function (tags) { - _tags = tags; - - function isChecked(val) { - return val !== 'no' && val !== '' && val !== undefined && val !== null; - } + linkEnter.call(svgIcon('#iD-icon-load', 'inline')).append('span').html(_t.html('commit.download_changes')); - function textFor(val) { - if (val === '') val = undefined; - var index = values.indexOf(val); - return index !== -1 ? texts[index] : '"' + val + '"'; + function mouseover(d) { + if (d.entity) { + context.surface().selectAll(utilEntityOrMemberSelector([d.entity.id], context.graph())).classed('hover', true); + } } - checkImpliedYes(); - var isMixed = Array.isArray(tags[field.key]); - _value = !isMixed && tags[field.key] && tags[field.key].toLowerCase(); - - if (field.type === 'onewayCheck' && (_value === '1' || _value === '-1')) { - _value = 'yes'; + function mouseout() { + context.surface().selectAll('.hover').classed('hover', false); } - 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 (field.type === 'onewayCheck') { - reverser.classed('hide', reverserHidden()).call(reverserSetText); + 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); + } } - }; - - check.focus = function () { - input.node().focus(); - }; + } - return utilRebind(check, dispatch$1, 'on'); + return section; } - function uiFieldCombo(field, context) { - var dispatch$1 = dispatch('change'); - - var _isMulti = field.type === 'multiCombo' || field.type === 'manyCombo'; - - var _isNetwork = field.type === 'networkCombo'; - - var _isSemi = field.type === 'semiCombo'; - - var _optstrings = field.strings && field.strings.options; - - var _optarray = field.options; - - var _snake_case = field.snake_case || field.snake_case === undefined; - - var _combobox = uiCombobox(context, 'combo-' + field.safeid).caseSensitive(field.caseSensitive).minItems(_isMulti || _isSemi ? 1 : 2); - - var _container = select(null); + function uiCommitWarnings(context) { + function commitWarnings(selection) { + var issuesBySeverity = context.validator().getIssuesBySeverity({ + what: 'edited', + where: 'all', + includeDisabledRules: true + }); - var _inputWrap = select(null); + for (var severity in issuesBySeverity) { + var issues = issuesBySeverity[severity]; - var _input = select(null); + if (severity !== 'error') { + // exclude 'fixme' and similar - #8603 + issues = issues.filter(function (issue) { + return issue.type !== 'help_request'; + }); + } - var _comboData = []; - var _multiData = []; - var _entityIDs = []; + 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.key; + }); + 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); + }); + } + } - var _tags; + return commitWarnings; + } - var _countryCode; + 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 _staticPlaceholder; // initialize deprecated tags array + var hashtagRegex = /(#[^\u2000-\u206F\u2E00-\u2E7F\s\\'!"#$%()*,.\/:;<=>?@\[\]^`{|}~]+)/g; + function uiCommit(context) { + var dispatch = dispatch$8('cancel'); + var _userDetails; - var _dataDeprecated = []; - _mainFileFetcher.get('deprecated').then(function (d) { - _dataDeprecated = d; - })["catch"](function () { - /* ignore */ - }); // ensure multiCombo field.key ends with a ':' + var _selection; - if (_isMulti && field.key && /[^:]$/.test(field.key)) { - field.key += ':'; - } + 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); - function snake(s) { - return s.replace(/\s+/g, '_'); - } + function commit(selection) { + _selection = selection; // Initialize changeset if one does not exist yet. - function unsnake(s) { - return s.replace(/_+/g, ' '); + if (!context.changeset) initChangeset(); + loadDerivedChangesetTags(); + selection.call(render); } - 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) - + 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 - function tagValue(dval) { - dval = clean(dval || ''); + if (commentDate > currDate || currDate - commentDate > cutoff) { + corePreferences('comment', null); + corePreferences('hashtags', null); + corePreferences('source', null); + } // load in explicitly-set values, if any - if (_optstrings) { - var found = _comboData.find(function (o) { - return o.key && clean(o.value) === dval; - }); - if (found) { - return found.key; - } + if (context.defaultChangesetComment()) { + corePreferences('comment', context.defaultChangesetComment()); + corePreferences('commentDate', Date.now()); } - if (field.type === 'typeCombo' && !dval) { - return 'yes'; + if (context.defaultChangesetSource()) { + corePreferences('source', context.defaultChangesetSource()); + corePreferences('commentDate', Date.now()); } - 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) - + if (context.defaultChangesetHashtags()) { + corePreferences('hashtags', context.defaultChangesetHashtags()); + corePreferences('commentDate', Date.now()); + } - function displayValue(tval) { - tval = tval || ''; + 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 - if (_optstrings) { - var found = _comboData.find(function (o) { - return o.key === tval && o.value; - }); + findHashtags(tags, true); + var hashtags = corePreferences('hashtags'); - if (found) { - return found.value; - } + if (hashtags) { + tags.hashtags = hashtags; } - if (field.type === 'typeCombo' && tval.toLowerCase() === 'yes') { - return ''; - } + var source = corePreferences('source'); - 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}] - // + if (source) { + tags.source = source; + } + var photoOverlaysUsed = context.history().photoOverlaysUsed(); - function objectDifference(a, b) { - return a.filter(function (d1) { - return !b.some(function (d2) { - return !d2.isMixed && d1.value === d2.value; - }); - }); - } + if (photoOverlaysUsed.length) { + var sources = (tags.source || '').split(';'); // include this tag for any photo layer - 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); - } - } + if (sources.indexOf('streetlevel imagery') === -1) { + sources.push('streetlevel imagery'); + } // add the photo overlays used during editing as sources - function setStaticValues(callback) { - if (!(_optstrings || _optarray)) return; - 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 - }; + photoOverlaysUsed.forEach(function (photoOverlay) { + if (sources.indexOf(photoOverlay) === -1) { + sources.push(photoOverlay); + } }); + tags.source = context.cleanTagValue(sources.join(';')); } - _combobox.data(objectDifference(_comboData, _multiData)); + context.changeset = new osmChangeset({ + tags: tags + }); + } // Calculates read-only metadata tags based on the user's editing session and applies + // them to the changeset. - 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; + function loadDerivedChangesetTags() { + var osm = context.connection(); + if (!osm) return; + var tags = Object.assign({}, context.changeset.tags); // shallow copy + // assign tags for imagery used - if (hasCountryPrefix) { - query = _countryCode + ':'; - } + var imageryUsed = context.cleanTagValue(context.history().imageryUsed().join(';')); + tags.imagery_used = imageryUsed || 'None'; // assign tags for closed issues and notes - var params = { - debounce: q !== '', - key: field.key, - query: query - }; + var osmClosed = osm.getClosedIDs(); + var itemType; - if (_entityIDs.length) { - params.geometry = context.graph().geometry(_entityIDs[0]); + if (osmClosed.length) { + tags['closed:note'] = context.cleanTagValue(osmClosed.join(';')); } - 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 !d.count || d.count > 10; - }); - var deprecatedValues = osmEntity.deprecatedTagValuesByKey(_dataDeprecated)[field.key]; + if (services.keepRight) { + var krClosed = services.keepRight.getClosedIDs(); - if (deprecatedValues) { - // don't suggest deprecated tag values - data = data.filter(function (d) { - return deprecatedValues.indexOf(d.value) === -1; - }); + if (krClosed.length) { + tags['closed:keepright'] = context.cleanTagValue(krClosed.join(';')); } + } - if (hasCountryPrefix) { - data = data.filter(function (d) { - return d.value.toLowerCase().indexOf(_countryCode + ':') === 0; - }); - } // hide the caret if there are no suggestions + if (services.improveOSM) { + var iOsmClosed = services.improveOSM.getClosedCounts(); + for (itemType in iOsmClosed) { + tags['closed:improveosm:' + itemType] = context.cleanTagValue(iOsmClosed[itemType].toString()); + } + } - _container.classed('empty-combobox', data.length === 0); + if (services.osmose) { + var osmoseClosed = services.osmose.getClosedCounts(); - _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); - }); - } + for (itemType in osmoseClosed) { + tags['closed:osmose:' + itemType] = context.cleanTagValue(osmoseClosed[itemType].toString()); + } + } // remove existing issue counts - 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(', '); - } - if (!/(â¦|\.\.\.)$/.test(_staticPlaceholder)) { - _staticPlaceholder += 'â¦'; + for (var key in tags) { + if (key.match(/(^warnings:)|(^resolved:)/)) { + delete tags[key]; + } } - var ph; + function addIssueCounts(issues, prefix) { + var issuesByType = utilArrayGroupBy(issues, 'type'); - if (!_isMulti && !_isSemi && _tags && Array.isArray(_tags[field.key])) { - ph = _t('inspector.multiple_values'); - } else { - ph = _staticPlaceholder; - } + for (var issueType in issuesByType) { + var issuesOfType = issuesByType[issueType]; - _container.selectAll('input').attr('placeholder', ph); - } + if (issuesOfType[0].subtype) { + var issuesBySubtype = utilArrayGroupBy(issuesOfType, 'subtype'); - function change() { - var t = {}; - var val; + 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 - if (_isMulti || _isSemi) { - val = tagValue(utilGetSetValue(_input).replace(/,/g, ';')) || ''; - _container.classed('active', false); + 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 - utilGetSetValue(_input, ''); - var vals = val.split(';').filter(Boolean); - if (!vals.length) return; + addIssueCounts(warnings, 'warnings'); // add counts of issues resolved by the user's edits - if (_isMulti) { - utilArrayUniq(vals).forEach(function (v) { - var key = (field.key || '') + v; + var resolvedIssues = context.validator().getResolvedIssues(); + addIssueCounts(resolvedIssues, 'resolved'); + context.changeset = context.changeset.update({ + tags: tags + }); + } - 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; - } + 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 - key = context.cleanTagKey(key); - field.keys.push(key); - t[key] = 'yes'; - }); - } else if (_isSemi) { - var arr = _multiData.map(function (d) { - return d.key; - }); + 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 - arr = arr.concat(vals); - t[field.key] = context.cleanTagValue(utilArrayUniq(arr).filter(Boolean).join(';')); - } + body.call(commitWarnings); // Upload Explanation - window.setTimeout(function () { - _input.node().focus(); - }, 10); - } else { - var rawValue = utilGetSetValue(_input); // don't override multiple values with blank string + 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]); - if (!rawValue && Array.isArray(_tags[field.key])) return; - val = context.cleanTagValue(tagValue(rawValue)); - t[field.key] = val || undefined; + if (prose.enter().size()) { + // first time, make sure to update user details in prose + _userDetails = null; } - dispatch$1.call('change', this, t); - } - - function removeMultikey(d3_event, d) { - d3_event.preventDefault(); - d3_event.stopPropagation(); - var t = {}; + 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 - 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); + osm.userDetails(function (err, user) { + if (err) return; + if (_userDetails === user) return; // no change - arr = utilArrayUniq(arr); - t[field.key] = arr.length ? arr.join(';') : undefined; - } + _userDetails = user; + var userLink = select(document.createElement('div')); - dispatch$1.call('change', this, t); - } + if (user.image_url) { + userLink.append('img').attr('src', user.image_url).attr('class', 'icon pre-text user-icon'); + } - 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); + 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 - 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 + var requestReview = saveSection.selectAll('.request-review').data([0]); // Enter - if (field.key === 'destination') { - listClass += ' full-line-chips'; - } + 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); - _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]); + if (!labelEnter.empty()) { + labelEnter.call(uiTooltip().title(_t.html('commit.request_review_info')).placement('top')); } - _input = _input.enter().append('input').attr('type', 'text').attr('id', field.domId).call(utilNoAuto).call(initCombo, selection).merge(_input); - - if (_isNetwork) { - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); - _countryCode = countryCode && countryCode.toLowerCase(); - } + labelEnter.append('input').attr('type', 'checkbox').attr('id', requestReviewDomId); + labelEnter.append('span').html(_t.html('commit.request_review')); // Update - _input.on('change', change).on('blur', change); + requestReview = requestReview.merge(requestReviewEnter); + var requestReviewInput = requestReview.selectAll('input').property('checked', isReviewRequested(context.changeset.tags)).on('change', toggleRequestReview); // Buttons - _input.on('keydown.field', function (d3_event) { - switch (d3_event.keyCode) { - case 13: - // â© Return - _input.node().blur(); // blurring also enters the value + var buttonSection = saveSection.selectAll('.buttons').data([0]); // enter + 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 - d3_event.stopPropagation(); - break; - } + 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 (_isMulti || _isSemi) { - _combobox.on('accept', function () { - _input.node().blur(); - - _input.node().focus(); - }); - - _input.on('focus', function () { - _container.classed('active', true); - }); - } - } + for (var key in context.changeset.tags) { + // remove any empty keys before upload + if (!key) delete context.changeset.tags[key]; + } - combo.tags = function (tags) { - _tags = tags; + context.uploader().save(context.changeset); + } + }); // remove any existing tooltip - if (_isMulti || _isSemi) { - _multiData = []; - var maxLength; + uiTooltip().destroyAny(buttonSection.selectAll('.save-button')); - 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; + if (uploadBlockerTooltipText) { + buttonSection.selectAll('.save-button').call(uiTooltip().title(uploadBlockerTooltipText).placement('top')); + } // Raw Tag Editor - _multiData.push({ - key: k, - value: displayValue(suffix), - isMixed: Array.isArray(v) - }); - } - 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 + 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 - maxLength = context.maxCharsForTagKey() - utilUnicodeCharsCount(field.key); - } else { - maxLength = context.maxCharsForTagKey(); - } - } else if (_isSemi) { - var allValues = []; - var commonValues; + changesSection.call(commitChanges.render); - if (Array.isArray(tags[field.key])) { - tags[field.key].forEach(function (tagVal) { - var thisVals = utilArrayUniq((tagVal || '').split(';')).filter(Boolean); - allValues = allValues.concat(thisVals); + 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); + } + } - 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 getUploadBlockerMessage() { + var errors = context.validator().getIssuesBySeverity({ + what: 'edited', + where: 'all' + }).error; - _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 + 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; - maxLength = context.maxCharsForTagValue() - currLength; + if (!hasChangesetComment) { + return _t('commit.comment_needed_message'); + } + } - 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 + return null; + } + function changeTags(_, changed, onInput) { + if (changed.hasOwnProperty('comment')) { + if (changed.comment === undefined) { + changed.comment = ''; + } - maxLength = Math.max(0, maxLength); - var allowDragAndDrop = _isSemi // only semiCombo values are ordered - && !Array.isArray(tags[field.key]); // Exclude existing multikeys from combo options.. + if (!onInput) { + corePreferences('comment', changed.comment); + corePreferences('commentDate', Date.now()); + } + } - var available = objectDifference(_comboData, _multiData); + 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` - _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 + updateChangeset(changed, onInput); - var hideAdd = _optstrings && !available.length || maxLength <= 0; + if (_selection) { + _selection.call(render); + } + } - _container.selectAll('.chiplist .input-wrap').style('display', hideAdd ? 'none' : null); // Render chips + function findHashtags(tags, commentOnly) { + var detectedHashtags = commentHashtags(); + if (detectedHashtags.length) { + // always remove stored hashtags if there are hashtags in the comment - #4304 + corePreferences('hashtags', null); + } - var chips = _container.selectAll('.chip').data(_multiData); + if (!detectedHashtags.length || !commentOnly) { + detectedHashtags = detectedHashtags.concat(hashtagHashtags()); + } - 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; - }); + var allLowerCase = new Set(); + return detectedHashtags.filter(function (hashtag) { + // Compare tags as lowercase strings, but keep original case tags + var lowerCase = hashtag.toLowerCase(); - if (allowDragAndDrop) { - registerDragAndDrop(chips); + if (!allLowerCase.has(lowerCase)) { + allLowerCase.add(lowerCase); + return true; } - chips.select('span').html(function (d) { - return d.value; - }); - 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; + return false; + }); // Extract hashtags from `comment` - if (field.key === 'destination') { - // meaning tags are full width - _container.selectAll('.chip').style('transform', function (d2, index2) { - var node = select(this).node(); + 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 (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; - } - 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; - } + function hashtagHashtags() { + var matches = (tags.hashtags || '').split(/[,;\s]+/).map(function (s) { + if (s[0] !== '#') { + s = '#' + s; + } // prepend '#' - return 'translateY(100%)'; - } - return null; - }); - } else { - _container.selectAll('.chip').each(function (d2, index2) { - var node = select(this).node(); // check the cursor is in the bounding box + var matched = s.match(hashtagRegex); + return matched && matched[0]; + }).filter(Boolean); // exclude falsy - 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(); + return matches || []; + } + } - if (index === index2) { - return 'translate(' + x + 'px, ' + y + 'px)'; - } // only translate tags in the same row + function isReviewRequested(tags) { + var rr = tags.review_requested; + if (rr === undefined) return false; + rr = rr.trim().toLowerCase(); + return !(rr === '' || rr === 'no'); + } + function updateChangeset(changed, onInput) { + var tags = Object.assign({}, context.changeset.tags); // shallow copy - if (node.offsetTop === targetIndexOffsetTop) { - if (index2 < index && index2 >= targetIndex) { - return 'translateX(' + draggedTagWidth + 'px)'; - } else if (index2 > index && index2 <= targetIndex) { - return 'translateX(-' + draggedTagWidth + 'px)'; - } - } + Object.keys(changed).forEach(function (k) { + var v = changed[k]; + k = context.cleanTagKey(k); + if (readOnlyTags.indexOf(k) !== -1) return; - return null; - }); + if (v === undefined) { + delete tags[k]; + } else if (onInput) { + tags[k] = v; + } else { + tags[k] = context.cleanTagValue(v); } - }).on('end', function () { - if (!select(this).classed('dragging')) { - return; + }); + + 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 (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 - var index = selection.nodes().indexOf(this); - select(this).classed('dragging', false); - _container.selectAll('.chip').style('transform', null); + if (_userDetails && _userDetails.changesets_count !== undefined) { + var changesetsCount = parseInt(_userDetails.changesets_count, 10) + 1; // #4283 - if (typeof targetIndex === 'number') { - var element = _multiData[index]; + tags.changesets_count = String(changesetsCount); // first 100 edits - new user - _multiData.splice(index, 1); + if (changesetsCount <= 100) { + var s; + s = corePreferences('walkthrough_completed'); - _multiData.splice(targetIndex, 0, element); + if (s) { + tags['ideditor:walkthrough_completed'] = s; + } - var t = {}; + s = corePreferences('walkthrough_progress'); - if (_multiData.length) { - t[field.key] = _multiData.map(function (element) { - return element.key; - }).join(';'); - } else { - t[field.key] = undefined; + if (s) { + tags['ideditor:walkthrough_progress'] = s; } - dispatch$1.call('change', this, t); + s = corePreferences('walkthrough_started'); + + if (s) { + tags['ideditor:walkthrough_started'] = s; + } } + } else { + delete tags.changesets_count; + } - dragOrigin = undefined; - targetIndex = undefined; - })); + if (!fastDeepEqual(context.changeset.tags, tags)) { + context.changeset = context.changeset.update({ + tags: tags + }); + } } - combo.focus = function () { - _input.node().focus(); + commit.reset = function () { + context.changeset = null; }; - combo.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return combo; - }; + return utilRebind(commit, dispatch, 'on'); + } - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + // for punction see https://stackoverflow.com/a/21224179 - return utilRebind(combo, dispatch$1, 'on'); + 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()); } - function uiFieldText(field, context) { - var dispatch$1 = dispatch('change'); - var input = select(null); - var outlinkButton = select(null); - var _entityIDs = []; + // `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 + // } + // - var _tags; + function resolveStrings(item, defaults, localizerFn) { + var itemStrings = Object.assign({}, item.strings); // shallow clone - var _phoneFormats = {}; + var defaultStrings = Object.assign({}, defaults[item.type]); // shallow clone - if (field.type === 'tel') { - _mainFileFetcher.get('phone_formats').then(function (d) { - _phoneFormats = d; - updatePhonePlaceholder(); - })["catch"](function () { - /* ignore */ + var anyToken = new RegExp(/(\{\w+\})/, 'gi'); // Pre-localize the item and default strings + + 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)); }); } - 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()); + var replacements = { + account: item.account, + community: itemStrings.community, + signupUrl: itemStrings.signupUrl, + url: itemStrings.url + }; // Resolve URLs first (which may refer to {account}) - 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()(); - }); - } 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); + if (!replacements.signupUrl) { + replacements.signupUrl = resolve(itemStrings.signupUrl || defaultStrings.signupUrl); + } - if (domainResults.length >= 2 && domainResults[1]) { - var domain = domainResults[1]; - return _t('icons.view_on', { - domain: domain - }); - } + if (!replacements.url) { + replacements.url = resolve(itemStrings.url || defaultStrings.url); + } - return ''; - }).on('click', function (d3_event) { - d3_event.preventDefault(); - var value = validIdentifierValueForLink(); + 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 - if (value) { - var url = field.urlFormat.replace(/{value}/, encodeURIComponent(value)); - window.open(url, '_blank'); - } - }).merge(outlinkButton); - } - } + 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; - function updatePhonePlaceholder() { - if (input.empty() || !Object.keys(_phoneFormats).length) return; - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); + function resolve(s, addLinks) { + if (!s) return undefined; + var result = s; - var format = countryCode && _phoneFormats[countryCode.toLowerCase()]; + for (var key in replacements) { + var token = "{".concat(key, "}"); + var regex = new RegExp(token, 'g'); - if (format) input.attr('placeholder', format); - } + if (regex.test(result)) { + var replacement = replacements[key]; - function validIdentifierValueForLink() { - if (field.type === 'identifier' && field.pattern) { - var value = utilGetSetValue(input).trim().split(';')[0]; - return value && value.match(new RegExp(field.pattern)); - } + if (!replacement) { + throw new Error("Cannot resolve token: ".concat(token)); + } else { + if (addLinks && (key === 'signupUrl' || key === 'url')) { + replacement = linkify(replacement); + } - return null; - } // clamp number to min/max + result = result.replace(regex, replacement); + } + } + } // There shouldn't be any leftover tokens in a resolved string - function clamped(num) { - if (field.minValue !== undefined) { - num = Math.max(num, field.minValue); - } + var leftovers = result.match(anyToken); - if (field.maxValue !== undefined) { - num = Math.min(num, field.maxValue); + 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); + }); } - return num; + return result; } - 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 linkify(url, text) { + if (!url) return undefined; + text = text || url; + return "").concat(text, ""); + } + } - if (!val && Array.isArray(_tags[field.key])) return; + var _oci = null; + function uiSuccess(context) { + var MAXEVENTS = 2; + var dispatch = dispatch$8('cancel'); - 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(';'); - } + var _changeset; - utilGetSetValue(input, val); + var _location; + + ensureOSMCommunityIndex(); // start fetching the data + + 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]); } - t[field.key] = val || undefined; - dispatch$1.call('change', this, t, onInput); - }; - } + var ociResources = Object.values(vals[1].resources); - i.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return i; - }; + 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; + } + }); + } // string-to-date parsing in JavaScript is weird - 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); - if (outlinkButton && !outlinkButton.empty()) { - var disabled = !validIdentifierValueForLink(); - outlinkButton.classed('disabled', disabled); - } - }; + function parseEventDate(when) { + if (!when) return; + var raw = when.trim(); + if (!raw) return; - i.focus = function () { - var node = input.node(); - if (node) node.focus(); - }; + if (!/Z$/.test(raw)) { + // if no trailing 'Z', add one + raw += 'Z'; // this forces date to be parsed as a UTC date + } - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + var parsed = new Date(raw); + return new Date(parsed.toUTCString().substr(0, 25)); // convert to local timezone } - return utilRebind(i, dispatch$1, 'on'); - } + 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.. - function uiFieldAccess(field, context) { - var dispatch$1 = dispatch('change'); - var items = select(null); + ensureOSMCommunityIndex().then(function (oci) { + var loc = context.map().center(); + var validLocations = _mainLocations.locationsAt(loc); // Gather the communities - var _tags; + var communities = []; + oci.resources.forEach(function (resource) { + var area = validLocations[resource.locationSetID]; + if (!area) return; // Resolve strings - 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 localizer = function localizer(stringID) { + return _t.html("community.".concat(stringID)); + }; - 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 + 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 - items = items.merge(enter); - wrap.selectAll('.preset-input-access').on('change', change).on('blur', change); + communities.sort(function (a, b) { + return a.area - b.area || b.order - a.order; + }); + body.call(showCommunityLinks, communities.map(function (c) { + return c.resource; + })); + }); } - function change(d3_event, d) { - var tag = {}; - var value = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string - - if (!value && typeof _tags[d] !== 'string') return; - tag[d] = value || undefined; - dispatch$1.call('change', this, tag); + 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')); } - access.options = function (type) { - var options = ['no', 'permissive', 'private', 'permit', 'destination']; - - if (type !== 'access') { - options.unshift('yes'); - options.push('designated'); + 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.. - if (type === 'bicycle') { - options.push('dismount'); - } + 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 options.map(function (option) { - return { - title: field.t('options.' + option + '.description'), - value: option - }; - }); - }; + 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 - 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' + 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); } - }; - 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'); - } + function showMore(selection) { + var more = selection.selectAll('.community-more').data([0]); + var moreEnter = more.enter().append('div').attr('class', 'community-more'); - if (d === 'access') { - return 'yes'; + if (d.resolved.extendedDescriptionHTML) { + moreEnter.append('div').attr('class', 'community-extended-description').html(d.resolved.extendedDescriptionHTML); } - if (tags.access && typeof tags.access === 'string') { - return tags.access; + 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 + })); } + } - 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); + 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 (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 (d.i18n && d.id) { + name = _t("community.".concat(communityID, ".events.").concat(d.id, ".name"), { + "default": name + }); } - } - return field.placeholder(); - }); + return name; + }); + itemEnter.append('div').attr('class', 'community-event-when').html(function (d) { + var options = { + weekday: 'short', + day: 'numeric', + month: 'short', + year: 'numeric' + }; + + 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 where; + }); + itemEnter.append('div').attr('class', 'community-event-description').html(function (d) { + var description = d.description; + + if (d.i18n && d.id) { + description = _t("community.".concat(communityID, ".events.").concat(d.id, ".description"), { + "default": description + }); + } + + return description; + }); + } + } + + success.changeset = function (val) { + if (!arguments.length) return _changeset; + _changeset = val; + return success; }; - access.focus = function () { - items.selectAll('.preset-input-access').node().focus(); + success.location = function (val) { + if (!arguments.length) return _location; + _location = val; + return success; }; - return utilRebind(access, dispatch$1, 'on'); + return utilRebind(success, dispatch, 'on'); } - function uiFieldAddress(field, context) { - var dispatch$1 = dispatch('change'); + function modeSave(context) { + var mode = { + id: 'save' + }; + var keybinding = utilKeybinding('modeSave'); + var commit = uiCommit(context).on('cancel', cancel); - var _selection = select(null); + var _conflictsUi; // uiConflicts - var _wrap = select(null); - var addrField = _mainPresetIndex.field('address'); // needed for placeholder strings + var _location; - var _entityIDs = []; + var _success; - var _tags; + 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); - var _countryCode; + function cancel() { + context.enter(modeBrowse(context)); + } - var _addressFormats = [{ - format: [['housenumber', 'street'], ['city', 'postcode']] - }]; - _mainFileFetcher.get('address_formats').then(function (d) { - _addressFormats = d; + function showProgress(num, total) { + var modal = context.container().select('.loading-modal .modal-section'); + var progress = modal.selectAll('.progress').data([0]); // enter/update - if (!_selection.empty()) { - _selection.call(address); - } - })["catch"](function () { - /* ignore */ - }); + progress.enter().append('div').attr('class', 'progress').merge(progress).text(_t('save.conflict_progress', { + num: num, + total: total + })); + } - 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; + 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); }); - return utilArrayUniqBy(streets, 'value'); + selection.call(_conflictsUi); + } - function isAddressable(d) { - return d.tags.highway && d.tags.name && d.type === 'way'; - } + 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 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; + 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); }); - return utilArrayUniqBy(cities, 'value'); + 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 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; - } + function showSuccess(changeset) { + commit.reset(); - if (d.tags['addr:city']) return true; - return false; - } + var ui = _success.changeset(changeset).location(_location).on('cancel', function () { + context.ui().sidebar.hide(); + }); + + context.enter(modeBrowse(context).sidebar(ui)); } - 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 keybindingOn() { + select(document).call(keybinding.on('â', cancel, true)); } - function updateForCountryCode() { - if (!_countryCode) return; - var addressFormat; + 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." - for (var i = 0; i < _addressFormats.length; i++) { - var format = _addressFormats[i]; - 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 + 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 + }); + }); + } - break; - } - } + mode.selectedIDs = function () { + return _conflictsUi ? _conflictsUi.shownEntityIds() : []; + }; - 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 - }; + mode.enter = function () { + // Show sidebar + context.ui().sidebar.expand(); - 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 - }; - }); + function done() { + context.ui().sidebar.show(commit); } - var rows = _wrap.selectAll('.addr-row').data(addressFormat.format, function (d) { - return d.toString(); - }); - - 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 + '%'; - }); - - function addDropdown(d) { - if (dropdowns.indexOf(d.id) === -1) return; // not a dropdown + keybindingOn(); + context.container().selectAll('.main-content').classed('active', false).classed('inactive', true); + var osm = context.connection(); - 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)); - })); + if (!osm) { + cancel(); + return; } - _wrap.selectAll('input').on('blur', change()).on('change', change()); + if (osm.authenticated()) { + done(); + } else { + osm.authenticate(function (err) { + if (err) { + cancel(); + } else { + done(); + } + }); + } + }; - _wrap.selectAll('input:not(.combobox-input)').on('input', change(true)); + mode.exit = function () { + keybindingOff(); + context.container().selectAll('.main-content').classed('active', true).classed('inactive', false); + context.ui().sidebar.hide(); + }; - if (_tags) updateTags(_tags); - } + return mode; + } - 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 modeSelectError(context, selectedErrorID, selectedErrorService) { + var mode = { + id: 'select-error', + button: 'browse' + }; + var keybinding = utilKeybinding('select-error'); + var errorService = services[selectedErrorService]; + var errorEditor; - if (extent) { - var countryCode; + switch (selectedErrorService) { + case 'improveOSM': + errorEditor = uiImproveOsmEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - if (context.inIntro()) { - // localize the address format for the walkthrough - countryCode = _t('intro.graph.countrycode'); - } else { - var center = extent.center(); - countryCode = iso1A2Code(center); - } + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); + }); + break; - if (countryCode) { - _countryCode = countryCode.toLowerCase(); - updateForCountryCode(); - } - } - } + case 'keepRight': + errorEditor = uiKeepRightEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - function change(onInput) { - return function () { - var tags = {}; + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); + }); + break; - _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 + case 'osmose': + errorEditor = uiOsmoseEditor(context).on('change', function () { + context.map().pan([0, 0]); // trigger a redraw - if (Array.isArray(_tags[key]) && !value) return; - tags[key] = value || undefined; + var error = checkSelectedID(); + if (!error) return; + context.ui().sidebar.show(errorEditor.error(error)); }); - - dispatch$1.call('change', this, tags, onInput); - }; + break; } - function updatePlaceholder(inputSelection) { - return inputSelection.attr('placeholder', function (subfield) { - if (_tags && Array.isArray(_tags[field.key + ':' + subfield.id])) { - return _t('inspector.multiple_values'); - } + var behaviors = [behaviorBreathe(), behaviorHover(context), behaviorSelect(context), behaviorLasso(context), modeDragNode(context).behavior, modeDragNote(context).behavior]; - if (_countryCode) { - var localkey = subfield.id + '!' + _countryCode; - var tkey = addrField.strings.placeholders[localkey] ? localkey : subfield.id; - return addrField.t('placeholders.' + tkey); - } - }); - } + function checkSelectedID() { + if (!errorService) return; + var error = errorService.getError(selectedErrorID); - 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 (!error) { + context.enter(modeBrowse(context)); + } - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + return error; } - address.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - return address; - }; - - address.tags = function (tags) { - _tags = tags; - updateTags(tags); - }; - - address.focus = function () { - var node = _wrap.selectAll('input').node(); + mode.zoomToSelected = function () { + if (!errorService) return; + var error = errorService.getError(selectedErrorID); - if (node) node.focus(); + if (error) { + context.map().centerZoomEase(error.loc, 20); + } }; - return utilRebind(address, dispatch$1, 'on'); - } + 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 - function uiFieldCycleway(field, context) { - var dispatch$1 = dispatch('change'); - var items = select(null); - var wrap = select(null); + function selectError(d3_event, drawn) { + if (!checkSelectedID()) return; + var selection = context.surface().selectAll('.itemId-' + selectedErrorID + '.' + selectedErrorService); - var _tags; + 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; - function cycleway(selection) { - function stripcolon(s) { - return s.replace(':', ''); + if (drawn && source && (source.type === 'pointermove' || source.type === 'mousemove' || source.type === 'touchmove')) { + context.enter(modeBrowse(context)); + } + } else { + selection.classed('selected', true); + context.selectedErrorID(selectedErrorID); + } } - 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 esc() { + if (context.container().select('.combobox').size()) return; + context.enter(modeBrowse(context)); + } + }; - wrap.selectAll('.preset-input-cycleway').on('change', change).on('blur', change); - } + 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([]); + }; - function change(d3_event, key) { - var newValue = context.cleanTagValue(utilGetSetValue(select(this))); // don't override multiple values with blank string + return mode; + } - if (!newValue && (Array.isArray(_tags.cycleway) || Array.isArray(_tags[key]))) return; + 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' + })]; - if (newValue === 'none' || newValue === '') { - newValue = undefined; - } + function enabled() { + return osmEditable(); + } - var otherKey = key === 'cycleway:left' ? 'cycleway:right' : 'cycleway:left'; - var otherValue = typeof _tags.cycleway === 'string' ? _tags.cycleway : _tags[otherKey]; + function osmEditable() { + return context.editable(); + } - if (otherValue && Array.isArray(otherValue)) { - // we must always have an explicit value for comparison - otherValue = otherValue[0]; - } + modes.forEach(function (mode) { + context.keybinding().on(mode.key, function () { + if (!enabled()) return; - if (otherValue === 'none' || otherValue === '') { - otherValue = undefined; - } + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); + } + }); + }); - var tag = {}; // If the left and right tags match, use the cycleway tag to tag both - // sides the same way + tool.render = function (selection) { + var wrap = selection.append('div').attr('class', 'joined').style('display', 'flex'); - 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; - } + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - dispatch$1.call('change', this, tag); - } + context.map().on('move.modes', debouncedUpdate).on('drawn.modes', debouncedUpdate); + context.on('enter.modes', update); + update(); - cycleway.options = function () { - return Object.keys(field.strings.options).map(function (option) { - return { - title: field.t('options.' + option + '.description'), - value: option - }; - }); - }; + function update() { + var buttons = wrap.selectAll('button.add-button').data(modes, function (d) { + return d.id; + }); // exit - cycleway.tags = function (tags) { - _tags = tags; // If cycleway is set, use that instead of individual values + buttons.exit().remove(); // enter - 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 = []; + 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 - if (Array.isArray(tags.cycleway)) { - vals = vals.concat(tags.cycleway); - } + var currMode = context.mode().id; + if (/^draw/.test(currMode)) return; - if (Array.isArray(tags[d])) { - vals = vals.concat(tags[d]); + 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 - return vals.filter(Boolean).join('\n'); - } + if (buttons.enter().size() || buttons.exit().size()) { + context.ui().checkOverflow('.top-toolbar', true); + } // update - 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]); - }); + buttons = buttons.merge(buttonsEnter).classed('disabled', function (d) { + return !enabled(); + }).classed('active', function (d) { + return context.mode() && context.mode().button === d.button; + }); + } }; - cycleway.focus = function () { - var node = wrap.selectAll('input').node(); - if (node) node.focus(); + return tool; + } + + function uiToolNotes(context) { + var tool = { + id: 'notes', + label: _t.html('modes.add_note.label') }; + var mode = modeAddNote(context); - return utilRebind(cycleway, dispatch$1, 'on'); - } + function enabled() { + return notesEnabled() && notesEditable(); + } - function uiFieldLanes(field, context) { - var dispatch$1 = dispatch('change'); - var LANE_WIDTH = 40; - var LANE_HEIGHT = 200; - var _entityIDs = []; + function notesEnabled() { + var noteLayer = context.layers().layer('notes'); + return noteLayer && noteLayer.enabled(); + } - function lanes(selection) { - var lanesData = context.entity(_entityIDs[0]).lanes(); + function notesEditable() { + var mode = context.mode(); + return context.map().notesEditable() && mode && mode.id !== 'save'; + } - if (!context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode) { - selection.call(lanes.off); - return; + context.keybinding().on(mode.key, function () { + if (!enabled()) return; + + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); } + }); - 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'; + tool.render = function (selection) { + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true }); - } - lanes.entityIDs = function (val) { - _entityIDs = val; - }; + context.map().on('move.notes', debouncedUpdate).on('drawn.notes', debouncedUpdate); + context.on('enter.notes', update); + update(); - lanes.tags = function () {}; + function update() { + var showNotes = notesEnabled(); + var data = showNotes ? [mode] : []; + var buttons = selection.selectAll('button.add-button').data(data, function (d) { + return d.id; + }); // exit - lanes.focus = function () {}; + buttons.exit().remove(); // enter - lanes.off = function () {}; + 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 - return utilRebind(lanes, dispatch$1, 'on'); - } - uiFieldLanes.supportsMultiselection = false; + var currMode = context.mode().id; + if (/^draw/.test(currMode)) return; - var _languagesArray = []; - function uiFieldLocalized(field, context) { - var dispatch$1 = dispatch('change', 'input'); - var wikipedia = services.wikipedia; - var input = select(null); - var localizedInputs = select(null); + 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 - var _countryCode; + if (buttons.enter().size() || buttons.exit().size()) { + context.ui().checkOverflow('.top-toolbar', true); + } // update - 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. + buttons = buttons.merge(buttonsEnter).classed('disabled', function (d) { + return !enabled(); + }).classed('active', function (d) { + return context.mode() && context.mode().button === d.button; + }); + } + }; - _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 + 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); + }; - var langCombo = uiCombobox(context, 'localized-lang').fetcher(fetchLanguages).minItems(0); - var brandCombo = uiCombobox(context, 'localized-brand').canAutocomplete(false).minItems(1); + return tool; + } - var _selection = select(null); + 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; - var _multilingual = []; + function isSaving() { + var mode = context.mode(); + return mode && mode.id === 'save'; + } - var _buttonTip = uiTooltip().title(_t.html('translate.translate')).placement('left'); + function isDisabled() { + return _numChanges === 0 || isSaving(); + } - var _wikiTitles; + function save(d3_event) { + d3_event.preventDefault(); - var _entityIDs = []; + if (!context.inIntro() && !isSaving() && history.hasChanges()) { + context.enter(modeSave(context)); + } + } - function loadLanguagesArray(dataLanguages) { - if (_languagesArray.length !== 0) return; // some conversion is needed to ensure correct OSM tags are used + function bgColor() { + var step; - var replacements = { - sr: 'sr-Cyrl', - // in OSM, `sr` implies Cyrillic - 'sr-Cyrl': false // `sr-Cyrl` isn't used in OSM + 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 + } + } - }; + function updateCount() { + var val = history.difference().summary().length; + if (val === _numChanges) return; + _numChanges = val; - for (var code in dataLanguages) { - if (replacements[code] === false) continue; - var metaCode = code; - if (replacements[code]) metaCode = replacements[code]; + if (tooltipBehavior) { + tooltipBehavior.title(_t.html(_numChanges > 0 ? 'save.help' : 'save.no_changes')).keys([key]); + } - _languagesArray.push({ - localName: _mainLocalizer.languageName(metaCode, { - localOnly: true - }), - nativeName: dataLanguages[metaCode].nativeName, - code: code, - label: _mainLocalizer.languageName(metaCode) - }); + if (button) { + button.classed('disabled', isDisabled()).style('background', bgColor()); + button.select('span.count').html(_numChanges); } } - 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; + 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 original = context.graph().base().entities[_entityIDs[0]]; + 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'))(); + } - var hasOriginalName = original && entity.tags.name && entity.tags.name === original.tags.name; // if the name was already edited manually then allow further editing + 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 (!hasOriginalName) return false; // features linked to Wikidata are likely important and should be protected + if (isSaving()) { + button.call(tooltipBehavior.hide); + } + } + }); + }; - if (entity.tags.wikidata) return true; // assume the name has already been confirmed if its source has been researched + tool.uninstall = function () { + context.keybinding().off(key, true); + context.history().on('change.save', null); + context.on('enter.save', null); + button = null; + tooltipBehavior = null; + }; - 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 + return tool; + } - return isSuggestion && !showsBrand; - }); + function uiToolSidebarToggle(context) { + var tool = { + id: 'sidebar_toggle', + label: _t.html('toolbar.inspect') + }; - field.locked(isLocked); - } // update _multilingual, maintaining the existing order + 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 tool; + } - function calcMultilingual(tags) { - var existingLangsOrdered = _multilingual.map(function (item) { - return item.lang; - }); + 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') + }]; - var existingLangs = new Set(existingLangsOrdered.filter(Boolean)); + function editable() { + return context.mode() && context.mode().id !== 'save' && context.map().editableDataEnabled(true + /* ignore min zoom */ + ); + } - for (var k in tags) { - var m = k.match(/^(.*):(.+)$/); + 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(); - if (m && m[1] === field.key && m[2]) { - var item = { - lang: m[2], - value: tags[k] - }; + if (editable() && annotation) { + d.action(); + } - if (existingLangs.has(item.lang)) { - // update the value - _multilingual[existingLangsOrdered.indexOf(item.lang)].value = item.value; - existingLangs["delete"](item.lang); - } else { - _multilingual.push(item); - } + 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)(); } - } - _multilingual = _multilingual.filter(function (item) { - return !item.lang || !existingLangs.has(item.lang); + 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(); }); - } - - 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); + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - if (preset && field.id === 'name') { - var pTag = preset.id.split('/', 2); - var pKey = pTag[0]; - var pValue = pTag[1]; + 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); - 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.. + function update() { + buttons.classed('disabled', function (d) { + return !editable() || !d.annotation(); + }).each(function () { + var selection = select(this); - if (allSuggestions.length && goodSuggestions.length) { - input.on('blur.localized', checkBrandOnBlur).call(brandCombo.fetcher(fetchBrandNames(preset, allSuggestions)).on('accept', acceptBrand).on('cancel', cancelBrand)); + if (!selection.select('.tooltip.in').empty()) { + selection.call(tooltipBehavior.updateContent); } - } - } - - 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); - - if (_tags && !_multilingual.length) { - calcMultilingual(_tags); + }); } + }; - 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. + 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); + }; - function checkBrandOnBlur() { - var latest = _entityIDs.length === 1 && context.hasEntity(_entityIDs[0]); - if (!latest) return; // deleting the entity blurred the field? + return tool; + } - var preset = _mainPresetIndex.match(latest, context.graph()); - if (preset && preset.suggestion) return; // already accepted + function uiTopToolbar(context) { + var sidebarToggle = uiToolSidebarToggle(context), + modes = uiToolOldDrawModes(context), + notes = uiToolNotes(context), + undoRedo = uiToolUndoRedo(context), + save = uiToolSave(context); - var name = utilGetSetValue(input).trim(); - var matched = allSuggestions.filter(function (s) { - return name === s.name(); - }); + function notesEnabled() { + var noteLayer = context.layers().layer('notes'); + return noteLayer && noteLayer.enabled(); + } - if (matched.length === 1) { - acceptBrand({ - suggestion: matched[0] - }); - } else { - cancelBrand(); + 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; } - } + }); - function acceptBrand(d) { - var entity = _entityIDs.length === 1 && context.hasEntity(_entityIDs[0]); + var debouncedUpdate = debounce(update, 500, { + leading: true, + trailing: true + }); - if (!d || !entity) { - cancelBrand(); - return; - } + context.layers().on('change.topToolbar', debouncedUpdate); + update(); - var tags = entity.tags; - var geometry = entity.geometry(context.graph()); - var removed = preset.unsetTags(tags, geometry); + function update() { + var tools = [sidebarToggle, 'spacer', modes]; + tools.push('spacer'); - for (var k in tags) { - tags[k] = removed[k]; // set removed tags to `undefined` + if (notesEnabled()) { + tools = tools.concat([notes, 'spacer']); } - tags = d.suggestion.setTags(tags, geometry); - utilGetSetValue(input, tags.name); - dispatch$1.call('change', this, tags); - } // user hit escape - - - function cancelBrand() { - var name = utilGetSetValue(input); - dispatch$1.call('change', this, { - name: name + tools = tools.concat([undoRedo, save]); + var toolbarItems = bar.selectAll('.toolbar-item').data(tools, function (d) { + return d.id || d; }); - } - - 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); - } - } - - results.sort(function (a, b) { - return a.dist - b.dist; - }); + toolbarItems.exit().each(function (d) { + if (d.uninstall) { + d.uninstall(); } - - results = results.slice(0, 10); - callback(results); - }; + }).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; + }); } + } - function addNew(d3_event) { - d3_event.preventDefault(); - if (field.locked()) return; - var defaultLang = _mainLocalizer.languageCode().toLowerCase(); + return topToolbar; + } - var langExists = _multilingual.find(function (datum) { - return datum.lang === defaultLang; - }); + var sawVersion = null; + var isNewVersion = false; + var isNewUser = false; + function uiVersion(context) { + var currVersion = context.version; + var matchedVersion = currVersion.match(/\d+\.\d+\.\d+.*/); - var isLangEn = defaultLang.indexOf('en') > -1; + if (sawVersion === null && matchedVersion !== null) { + if (corePreferences('sawVersion')) { + isNewUser = false; + isNewVersion = corePreferences('sawVersion') !== currVersion && currVersion.indexOf('-') === -1; + } else { + isNewUser = true; + isNewVersion = true; + } - if (isLangEn || langExists) { - defaultLang = ''; - langExists = _multilingual.find(function (datum) { - return datum.lang === defaultLang; - }); - } + corePreferences('sawVersion', currVersion); + sawVersion = currVersion; + } - if (!langExists) { - // prepend the value so it appears at the top - _multilingual.unshift({ - lang: defaultLang, - value: '' - }); + 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.call(renderMultilingual); - } + 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 change(onInput) { - return function (d3_event) { - if (field.locked()) { - d3_event.preventDefault(); - return; - } + 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 val = utilGetSetValue(select(this)); - if (!onInput) val = context.cleanTagValue(val); // don't override multiple values with blank string + function zoomIn(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomIn(); + } - if (!val && Array.isArray(_tags[field.key])) return; - var t = {}; - t[field.key] = val || undefined; - dispatch$1.call('change', this, t, onInput); - }; - } + function zoomOut(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomOut(); } - function key(lang) { - return field.key + ':' + lang; + function zoomInFurther(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomInFurther(); } - function changeLang(d3_event, d) { - var tags = {}; // make sure unrecognized suffixes are lowercase - #7156 + function zoomOutFurther(d3_event) { + if (d3_event.shiftKey) return; + d3_event.preventDefault(); + context.map().zoomOutFurther(); + } - var lang = utilGetSetValue(select(this)).toLowerCase(); + return function (selection) { + var tooltipBehavior = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(function (d) { + if (d.disabled()) { + return d.disabledTitle; + } - var language = _languagesArray.find(function (d) { - return d.label.toLowerCase() === lang || d.localName && d.localName.toLowerCase() === lang || d.nativeName && d.nativeName.toLowerCase() === lang; + 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)(); + } - if (language) lang = language.code; - - if (d.lang && d.lang !== lang) { - tags[key(d.lang)] = undefined; - } + 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); + }); - var newKey = lang && context.cleanTagKey(key(lang)); - var value = utilGetSetValue(select(this.parentNode).selectAll('.localized-value')); + function updateButtonStates() { + buttons.classed('disabled', function (d) { + return d.disabled(); + }).each(function () { + var selection = select(this); - if (newKey && value) { - tags[newKey] = value; - } else if (newKey && _wikiTitles && _wikiTitles[d.lang]) { - tags[newKey] = _wikiTitles[d.lang]; + if (!selection.select('.tooltip.in').empty()) { + selection.call(tooltipBehavior.updateContent); + } + }); } - d.lang = lang; - dispatch$1.call('change', this, tags); - } - - 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 + updateButtonStates(); + context.map().on('move.uiZoom', updateButtonStates); + }; + } - if (!value && Array.isArray(d.value)) return; - var t = {}; - t[key(d.lang)] = value; - d.value = value; - dispatch$1.call('change', this, t); + function uiZoomToSelection(context) { + function isDisabled() { + var mode = context.mode(); + return !mode || !mode.zoomToSelected; } - function fetchLanguages(value, cb) { - var v = value.toLowerCase(); // show the user's language first - - var langCodes = [_mainLocalizer.localeCode(), _mainLocalizer.languageCode()]; - - if (_countryCode && _territoryLanguages[_countryCode]) { - langCodes = langCodes.concat(_territoryLanguages[_countryCode]); - } - - var langItems = []; - langCodes.forEach(function (code) { - var langItem = _languagesArray.find(function (item) { - return item.code === code; - }); + var _lastPointerUpType; - 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 pointerup(d3_event) { + _lastPointerUpType = d3_event.pointerType; } - 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(); + function click(d3_event) { + d3_event.preventDefault(); - if (!d.lang || !d.value) { - _multilingual.splice(index, 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(); - 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; - }); + if (mode && mode.zoomToSelected) { + mode.zoomToSelected(); + } + } - 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); - }); + _lastPointerUpType = null; } - localized.tags = function (tags) { - _tags = tags; // Fetch translations from wikipedia + return function (selection) { + var tooltipBehavior = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(function () { + if (isDisabled()) { + return _t.html('inspector.zoom_to.no_selection'); + } - if (typeof tags.wikipedia === 'string' && !_wikiTitles) { - _wikiTitles = {}; - var wm = tags.wikipedia.match(/([^:]+):(.+)/); + 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); - if (wm && wm[0] && wm[1]) { - wikipedia.translations(wm[1], wm[2], function (err, d) { - if (err || !d) return; - _wikiTitles = d; - }); + function setEnabledState() { + button.classed('disabled', isDisabled()); + + if (!button.select('.tooltip.in').empty()) { + button.call(tooltipBehavior.updateContent); } } - 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); + context.on('enter.uiZoomToSelection', setEnabledState); + setEnabledState(); + }; + } - _selection.call(localized); + function uiPane(id, context) { + var _key; + + var _label = ''; + var _description = ''; + var _iconName = ''; + + var _sections; // array of uiSection objects + + + var _paneSelection = select(null); + + var _paneTooltip; + + var pane = { + id: id }; - localized.focus = function () { - input.node().focus(); + pane.label = function (val) { + if (!arguments.length) return _label; + _label = val; + return pane; }; - localized.entityIDs = function (val) { - if (!arguments.length) return _entityIDs; - _entityIDs = val; - _multilingual = []; - loadCountryCode(); - return localized; + pane.key = function (val) { + if (!arguments.length) return _key; + _key = val; + return pane; }; - function loadCountryCode() { - var extent = combinedEntityExtent(); - var countryCode = extent && iso1A2Code(extent.center()); - _countryCode = countryCode && countryCode.toLowerCase(); - } + pane.description = function (val) { + if (!arguments.length) return _description; + _description = val; + return pane; + }; - function combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); - } + pane.iconName = function (val) { + if (!arguments.length) return _iconName; + _iconName = val; + return pane; + }; - return utilRebind(localized, dispatch$1, 'on'); - } + pane.sections = function (val) { + if (!arguments.length) return _sections; + _sections = val; + return pane; + }; - function uiFieldMaxspeed(field, context) { - var dispatch$1 = dispatch('change'); - var unitInput = select(null); - var input = select(null); - var _entityIDs = []; + pane.selection = function () { + return _paneSelection; + }; - var _tags; + function hidePane() { + context.ui().togglePanes(); + } - var _isImperial; + pane.togglePane = function (d3_event) { + if (d3_event) d3_event.preventDefault(); - 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]; + _paneTooltip.hide(); - 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); + context.ui().togglePanes(!_paneSelection.classed('shown') ? _paneSelection : undefined); + }; - function changeUnits() { - _isImperial = utilGetSetValue(unitInput) === 'mph'; - utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h'); - setUnitSuggestions(); - change(); + pane.renderToggleButton = function (selection) { + if (!_paneTooltip) { + _paneTooltip = uiTooltip().placement(_mainLocalizer.textDirection() === 'rtl' ? 'right' : 'left').title(_description).keys([_key]); } - } - function setUnitSuggestions() { - speedCombo.data((_isImperial ? imperialValues : metricValues).map(comboValues)); - utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h'); - } + selection.append('button').on('click', pane.togglePane).call(svgIcon('#' + _iconName, 'light')).call(_paneTooltip); + }; - function comboValues(d) { - return { - value: d.toString(), - title: d.toString() - }; - } + pane.renderContent = function (selection) { + // override to fully customize content + if (_sections) { + _sections.forEach(function (section) { + selection.call(section.render); + }); + } + }; - function change() { - var tag = {}; - var value = utilGetSetValue(input).trim(); // don't override multiple values with blank string + pane.renderPane = function (selection) { + _paneSelection = selection.append('div').attr('class', 'fillL map-pane hide ' + id + '-pane').attr('pane', id); - if (!value && Array.isArray(_tags[field.key])) return; + var heading = _paneSelection.append('div').attr('class', 'pane-heading'); - 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'); + heading.append('h2').html(_label); + heading.append('button').on('click', hidePane).call(svgIcon('#iD-icon-close')); + + _paneSelection.append('div').attr('class', 'pane-content').call(pane.renderContent); + + if (_key) { + context.keybinding().on(_key, pane.togglePane); } + }; - dispatch$1.call('change', this, tag); - } + return pane; + } - maxspeed.tags = function (tags) { - _tags = tags; - var value = tags[field.key]; - var isMixed = Array.isArray(value); + function uiSectionBackgroundDisplayOptions(context) { + var section = uiSection('background-display-options', context).label(_t.html('background.display_options')).disclosureContent(renderDisclosureContent); - if (!isMixed) { - if (value && value.indexOf('mph') >= 0) { - value = parseInt(value, 10).toString(); - _isImperial = true; - } else if (value) { - _isImperial = false; - } - } + var _detected = utilDetect(); - 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); - }; + var _storedOpacity = corePreferences('background-opacity'); - maxspeed.focus = function () { - input.node().focus(); - }; + var _minVal = 0; - maxspeed.entityIDs = function (val) { - _entityIDs = val; + 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 combinedEntityExtent() { - return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph()); + function clamp(x, min, max) { + return Math.max(min, Math.min(x, max)); } - return utilRebind(maxspeed, dispatch$1, 'on'); - } - - 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 updateValue(d, val) { + val = clamp(val, _minVal, _maxVal); + _options[d] = val; + context.background()[d](val); - var typeField; - var layerField; - var _oldType = {}; - var _entityIDs = []; + if (d === 'brightness') { + corePreferences('background-opacity', val); + } - function selectedKey() { - var node = wrap.selectAll('.form-field-input-radio label.active input'); - return !node.empty() && node.datum(); + section.reRender(); } - 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 - }); + 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 + + var slidersEnter = containerEnter.selectAll('.display-control').data(_sliders).enter().append('div').attr('class', function (d) { + return 'display-control display-control-' + d; }); - labels = labels.merge(enter); - radios = labels.selectAll('input').on('change', changeRadio); - } + 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'); - 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 + if (!val && d3_event && d3_event.target) { + val = d3_event.target.value; + } - if (type) { - if (!typeField || typeField.id !== selected) { - typeField = uiField(context, type, _entityIDs, { - wrap: false - }).on('change', changeType); + 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 + + containerEnter.append('a').attr('class', 'display-option-resetlink').attr('href', '#').html(_t.html('background.reset_all')).on('click', function (d3_event) { + d3_event.preventDefault(); + + for (var i = 0; i < _sliders.length; i++) { + updateValue(_sliders[i], 1); } + }); // update - typeField.tags(tags); - } else { - typeField = null; + 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); } + } - var typeItem = list.selectAll('.structure-type-item').data(typeField ? [typeField] : [], function (d) { - return d.id; - }); // Exit + return section; + } - typeItem.exit().remove(); // Enter + function uiSettingsCustomBackground() { + var dispatch = dispatch$8('change'); - 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 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 - typeItem = typeItem.merge(typeEnter); + 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 (typeField) { - typeItem.selectAll('.structure-input-type-wrap').call(typeField.render); - } // Layer + function isSaveDisabled() { + return null; + } // restore the original template - if (layer && showLayer) { - if (!layerField) { - layerField = uiField(context, layer, _entityIDs, { - wrap: false - }).on('change', changeLayer); - } + function clickCancel() { + textSection.select('.field-template').property('value', _origSettings.template); + corePreferences('background-custom-template', _origSettings.template); + this.blur(); + modal.close(); + } // accept the current template - layerField.tags(tags); - field.keys = utilArrayUnion(field.keys, ['layer']); - } else { - layerField = null; - field.keys = field.keys.filter(function (k) { - return k !== 'layer'; - }); + + 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); } + } - var layerItem = list.selectAll('.structure-layer-item').data(layerField ? [layerField] : []); // Exit + return utilRebind(render, dispatch, 'on'); + } - layerItem.exit().remove(); // Enter + function uiSectionBackgroundList(context) { + var _backgroundList = select(null); - 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 + var _customSource = context.background().findSource('custom'); - layerItem = layerItem.merge(layerEnter); + var _settingsCustomBackground = uiSettingsCustomBackground().on('change', customChanged); - if (layerField) { - layerItem.selectAll('.structure-input-layer-wrap').call(layerField.render); - } + var section = uiSection('background-list', context).label(_t.html('background.backgrounds')).disclosureContent(renderDisclosureContent); + + function previousBackgroundID() { + return corePreferences('background-last-used-toggle'); } - function changeType(t, onInput) { - var key = selectedKey(); - if (!key) return; - var val = t[key]; + 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 - if (val !== 'no') { - _oldType[key] = val; - } + 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 - 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 + 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; + }); + } + 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 (t.layer === undefined) { - if (key === 'bridge' && val !== 'no') { - t.layer = '1'; - } + 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()));
+ }
+ });
+ }
+
+ 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;
+ }).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);
+ }
- if (key === 'tunnel' && val !== 'no' && val !== 'building_passage') {
- t.layer = '-1';
- }
- }
+ function updateLayerSelections(selection) {
+ function active(d) {
+ return context.background().showsLayer(d);
}
- dispatch$1.call('change', this, t, onInput);
+ selection.selectAll('li').classed('active', active).classed('switch', function (d) {
+ return d.id === previousBackgroundID();
+ }).call(setTooltips).selectAll('input').property('checked', active);
}
- function changeLayer(t, onInput) {
- if (t.layer === '0') {
- t.layer = undefined;
+ function chooseBackground(d) {
+ if (d.id === 'custom' && !d.template()) {
+ return editCustom();
}
- dispatch$1.call('change', this, t, onInput);
+ var previousBackground = context.background().baseLayerSource();
+ corePreferences('background-last-used-toggle', previousBackground.id);
+ corePreferences('background-last-used', d.id);
+ context.background().baseLayerSource(d);
}
- function changeRadio() {
- var t = {};
- var activeKey;
+ function customChanged(d) {
+ if (d && d.template) {
+ _customSource.template(d.template);
- if (field.key) {
- t[field.key] = undefined;
+ chooseBackground(_customSource);
+ } else {
+ _customSource.template('');
+
+ chooseBackground(context.background().findSource('none'));
}
+ }
- radios.each(function (d) {
- var active = select(this).property('checked');
- if (active) activeKey = d;
+ function editCustom() {
+ context.container().call(_settingsCustomBackground);
+ }
- if (field.key) {
- if (active) t[field.key] = d;
- } else {
- var val = _oldType[activeKey] || 'yes';
- t[d] = active ? val : undefined;
- }
- });
+ 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;
+ }
- 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 uiSectionBackgroundOffset(context) {
+ var section = uiSection('background-offset', context).label(_t.html('background.fix_misalignment')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- dispatch$1.call('change', this, t);
- }
+ var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
- radio.tags = function (tags) {
- radios.property('checked', function (d) {
- if (field.key) {
- return tags[field.key] === d;
- }
+ var _directions = [['top', [0, -0.5]], ['left', [-0.5, 0]], ['right', [0.5, 0]], ['bottom', [0, 0.5]]];
- return !!(typeof tags[d] === 'string' && tags[d].toLowerCase() !== 'no');
+ 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 isMixed(d) {
- if (field.key) {
- return Array.isArray(tags[field.key]) && tags[field.key].includes(d);
- }
-
- return Array.isArray(tags[d]);
- }
+ function resetOffset() {
+ context.background().offset([0, 0]);
+ updateValue();
+ }
- labels.classed('active', function (d) {
- if (field.key) {
- return Array.isArray(tags[field.key]) && tags[field.key].includes(d) || tags[field.key] === d;
- }
+ function nudge(d) {
+ context.background().nudge(d, context.map().zoom());
+ updateValue();
+ }
- 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;
- });
- var selection = radios.filter(function () {
- return this.checked;
+ 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 (selection.empty()) {
- placeholder.html(_t.html('inspector.none'));
- } else {
- placeholder.html(selection.attr('value'));
- _oldType[selection.datum()] = tags[selection.datum()];
+ if (d.length !== 2 || !d[0] || !d[1]) {
+ input.classed('error', true);
+ return;
}
- 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';
- }
+ context.background().offset(geoMetersToOffset(d));
+ updateValue();
+ }
- wrap.call(structureExtras, tags);
+ 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);
}
- };
- radio.focus = function () {
- radios.node().focus();
- };
+ 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);
+ }
- radio.entityIDs = function (val) {
- if (!arguments.length) return _entityIDs;
- _entityIDs = val;
- _oldType = {};
- return radio;
- };
+ 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);
+ }
+ }
- radio.isAllowed = function () {
- return _entityIDs.length === 1;
- };
+ 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();
+ }
- return utilRebind(radio, dispatch$1, 'on');
+ context.background().on('change.backgroundOffset-update', updateValue);
+ return section;
}
- function uiFieldRestrictions(field, context) {
- var dispatch$1 = dispatch('change');
- var breathe = behaviorBreathe();
- corePreferences('turn-restriction-via-way', null); // remove old key
-
- var storedViaWay = corePreferences('turn-restriction-via-way0'); // use new key #6922
-
- var storedDistance = corePreferences('turn-restriction-distance');
-
- var _maxViaWay = storedViaWay !== null ? +storedViaWay : 0;
-
- var _maxDistance = storedDistance ? +storedDistance : 30;
-
- var _initialized = false;
+ function uiSectionOverlayList(context) {
+ var section = uiSection('overlay-list', context).label(_t.html('background.overlays')).disclosureContent(renderDisclosureContent);
- var _parent = select(null); // the entire field
+ var _overlayList = select(null);
+ 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);
- var _container = select(null); // just the map
+ if (description || isOverflowing) {
+ item.call(uiTooltip().placement(placement).title(description || d.name()));
+ }
+ });
+ }
+ function updateLayerSelections(selection) {
+ function active(d) {
+ return context.background().showsLayer(d);
+ }
- var _oldTurns;
+ selection.selectAll('li').classed('active', active).call(setTooltips).selectAll('input').property('checked', active);
+ }
- var _graph;
+ function chooseOverlay(d3_event, d) {
+ d3_event.preventDefault();
+ context.background().toggleOverlayLayer(d);
- var _vertexID;
+ _overlayList.call(updateLayerSelections);
- var _intersection;
+ document.activeElement.blur();
+ }
- var _fromWayID;
+ 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();
+ });
+ 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);
- var _lastXPos;
+ 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;
+ }
+ }
- function restrictions(selection) {
- _parent = selection; // try to reuse the intersection, but always rebuild it if the graph has changed
+ 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);
- 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.
+ _overlayList.call(drawListItems, 'checkbox', chooseOverlay, function (d) {
+ return !d.isHidden() && d.overlay;
+ });
+ }
+ 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;
+ }
- 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 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;
+ }
- select(selection.node().parentNode).classed('hide', !isOK); // if form field is hidden or has detached from dom, clean up.
+ 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
- if (!isOK || !context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode || !selection.node().parentNode.parentNode) {
- selection.call(restrictions.off);
- return;
- }
+ 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?
- 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
+ var hhh = depth ? Array(depth + 1).join('#') + ' ' : ''; // if so, prepend with some ##'s
- var containerEnter = container.enter().append('div').attr('class', 'restriction-container');
- containerEnter.append('div').attr('class', 'restriction-help'); // update
+ 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');
- _container = containerEnter.merge(container).call(renderViewer);
- var controls = wrap.selectAll('.restriction-controls').data([0]); // enter/update
+ 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('');
- controls.enter().append('div').attr('class', 'restriction-controls-container').append('div').attr('class', 'restriction-controls').merge(controls).call(renderControls);
- }
+ if (rtl) {
+ nav.call(drawNext).call(drawPrevious);
+ } else {
+ nav.call(drawPrevious).call(drawNext);
+ }
- 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 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'));
+ }
+ }
- selection.selectAll('.restriction-distance-input').property('value', _maxDistance).on('input', function () {
- var val = select(this).property('value');
- _maxDistance = +val;
- _intersection = null;
+ 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);
+ }
+ }
+ }
- _container.selectAll('.layer-osm .layer-turns *').remove();
+ function clickWalkthrough(d3_event) {
+ d3_event.preventDefault();
+ if (context.inIntro()) return;
+ context.container().call(uiIntro(context));
+ context.ui().togglePanes();
+ }
- corePreferences('turn-restriction-distance', _maxDistance);
+ function clickShortcuts(d3_event) {
+ d3_event.preventDefault();
+ context.container().call(context.ui().shortcuts, true);
+ }
- _parent.call(restrictions);
+ 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));
});
- 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
-
- selection.selectAll('.restriction-via-way-input').property('value', _maxViaWay).on('input', function () {
- var val = select(this).property('value');
- _maxViaWay = +val;
-
- _container.selectAll('.layer-osm .layer-turns *').remove();
+ 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);
+ };
- corePreferences('turn-restriction-via-way0', _maxViaWay);
+ return helpPane;
+ }
- _parent.call(restrictions);
+ 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
});
- selection.selectAll('.restriction-via-way-text').html(displayMaxVia(_maxViaWay));
- }
+ }).disclosureContent(renderDisclosureContent).shouldDisplay(function () {
+ return _issues && _issues.length;
+ });
- 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 getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ where: corePreferences('validate-where') || 'all'
+ };
+ } // get and cache the issues to display, unordered
- 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
- var extent = geoExtent();
+ function reloadIssues() {
+ _issues = context.validator().getIssuesBySeverity(getOptions())[severity];
+ }
- 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
+ function renderDisclosureContent(selection) {
+ var center = context.map().center();
+ var graph = context.graph(); // sort issues by distance away from the center of the map
+ 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
- if (_intersection.vertices.length > 1) {
- var padding = 180; // in z22 pixels
- 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));
- }
+ issues = issues.slice(0, 1000); //renderIgnoredIssuesReset(_warningsSelection);
- var padTop = 35; // reserve top space for hint text
+ selection.call(drawIssuesList, issues);
+ }
- 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);
+ 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.key;
+ }); // Exit
- 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.
+ items.exit().remove(); // Enter
+ 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
- if (_fromWayID && !vgraph.hasEntity(_fromWayID)) {
- _fromWayID = null;
- _oldTurns = null;
+ 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();
+ });
+ */
+ }
- 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;
+ 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
- if (_fromWayID) {
- way = vgraph.entity(_fromWayID);
- surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true);
- }
- document.addEventListener('resizeWindow', function () {
- utilSetDimensions(_container, null);
- redraw(1);
- }, false);
- updateHints(null);
+ section.reRender();
+ });
+ }, 1000));
+ return section;
+ }
- function click(d3_event) {
- surface.call(breathe.off).call(breathe);
- var datum = d3_event.target.__data__;
- var entity = datum && datum.properties && datum.properties.entity;
+ function uiSectionValidationOptions(context) {
+ var section = uiSection('issues-options', context).content(renderContent);
- if (entity) {
- datum = entity;
- }
+ 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);
+ });
+ }
- 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 getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ // 'all', 'edited'
+ where: corePreferences('validate-where') || 'all' // 'all', 'visible'
- 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
+ };
+ }
- datumOnly.only = true; // but change this property
+ function updateOptionValue(d3_event, d, val) {
+ if (!val && d3_event && d3_event.target) {
+ val = d3_event.target.value;
+ }
- 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.
+ corePreferences('validate-' + d, val);
+ context.validator().validate();
+ }
- turns = _intersection.turns(_fromWayID, 2);
- extraActions = [];
- _oldTurns = [];
+ return section;
+ }
- for (i = 0; i < turns.length; i++) {
- var turn = turns[i];
- if (seen[turn.restrictionID]) continue; // avoid deleting the turn twice (#4968, #4928)
+ function uiSectionValidationRules(context) {
+ var MINSQUARE = 0;
+ var MAXSQUARE = 20;
+ var DEFAULTSQUARE = 5; // see also unsquare_way.js
- if (turn.direct && turn.path[1] === datum.path[1]) {
- seen[turns[i].restrictionID] = true;
- turn.restrictionType = osmInferRestriction(vgraph, turn, projection);
+ var section = uiSection('issues-rules', context).disclosureContent(renderDisclosureContent).label(_t.html('issues.rules.title'));
- _oldTurns.push(turn);
+ 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;
+ });
- extraActions.push(actionUnrestrictTurn(turn));
- }
- }
+ 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);
+ });
+ 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
- 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 = [];
+ container = container.merge(containerEnter);
+ container.selectAll('.issue-rules-list').call(drawListItems, _ruleKeys, 'checkbox', 'rule', toggleRule, isRuleEnabled);
+ }
- for (i = 0; i < turns.length; i++) {
- if (turns[i].key !== datum.key) {
- extraActions.push(actionRestrictTurn(turns[i], turns[i].restrictionType));
- }
- }
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- _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')]);
- }
+ items.exit().remove(); // Enter
- context.perform.apply(context, actions); // At this point the datum will be changed, but will have same key..
- // Refresh it and update the help..
+ var enter = items.enter().append('li');
- var s = surface.selectAll('.' + datum.key);
- datum = s.empty() ? null : s.datum();
- updateHints(datum);
- } else {
- _fromWayID = null;
- _oldTurns = null;
- redraw();
- }
+ if (name === 'rule') {
+ enter.call(uiTooltip().title(function (d) {
+ return _t.html('issues.' + d + '.tip');
+ }).placement('top'));
}
- function mouseover(d3_event) {
- var datum = d3_event.target.__data__;
- updateHints(datum);
- }
+ 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 = {};
- _lastXPos = _lastXPos || sdims[0];
+ if (d === 'unsquare_way') {
+ params.val = '';
+ }
- function redraw(minChange) {
- var xPos = -1;
+ return _t.html('issues.' + d + '.title', params);
+ }); // Update
- if (minChange) {
- xPos = utilGetDimensions(context.container().select('.sidebar'))[0];
- }
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', false); // user-configurable square threshold
- if (!minChange || minChange && Math.abs(xPos - _lastXPos) >= minChange) {
- if (context.hasEntity(_vertexID)) {
- _lastXPos = xPos;
+ var degStr = corePreferences('validate-square-degrees');
- _container.call(renderViewer);
- }
- }
+ if (degStr === null) {
+ degStr = DEFAULTSQUARE.toString();
}
- function highlightPathsFrom(wayID) {
- surface.selectAll('.related').classed('related', false).classed('allow', false).classed('restrict', false).classed('only', false);
- surface.selectAll('.' + wayID).classed('related', true);
-
- if (wayID) {
- var turns = _intersection.turns(wayID, _maxViaWay);
+ var span = items.selectAll('.square-degrees');
+ var input = span.selectAll('.square-degrees-input').data([0]); // enter / update
- 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';
+ 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);
+ }
- if (turn.only || turns.length === 1) {
- if (turn.via.ways) {
- ids = ids.concat(turn.via.ways);
- }
- } else if (turn.to.way === wayID) {
- continue;
- }
+ function changeSquare() {
+ var input = select(this);
+ var degStr = utilGetSetValue(input).trim();
+ var degNum = parseFloat(degStr, 10);
- surface.selectAll(utilEntitySelector(ids)).classed('related', true).classed('allow', klass === 'allow').classed('restrict', klass === 'restrict').classed('only', klass === 'only');
- }
- }
+ if (!isFinite(degNum)) {
+ degNum = DEFAULTSQUARE;
+ } else if (degNum > MAXSQUARE) {
+ degNum = MAXSQUARE;
+ } else if (degNum < MINSQUARE) {
+ degNum = MINSQUARE;
}
- function updateHints(datum) {
- var help = _container.selectAll('.restriction-help').html('');
+ degNum = Math.round(degNum * 10) / 10; // round to 1 decimal
- var placeholders = {};
- ['from', 'via', 'to'].forEach(function (k) {
- placeholders[k] = '' + _t('restriction.help.' + k) + '';
- });
- 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 (_fromWayID) {
- way = vgraph.entity(_fromWayID);
- surface.selectAll('.' + _fromWayID).classed('selected', true).classed('related', true);
- } // Hovering a way
+ function toggleRule(d3_event, d) {
+ context.validator().toggleRule(d);
+ }
+ context.validator().on('validated.uiSectionValidationRules', function () {
+ window.requestIdleCallback(section.reRender);
+ });
+ return section;
+ }
- 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;
+ function uiSectionValidationStatus(context) {
+ var section = uiSection('issues-status', context).content(renderContent).shouldDisplay(function () {
+ var issues = context.validator().getIssues(getOptions());
+ return issues.length === 0;
+ });
- 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 getOptions() {
+ return {
+ what: corePreferences('validate-what') || 'edited',
+ where: corePreferences('validate-where') || 'all'
+ };
+ }
- 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 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);
+ }
+
+ 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 (datum.via.ways && datum.via.ways.length) {
- var names = [];
+ resetIgnored.exit().remove(); // enter
- 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);
- }
+ var resetIgnoredEnter = resetIgnored.enter().append('div').attr('class', 'reset-ignored section-footer');
+ resetIgnoredEnter.append('a').attr('href', '#'); // update
- help.append('div') // "VIA {viaNames}"
- .html(_t.html('restriction.help.via_names', {
- via: placeholders.via,
- viaNames: names.join(', ')
- }));
- }
+ 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();
+ });
+ }
- if (!indirect) {
- help.append('div') // Click for "No Right Turn"
- .html(_t.html('restriction.help.toggle', {
- turn: nextText.trim()
- }));
- }
+ function setNoIssuesText(selection) {
+ var opts = getOptions();
- 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);
+ function checkForHiddenIssues(cases) {
+ for (var type in cases) {
+ var hiddenOpts = cases[type];
+ var hiddenIssues = context.validator().getIssues(hiddenOpts);
- 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 (hiddenIssues.length) {
+ selection.select('.box .details').html(_t.html('issues.no_issues.hidden_issues.' + type, {
+ count: hiddenIssues.length.toString()
}));
+ return;
}
}
+
+ selection.select('.box .details').html(_t.html('issues.no_issues.hidden_issues.none'));
}
- }
- function displayMaxDistance(maxDist) {
- var isImperial = !_mainLocalizer.usesMetric();
- var opts;
+ var messageType;
- 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
- })
- };
+ 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'
+ }
+ });
}
- return _t.html('restriction.controls.distance_up_to', opts);
- }
-
- 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');
- }
+ if (opts.what === 'edited' && context.history().difference().summary().length === 0) {
+ messageType = 'no_edits';
+ }
- 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;
+ selection.select('.box .message').html(_t.html('issues.no_issues.message.' + messageType));
}
- restrictions.entityIDs = function (val) {
- _intersection = null;
- _fromWayID = null;
- _oldTurns = null;
- _vertexID = val[0];
- };
-
- restrictions.tags = function () {};
-
- restrictions.focus = function () {};
-
- 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');
+ context.validator().on('validated.uiSectionValidationStatus', function () {
+ window.requestIdleCallback(section.reRender);
+ });
+ context.map().on('move.uiSectionValidationStatus', debounce(function () {
+ window.requestIdleCallback(section.reRender);
+ }, 1000));
+ return section;
}
- uiFieldRestrictions.supportsMultiselection = false;
- function uiFieldTextarea(field, context) {
- var dispatch$1 = dispatch('change');
- var input = select(null);
-
- var _tags;
+ 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;
+ }
- 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 uiSettingsCustomData(context) {
+ var dispatch = dispatch$8('change');
- function change(onInput) {
- return function () {
- var val = utilGetSetValue(input);
- if (!onInput) val = context.cleanTagValue(val); // don't override multiple values with blank string
+ function render(selection) {
+ var dataLayer = context.layers().layer('data'); // keep separate copies of original and current settings
- if (!val && Array.isArray(_tags[field.key])) return;
- var t = {};
- t[field.key] = val || undefined;
- dispatch$1.call('change', this, t, onInput);
+ var _origSettings = {
+ fileList: dataLayer && dataLayer.fileList() || null,
+ url: corePreferences('settings-custom-data-url')
};
- }
-
- 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);
- };
+ 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';
- textarea.focus = function () {
- input.node().focus();
- };
+ 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;
- return utilRebind(textarea, dispatch$1, 'on');
- }
+ 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
- var getOwnPropertyDescriptor$5 = objectGetOwnPropertyDescriptor.f;
+ 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);
+ 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 clickSave() {
+ _currSettings.url = textSection.select('.field-url').property('value').trim(); // one or the other but not both
- var nativeEndsWith = ''.endsWith;
- var min$a = Math.min;
+ if (_currSettings.url) {
+ _currSettings.fileList = null;
+ }
- 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;
- }();
+ if (_currSettings.fileList) {
+ _currSettings.url = '';
+ }
- // `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;
+ corePreferences('settings-custom-data-url', _currSettings.url);
+ this.blur();
+ modal.close();
+ dispatch.call('change', this, _currSettings);
+ }
}
- });
-
- function uiFieldWikidata(field, context) {
- var wikidata = services.wikidata;
- var dispatch$1 = dispatch('change');
-
- var _selection = select(null);
- var _searchInput = select(null);
+ return utilRebind(render, dispatch, 'on');
+ }
- var _qid = null;
- var _wikidataEntity = null;
- var _wikiURL = '';
- var _entityIDs = [];
+ 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);
- var _wikipediaKey = field.keys && field.keys.find(function (key) {
- return key.includes('wikipedia');
- }),
- _hintKey = field.key === 'wikidata' ? 'name' : field.key.split(':')[0];
+ 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);
+ }
- var combobox = uiCombobox(context, 'combo-' + field.safeid).caseSensitive(true).minItems(1);
+ function showsLayer(which) {
+ var layer = layers.layer(which);
- 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
+ if (layer) {
+ return layer.enabled();
+ }
- 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');
- });
+ return false;
}
- 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 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);
- if (entity.tags[_hintKey]) {
- q = entity.tags[_hintKey];
- break;
- }
+ if (layer) {
+ layer.enabled(enabled);
+
+ if (!enabled && (which === 'osm' || which === 'notes')) {
+ context.enter(modeBrowse(context));
}
}
+ }
- wikidata.itemsForSearchQuery(q, function (err, data) {
- if (err) return;
+ function toggleLayer(which) {
+ setLayer(which, !showsLayer(which));
+ }
- for (var i in data) {
- data[i].value = data[i].label + ' (' + data[i].id + ')';
- data[i].title = data[i].description;
+ 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
- if (callback) callback(data);
+ li.merge(liEnter).classed('active', function (d) {
+ return d.layer.enabled();
+ }).selectAll('input').property('checked', function (d) {
+ return d.layer.enabled();
});
}
- function change() {
- var syncTags = {};
- syncTags[field.key] = _qid;
- dispatch$1.call('change', this, syncTags); // attempt asynchronous update of wikidata tag..
+ 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
- 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.
+ 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
- if (context.graph() !== initGraph) return;
- if (!entity.sitelinks) return;
- var langs = wikidata.languagesToQuery(); // use the label and description languages as fallbacks
- ['labels', 'descriptions'].forEach(function (key) {
- if (!entity[key]) return;
- var valueLangs = Object.keys(entity[key]);
- if (valueLangs.length === 0) return;
- var valueLang = valueLangs[0];
+ 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..
+
+ 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
- if (langs.indexOf(valueLang) === -1) {
- langs.push(valueLang);
- }
- });
- var newWikipediaValue;
+ li.merge(liEnter).classed('active', isVTLayerSelected).selectAll('input').property('checked', isVTLayerSelected);
- if (_wikipediaKey) {
- var foundPreferred;
+ function isVTLayerSelected(d) {
+ return dataLayer && dataLayer.template() === d.template;
+ }
- for (var i in langs) {
- var lang = langs[i];
- var siteID = lang.replace('-', '_') + 'wiki';
+ function selectVTLayer(d3_event, d) {
+ corePreferences('settings-custom-data-url', d.template);
- if (entity.sitelinks[siteID]) {
- foundPreferred = true;
- newWikipediaValue = lang + ':' + entity.sitelinks[siteID].title; // use the first match
+ if (dataLayer) {
+ dataLayer.template(d.template, d.src);
+ dataLayer.enabled(true);
+ }
+ }
+ }
- break;
- }
- }
+ 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
- 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');
- });
+ ul.exit().remove(); // Enter
- 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;
- }
- }
- }
+ 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
- if (newWikipediaValue) {
- newWikipediaValue = context.cleanTagValue(newWikipediaValue);
- }
+ 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);
+ }
- 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 editCustom() {
+ context.container().call(settingsCustomData);
+ }
- if (newWikipediaValue === null) {
- if (!currTags[_wikipediaKey]) return null;
- delete currTags[_wikipediaKey];
- } else {
- currTags[_wikipediaKey] = newWikipediaValue;
- }
+ function customChanged(d) {
+ var dataLayer = layers.layer('data');
- return actionChangeTags(entityID, currTags);
- }).filter(Boolean);
- if (!actions.length) return; // Coalesce the update of wikidata tag into the previous tag change
+ if (d && d.url) {
+ dataLayer.url(d.url);
+ } else if (d && d.fileList) {
+ dataLayer.fileList(d.fileList);
+ }
+ }
- 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 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'));
}
- function setLabelForEntity() {
- var label = '';
-
- if (_wikidataEntity) {
- label = entityPropertyForDisplay(_wikidataEntity, 'labels');
+ 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;
+ }
- if (label.length === 0) {
- label = _wikidataEntity.id.toString();
- }
- }
+ function uiSectionMapFeatures(context) {
+ var _features = context.features().keys();
- utilGetSetValue(_searchInput, label);
- }
+ var section = uiSection('map-features', context).label(_t.html('map_data.map_features')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- wiki.tags = function (tags) {
- var isMixed = Array.isArray(tags[field.key]);
+ 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
- _searchInput.attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : null).attr('placeholder', isMixed ? _t('inspector.multiple_values') : '').classed('mixed', isMixed);
+ container = container.merge(containerEnter);
+ container.selectAll('.layer-feature-list').call(drawListItems, _features, 'checkbox', 'feature', clickFeature, showsFeature);
+ }
- _qid = typeof tags[field.key] === 'string' && tags[field.key] || '';
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- if (!/^Q[0-9]*$/.test(_qid)) {
- // not a proper QID
- unrecognized();
- return;
- } // QID value in correct format
+ items.exit().remove(); // Enter
+ var enter = items.enter().append('li').call(uiTooltip().title(function (d) {
+ var tip = _t.html(name + '.' + d + '.tooltip');
- _wikiURL = 'https://wikidata.org/wiki/' + _qid;
- wikidata.entityByQID(_qid, function (err, entity) {
- if (err) {
- unrecognized();
- return;
+ if (autoHiddenFeature(d)) {
+ var msg = showsLayer('osm') ? _t.html('map_data.autohidden') : _t.html('map_data.osmhidden');
+ tip += '' + msg + '';
}
- _wikidataEntity = entity;
- setLabelForEntity();
- var description = entityPropertyForDisplay(entity, 'descriptions');
+ 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
- _selection.select('button.wiki-link').classed('disabled', false);
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', autoHiddenFeature);
+ }
- _selection.select('.preset-wikidata-description').style('display', function () {
- return description.length > 0 ? 'flex' : 'none';
- }).select('input').attr('value', description);
+ function autoHiddenFeature(d) {
+ return context.features().autoHidden(d);
+ }
- _selection.select('.preset-wikidata-identifier').style('display', function () {
- return entity.id ? 'flex' : 'none';
- }).select('input').attr('value', entity.id);
- }); // not a proper QID
+ function showsFeature(d) {
+ return context.features().enabled(d);
+ }
- function unrecognized() {
- _wikidataEntity = null;
- setLabelForEntity();
+ function clickFeature(d3_event, d) {
+ context.features().toggle(d);
+ }
- _selection.select('.preset-wikidata-description').style('display', 'none');
+ function showsLayer(id) {
+ var layer = context.layers().layer(id);
+ return layer && layer.enabled();
+ } // add listeners
- _selection.select('.preset-wikidata-identifier').style('display', 'none');
- _selection.select('button.wiki-link').classed('disabled', true);
+ context.features().on('change.map_features', section.reRender);
+ return section;
+ }
- if (_qid && _qid !== '') {
- _wikiURL = 'https://wikidata.org/wiki/Special:Search?search=' + _qid;
- } else {
- _wikiURL = '';
- }
- }
- };
+ function uiSectionMapStyleOptions(context) {
+ var section = uiSection('fill-area', context).label(_t.html('map_data.style_options')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- 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
+ 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');
+ });
+ }
- var langs = wikidata.languagesToQuery();
+ function drawListItems(selection, data, type, name, change, active) {
+ var items = selection.selectAll('li').data(data); // Exit
- 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
+ items.exit().remove(); // Enter
+ 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
- return propObj[langKeys[0]].value;
+ items = items.merge(enter);
+ items.classed('active', active).selectAll('input').property('checked', active).property('indeterminate', false);
}
- wiki.entityIDs = function (val) {
- if (!arguments.length) return _entityIDs;
- _entityIDs = val;
- return wiki;
- };
-
- wiki.focus = function () {
- _searchInput.node().focus();
- };
+ function isActiveFill(d) {
+ return context.map().activeAreaFill() === d;
+ }
- return utilRebind(wiki, dispatch$1, 'on');
- }
+ function toggleHighlightEdited(d3_event) {
+ d3_event.preventDefault();
+ context.map().toggleHighlightEdited();
+ }
- function uiFieldWikipedia(field, context) {
- var _arguments = arguments;
- var dispatch$1 = dispatch('change');
- var wikipedia = services.wikipedia;
- var wikidata = services.wikidata;
+ function setFill(d3_event, d) {
+ context.map().activeAreaFill(d);
+ }
- var _langInput = select(null);
+ context.map().on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.reRender);
+ return section;
+ }
- var _titleInput = select(null);
+ function uiSectionPhotoOverlays(context) {
+ var layers = context.layers();
+ var section = uiSection('photo-overlays', context).label(_t.html('photo_overlays.title')).disclosureContent(renderDisclosureContent).expandedByDefault(false);
- var _wikiURL = '';
+ 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);
+ }
- var _entityIDs;
+ 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();
+ });
- var _tags;
+ function layerSupported(d) {
+ return d.layer && d.layer.supported();
+ }
- 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 = '';
+ function layerEnabled(d) {
+ return layerSupported(d) && d.layer.enabled();
+ }
- for (var i in _entityIDs) {
- var entity = context.hasEntity(_entityIDs[i]);
+ 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;
- if (entity.tags.name) {
- value = entity.tags.name;
- break;
- }
+ if (d.id === 'mapillary-signs' || d.id === 'mapillary-map-features') {
+ classes += ' indented';
}
- }
- var searchfn = value.length > 7 ? wikipedia.search : wikipedia.suggestions;
- searchfn(language()[2], value, function (query, data) {
- callback(data.map(function (d) {
- return {
- value: d
- };
- }));
+ 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 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);
+ li.merge(liEnter).classed('active', layerEnabled).selectAll('input').property('checked', layerEnabled);
+ }
- _langInput.on('blur', changeLang).on('change', changeLang);
+ function drawPhotoTypeItems(selection) {
+ var data = context.photos().allPhotoTypes();
- 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);
+ function typeEnabled(d) {
+ return context.photos().showsPhotoType(d);
+ }
- _titleInput.on('blur', function () {
- change(true);
- }).on('change', function () {
- change(false);
+ 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 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 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
- function defaultLanguageInfo(skipEnglishFallback) {
- var langCode = _mainLocalizer.languageCode().toLowerCase();
+ li.merge(liEnter).classed('active', typeEnabled).selectAll('input').property('checked', typeEnabled);
+ }
- for (var i in _dataWikipedia) {
- var d = _dataWikipedia[i]; // default to the language of iD's current locale
+ function drawDateFilter(selection) {
+ var data = context.photos().dateFilters();
- if (d[2] === langCode) return d;
- } // fallback to English
+ 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
- return skipEnglishFallback ? ['', '', ''] : ['English', 'English', 'en'];
+ li.selectAll('input').each(function (d) {
+ utilGetSetValue(select(this), context.photos().dateFilterValue(d) || '');
+ });
+ });
+ li = li.merge(liEnter).classed('active', filterEnabled);
}
- function language(skipEnglishFallback) {
- var value = utilGetSetValue(_langInput).toLowerCase();
+ function drawUsernameFilter(selection) {
+ function filterEnabled() {
+ return context.photos().usernames();
+ }
+
+ 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);
- for (var i in _dataWikipedia) {
- var d = _dataWikipedia[i]; // return the language already set in the UI, if supported
+ function usernameValue() {
+ var usernames = context.photos().usernames();
+ if (usernames) return usernames.join('; ');
+ return usernames;
+ }
+ }
- if (d[0].toLowerCase() === value || d[1].toLowerCase() === value || d[2] === value) return d;
- } // fallback to English
+ function toggleLayer(which) {
+ setLayer(which, !showsLayer(which));
+ }
+ function showsLayer(which) {
+ var layer = layers.layer(which);
- return defaultLanguageInfo(skipEnglishFallback);
- }
+ if (layer) {
+ return layer.enabled();
+ }
- function changeLang() {
- utilGetSetValue(_langInput, language()[1]);
- change(true);
+ return false;
}
- function change(skipWikidata) {
- var value = utilGetSetValue(_titleInput);
- var m = value.match(/https?:\/\/([-a-z]+)\.wikipedia\.org\/(?:wiki|\1-[-a-z]+)\/([^#]+)(?:#(.+))?/);
+ function setLayer(which, enabled) {
+ var layer = layers.layer(which);
- var langInfo = m && _dataWikipedia.find(function (d) {
- return m[1] === d[2];
- });
+ if (layer) {
+ layer.enabled(enabled);
+ }
+ }
- var syncTags = {};
+ context.layers().on('change.uiSectionPhotoOverlays', section.reRender);
+ context.photos().on('change.uiSectionPhotoOverlays', section.reRender);
+ return section;
+ }
- if (langInfo) {
- var nativeLangName = langInfo[1]; // Normalize title http://www.mediawiki.org/wiki/API:Query#Title_normalization
+ 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;
+ }
- value = decodeURIComponent(m[2]).replace(/_/g, ' ');
+ function uiSectionPrivacy(context) {
+ var section = uiSection('preferences-third-party', context).label(_t.html('preferences.privacy.title')).disclosureContent(renderDisclosureContent);
- 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 _showThirdPartyIcons = corePreferences('preferences.privacy.thirdpartyicons') || 'true';
- anchor = decodeURIComponent(m[3]); // }
+ 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
- value += '#' + anchor.replace(/_/g, ' ');
- }
+ 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();
- value = value.slice(0, 1).toUpperCase() + value.slice(1);
- utilGetSetValue(_langInput, nativeLangName);
- utilGetSetValue(_titleInput, value);
+ function update() {
+ selection.selectAll('.privacy-third-party-icons-item').classed('active', _showThirdPartyIcons === 'true').select('input').property('checked', _showThirdPartyIcons === 'true');
}
+ }
- if (value) {
- syncTags.wikipedia = context.cleanTagValue(language()[2] + ':' + value);
- } else {
- syncTags.wikipedia = undefined;
- }
+ return section;
+ }
- dispatch$1.call('change', this, syncTags);
- if (skipWikidata || !value || !language()[2]) return; // attempt asynchronous update of wikidata tag..
+ 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 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.
+ function uiInit(context) {
+ var _initCounter = 0;
+ var _needWidth = {};
- 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
+ var _lastPointerType;
- if (currTags.wikidata !== value) {
- currTags.wikidata = value;
- return actionChangeTags(entityID, currTags);
- }
+ 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
- return null;
- }).filter(Boolean);
- if (!actions.length) return; // Coalesce the update of wikidata tag into the previous tag change
+ 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