playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add touch/tap configuration 

Add tap events to eventRects
pull/1688/head
James Garfield 10 years ago committed by Ændrew Rininsland
parent
353c770d6b
commit
375c7306b4
No known key found for this signature in database
GPG Key ID: ADBCD4C867F9B2DA
2 changed files with 96 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/config.js
  2. 121
      src/interaction.js

3
src/config.js
Unescape View File

@ -225,6 +225,9 @@ c3_chart_internal_fn.getDefaultConfig = function () {
left: 0
},
title_position: 'top-center',
//TouchEvent configuration
touch_tap_radius : 20, //touch movement must be less than this to be a 'tap'
touch_tap_delay : 500, //clicks are suppressed for this many ms after a tap
};
Object.keys(this.additionalConfig).forEach(function (key) {

121
src/interaction.js
Unescape View File

@ -109,7 +109,27 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
.attr("height", h);
};
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config;
var $$ = this, d3 = $$.d3, config = $$.config,
tap = false, tapX;
function click(shape, d) {
var index = d.index;
if ($$.hasArcType() || !$$.toggleShape) { return; }
if ($$.cancelClick) {
$$.cancelClick = false;
return;
}
if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(shape)[0] < $$.x($$.getXValue(d.id, index))) {
index -= 1;
}
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
$$.toggleShape(this, d, index);
$$.config.data_onclick.call($$.api, d, this);
}
});
}
eventRectEnter.append("rect")
.attr("class", $$.classEvent.bind($$))
.style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
@ -198,22 +218,34 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
});
})
.on('click', function (d) {
var index = d.index;
if ($$.hasArcType() || !$$.toggleShape) { return; }
if ($$.cancelClick) {
$$.cancelClick = false;
//click event was simulated via a 'tap' touch event, cancel regular click
if (tap) {
return;
}
if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
index -= 1;
}
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
$$.toggleShape(this, d, index);
$$.config.data_onclick.call($$.api, d, this);
click(this, d);
})
.on('touchstart', function(d) {
//store current X selection for comparison during touch end event
tapX = d.x;
})
.on('touchend', function(d) {
var finalX = d.x;
//If end is not the same as the start, event doesn't count as a tap
if (tapX !== finalX) {
return;
}
});
click(this, d);
//indictate tap event fired to prevent click;
tap = true;
setTimeout(function() { tap = false; }, config.touch_tap_delay);
})
.call(
config.data_selection_draggable && $$.drag ? (
d3.behavior.drag().origin(Object)
@ -225,7 +257,8 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
};
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config;
var $$ = this, d3 = $$.d3, config = $$.config,
tap = false, tapX, tapY;
function mouseout() {
$$.svg.select('.' + CLASS.eventRect).style('cursor', null);
@ -235,6 +268,25 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
$$.unexpandBars();
}
function click(shape) {
var targetsToShow = $$.filterTargetsToShow($$.data.targets);
var mouse, closest;
if ($$.hasArcType(targetsToShow)) { return; }
mouse = d3.mouse(shape);
closest = $$.findClosestFromTargets(targetsToShow, mouse);
if (! closest) { return; }
// select if selection enabled
if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
$$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this);
}
});
}
}
eventRectEnter.append('rect')
.attr('x', 0)
.attr('y', 0)
@ -297,22 +349,35 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
}
})
.on('click', function () {
var targetsToShow = $$.filterTargetsToShow($$.data.targets);
var mouse, closest;
if ($$.hasArcType(targetsToShow)) { return; }
mouse = d3.mouse(this);
closest = $$.findClosestFromTargets(targetsToShow, mouse);
if (! closest) { return; }
// select if selection enabled
if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
$$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this);
//click event was simulated via a 'tap' touch event, cancel regular click
if (tap) {
return;
}
});
click(this);
})
.on('touchstart', function(){
var mouse = d3.mouse(this);
//store starting coordinates for distance comparision during touch end event
tapX = mouse[0];
tapY = mouse[1];
})
.on('touchend', function(){
var mouse = d3.mouse(this),
x = mouse[0],
y = mouse[1];
//If end is too far from start, event doesn't count as a tap
if (Math.abs(x - tapX) > config.touch_tap_radius || Math.abs(y - tapY) > config.touch_tap_radius) {
return;
}
click(this);
//indictate tap event fired to prevent click;
tap = true;
setTimeout(function() { tap = false; }, config.touch_tap_delay);
})
.call(
config.data_selection_draggable && $$.drag ? (

Write Preview
Loading…
Cancel
Save