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:
Bryan Housel
2017-12-19 11:23:35 -05:00
parent 563c496a65
commit 7994baae23
9 changed files with 63 additions and 30 deletions
+14 -5
View File
@@ -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;
};
+9 -6
View File
@@ -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();
};
+17 -8
View File
@@ -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;
};
+5 -2
View File
@@ -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()) || [];
};
+5 -2
View File
@@ -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;
+2 -1
View File
@@ -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')
+2 -1
View File
@@ -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')
+2 -1
View File
@@ -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')
+7 -4
View File
@@ -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()