in toolkit/jb/svg.js [253:316]
init: function(parent, valueIn) {
var hand, handGhost, face, text;
var submit = Kefir.emitter();
d3.select(parent)
.call(function(bodyGroup) {
face = bodyGroup.append('circle').attr('r', conf.radius)
.style('fill', 'rgba(200, 200, 200, .2)')
.style('stroke-width', 2)
.style('stroke', '#000');
handGhost = bodyGroup.append('line')
.style('visibility', 'hidden')
.attr('x1', 0).attr('y1', 0)
.attr('x2', 0).attr('y2', conf.radius - 1)
.style('stroke-width', 2)
.style('stroke', 'rgba(255,255,255,0.1)');
hand = bodyGroup.append('line')
.attr('x1', 0).attr('y1', 0)
.attr('x2', 0).attr('y2', conf.radius)
.style('stroke-width', 2)
.style('stroke', '#000');
text = bodyGroup.append('text')
.style('text-anchor', 'middle')
.style('fill', '#fff')
.text(0);
});
Kefir.fromEvents(parent, 'mousedown')
.map(stopPropagation)
.flatMap(function() {
if (conf.showGhost) handGhost.style('visibility', 'visible');
var values =
Kefir.fromEvents(document.body, 'mousemove')
//.throttle(16)
.takeUntilBy(Kefir.fromEvents(document.body, 'mouseup'))
.map(stopPropagation)
.map(function(event) {
var faceRect = face.node().getBoundingClientRect();
return { x: event.clientX - (faceRect.left + conf.radius),
y: event.clientY - (faceRect.top + conf.radius) };
})
.map(function(coords) {
var value = ((coords.y * conf.speed * -1) + 180) / 360;
if (value < 0) {
value = 0;
} else if (value > 1) {
value = 1;
}
return value;
});
values.last().onValue(function(val) {
lastValue = val;
handGhost.attr('transform', 'rotate(' + adaptAngle(state, lastValue) + ')')
.style('visibility', 'hidden');
submit.emit(lastValue);
});
return values;
})
.merge(valueIn || Kefir.never())
.onValue(function(value) {
var valueText = Math.floor(value * 100) / 100;
text.text(conf.adaptValue ? conf.adaptValue(valueText) : valueText);
hand.attr('transform', 'rotate(' + adaptAngle(state, value) + ')');
});
return submit.merge(valueIn ? valueIn : Kefir.never());
}