Work in progress
This commit is contained in:
parent
273e4c34d8
commit
db7ad681ff
@ -83,7 +83,8 @@
|
|||||||
var _padding = 5;
|
var _padding = 5;
|
||||||
var _panelSize = 20;
|
var _panelSize = 20;
|
||||||
var _tickSize = 5;
|
var _tickSize = 5;
|
||||||
var _width = 100;
|
var _bracketSize = 10;
|
||||||
|
var _width = 120;
|
||||||
var _easeTime = 400;
|
var _easeTime = 400;
|
||||||
|
|
||||||
var _animation = null;
|
var _animation = null;
|
||||||
@ -100,41 +101,86 @@
|
|||||||
function createShapes() {
|
function createShapes() {
|
||||||
// backdrop
|
// backdrop
|
||||||
_elements.backdrop = _canvas.rect(
|
_elements.backdrop = _canvas.rect(
|
||||||
_tickSize, 0, _width - (_densitySize + _tickSize), _height - _panelSize
|
_tickSize,
|
||||||
).attr({cursor: 'crosshair', stroke: _borderColor, fill: _backdropColor}).click(clicked);
|
0,
|
||||||
|
_width - (_bracketSize + _densitySize + _tickSize),
|
||||||
|
_height - _panelSize
|
||||||
|
).attr({
|
||||||
|
cursor: 'crosshair',
|
||||||
|
stroke: _borderColor,
|
||||||
|
fill: _backdropColor
|
||||||
|
}).click(clicked);
|
||||||
|
|
||||||
// density
|
// density
|
||||||
_elements.density = _canvas.rect(
|
_elements.density = _canvas.rect(
|
||||||
_width - _densitySize, 0, _densitySize, _height - _panelSize
|
_width - (_densitySize + _bracketSize),
|
||||||
).attr({stroke: _borderColor});
|
0,
|
||||||
|
_densitySize,
|
||||||
|
_height - _panelSize
|
||||||
|
).attr({
|
||||||
|
stroke: _borderColor
|
||||||
|
});
|
||||||
|
|
||||||
|
// bracket
|
||||||
|
_elements.bracket = _canvas.rect(
|
||||||
|
_width - _bracketSize,
|
||||||
|
0,
|
||||||
|
_bracketSize,
|
||||||
|
_height - _panelSize
|
||||||
|
).attr({
|
||||||
|
fill: '#ff0000'
|
||||||
|
});
|
||||||
|
|
||||||
// panel
|
// panel
|
||||||
_elements.panel = _canvas.rect( _tickSize,
|
_elements.panel = _canvas.rect(
|
||||||
_height - _panelSize, _width - _tickSize, _panelSize
|
_tickSize,
|
||||||
).attr({fill: _panelColor});
|
_height - _panelSize,
|
||||||
|
_width - _tickSize,
|
||||||
|
_panelSize
|
||||||
|
).attr({
|
||||||
|
fill: _panelColor
|
||||||
|
});
|
||||||
|
|
||||||
// label
|
// label
|
||||||
_elements.label = _canvas.text(
|
_elements.label = _canvas.text(
|
||||||
_tickSize + (_width - _tickSize) / 2, _height - _panelSize / 2, _name
|
_tickSize + (_width - _tickSize) / 2,
|
||||||
).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
|
_height - _panelSize / 2,
|
||||||
|
_name
|
||||||
|
).attr({
|
||||||
|
'dominant-baseline': 'middle',
|
||||||
|
'text-anchor': 'middle'
|
||||||
|
});
|
||||||
|
|
||||||
// indicator
|
// indicator
|
||||||
var range = computeIndicatorRange(_data.value);
|
var range = computeIndicatorRange(_data.value);
|
||||||
_elements.indicator = _canvas.rect(
|
_elements.indicator = _canvas.rect(
|
||||||
_tickSize, range.min, _width - (_densitySize + _tickSize), (range.max - range.min)
|
_tickSize,
|
||||||
).attr({cursor: 'crosshair', fill: computeIndicatorColor(_data.value)}).click(clicked);
|
range.min,
|
||||||
|
_width - (_densitySize + _tickSize),
|
||||||
|
(range.max - range.min)
|
||||||
|
).attr({
|
||||||
|
cursor: 'crosshair',
|
||||||
|
fill: computeIndicatorColor(_data.value)
|
||||||
|
}).click(clicked);
|
||||||
|
|
||||||
// tick
|
// tick
|
||||||
if (_range.contains(0.0)) {
|
if (_range.contains(0.0)) {
|
||||||
var origin = valueToIndicator(0.0);
|
var origin = valueToIndicator(0.0);
|
||||||
_elements.tick = _canvas.line(0, origin, _width - _densitySize, origin
|
_elements.tick = _canvas.line(
|
||||||
).attr({stroke: _tickColor});
|
0,
|
||||||
|
origin,
|
||||||
|
_width - _densitySize,
|
||||||
|
origin
|
||||||
|
).attr({
|
||||||
|
stroke: _tickColor
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
_elements.group = _canvas.group(
|
_elements.group = _canvas.group(
|
||||||
_elements.backdrop,
|
_elements.backdrop,
|
||||||
_elements.indicator,
|
_elements.indicator,
|
||||||
_elements.density,
|
_elements.density,
|
||||||
|
_elements.bracket,
|
||||||
_elements.panel,
|
_elements.panel,
|
||||||
_elements.tick,
|
_elements.tick,
|
||||||
_elements.label
|
_elements.label
|
||||||
|
Loading…
Reference in New Issue
Block a user