diff --git a/static/scripts/grapher.js b/static/scripts/grapher.js index 1938f5c..c667dae 100644 --- a/static/scripts/grapher.js +++ b/static/scripts/grapher.js @@ -70,25 +70,25 @@ // function Column(params) { - var _backdropColor = '#eeeeec'; var _borderColor = '#d3d7cf'; + var _bracketColorBg = '#ffffff'; + var _bracketColorFg = '#555753'; + var _bracketColorPt = '#2e3436'; + var _fillColorBg = '#eeeeec'; var _fillColorNeg = '#3465a4'; var _fillColorPos = '#cc0000'; var _panelColor = '#d3d7cf'; var _tickColor = '#d3d7cf'; - var _bracketBgColor = '#ffffff'; - var _bracketFgColor = '#555753'; - var _bracketPtColor = '#2e3436'; + var _anchorSize = 2; + var _bracketSize = 10; var _densitySize = 10; var _desatOffset = -0.3; + var _easeTime = 400; var _height = 500; var _padding = 10; var _panelSize = 20; - var _bracketSize = 10; - var _anchorSize = 2; var _width = 120; - var _easeTime = 400; var _animation = null; var _canvas = params.canvas; @@ -103,8 +103,8 @@ var _elements = {}; function createShapes() { - // backdrop - _elements.backdrop = _canvas.rect( + // indicatorBg + _elements.indicatorBg = _canvas.rect( _densitySize, 0, _width - (_bracketSize + _densitySize), @@ -112,7 +112,7 @@ ).attr({ cursor: 'crosshair', stroke: _borderColor, - fill: _backdropColor + fill: _fillColorBg }).click(clicked); // density @@ -142,7 +142,7 @@ _name ).attr({ 'dominant-baseline': 'middle', - 'text-anchor': 'middle' + 'text-anchor': 'middle' }); // indiciator @@ -165,9 +165,10 @@ } _elements.group = _canvas.group( - _elements.backdrop, + _elements.indicatorBg, _elements.indicator, _elements.density, + _elements.bracketBg, _elements.bracketPath, _elements.bracketMin, _elements.bracketMax, @@ -225,6 +226,18 @@ 'v' + ySize * 0.95 + 'Q' + xMax + ' ' + yMax + ',' + xMin + ' ' + yMax; + if (!_.has(_elements, 'bracketBg')) { + _elements.bracketBg = _canvas.rect( + _width - _bracketSize, + 0, + _bracketSize, + _height - _panelSize + ).attr({ + fill: _bracketColorBg, + cursor: 'ns-resize' + }); + } + if (_.has(_elements, 'bracketPath')) { _elements.bracketPath.attr({ visibility: visibility, @@ -234,9 +247,10 @@ else { _elements.bracketPath = _canvas.path(path).attr({ visibility: visibility, - fill: _bracketBgColor, + fill: _bracketColorBg, strokeWidth: 1, - stroke: _bracketFgColor, + stroke: _bracketColorFg, + cursor: 'ns-resize', 'stroke-dasharray': '5, 1' }); } @@ -254,7 +268,7 @@ _anchorSize ).attr({ visibility: visibility, - fill: _bracketPtColor + fill: _bracketColorPt }); } @@ -271,13 +285,13 @@ _anchorSize ).attr({ visibility: visibility, - fill: _bracketPtColor + fill: _bracketColorPt }); } } function updateDensity() { - var fill = _backdropColor; + var fill = _fillColorBg; if (_data.hints.length > 0) { fill = _canvas.gradient(blendHints()); } @@ -358,13 +372,13 @@ } function valueToIndicator(scalar) { - var box = _elements.backdrop.getBBox(); + var box = _elements.indicatorBg.getBBox(); var offset = _range.offset(scalar); return box.y + box.height * (1.0 - offset); } function indicatorToValue(scalar) { - var box = _elements.backdrop.getBBox(); + var box = _elements.indicatorBg.getBBox(); var range = new Range(box.y, box.y + box.height); return -_range.project(range.offset(scalar)); }