From 9eb694faec8810fd9171be0def1554142e46b722 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 13 Mar 2020 13:29:46 -0700 Subject: [PATCH] Remove radial menu --- css/80_app.css | 43 +---------- modules/modes/select.js | 21 +----- modules/renderer/map.js | 3 +- modules/ui/index.js | 1 - modules/ui/intro/helper.js | 4 +- modules/ui/radial_menu.js | 149 ------------------------------------- 6 files changed, 6 insertions(+), 215 deletions(-) delete mode 100644 modules/ui/radial_menu.js diff --git a/css/80_app.css b/css/80_app.css index 98dbd4e1c..8b723d9dd 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -77,8 +77,7 @@ ul li { } a, -button, -.radial-menu-item { +button { cursor: pointer; } @@ -5282,46 +5281,6 @@ li.hide + li.version .badge .tooltip .popover-arrow { } -/* Contextual Radial Menu (deprecated) -------------------------------------------------------- */ -.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 circle:active, -.radial-menu-item circle:hover { - fill: #fff; -} - -.radial-menu-item.disabled circle { - cursor: auto; - fill: rgba(255,255,255,.5); -} - -.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); -} - - /* Contextual Edit Menu ------------------------------------------------------- */ .edit-menu-tooltip { diff --git a/modules/modes/select.js b/modules/modes/select.js index 2ecf843b1..f25d17ea1 100644 --- a/modules/modes/select.js +++ b/modules/modes/select.js @@ -25,9 +25,6 @@ import { utilEntitySelector, utilKeybinding } from '../util'; -// deprecation warning - Radial Menu to be removed in iD v3 -import { uiRadialMenu } from '../ui/radial_menu'; - var _relatedParent; @@ -187,8 +184,7 @@ export function modeSelect(context, selectedIDs) { function toggleMenu() { - // deprecation warning - Radial Menu to be removed in iD v3 - if (d3_select('.edit-menu, .radial-menu').empty()) { + if (d3_select('.edit-menu').empty()) { positionMenu(); showMenu(); } else { @@ -260,14 +256,7 @@ export function modeSelect(context, selectedIDs) { // don't allow delete if downgrade is available var lastOperation = !context.inIntro() && downgradeOperation.available() ? downgradeOperation : Operations.operationDelete(selectedIDs, context); - // deprecation warning - Radial Menu to be removed in iD v3 - var isRadialMenu = context.storage('edit-menu-style') === 'radial'; - if (isRadialMenu) { - operations = operations.slice(0,7); - operations.unshift(lastOperation); - } else { - operations.push(lastOperation); - } + operations.push(lastOperation); operations.forEach(function(operation) { if (operation.behavior) { @@ -275,11 +264,7 @@ export function modeSelect(context, selectedIDs) { } }); - // deprecation warning - Radial Menu to be removed in iD v3 - editMenu = isRadialMenu - ? uiRadialMenu(context, operations) - : uiEditMenu(context, operations); - + editMenu = uiEditMenu(context, operations); } diff --git a/modules/renderer/map.js b/modules/renderer/map.js index a9853bb43..a0e481bcf 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -603,8 +603,7 @@ export function rendererMap(context) { function resetTransform() { if (!_isTransformed) return false; - // deprecation warning - Radial Menu to be removed in iD v3 - surface.selectAll('.edit-menu, .radial-menu').interrupt().remove(); + surface.selectAll('.edit-menu').interrupt().remove(); utilSetTransform(supersurface, 0, 0); _isTransformed = false; if (context.inIntro()) { diff --git a/modules/ui/index.js b/modules/ui/index.js index 4c335315f..b1731aab9 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -44,7 +44,6 @@ export { uiNoteHeader } from './note_header'; export { uiNoteReport } from './note_report'; export { uiPresetIcon } from './preset_icon'; export { uiPresetList } from './preset_list'; -export { uiRadialMenu } from './radial_menu'; export { uiRestore } from './restore'; export { uiScale } from './scale'; export { uiSidebar } from './sidebar'; diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index cb40f4932..64aece25f 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -135,9 +135,7 @@ export function isMostlySquare(points) { export function selectMenuItem(operation) { - var selector = '.edit-menu .edit-menu-item-' + operation + - ', .radial-menu .radial-menu-item-' + operation; - return d3_select(selector); + return d3_select('.edit-menu .edit-menu-item-' + operation); } diff --git a/modules/ui/radial_menu.js b/modules/ui/radial_menu.js deleted file mode 100644 index 5efe5395d..000000000 --- a/modules/ui/radial_menu.js +++ /dev/null @@ -1,149 +0,0 @@ -import { - event as d3_event, - select as d3_select -} from 'd3-selection'; - -import { geoVecFloor } from '../geo'; -import { uiTooltipHtml } from './tooltipHtml'; - - -export function uiRadialMenu(context, operations) { - var menu; - var center = [0, 0]; - var tooltip; - - - var radialMenu = function(selection) { - if (!operations.length) return; - - selection.node().parentNode.focus(); - - function click(operation) { - d3_event.stopPropagation(); - if (operation.disabled()) return; - operation(); - radialMenu.close(); - } - - menu = selection - .append('g') - .attr('class', 'radial-menu') - .attr('transform', 'translate(' + center + ')') - .attr('opacity', 0); - - menu - .transition() - .attr('opacity', 1); - - var r = 50; - var a = Math.PI / 4; - var a0 = -Math.PI / 4; - var a1 = a0 + (operations.length - 1) * a; - - menu - .append('path') - .attr('class', 'radial-menu-background') - .attr('d', 'M' + r * Math.sin(a0) + ',' + - r * Math.cos(a0) + - ' A' + r + ',' + r + ' 0 ' + (operations.length > 5 ? '1' : '0') + ',0 ' + - (r * Math.sin(a1) + 1e-3) + ',' + - (r * Math.cos(a1) + 1e-3)) // Force positive-length path (#1305) - .attr('stroke-width', 50) - .attr('stroke-linecap', 'round'); - - var button = menu.selectAll() - .data(operations) - .enter() - .append('g') - .attr('class', function(d) { return 'radial-menu-item radial-menu-item-' + d.id; }) - .classed('disabled', function(d) { return d.disabled(); }) - .attr('transform', function(d, i) { - return 'translate(' + geoVecFloor([ - r * Math.sin(a0 + i * a), - r * Math.cos(a0 + i * a)]).join(',') + ')'; - }); - - button - .append('circle') - .attr('r', 15) - .on('click', click) - .on('mousedown', mousedown) - .on('mouseover', mouseover) - .on('mouseout', mouseout); - - button - .append('use') - .attr('transform', 'translate(-10,-10)') - .attr('width', '20') - .attr('height', '20') - .attr('xlink:href', function(d) { return '#iD-operation-' + d.id; }); - - tooltip = d3_select(document.body) - .append('div') - .attr('class', 'popover-inner radial-menu-tooltip'); - - function mousedown() { - d3_event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 - } - - function mouseover(d, i) { - var rect = context.surfaceRect(); - var angle = a0 + i * a; - var top = rect.top + (r + 25) * Math.cos(angle) + center[1] + 'px'; - var left = rect.left + (r + 25) * Math.sin(angle) + center[0] + 'px'; - var bottom = rect.height - (r + 25) * Math.cos(angle) - center[1] + 'px'; - var right = rect.width - (r + 25) * Math.sin(angle) - center[0] + 'px'; - - tooltip - .style('top', null) - .style('left', null) - .style('bottom', null) - .style('right', null) - .style('display', 'block') - .html(uiTooltipHtml(d.tooltip(), d.keys[0])); - - if (i === 0) { - tooltip - .style('right', right) - .style('top', top); - } else if (i >= 4) { - tooltip - .style('left', left) - .style('bottom', bottom); - } else { - tooltip - .style('left', left) - .style('top', top); - } - } - - function mouseout() { - tooltip.style('display', 'none'); - } - }; - - - radialMenu.close = function() { - if (menu) { - menu - .style('pointer-events', 'none') - .transition() - .attr('opacity', 0) - .remove(); - } - - if (tooltip) { - tooltip.remove(); - } - }; - - - radialMenu.center = function(_) { - if (!arguments.length) return center; - center = _; - return radialMenu; - }; - - - return radialMenu; -}