mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-18 14:45:12 +02:00
WIP: trying singular activeID and smarter target drawing code
The goal here is that the code that draws the targets should know better what parts of the lines/vertices are targetable, rather than just relying on CSS to ignore the pointer events on the whole line. e.g. when drawing a line, it's ok for it to loop back and connect to itself, just not on a segment or vertex adjacent to the active node.
This commit is contained in:
@@ -38,7 +38,8 @@ export function behaviorDrawWay(context, wayId, index, mode, startGraph) {
|
||||
'operations.start.annotation.' :
|
||||
'operations.continue.annotation.') + context.geometry(wayId));
|
||||
var draw = behaviorDraw(context);
|
||||
var _activeIDs = [];
|
||||
// var _activeIDs = [];
|
||||
var _activeID;
|
||||
var startIndex;
|
||||
var start;
|
||||
var end;
|
||||
@@ -103,8 +104,11 @@ export function behaviorDrawWay(context, wayId, index, mode, startGraph) {
|
||||
|
||||
|
||||
function setActiveElements() {
|
||||
_activeIDs = isArea ? [wayId, end.id] : [segment.id, start.id, end.id];
|
||||
context.surface().selectAll(utilEntitySelector(_activeIDs))
|
||||
// _activeIDs = isArea ? [wayId, end.id] : [segment.id, start.id, end.id];
|
||||
// context.surface().selectAll(utilEntitySelector(_activeIDs))
|
||||
// .classed('active', true);
|
||||
_activeID = end.id;
|
||||
context.surface().selectAll('.' + end.id)
|
||||
.classed('active', true);
|
||||
}
|
||||
|
||||
@@ -319,8 +323,13 @@ export function behaviorDrawWay(context, wayId, index, mode, startGraph) {
|
||||
};
|
||||
|
||||
|
||||
drawWay.activeIDs = function() {
|
||||
if (!arguments.length) return _activeIDs;
|
||||
// drawWay.activeIDs = function() {
|
||||
// if (!arguments.length) return _activeIDs;
|
||||
// // no assign
|
||||
// return drawWay;
|
||||
// };
|
||||
drawWay.activeID = function() {
|
||||
if (!arguments.length) return _activeID;
|
||||
// no assign
|
||||
return drawWay;
|
||||
};
|
||||
|
||||
@@ -255,12 +255,15 @@ export function coreContext() {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
context.activeIDs = function() {
|
||||
if (mode && mode.activeIDs) {
|
||||
return mode.activeIDs();
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
// context.activeIDs = function() {
|
||||
// if (mode && mode.activeIDs) {
|
||||
// return mode.activeIDs();
|
||||
// } else {
|
||||
// return [];
|
||||
// }
|
||||
// };
|
||||
context.activeID = function() {
|
||||
return mode && mode.activeID && mode.activeID();
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -44,7 +44,8 @@ export function modeDragNode(context) {
|
||||
|
||||
var _nudgeInterval;
|
||||
var _restoreSelectedIDs = [];
|
||||
var _activeIDs = [];
|
||||
// var _activeIDs = [];
|
||||
var _activeID;
|
||||
var _wasMidpoint = false;
|
||||
var _isCancelled = false;
|
||||
var _dragEntity;
|
||||
@@ -112,9 +113,9 @@ export function modeDragNode(context) {
|
||||
|
||||
// `.active` elements have `pointer-events: none`.
|
||||
// This prevents the node or vertex being dragged from trying to connect to itself.
|
||||
_activeIDs = context.graph().parentWays(entity)
|
||||
.map(function(parent) { return parent.id; });
|
||||
_activeIDs.push(entity.id);
|
||||
// _activeIDs = context.graph().parentWays(entity).map(function(parent) { return parent.id; });
|
||||
// _activeIDs.push(entity.id);
|
||||
_activeID = entity.id;
|
||||
setActiveElements();
|
||||
|
||||
context.enter(mode);
|
||||
@@ -232,7 +233,9 @@ export function modeDragNode(context) {
|
||||
|
||||
|
||||
function setActiveElements() {
|
||||
context.surface().selectAll(utilEntitySelector(_activeIDs))
|
||||
// context.surface().selectAll(utilEntitySelector(_activeIDs))
|
||||
// .classed('active', true);
|
||||
context.surface().selectAll('.' + _activeID)
|
||||
.classed('active', true);
|
||||
}
|
||||
|
||||
@@ -271,7 +274,8 @@ export function modeDragNode(context) {
|
||||
context.map()
|
||||
.on('drawn.drag-node', null);
|
||||
|
||||
_activeIDs = [];
|
||||
// _activeIDs = [];
|
||||
_activeID = null;
|
||||
context.surface()
|
||||
.selectAll('.active')
|
||||
.classed('active', false);
|
||||
@@ -287,8 +291,13 @@ export function modeDragNode(context) {
|
||||
};
|
||||
|
||||
|
||||
mode.activeIDs = function() {
|
||||
if (!arguments.length) return _activeIDs;
|
||||
// mode.activeIDs = function() {
|
||||
// if (!arguments.length) return _activeIDs;
|
||||
// // no assign
|
||||
// return mode;
|
||||
// };
|
||||
mode.activeID = function() {
|
||||
if (!arguments.length) return _activeID;
|
||||
// no assign
|
||||
return mode;
|
||||
};
|
||||
|
||||
@@ -43,8 +43,11 @@ export function modeDrawArea(context, wayId, startGraph) {
|
||||
return [wayId];
|
||||
};
|
||||
|
||||
mode.activeIDs = function() {
|
||||
return (behavior && behavior.activeIDs()) || [];
|
||||
// mode.activeIDs = function() {
|
||||
// return (behavior && behavior.activeIDs()) || [];
|
||||
// };
|
||||
mode.activeID = function() {
|
||||
return (behavior && behavior.activeID()) || [];
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -41,8 +41,11 @@ export function modeDrawLine(context, wayId, startGraph, affix) {
|
||||
return [wayId];
|
||||
};
|
||||
|
||||
mode.activeIDs = function() {
|
||||
return (behavior && behavior.activeIDs()) || [];
|
||||
// mode.activeIDs = function() {
|
||||
// return (behavior && behavior.activeIDs()) || [];
|
||||
// };
|
||||
mode.activeID = function() {
|
||||
return (behavior && behavior.activeID()) || [];
|
||||
};
|
||||
|
||||
return mode;
|
||||
|
||||
@@ -45,7 +45,8 @@ export function svgAreas(projection, context) {
|
||||
var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
|
||||
var getPath = svgPath(projection, graph);
|
||||
var passive = entities.filter(function(d) {
|
||||
return context.activeIDs().indexOf(d.id) === -1;
|
||||
return true;
|
||||
// return context.activeIDs().indexOf(d.id) === -1;
|
||||
});
|
||||
|
||||
var targets = selection.selectAll('.area.target')
|
||||
|
||||
@@ -40,7 +40,8 @@ export function svgLines(projection, context) {
|
||||
var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
|
||||
var getPath = svgPath(projection, graph);
|
||||
var passive = entities.filter(function(d) {
|
||||
return context.activeIDs().indexOf(d.id) === -1;
|
||||
return true;
|
||||
// return context.activeIDs().indexOf(d.id) === -1;
|
||||
});
|
||||
|
||||
var targets = selection.selectAll('.line.target')
|
||||
|
||||
@@ -30,7 +30,8 @@ export function svgPoints(projection, context) {
|
||||
function drawTargets(selection, graph, entities, filter) {
|
||||
var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
|
||||
var passive = entities.filter(function(d) {
|
||||
return context.activeIDs().indexOf(d.id) === -1;
|
||||
return d.id !== context.activeID();
|
||||
// return context.activeIDs().indexOf(d.id) === -1;
|
||||
});
|
||||
|
||||
var targets = selection.selectAll('.point.target')
|
||||
|
||||
@@ -183,13 +183,16 @@ export function svgVertices(projection, context) {
|
||||
|
||||
function drawTargets(selection, graph, entities, filter) {
|
||||
var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
|
||||
var passive = entities.filter(function(d) {
|
||||
return context.activeIDs().indexOf(d.id) === -1;
|
||||
});
|
||||
|
||||
// no targets for entities that are active, or adjacent to active.
|
||||
function passive(d) {
|
||||
return d.id !== context.activeID();
|
||||
}
|
||||
|
||||
var data = entities.filter(passive);
|
||||
var targets = selection.selectAll('.vertex.target')
|
||||
.filter(filter)
|
||||
.data(passive, function key(d) { return d.id; });
|
||||
.data(data, function key(d) { return d.id; });
|
||||
|
||||
// exit
|
||||
targets.exit()
|
||||
|
||||
Reference in New Issue
Block a user