CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-14 21:28:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

redraw on note drag. TODO: change dispatch call

Browse Source
This commit is contained in:
Thomas Hervey
2018-07-23 15:09:25 -04:00
parent 00bb733736
commit e23ef4ba4a
7 changed files with 30 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/20_map.css
+11 -3
View File
@@ -68,9 +68,17 @@
/* points & notes */
g.note .stroke {
stroke: #444;
stroke: #222;
stroke-width: 1;
fill: #444;
fill: #222;
opacity: 0.6;
}
g.note.active .stroke {
stroke: #222;
stroke-width: 1;
fill: #222;
opacity: 0.8;
}
g.point .stroke {
@@ -105,7 +113,7 @@ g.point.selected .shadow {
stroke-opacity: 0.7;
}
g.note ellipse.stroke,
/* g.note ellipse.stroke, */
g.point ellipse.stroke {
display: none;
}
modules/modes/drag_note.js
+2 -3
View File
@@ -111,8 +111,6 @@ export function modeDragNote(context) {
function start(entity) {
context.perform(actionNoop());
_activeEntity = entity;
_startLoc = entity.loc;
@@ -155,7 +153,8 @@ export function modeDragNote(context) {
if (osm) {
osm.replaceNote(entity); // update note cache
}
dispatch.call('change', this, 'difference');
context.perform(actionNoop()); // TODO: replace with better call for redrawing
}
modules/modes/drag_note2.js
-490
View File
@@ -1,490 +0,0 @@
import _find from 'lodash-es/find';
import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import {
actionAddMidpoint,
actionConnect,
actionMoveNode,
actionNoop
} from '../actions';
import {
behaviorEdit,
behaviorHover,
behaviorDrag
} from '../behavior';
import {
geoChooseEdge,
geoHasLineIntersections,
geoHasSelfIntersections,
geoVecSubtract,
geoViewportEdge
} from '../geo';
import { modeBrowse, modeSelect } from './index';
import { osmJoinWays, osmNode } from '../osm';
import { uiFlash } from '../ui';
export function modeDragNote2(context) {
var mode = {
id: 'drag-note2',
button: 'browse'
};
var hover = behaviorHover(context).altDisables(true)
.on('hover', context.ui().sidebar.hover);
var edit = behaviorEdit(context);
var _nudgeInterval;
var _restoreSelectedIDs = [];
var _wasMidpoint = false;
var _isCancelled = false;
var _activeEntity;
var _startLoc;
var _lastLoc;
function startNudge(entity, nudge) {
if (_nudgeInterval) window.clearInterval(_nudgeInterval);
_nudgeInterval = window.setInterval(function() {
context.pan(nudge);
doMove(entity, nudge);
}, 50);
}
function stopNudge() {
if (_nudgeInterval) {
window.clearInterval(_nudgeInterval);
_nudgeInterval = null;
}
}
function moveAnnotation(entity) {
return t('operations.move.annotation.' + entity.geometry(context.graph()));
}
function connectAnnotation(entity) {
return t('operations.connect.annotation.' + entity.geometry(context.graph()));
}
function origin(entity) {
return context.projection(entity.loc);
}
function keydown() {
if (d3_event.keyCode === d3_keybinding.modifierCodes.alt) {
if (context.surface().classed('nope')) {
context.surface()
.classed('nope-suppressed', true);
}
context.surface()
.classed('nope', false)
.classed('nope-disabled', true);
}
}
function keyup() {
if (d3_event.keyCode === d3_keybinding.modifierCodes.alt) {
if (context.surface().classed('nope-suppressed')) {
context.surface()
.classed('nope', true);
}
context.surface()
.classed('nope-suppressed', false)
.classed('nope-disabled', false);
}
}
function start(entity) {
_wasMidpoint = entity.type === 'midpoint';
var hasHidden = context.features().hasHiddenConnections(entity, context.graph());
_isCancelled = d3_event.sourceEvent.shiftKey || hasHidden;
if (_isCancelled) {
if (hasHidden) {
uiFlash()
.duration(4000)
.text(t('modes.drag_node.connected_to_hidden'))();
}
return drag.cancel();
}
if (_wasMidpoint) {
var midpoint = entity;
entity = osmNode();
context.perform(actionAddMidpoint(midpoint, entity));
entity = context.entity(entity.id); // get post-action entity
var vertex = context.surface().selectAll('.' + entity.id);
drag.target(vertex.node(), entity);
} else {
context.perform(actionNoop());
}
_activeEntity = entity;
_startLoc = entity.loc;
context.surface().selectAll('.' + _activeEntity.id)
.classed('active', true);
context.enter(mode);
}
// related code
// - `behavior/draw.js` `datum()`
function datum() {
var event = d3_event && d3_event.sourceEvent;
if (!event || event.altKey) {
return {};
} else {
// When dragging, snap only to touch targets..
// (this excludes area fills and active drawing elements)
var d = event.target.__data__;
return (d && d.properties && d.properties.target) ? d : {};
}
}
function doMove(entity, nudge) {
nudge = nudge || [0, 0];
var currPoint = (d3_event && d3_event.point) || context.projection(_lastLoc);
var currMouse = geoVecSubtract(currPoint, nudge);
var loc = context.projection.invert(currMouse);
if (!_nudgeInterval) { // If not nudging at the edge of the viewport, try to snap..
// related code
// - `mode/drag_node.js` `doMode()`
// - `behavior/draw.js` `click()`
// - `behavior/draw_way.js` `move()`
var d = datum();
var target = d && d.properties && d.properties.entity;
var targetLoc = target && target.loc;
var targetNodes = d && d.properties && d.properties.nodes;
var edge;
if (targetLoc) { // snap to node/vertex - a point target with `.loc`
loc = targetLoc;
} else if (targetNodes) { // snap to way - a line target with `.nodes`
edge = geoChooseEdge(targetNodes, context.mouse(), context.projection, end.id);
if (edge) {
loc = edge.loc;
}
}
}
context.replace(
actionMoveNode(entity.id, loc),
moveAnnotation(entity)
);
// Below here: validations
var isInvalid = false;
// Check if this connection to `target` could cause relations to break..
if (target) {
isInvalid = hasRelationConflict(entity, target, edge, context.graph());
}
// Check if this drag causes the geometry to break..
if (!isInvalid) {
isInvalid = hasInvalidGeometry(entity, context.graph());
}
var nope = context.surface().classed('nope');
if (isInvalid === 'relation' || isInvalid === 'restriction') {
if (!nope) { // about to nope - show hint
uiFlash()
.duration(4000)
.text(t('operations.connect.' + isInvalid,
{ relation: context.presets().item('type/restriction').name() }
))();
}
} else {
if (nope) { // about to un-nope, remove hint
uiFlash()
.duration(1)
.text('')();
}
}
var nopeDisabled = context.surface().classed('nope-disabled');
if (nopeDisabled) {
context.surface()
.classed('nope', false)
.classed('nope-suppressed', isInvalid);
} else {
context.surface()
.classed('nope', isInvalid)
.classed('nope-suppressed', false);
}
_lastLoc = loc;
}
// Uses `actionConnect.disabled()` to know whether this connection is ok..
function hasRelationConflict(entity, target, edge, graph) {
var testGraph = graph.update(); // copy
// if snapping to way - add midpoint there and consider that the target..
if (edge) {
var midpoint = osmNode();
var action = actionAddMidpoint({
loc: edge.loc,
edge: [target.nodes[edge.index - 1], target.nodes[edge.index]]
}, midpoint);
testGraph = action(testGraph);
target = midpoint;
}
// can we connect to it?
var ids = [entity.id, target.id];
return actionConnect(ids).disabled(testGraph);
}
function hasInvalidGeometry(entity, graph) {
var parents = graph.parentWays(entity);
var i, j, k;
for (i = 0; i < parents.length; i++) {
var parent = parents[i];
var nodes = [];
var activeIndex = null; // which multipolygon ring contains node being dragged
// test any parent multipolygons for valid geometry
var relations = graph.parentRelations(parent);
for (j = 0; j < relations.length; j++) {
if (!relations[j].isMultipolygon()) continue;
var rings = osmJoinWays(relations[j].members, graph);
// find active ring and test it for self intersections
for (k = 0; k < rings.length; k++) {
nodes = rings[k].nodes;
if (_find(nodes, function(n) { return n.id === entity.id; })) {
activeIndex = k;
if (geoHasSelfIntersections(nodes, entity.id)) {
return true;
}
}
rings[k].coords = nodes.map(function(n) { return n.loc; });
}
// test active ring for intersections with other rings in the multipolygon
for (k = 0; k < rings.length; k++) {
if (k === activeIndex) continue;
// make sure active ring doesnt cross passive rings
if (geoHasLineIntersections(rings[activeIndex].nodes, rings[k].nodes, entity.id)) {
return true;
}
}
}
// If we still haven't tested this node's parent way for self-intersections.
// (because it's not a member of a multipolygon), test it now.
if (activeIndex === null) {
nodes = parent.nodes.map(function(nodeID) { return graph.entity(nodeID); });
if (nodes.length && geoHasSelfIntersections(nodes, entity.id)) {
return true;
}
}
}
return false;
}
function move(entity) {
if (_isCancelled) return;
d3_event.sourceEvent.stopPropagation();
context.surface().classed('nope-disabled', d3_event.sourceEvent.altKey);
_lastLoc = context.projection.invert(d3_event.point);
doMove(entity);
var nudge = geoViewportEdge(d3_event.point, context.map().dimensions());
if (nudge) {
startNudge(entity, nudge);
} else {
stopNudge();
}
}
function end(entity) {
if (_isCancelled) return;
var d = datum();
var nope = (d && d.properties && d.properties.nope) || context.surface().classed('nope');
var target = d && d.properties && d.properties.entity; // entity to snap to
if (nope) { // bounce back
context.perform(
_actionBounceBack(entity.id, _startLoc)
);
} else if (target && target.type === 'way') {
var choice = geoChooseEdge(context.childNodes(target), context.mouse(), context.projection, entity.id);
context.replace(
actionAddMidpoint({
loc: choice.loc,
edge: [target.nodes[choice.index - 1], target.nodes[choice.index]]
}, entity),
connectAnnotation(target)
);
} else if (target && target.type === 'node') {
context.replace(
actionConnect([target.id, entity.id]),
connectAnnotation(target)
);
} else if (_wasMidpoint) {
context.replace(
actionNoop(),
t('operations.add.annotation.vertex')
);
} else {
context.replace(
actionNoop(),
moveAnnotation(entity)
);
}
var reselection = _restoreSelectedIDs.filter(function(id) {
return context.graph().hasEntity(id);
});
if (reselection.length) {
context.enter(modeSelect(context, reselection));
} else {
context.enter(modeBrowse(context));
}
}
function _actionBounceBack(nodeID, toLoc) {
var moveNode = actionMoveNode(nodeID, toLoc);
var action = function(graph, t) {
// last time through, pop off the bounceback perform.
// it will then overwrite the initial perform with a moveNode that does nothing
if (t === 1) context.pop();
return moveNode(graph, t);
};
action.transitionable = true;
return action;
}
function cancel() {
drag.cancel();
context.enter(modeBrowse(context));
}
var drag = behaviorDrag()
.selector('.layer-notes .note')
.surface(d3_select('#map').node())
.origin(origin)
.on('start', start)
.on('move', move)
.on('end', end);
mode.enter = function() {
context.install(hover);
context.install(edit);
d3_select(window)
.on('keydown.drawWay', keydown)
.on('keyup.drawWay', keyup);
context.history()
.on('undone.drag-node', cancel);
};
mode.exit = function() {
context.ui().sidebar.hover.cancel();
context.uninstall(hover);
context.uninstall(edit);
d3_select(window)
.on('keydown.hover', null)
.on('keyup.hover', null);
context.history()
.on('undone.drag-node', null);
context.map()
.on('drawn.drag-node', null);
_activeEntity = null;
context.surface()
.classed('nope', false)
.classed('nope-suppressed', false)
.classed('nope-disabled', false)
.selectAll('.active')
.classed('active', false);
stopNudge();
};
mode.selectedIDs = function() {
if (!arguments.length) return _activeEntity ? [_activeEntity.id] : [];
// no assign
return mode;
};
mode.activeID = function() {
if (!arguments.length) return _activeEntity && _activeEntity.id;
// no assign
return mode;
};
mode.restoreSelectedIDs = function(_) {
if (!arguments.length) return _restoreSelectedIDs;
_restoreSelectedIDs = _;
return mode;
};
mode.behavior = drag;
return mode;
}
modules/modes/select_note.js
+1 -1
View File
@@ -21,7 +21,7 @@ import { uiNoteEditor } from '../ui';
export function modeSelectNote(context, selectedNoteID) {
var mode = {
id: 'select_note',
id: 'select-note',
button: 'browse'
};
modules/osm/note.js
+1 -1
View File
@@ -50,7 +50,7 @@ _extend(osmNote.prototype, {
},
update: function(attrs) {
return osmNote(this, attrs, {v: 1 + (this.v || 0)});
return osmNote(this, attrs); // {v: 1 + (this.v || 0)}
},
isNew: function() {
modules/renderer/map.js
+13 -11
View File
@@ -39,7 +39,6 @@ import {
svgMidpoints,
svgPoints,
svgVertices,
svgNotes
} from '../svg';
import { uiFlash } from '../ui';
@@ -74,8 +73,6 @@ export function rendererMap(context) {
var drawMidpoints = svgMidpoints(projection, context);
var drawLabels = svgLabels(projection, context);
var drawNotes = svgNotes(projection, context);
var _selection = d3_select(null);
var supersurface = d3_select(null);
var wrapper = d3_select(null);
@@ -215,8 +212,7 @@ export function rendererMap(context) {
.call(context.background());
context.on('enter.map', function() {
if (map.editable() && !_transformed) {
if ((map.editable() && !_transformed) || map.noteEditable()) {
// redraw immediately any objects affected by a change in selectedIDs.
var graph = context.graph();
var selectedAndParents = {};
@@ -344,9 +340,6 @@ export function rendererMap(context) {
.call(drawLabels, graph, data, filter, dimensions, fullRedraw)
.call(drawPoints, graph, data, filter);
surface.selectAll('.data-layer-notes')
.call(drawNotes);
dispatch.call('drawn', this, {full: true});
}
@@ -356,7 +349,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') {
context.enter(modeBrowse(context));
}
@@ -488,10 +481,11 @@ export function rendererMap(context) {
.call(drawLayers);
// OSM
if (map.editable()) {
if (map.editable() || map.noteEditable()) { // NOTE: when `map.noteEditable()` is removed, `redraw()` keep being called on timer
context.loadTiles(projection, dimensions);
drawVector(difference, extent);
} else {
}
else {
editOff();
}
@@ -855,6 +849,14 @@ export function rendererMap(context) {
};
map.noteEditable = function() {
var noteLayer = surface.selectAll('.data-layer-notes');
if (!noteLayer.empty() && noteLayer.classed('disabled')) return false;
return map.zoom() >= context.minEditableZoom();
};
map.minzoom = function(_) {
if (!arguments.length) return minzoom;
minzoom = _;
modules/ui/sidebar.js
+2 -1
View File
@@ -29,7 +29,8 @@ export function uiSidebar(context) {
function hover(what) {
if ((what instanceof osmNote)) {
if ((what instanceof osmNote) && (context.mode().id !== 'drag-note')) {
// TODO: figure out why `what` isn't an updated note. Won't hover since .loc doesn't match
_wasNote = true;
var notes = d3_selectAll('.note');
notes