diff --git a/css/app.css b/css/app.css index d9e50291f..f13e2c1b4 100644 --- a/css/app.css +++ b/css/app.css @@ -3160,43 +3160,83 @@ img.tile-removing { } .radial-menu-tooltip { + opacity: 0.8; display: none; position: absolute; width: 200px; } .radial-menu-background { + fill: none; + stroke: black; + stroke-opacity: 0.5; +} + +.radial-menu-item circle { fill: #eee; } -.radial-menu-item rect { - fill: #eee; +.radial-menu-item circle:active, +.radial-menu-item circle:hover { + fill: #fff; } -.radial-menu-item rect:active, -.radial-menu-item rect:hover { - fill: #ccc; +.radial-menu-item.disabled circle { + cursor: auto; + fill: rgba(255,255,255,.5); } -.radial-menu-item.disabled rect { - cursor: not-allowed; -} -.radial-menu-item.disabled rect:hover { - cursor: not-allowed; - fill: #eee; -} - - .radial-menu-item use { fill: #222; color: #79f; } .radial-menu-item.disabled use { + fill: rgba(32,32,32,.5); + color: rgba(40,40,40,.5); +} + +/* edit menu*/ + +.edit-menu-tooltip { + display: none; + position: absolute; + width: 200px; +} + +.edit-menu-background { + fill: #eee; +} + +.edit-menu-item rect { + fill: #eee; +} + +.edit-menu-item rect:active, +.edit-menu-item rect:hover { + fill: #ccc; +} + +.edit-menu-item.disabled rect { + cursor: not-allowed; +} +.edit-menu-item.disabled rect:hover { + cursor: not-allowed; + fill: #eee; +} + + +.edit-menu-item use { + fill: #222; + color: #79f; +} + +.edit-menu-item.disabled use { fill: rgba(32,32,32,.2); color: rgba(40,40,40,.2); } + .lasso-path { fill-opacity:0.3; stroke: #fff; diff --git a/modules/modes/select.js b/modules/modes/select.js index cdba34aa6..681d39de5 100644 --- a/modules/modes/select.js +++ b/modules/modes/select.js @@ -146,15 +146,24 @@ export function modeSelect(context, selectedIDs) { function positionMenu() { - if (!editMenu) { return; } - var point = context.mouse(), - viewport = geoExtent(context.projection.clipExtent()).polygon(), - offset = [viewport[2][0] - point[0], (viewport[1][1] - 30) - point[1]]; // 30 to account for the infoblock + if (suppressMenu || !editMenu) { return; } - if (geoPointInPolygon(point, viewport)) { - editMenu - .center(point) - .offset(offset); + var entity = singular(); + if (entity && context.geometry(entity.id) === 'relation') { + suppressMenu = true; + } else { + var point = context.mouse(), + viewport = geoExtent(context.projection.clipExtent()).polygon(), + offset = [ + viewport[2][0] - point[0], + (viewport[1][1] - 30) - point[1] // 30 to account for the infoblock + ]; + + if (geoPointInPolygon(point, viewport)) { + editMenu + .center(point) + .offset(offset); + } } } @@ -168,7 +177,7 @@ export function modeSelect(context, selectedIDs) { function toggleMenu() { - if (d3.select('.radial-menu').empty()) { + if (d3.select('.edit-menu').empty()) { showMenu(); } else { closeMenu(); @@ -456,7 +465,7 @@ export function modeSelect(context, selectedIDs) { } timeout = window.setTimeout(function() { - if (rtClick) { + if (!suppressMenu && rtClick) { showMenu(); } diff --git a/modules/renderer/map.js b/modules/renderer/map.js index ec10c9201..5ee4fad16 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -311,7 +311,7 @@ export function rendererMap(context) { function resetTransform() { if (!transformed) return false; - surface.selectAll('.radial-menu').interrupt().remove(); + surface.selectAll('.edit-menu').interrupt().remove(); utilSetTransform(supersurface, 0, 0); transformed = false; return true; diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js index 1855b8e26..7150b4233 100644 --- a/modules/ui/edit_menu.js +++ b/modules/ui/edit_menu.js @@ -31,7 +31,7 @@ export function uiEditMenu(context, operations) { menu = selection .append('g') - .attr('class', 'radial-menu') + .attr('class', 'edit-menu') .attr('transform', 'translate(' + [center[0] + l, center[1]] + ')') .attr('opacity', 0); @@ -41,7 +41,7 @@ export function uiEditMenu(context, operations) { rect = menu .append('g') - .attr('class', 'radial-menu-rectangle') + .attr('class', 'edit-menu-rectangle') .attr('transform', function () { var pos = [0, 0]; if (offset[1] <= a1) { @@ -52,7 +52,7 @@ export function uiEditMenu(context, operations) { rect .append('rect') - .attr('class', 'radial-menu-background') + .attr('class', 'edit-menu-background') .attr('x', 4) .attr('rx', 4) .attr('ry', 4) @@ -65,7 +65,7 @@ export function uiEditMenu(context, operations) { .data(operations) .enter() .append('g') - .attr('class', function (d) { return 'radial-menu-item radial-menu-item-' + d.id; }) + .attr('class', function (d) { return 'edit-menu-item edit-menu-item-' + d.id; }) .classed('disabled', function (d) { return d.disabled(); }) .attr('transform', function (d, i) { return 'translate(' + geoRoundCoords([ @@ -95,7 +95,7 @@ export function uiEditMenu(context, operations) { tooltip = d3.select(document.body) .append('div') - .attr('class', 'tooltip-inner radial-menu-tooltip'); + .attr('class', 'tooltip-inner edit-menu-tooltip'); function mousedown() { d3.event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 @@ -151,7 +151,6 @@ export function uiEditMenu(context, operations) { editMenu.offset = function (_) { if (!arguments.length) return offset; - console.log(offset); offset = _; return editMenu; }; diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 14f357c11..eff7a5f3d 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -143,7 +143,7 @@ export function uiIntroPoint(context, reveal) { context.history().on('change.intro', deleted); setTimeout(function() { - var node = d3.select('.radial-menu-item-delete').node(); + var node = d3.select('.edit-menu-item-delete').node(); var pointBox = pad(node.getBoundingClientRect(), 50, context); reveal(pointBox, t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') }));