mirror of
https://github.com/FoggedLens/iD.git
synced 2026-03-06 03:11:22 +00:00
Add ability to select custom data
This commit is contained in:
@@ -8,6 +8,7 @@
|
||||
}
|
||||
.mode-browse .layer-notes .note .note-fill,
|
||||
.mode-select .layer-notes .note .note-fill,
|
||||
.mode-select-data .layer-notes .note .note-fill,
|
||||
.mode-select-note .layer-notes .note .note-fill {
|
||||
pointer-events: visible;
|
||||
cursor: pointer; /* Opera */
|
||||
|
||||
@@ -2594,6 +2594,7 @@ input.key-trap {
|
||||
.data-editor.raw-tag-editor button {
|
||||
display: none;
|
||||
}
|
||||
.data-editor.raw-tag-editor .tag-row .key-wrap,
|
||||
.data-editor.raw-tag-editor .tag-row .input-wrap-position {
|
||||
width: 50%;
|
||||
}
|
||||
@@ -4060,7 +4061,7 @@ svg.mouseclick use.right {
|
||||
/* Settings Modals
|
||||
------------------------------------------------------- */
|
||||
.settings-modal textarea {
|
||||
height: 60px;
|
||||
height: 70px;
|
||||
}
|
||||
.settings-modal .buttons .button.col3 {
|
||||
float: none; /* undo float left */
|
||||
@@ -4071,7 +4072,7 @@ svg.mouseclick use.right {
|
||||
}
|
||||
|
||||
|
||||
.settings-custom-data .instructions-file {
|
||||
.settings-custom-data .instructions-url {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.settings-custom-data .field-file,
|
||||
|
||||
@@ -11,6 +11,7 @@ import { geoVecLength } from '../geo';
|
||||
import {
|
||||
modeBrowse,
|
||||
modeSelect,
|
||||
modeSelectData,
|
||||
modeSelectNote
|
||||
} from '../modes';
|
||||
|
||||
@@ -157,13 +158,17 @@ export function behaviorSelect(context) {
|
||||
}
|
||||
}
|
||||
|
||||
} else if (datum && datum.__featurehash__ && !isMultiselect) { // clicked Data..
|
||||
context
|
||||
.selectedNoteID(null)
|
||||
.enter(modeSelectData(context, datum));
|
||||
|
||||
} else if (datum instanceof osmNote && !isMultiselect) { // clicked a Note..
|
||||
context
|
||||
.selectedNoteID(datum.id)
|
||||
.enter(modeSelectNote(context, datum.id));
|
||||
|
||||
} else { // clicked nothing..
|
||||
|
||||
context.selectedNoteID(null);
|
||||
if (!isMultiselect && mode.id !== 'browse') {
|
||||
context.enter(modeBrowse(context));
|
||||
|
||||
@@ -30,9 +30,7 @@ export function modeBrowse(context) {
|
||||
|
||||
|
||||
mode.enter = function() {
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.install(behavior);
|
||||
});
|
||||
behaviors.forEach(context.install);
|
||||
|
||||
// Get focus on the body.
|
||||
if (document.activeElement && document.activeElement.blur) {
|
||||
@@ -49,9 +47,7 @@ export function modeBrowse(context) {
|
||||
|
||||
mode.exit = function() {
|
||||
context.ui().sidebar.hover.cancel();
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.uninstall(behavior);
|
||||
});
|
||||
behaviors.forEach(context.uninstall);
|
||||
|
||||
if (sidebar) {
|
||||
context.ui().sidebar.hide();
|
||||
|
||||
@@ -11,4 +11,5 @@ export { modeMove } from './move';
|
||||
export { modeRotate } from './rotate';
|
||||
export { modeSave } from './save';
|
||||
export { modeSelect } from './select';
|
||||
export { modeSelectData } from './select_data';
|
||||
export { modeSelectNote } from './select_note';
|
||||
|
||||
@@ -120,9 +120,7 @@ export function modeRotate(context, entityIDs) {
|
||||
|
||||
|
||||
mode.enter = function() {
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.install(behavior);
|
||||
});
|
||||
behaviors.forEach(context.install);
|
||||
|
||||
context.surface()
|
||||
.on('mousemove.rotate', doRotate)
|
||||
@@ -141,9 +139,7 @@ export function modeRotate(context, entityIDs) {
|
||||
|
||||
|
||||
mode.exit = function() {
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.uninstall(behavior);
|
||||
});
|
||||
behaviors.forEach(context.uninstall);
|
||||
|
||||
context.surface()
|
||||
.on('mousemove.rotate', null)
|
||||
|
||||
@@ -451,9 +451,7 @@ export function modeSelect(context, selectedIDs) {
|
||||
}
|
||||
});
|
||||
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.install(behavior);
|
||||
});
|
||||
behaviors.forEach(context.install);
|
||||
|
||||
keybinding
|
||||
.on(['[', 'pgup'], previousVertex)
|
||||
@@ -522,10 +520,7 @@ export function modeSelect(context, selectedIDs) {
|
||||
if (timeout) window.clearTimeout(timeout);
|
||||
if (inspector) wrap.call(inspector.close);
|
||||
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.uninstall(behavior);
|
||||
});
|
||||
|
||||
behaviors.forEach(context.uninstall);
|
||||
keybinding.off();
|
||||
closeMenu();
|
||||
editMenu = undefined;
|
||||
|
||||
97
modules/modes/select_data.js
Normal file
97
modules/modes/select_data.js
Normal file
@@ -0,0 +1,97 @@
|
||||
import {
|
||||
event as d3_event,
|
||||
select as d3_select
|
||||
} from 'd3-selection';
|
||||
|
||||
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
|
||||
|
||||
import {
|
||||
behaviorBreathe,
|
||||
behaviorHover,
|
||||
behaviorLasso,
|
||||
behaviorSelect
|
||||
} from '../behavior';
|
||||
|
||||
import {
|
||||
modeDragNode,
|
||||
modeDragNote
|
||||
} from '../modes';
|
||||
|
||||
import { modeBrowse } from './browse';
|
||||
import { uiDataEditor } from '../ui';
|
||||
|
||||
|
||||
export function modeSelectData(context, selectedDatum) {
|
||||
var mode = {
|
||||
id: 'select-data',
|
||||
button: 'browse'
|
||||
};
|
||||
|
||||
var keybinding = d3_keybinding('select-data');
|
||||
var dataEditor = uiDataEditor(context);
|
||||
|
||||
var behaviors = [
|
||||
behaviorBreathe(context),
|
||||
behaviorHover(context),
|
||||
behaviorSelect(context),
|
||||
behaviorLasso(context),
|
||||
modeDragNode(context).behavior,
|
||||
modeDragNote(context).behavior
|
||||
];
|
||||
|
||||
|
||||
// class the data as selected, or return to browse mode if the data is gone
|
||||
function selectData(drawn) {
|
||||
var selection = context.surface().selectAll('.layer-mapdata .data' + selectedDatum.__featurehash__);
|
||||
|
||||
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 === 'mousemove' || source.type === 'touchmove')) {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
} else {
|
||||
selection.classed('selected', true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function esc() {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
|
||||
mode.enter = function() {
|
||||
behaviors.forEach(context.install);
|
||||
keybinding.on('⎋', esc, true);
|
||||
d3_select(document).call(keybinding);
|
||||
|
||||
selectData();
|
||||
|
||||
context.ui().sidebar
|
||||
.show(dataEditor.datum(selectedDatum));
|
||||
|
||||
context.map()
|
||||
.on('drawn.select-data', selectData);
|
||||
};
|
||||
|
||||
|
||||
mode.exit = function() {
|
||||
behaviors.forEach(context.uninstall);
|
||||
keybinding.off();
|
||||
|
||||
context.surface()
|
||||
.selectAll('.layer-mapdata .selected')
|
||||
.classed('selected hover', false);
|
||||
|
||||
context.map()
|
||||
.on('drawn.select-data', null);
|
||||
|
||||
context.ui().sidebar
|
||||
.hide();
|
||||
};
|
||||
|
||||
|
||||
return mode;
|
||||
}
|
||||
@@ -60,52 +60,48 @@ export function modeSelectNote(context, selectedNoteID) {
|
||||
return note;
|
||||
}
|
||||
|
||||
|
||||
// class the note as selected, or return to browse mode if the note is gone
|
||||
function selectNote(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 === 'mousemove' || source.type === 'touchmove')) {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
} else {
|
||||
selection
|
||||
.classed('selected', true);
|
||||
context.selectedNoteID(selectedNoteID);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function esc() {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
|
||||
mode.newFeature = function(_) {
|
||||
if (!arguments.length) return newFeature;
|
||||
newFeature = _;
|
||||
return mode;
|
||||
};
|
||||
|
||||
|
||||
mode.enter = function() {
|
||||
|
||||
// class the note as selected, or return to browse mode if the note is gone
|
||||
function selectNote(drawn) {
|
||||
if (!checkSelectedID()) return;
|
||||
|
||||
var selection = context.surface()
|
||||
.selectAll('.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 === 'mousemove' || source.type === 'touchmove')) {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
} else {
|
||||
selection
|
||||
.classed('selected', true);
|
||||
context.selectedNoteID(selectedNoteID);
|
||||
}
|
||||
}
|
||||
|
||||
function esc() {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
var note = checkSelectedID();
|
||||
if (!note) return;
|
||||
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.install(behavior);
|
||||
});
|
||||
|
||||
keybinding
|
||||
.on('⎋', esc, true);
|
||||
|
||||
d3_select(document)
|
||||
.call(keybinding);
|
||||
behaviors.forEach(context.install);
|
||||
keybinding.on('⎋', esc, true);
|
||||
d3_select(document).call(keybinding);
|
||||
|
||||
selectNote();
|
||||
|
||||
@@ -118,14 +114,11 @@ export function modeSelectNote(context, selectedNoteID) {
|
||||
|
||||
|
||||
mode.exit = function() {
|
||||
behaviors.forEach(function(behavior) {
|
||||
context.uninstall(behavior);
|
||||
});
|
||||
|
||||
behaviors.forEach(context.uninstall);
|
||||
keybinding.off();
|
||||
|
||||
context.surface()
|
||||
.selectAll('.note.selected')
|
||||
.selectAll('.layer-notes .selected')
|
||||
.classed('selected hover', false);
|
||||
|
||||
context.map()
|
||||
|
||||
@@ -348,7 +348,7 @@ export function rendererMap(context) {
|
||||
surface.selectAll('.layer-osm *').remove();
|
||||
|
||||
var mode = context.mode();
|
||||
if (mode && mode.id !== 'save' && mode.id !== 'select-note') {
|
||||
if (mode && mode.id !== 'save' && mode.id !== 'select-note' && mode.id !== 'select-data') {
|
||||
context.enter(modeBrowse(context));
|
||||
}
|
||||
|
||||
|
||||
@@ -179,6 +179,7 @@ export function svgData(projection, context, dispatch) {
|
||||
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')
|
||||
@@ -226,7 +227,7 @@ export function svgData(projection, context, dispatch) {
|
||||
|
||||
clipPaths.merge(clipPathsEnter)
|
||||
.selectAll('path')
|
||||
.attr('d', getPath);
|
||||
.attr('d', getAreaPath);
|
||||
|
||||
|
||||
// Draw fill, shadow, stroke layers
|
||||
@@ -242,9 +243,9 @@ export function svgData(projection, context, dispatch) {
|
||||
|
||||
// Draw paths
|
||||
var pathData = {
|
||||
fill: polygonData,
|
||||
shadow: geoData,
|
||||
stroke: geoData,
|
||||
fill: polygonData
|
||||
stroke: geoData
|
||||
};
|
||||
|
||||
var paths = datagroups
|
||||
@@ -267,7 +268,10 @@ export function svgData(projection, context, dispatch) {
|
||||
return datagroup === 'fill' ? ('url(#' + clipPathID(d) + ')') : null;
|
||||
})
|
||||
.merge(paths)
|
||||
.attr('d', getPath);
|
||||
.attr('d', function(d) {
|
||||
var datagroup = this.parentNode.__data__;
|
||||
return datagroup === 'fill' ? getAreaPath(d) : getPath(d);
|
||||
});
|
||||
|
||||
|
||||
// Draw labels
|
||||
|
||||
@@ -46,7 +46,7 @@ export function uiDataEditor(context) {
|
||||
var editor = body.selectAll('.data-editor')
|
||||
.data([0]);
|
||||
|
||||
editor = editor.enter()
|
||||
editor.enter()
|
||||
.append('div')
|
||||
.attr('class', 'modal-section data-editor')
|
||||
.merge(editor)
|
||||
|
||||
Reference in New Issue
Block a user