diff --git a/client/scripts/grapher.js b/client/scripts/grapher.js index f643174..3fdc533 100644 --- a/client/scripts/grapher.js +++ b/client/scripts/grapher.js @@ -104,126 +104,9 @@ // Column // - function Column(canvas, name, params, scale, range, bounds) { - this.clearShapes = function() { - _.each(this.shapes, function(shape) { - this.canvas.remove(shape); - }); - - this.shapes = []; - }; - + function Column(canvas, name, params, scale, range) { this.updateShapes = function(final) { - this.columnBounds = this.getColumnBounds(this.bounds); - this.labelBounds = this.getLabelBounds(this.columnBounds); - this.hintBounds = this.getHintBounds(this.columnBounds); - this.fillBounds = this.getFillBounds(this.columnBounds); - this.handleBounds = this.getHandleBounds(this.columnBounds, this.fillBounds); - if (final) { - this.updateRect('boundsRect', { - left: this.columnBounds.left, - top: this.columnBounds.top, - width: this.columnBounds.width, - height: this.columnBounds.height, - stroke: this.strokeColor, - fill: this.emptyColor - }); - - this.updateRect('hintRect', { - left: this.hintBounds.left, - top: this.hintBounds.top, - width: this.hintBounds.width, - height: this.hintBounds.height, - stroke: this.strokeColor - }); - - this.hintRect.setGradient('fill', { - x1: 0.0, - y1: 0.0, - x2: 0.0, - y2: this.hintRect.height, - colorStops: this.decimateHints(this.steps, this.scale) - }); - - this.updateRect('labelRect', { - left: this.labelBounds.left, - top: this.labelBounds.top, - width: this.labelBounds.width, - height: this.labelBounds.height, - fill: this.strokeColor - }); - - this.updateText('label', this.name, { - left: this.fillBounds.left + this.fillBounds.width / 2, - top: this.labelBounds.top + this.labelBounds.height / 2, - fontSize: this.labelFontSize, - originX: 'center', - originY: 'center', - }); - } - - this.updateRect('fillRect', { - left: this.fillBounds.left, - top: this.fillBounds.top, - width: this.fillBounds.width, - height: this.fillBounds.height, - fill: this.getFillColor() - }); - - this.updateRect('handleRect', { - left: this.handleBounds.left, - top: this.handleBounds.top, - width: this.handleBounds.width, - height: this.handleBounds.height, - fill: this.getHandleColor() - }); - - if (final && this.range.containsPoint(0.0)) { - var y = this.getPosFromValue(0.0); - var p = [this.bounds.left, y, this.bounds.left + this.tickLength, y]; - this.updateLine('baseline', p, { - stroke: this.tickColor - }); - } - - this.canvas.renderAll(); - }; - - this.updateRect = function(name, args) { - // if (name in this) { - // this[name].set(args); - // } - // else { - // var rect = new fabric.Rect(args); - // this.canvas.add(rect); - // this.shapes.push(rect); - // this[name] = rect; - // } - }; - - this.updateText = function(name, str, args) { - // if (name in this) { - // this[name].set(args); - // } - // else { - // var text = new fabric.Text(str, args); - // this.canvas.add(text); - // this.shapes.push(text); - // this[name] = text; - // } - }; - - this.updateLine = function(name, points, args) { - // if (name in this) { - // this[name].set(args); - // } - // else { - // var line = new fabric.Line(points, args); - // this.canvas.add(line); - // this.shapes.push(line); - // this[name] = line; - // } }; this.decimateHints = function(steps, scale) { @@ -285,55 +168,6 @@ this.updateShapes(true); }; - this.getLabelBounds = function(bounds) { - return new Rect( - bounds.left, - bounds.top + bounds.height, - bounds.width, - this.labelSize - ); - }; - - this.getColumnBounds = function(bounds) { - return new Rect( - bounds.left + this.tickLength, - bounds.top, - bounds.width - this.tickLength, - bounds.height - this.labelSize - ); - }; - - this.getHintBounds = function(bounds) { - return new Rect( - bounds.left + bounds.width - this.hintSize, - bounds.top, - this.hintSize, - bounds.height - ); - }; - - this.getFillBounds = function(bounds) { - var y1 = this.getPosFromValue(0.0); - var y2 = this.getPosFromValue(this.value); - return new Rect( - bounds.left, - Math.min(y1, y2), - bounds.width - this.hintSize, - Math.abs(y1 - y2) - ); - }; - - this.getHandleBounds = function(bounds, fillBounds) { - var handleBounds = new Rect( - fillBounds.left, - this.getPosFromValue(this.value) - this.handleSize / 2, - fillBounds.width, - this.handleSize - ); - handleBounds.intersection(bounds); - return handleBounds; - }; - this.valueColorAdjust = function(color, offset) { var colorObj = tinycolor(color); var rangeEnd = this.value >= 0.0 ? this.range.end : this.range.start; @@ -353,105 +187,6 @@ return this.valueColorAdjust(color, this.desatOffset); }; - this.mouseDown = function(position) { - if (this.isGrabbing(position)) { - this.stateTransition(this.State.DRAG, position); - } - }; - - this.mouseUp = function(position) { - this.stateTransition( - this.isHovering(position) ? this.State.HOVER : this.State.NORMAL, - position - ); - }; - - this.mouseMove = function(position) { - switch (this.state) { - case this.State.NORMAL: - if (this.isHovering(position)) { - this.stateTransition(this.State.HOVER, position); - } - break; - case this.State.HOVER: - if (!this.isHovering(position)) { - this.stateTransition(this.State.NORMAL, position); - } - break; - } - - this.stateUpdate(position); - }; - - this.mouseOut = function(position) { - this.mouseUp(position); - }; - - this.mouseDoubleClick = function(position) { - if (this.isContained(position)) { - this.setClampedValue(this.getValueFromPos(position.y), true); - } - }; - - this.getValueFromPos = function(position) { - var percent = 1.0 - (position - this.columnBounds.top) / this.columnBounds.height; - return this.range.start + this.range.getLength() * percent; - }; - - this.getPosFromValue = function(value) { - var percent = 1.0 - (value - this.range.start) / this.range.getLength(); - var range = new Range(this.columnBounds.top, this.columnBounds.top + this.columnBounds.height); - return range.clamp(this.columnBounds.top + this.columnBounds.height * percent); - }; - - this.isHovering = function(position) { - return this.isGrabbing(position); - }; - - this.isGrabbing = function(position) { - return this.handleBounds.contains(position); - }; - - this.isContained = function(position) { - return this.columnBounds.contains(position); - }; - - this.stateUpdate = function(position) { - switch (this.state) { - case this.State.DRAG: - this.setClampedValue(this.getValueFromPos(position.y) + this.dragDelta, false); - break; - } - }; - - this.stateTransition = function(state, position) { - if (state == this.state) { - return; - } - - switch (this.state) { - case this.State.DRAG: - this.setClampedValue(this.getValueFromPos(position.y) + this.dragDelta, true); - /* falls through */ - case this.State.HOVER: - if (state == this.State.NORMAL) { - this.canvas.contextContainer.canvas.style.cursor = 'default'; - } - break; - } - - switch (state) { - case this.State.DRAG: - this.dragDelta = this.value - this.getValueFromPos(position.y); - /* falls through */ - case this.State.HOVER: - this.canvas.contextContainer.canvas.style.cursor = 'ns-resize'; - break; - } - - this.state = state; - }; - this.State = { NORMAL: 0, HOVER: 1, @@ -505,17 +240,14 @@ scale = this.getGlobalScale(hintData); } - var graphBounds = this.getGraphBounds(this.getCanvasBounds()); - var index = 0; - var that = this; + var that = this; _.each(columns, function(columnValue, columnName) { if (useLocalScale) { scale = that.getLocalScale(columnValue.hints); } - var columnBounds = that.getColumnBounds(graphBounds, index); - that.columns.push(new Column(that.canvas, columnName, columnValue, scale, that.range, columnBounds)); + that.columns.push(new Column(that.canvas, columnName, columnValue, scale, that.range)); that.indexMap[columnName] = index++; }); }; @@ -537,13 +269,11 @@ var that = this; _.each(data, function(entry, name) { - var index = that.getColumnIndex(name); - console.assert(index >= 0); - if (that.useLocalScale) { scale = that.getLocalScale(entry.hints); } + var index = that.getColumnIndex(name); var column = that.columns[index]; column.updateParams(entry, scale); }); @@ -606,7 +336,6 @@ }; this.getColumnIndex = function(name) { - console.assert(name in this.indexMap); return this.indexMap[name]; }; @@ -618,64 +347,6 @@ return _.pluck(this.columns, 'name'); }; - this.getCanvasBounds = function() { - return new Rect(0, 0, this.canvas.width - 1, this.canvas.height - 1); - }; - - this.getGraphBounds = function(bounds) { - return this.getCanvasBounds(); - }; - - this.getColumnBounds = function(bounds, index, count) { - var width = this.columnWidth + this.padding * 2; - return new Rect( - bounds.left + width * index + this.padding, - bounds.top, - this.columnWidth, - bounds.height - ); - }; - - this.getMousePos = function(e) { - var rect = e.target.getBoundingClientRect(); - return new Coord(e.clientX - rect.left, e.clientY - rect.top); - }; - - this.mouseDown = function(e) { - var position = this.grapher.getMousePos(e); - _.each(this.grapher.columns, function(column) { - column.mouseDown(position); - }); - }; - - this.mouseUp = function(e) { - var position = this.grapher.getMousePos(e); - _.each(this.grapher.columns, function(column) { - column.mouseUp(position); - }); - }; - - this.mouseMove = function(e) { - var position = this.grapher.getMousePos(e); - _.each(this.grapher.columns, function(column) { - column.mouseMove(position); - }); - }; - - this.mouseOut = function(e) { - var position = this.grapher.getMousePos(e); - _.each(this.grapher.columns, function(column) { - column.mouseOut(position); - }); - }; - - this.mouseDoubleClick = function(e) { - var position = this.grapher.getMousePos(e); - _.each(this.grapher.columns, function(column) { - column.mouseDoubleClick(position); - }); - }; - this.useLocalScale = useLocalScale; this.useRelativeScale = useRelativeScale; this.columnWidth = columnWidth; @@ -684,13 +355,5 @@ this.padding = 10; this.indexMap = {}; this.columns = []; - - var c = this.canvas.contextContainer.canvas; - c.addEventListener('mousedown', this.mouseDown, false); - c.addEventListener('mouseup', this.mouseUp, false); - c.addEventListener('mousemove', this.mouseMove, false); - c.addEventListener('mouseout', this.mouseOut, false); - c.addEventListener('dblclick', this.mouseDoubleClick, false); - c.grapher = this; }; }(window.grapher = window.grapher || {}));