Fix spacedraw drawing, make clicking less touchy

(closes #3986)

Root cause was the vertex shadow strokes were too big, esp on endpoints.
For normal lines 16px stroke width centers on the line, but for vertices
it extends beyond the vertex radius, stealing clicks.

Also switched some "globals" to module variables in draw.js
This commit is contained in:
Bryan Housel
2017-04-26 16:37:15 -04:00
parent 5ca4246a6d
commit af31cf5eb5
2 changed files with 15 additions and 16 deletions
+1 -1
View File
@@ -83,7 +83,7 @@ g.midpoint .fill {
g.vertex .shadow,
g.midpoint .shadow {
stroke-width: 16;
stroke-width: 6;
fill: #f6634f;
fill-opacity: 0;
}
+14 -15
View File
@@ -7,9 +7,9 @@ import { geoChooseEdge, geoEuclideanDistance } from '../geo/index';
import { utilRebind } from '../util/rebind';
behaviorDraw.usedTails = {};
behaviorDraw.disableSpace = false;
behaviorDraw.lastSpace = null;
var usedTails = {};
var disableSpace = false;
var lastSpace = null;
export function behaviorDraw(context) {
@@ -24,8 +24,7 @@ export function behaviorDraw(context) {
closeTolerance = 4,
tolerance = 12,
mouseLeave = false,
lastMouse = null,
cached = behaviorDraw;
lastMouse = null;
function datum() {
@@ -126,21 +125,21 @@ export function behaviorDraw(context) {
function space() {
var currSpace = context.mouse();
if (cached.disableSpace && cached.lastSpace) {
var dist = geoEuclideanDistance(cached.lastSpace, currSpace);
if (disableSpace && lastSpace) {
var dist = geoEuclideanDistance(lastSpace, currSpace);
if (dist > tolerance) {
cached.disableSpace = false;
disableSpace = false;
}
}
if (cached.disableSpace || mouseLeave || !lastMouse) return;
if (disableSpace || mouseLeave || !lastMouse) return;
// user must move mouse or release space bar to allow another click
cached.lastSpace = currSpace;
cached.disableSpace = true;
lastSpace = currSpace;
disableSpace = true;
d3.select(window).on('keyup.space-block', function() {
cached.disableSpace = false;
disableSpace = false;
d3.select(window).on('keyup.space-block', null);
});
@@ -171,7 +170,7 @@ export function behaviorDraw(context) {
context.install(hover);
context.install(edit);
if (!context.inIntro() && !cached.usedTails[tail.text()]) {
if (!context.inIntro() && !usedTails[tail.text()]) {
context.install(tail);
}
@@ -201,9 +200,9 @@ export function behaviorDraw(context) {
context.uninstall(hover);
context.uninstall(edit);
if (!context.inIntro() && !cached.usedTails[tail.text()]) {
if (!context.inIntro() && !usedTails[tail.text()]) {
context.uninstall(tail);
cached.usedTails[tail.text()] = true;
usedTails[tail.text()] = true;
}
selection