mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 05:30:35 +02:00
Remove radial menu
This commit is contained in:
Quincy Morgan
+1
-42
@@ -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 {
|
||||
|
||||
+3
-18
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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()) {
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user