[llvm-commits] [zorg] r110918 - in /zorg/trunk/lnt/lnt/viewer/js: View2D.js View2DTest.html
Daniel Dunbar
daniel at zuster.org
Thu Aug 12 09:03:30 PDT 2010
Author: ddunbar
Date: Thu Aug 12 11:03:30 2010
New Revision: 110918
URL: http://llvm.org/viewvc/llvm-project?rev=110918&view=rev
Log:
lnt/View2D: Rewrite in pure JS.
Modified:
zorg/trunk/lnt/lnt/viewer/js/View2D.js
zorg/trunk/lnt/lnt/viewer/js/View2DTest.html
Modified: zorg/trunk/lnt/lnt/viewer/js/View2D.js
URL: http://llvm.org/viewvc/llvm-project/zorg/trunk/lnt/lnt/viewer/js/View2D.js?rev=110918&r1=110917&r2=110918&view=diff
==============================================================================
--- zorg/trunk/lnt/lnt/viewer/js/View2D.js (original)
+++ zorg/trunk/lnt/lnt/viewer/js/View2D.js Thu Aug 12 11:03:30 2010
@@ -8,15 +8,12 @@
//===----------------------------------------------------------------------===//
//
// This file implements a generic 2D view widget and a 2D graph widget on top of
-// it, using the HTML5 Canvas. It currently supports Firefox and Safari
-// (Chromium should work, but is untested).
+// it, using the HTML5 Canvas. It currently supports Chrome, Firefox, and
+// Safari.
//
// See the Graph2D implementation for details of how to extend the View2D
// object.
//
-// FIXME: Currently, this uses MooTools extensions, but I would like to rewrite
-// it in pure JS for more portability (e.g., use in Buildbot).
-//
//===----------------------------------------------------------------------===//
function lerp(a, b, t) {
@@ -132,772 +129,806 @@
return "rgb(" + norm[0] + "," + norm[1] + "," + norm[2] + "," + col[3] + ")";
}
-var ViewData = new Class ({
- initialize: function(location, scale) {
- if (!location)
- location = [0, 0];
- if (!scale)
- scale = [1, 1];
+/* ViewData Class */
- this.location = location;
- this.scale = scale;
- },
+function ViewData(location, scale) {
+ if (!location)
+ location = [0, 0];
+ if (!scale)
+ scale = [1, 1];
- copy: function() {
- return new ViewData(this.location, this.scale);
- },
-});
+ this.location = location;
+ this.scale = scale;
+}
-var ViewAction = new Class ({
- initialize: function(mode, v2d, start) {
- this.mode = mode;
- this.start = start;
- this.vd = v2d.viewData.copy();
- },
+ViewData.prototype.copy = function() {
+ return new ViewData(this.location, this.scale);
+}
- update: function(v2d, co) {
- if (this.mode == 'p') {
- var delta = vec2_sub(v2d.convertClientToNDC(co, this.vd),
- v2d.convertClientToNDC(this.start, this.vd))
- v2d.viewData.location = vec2_add(this.vd.location, delta);
- } else {
- var delta = vec2_sub(v2d.convertClientToNDC(co, this.vd),
- v2d.convertClientToNDC(this.start, this.vd))
- v2d.viewData.scale = vec2_Npow(Math.E,
- vec2_addN(vec2_log(this.vd.scale),
- delta[1]))
- v2d.viewData.location = vec2_mul(this.vd.location,
- vec2_div(v2d.viewData.scale,
- this.vd.scale))
- }
+/* ViewAction Class */
+function ViewAction(mode, v2d, start) {
+ this.mode = mode;
+ this.start = start;
+ this.vd = v2d.viewData.copy();
+}
- v2d.refresh();
- },
+ViewAction.prototype.update = function(v2d, co) {
+ if (this.mode == 'p') {
+ var delta = vec2_sub(v2d.convertClientToNDC(co, this.vd),
+ v2d.convertClientToNDC(this.start, this.vd))
+ v2d.viewData.location = vec2_add(this.vd.location, delta);
+ } else {
+ var delta = vec2_sub(v2d.convertClientToNDC(co, this.vd),
+ v2d.convertClientToNDC(this.start, this.vd))
+ v2d.viewData.scale = vec2_Npow(Math.E,
+ vec2_addN(vec2_log(this.vd.scale),
+ delta[1]))
+ v2d.viewData.location = vec2_mul(this.vd.location,
+ vec2_div(v2d.viewData.scale,
+ this.vd.scale))
+ }
- complete: function(v2d, co) {
- this.update(v2d, co);
- },
+ v2d.refresh();
+}
- abort: function(v2d) {
- v2d.viewData = this.vd;
- },
-});
+ViewAction.prototype.complete = function(v2d, co) {
+ this.update(v2d, co);
+}
-var View2D = new Class ({
- initialize: function(canvasname) {
- this.canvasname = canvasname
- this.viewData = new ViewData();
- this.size = [1, 1];
- this.aspect = 1;
- this.registered = false;
-
- this.viewAction = null;
-
- this.useWidgets = true;
- this.previewPosition = [5, 5];
- this.previewSize = [60, 60];
+ViewAction.prototype.abort = function(v2d) {
+ v2d.viewData = this.vd;
+}
- this.clearColor = [1, 1, 1];
+/* EventWrapper Class */
- // Bound once registered.
- this.canvas = null;
- },
+function EventWrapper(domevent) {
+ this.domevent = domevent;
+ this.client = {
+ x: domevent.clientX,
+ y: domevent.clientY,
+ };
+ this.alt = domevent.altKey;
+ this.shift = domevent.shiftKey;
+ this.meta = domevent.metaKey;
+ this.wheel = (domevent.wheelDelta) ? domevent.wheelDelta / 120 : -(domevent.detail || 0) / 3;
+}
- registerEvents: function(canvas) {
- if (this.registered)
- return;
+EventWrapper.prototype.stop = function() {
+ this.domevent.stopPropagation();
+ this.domevent.preventDefault();
+}
- this.registered = true;
+/* View2D Class */
- this.canvas = canvas;
+function View2D(canvasname) {
+ this.canvasname = canvasname;
+ this.viewData = new ViewData();
+ this.size = [1, 1];
+ this.aspect = 1;
+ this.registered = false;
- // FIXME: Why do I have to do this?
- var obj = this;
+ this.viewAction = null;
- canvas.addEvent('mousedown', function(event) { obj.onMouseDown(event); })
- canvas.addEvent('mousemove', function(event) { obj.onMouseMove(event); })
- canvas.addEvent('mouseup', function(event) { obj.onMouseUp(event); })
- canvas.addEvent('mousewheel', function(event) { obj.onMouseWheel(event); })
+ this.useWidgets = true;
+ this.previewPosition = [5, 5];
+ this.previewSize = [60, 60];
- // FIXME: Capturing!
- },
+ this.clearColor = [1, 1, 1];
- onMouseDown: function(event) {
- pos = [event.client.x - this.canvas.offsetLeft,
- this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
+ // Bound once registered.
+ this.canvas = null;
+}
- if (this.viewAction != null)
- this.viewAction.abort(this);
+View2D.prototype.registerEvents = function(canvas) {
+ if (this.registered)
+ return;
- if (event.shift)
- this.viewAction = new ViewAction('p', this, pos);
- else if (event.alt || event.meta)
- this.viewAction = new ViewAction('z', this, pos);
- event.stop();
- },
- onMouseMove: function(event) {
- pos = [event.client.x - this.canvas.offsetLeft,
- this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
-
- if (this.viewAction != null)
- this.viewAction.update(this, pos);
- event.stop();
- },
- onMouseUp: function(event) {
- pos = [event.client.x - this.canvas.offsetLeft,
- this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
-
- if (this.viewAction != null)
- this.viewAction.complete(this, pos);
- this.viewAction = null;
- event.stop();
- },
- onMouseWheel: function(event) {
- if (this.viewAction == null) {
- var factor = event.wheel;
- if (event.shift)
- factor *= .1;
- var zoom = 1.0 + .03 * factor;
- this.viewData.location = vec2_mulN(this.viewData.location, zoom);
- this.viewData.scale = vec2_mulN(this.viewData.scale, zoom);
- this.refresh();
- }
- event.stop();
- },
+ this.registered = true;
- setViewData: function(vd) {
- // FIXME: Check equality and avoid refresh.
- this.viewData = vd;
+ this.canvas = canvas;
+
+ // FIXME: Why do I have to do this?
+ var obj = this;
+
+ canvas.onmousedown = function(event) { obj.onMouseDown(new EventWrapper(event)); };
+ canvas.onmousemove = function(event) { obj.onMouseMove(new EventWrapper(event)); };
+ canvas.onmouseup = function(event) { obj.onMouseUp(new EventWrapper(event)); };
+ canvas.onmousewheel = function(event) { obj.onMouseWheel(new EventWrapper(event)); };
+ if (canvas.addEventListener) {
+ canvas.addEventListener('DOMMouseScroll', function(event) { obj.onMouseWheel(new EventWrapper(event)); }, false);
+ }
+
+ // FIXME: Capturing!
+}
+
+View2D.prototype.onMouseDown = function(event) {
+ pos = [event.client.x - this.canvas.offsetLeft,
+ this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
+
+ if (this.viewAction != null)
+ this.viewAction.abort(this);
+
+ if (event.shift)
+ this.viewAction = new ViewAction('p', this, pos);
+ else if (event.alt || event.meta)
+ this.viewAction = new ViewAction('z', this, pos);
+ event.stop();
+}
+
+View2D.prototype.onMouseMove = function(event) {
+ pos = [event.client.x - this.canvas.offsetLeft,
+ this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
+
+ if (this.viewAction != null)
+ this.viewAction.update(this, pos);
+ event.stop();
+}
+
+View2D.prototype.onMouseUp = function(event) {
+ pos = [event.client.x - this.canvas.offsetLeft,
+ this.size[1] - 1 - (event.client.y - this.canvas.offsetTop)];
+
+ if (this.viewAction != null)
+ this.viewAction.complete(this, pos);
+ this.viewAction = null;
+ event.stop();
+}
+
+View2D.prototype.onMouseWheel = function(event) {
+ if (this.viewAction == null) {
+ var factor = event.wheel;
+ if (event.shift)
+ factor *= .1;
+ var zoom = 1.0 + .03 * factor;
+ this.viewData.location = vec2_mulN(this.viewData.location, zoom);
+ this.viewData.scale = vec2_mulN(this.viewData.scale, zoom);
this.refresh();
- },
+ }
+ event.stop();
+}
- refresh: function() {
- // FIXME: Event loop?
- this.draw();
- },
+View2D.prototype.setViewData = function(vd) {
+ // FIXME: Check equality and avoid refresh.
+ this.viewData = vd;
+ this.refresh();
+}
- // Coordinate conversion.
+View2D.prototype.refresh = function() {
+ // FIXME: Event loop?
+ this.draw();
+}
- getAspectScale: function() {
- if (this.aspect > 1) {
- return [1.0 / this.aspect, 1.0];
- } else {
- return [1.0, this.aspect];
- }
- },
+// Coordinate conversion.
- getPixelSize: function() {
- return vec2_sub(this.convertClientToWorld([1,1]),
- this.convertClientToWorld([0,0]));
- },
+View2D.prototype.getAspectScale = function() {
+ if (this.aspect > 1) {
+ return [1.0 / this.aspect, 1.0];
+ } else {
+ return [1.0, this.aspect];
+ }
+}
- convertClientToNDC: function(pt, vd) {
- if (vd == null)
- vd = this.viewData
- return [pt[0] / this.size[0] * 2 - 1,
- pt[1] / this.size[1] * 2 - 1];
- },
+View2D.prototype.getPixelSize = function() {
+ return vec2_sub(this.convertClientToWorld([1,1]),
+ this.convertClientToWorld([0,0]));
+}
- convertClientToWorld: function(pt, vd) {
- if (vd == null)
- vd = this.viewData
- pt = this.convertClientToNDC(pt, vd)
- pt = vec2_sub(pt, vd.location);
- pt = vec2_div(pt, vec2_mul(vd.scale, this.getAspectScale()));
- return pt;
- },
+View2D.prototype.convertClientToNDC = function(pt, vd) {
+ if (vd == null)
+ vd = this.viewData
+ return [pt[0] / this.size[0] * 2 - 1,
+ pt[1] / this.size[1] * 2 - 1];
+}
- convertWorldToPreview: function(pt, pos, size) {
- var asp_scale = this.getAspectScale();
- pt = vec2_mul(pt, asp_scale);
- pt = vec2_addN(pt, 1);
- pt = vec2_mulN(pt, .5);
- pt = vec2_mul(pt, size);
- pt = vec2_add(pt, pos);
- return pt;
- },
+View2D.prototype.convertClientToWorld = function(pt, vd) {
+ if (vd == null)
+ vd = this.viewData
+ pt = this.convertClientToNDC(pt, vd)
+ pt = vec2_sub(pt, vd.location);
+ pt = vec2_div(pt, vec2_mul(vd.scale, this.getAspectScale()));
+ return pt;
+}
- setViewMatrix: function(ctx) {
- ctx.scale(this.size[0], this.size[1]);
- ctx.scale(.5, .5);
- ctx.translate(1, 1);
- ctx.translate(this.viewData.location[0], this.viewData.location[1]);
- var scale = vec2_mul(this.viewData.scale, this.getAspectScale());
- ctx.scale(scale[0], scale[1]);
- },
+View2D.prototype.convertWorldToPreview = function(pt, pos, size) {
+ var asp_scale = this.getAspectScale();
+ pt = vec2_mul(pt, asp_scale);
+ pt = vec2_addN(pt, 1);
+ pt = vec2_mulN(pt, .5);
+ pt = vec2_mul(pt, size);
+ pt = vec2_add(pt, pos);
+ return pt;
+}
- setPreviewMatrix: function(ctx, pos, size) {
- ctx.translate(pos[0], pos[1]);
- ctx.scale(size[0], size[1]);
- ctx.scale(.5, .5);
- ctx.translate(1, 1);
- var scale = this.getAspectScale();
- ctx.scale(scale[0], scale[1]);
- },
+View2D.prototype.setViewMatrix = function(ctx) {
+ ctx.scale(this.size[0], this.size[1]);
+ ctx.scale(.5, .5);
+ ctx.translate(1, 1);
+ ctx.translate(this.viewData.location[0], this.viewData.location[1]);
+ var scale = vec2_mul(this.viewData.scale, this.getAspectScale());
+ ctx.scale(scale[0], scale[1]);
+}
- setWindowMatrix: function(ctx) {
- ctx.translate(.5, .5);
- ctx.translate(0, this.size[1]);
- ctx.scale(1, -1);
- },
+View2D.prototype.setPreviewMatrix = function(ctx, pos, size) {
+ ctx.translate(pos[0], pos[1]);
+ ctx.scale(size[0], size[1]);
+ ctx.scale(.5, .5);
+ ctx.translate(1, 1);
+ var scale = this.getAspectScale();
+ ctx.scale(scale[0], scale[1]);
+}
- draw: function() {
- var canvas = document.getElementById(this.canvasname);
- var ctx = canvas.getContext("2d");
-
- this.registerEvents(canvas);
-
- if (canvas.width != this.size[0] || canvas.height != this.size[1]) {
- this.size = [canvas.width, canvas.height];
- this.aspect = canvas.width / canvas.height;
- this.previewPosition[0] = this.size[0] - this.previewSize[0] - 5;
- this.on_size_change();
- }
+View2D.prototype.setWindowMatrix = function(ctx) {
+ ctx.translate(.5, .5);
+ ctx.translate(0, this.size[1]);
+ ctx.scale(1, -1);
+}
- this.on_draw_start();
+View2D.prototype.draw = function() {
+ var canvas = document.getElementById(this.canvasname);
+ var ctx = canvas.getContext("2d");
- ctx.save();
+ this.registerEvents(canvas);
- // Clear and draw the view content.
- ctx.save();
- this.setWindowMatrix(ctx);
+ if (canvas.width != this.size[0] || canvas.height != this.size[1]) {
+ this.size = [canvas.width, canvas.height];
+ this.aspect = canvas.width / canvas.height;
+ this.previewPosition[0] = this.size[0] - this.previewSize[0] - 5;
+ this.on_size_change();
+ }
- ctx.clearRect(0, 0, this.size[0], this.size[1]);
- ctx.fillStyle = col3_to_rgb(this.clearColor);
- ctx.fillRect(0, 0, this.size[0], this.size[1]);
+ this.on_draw_start();
- this.setViewMatrix(ctx);
- this.on_draw(canvas, ctx);
- ctx.restore();
+ ctx.save();
- if (this.useWidgets)
- this.drawPreview(canvas, ctx)
+ // Clear and draw the view content.
+ ctx.save();
+ this.setWindowMatrix(ctx);
- ctx.restore();
- },
+ ctx.clearRect(0, 0, this.size[0], this.size[1]);
+ ctx.fillStyle = col3_to_rgb(this.clearColor);
+ ctx.fillRect(0, 0, this.size[0], this.size[1]);
- drawPreview: function(canvas, ctx) {
- // Setup the preview context.
- this.setWindowMatrix(ctx);
-
- // Draw the preview area outline.
- ctx.fillStyle = "rgba(128,128,128,.5)";
- ctx.fillRect(this.previewPosition[0]-1, this.previewPosition[1]-1,
- this.previewSize[0]+2, this.previewSize[1]+2);
- ctx.lineWidth = 1;
- ctx.strokeStyle = "rgb(0,0,0)";
- ctx.strokeRect(this.previewPosition[0]-1, this.previewPosition[1]-1,
- this.previewSize[0]+2, this.previewSize[1]+2);
-
- // Compute the aspect corrected preview area.
- var pv_size = [this.previewSize[0], this.previewSize[1]];
- if (this.aspect > 1) {
- pv_size[1] /= this.aspect;
- } else {
- pv_size[0] *= this.aspect;
- }
- var pv_pos = vec2_add(this.previewPosition,
- vec2_mulN(vec2_sub(this.previewSize, pv_size), .5));
+ this.setViewMatrix(ctx);
+ this.on_draw(canvas, ctx);
+ ctx.restore();
- // Draw the preview, making sure to clip to the proper area.
- ctx.save();
- ctx.beginPath();
- ctx.rect(pv_pos[0], pv_pos[1], pv_size[0], pv_size[1]);
- ctx.clip();
- ctx.closePath();
+ if (this.useWidgets)
+ this.drawPreview(canvas, ctx)
- this.setPreviewMatrix(ctx, pv_pos, pv_size);
- this.on_draw_preview(canvas, ctx);
- ctx.restore();
+ ctx.restore();
+}
- // Draw the current view overlay.
- //
- // FIXME: Find a replacement for stippling.
- ll = this.convertClientToWorld([0, 0])
- ur = this.convertClientToWorld(this.size);
-
- // Convert to pixel coordinates instead of drawing in content
- // perspective.
- ll = vec2_floor(this.convertWorldToPreview(ll, pv_pos, pv_size))
- ur = vec2_ceil(this.convertWorldToPreview(ur, pv_pos, pv_size))
- ll = vec2_clamp(ll, this.previewPosition,
- vec2_add(this.previewPosition, this.previewSize))
- ur = vec2_clamp(ur, this.previewPosition,
- vec2_add(this.previewPosition, this.previewSize))
-
- ctx.strokeStyle = "rgba(128,128,128,255)";
- ctx.lineWidth = 1;
- ctx.strokeRect(ll[0], ll[1], ur[0] - ll[0], ur[1] - ll[1]);
- },
+View2D.prototype.drawPreview = function(canvas, ctx) {
+ // Setup the preview context.
+ this.setWindowMatrix(ctx);
- on_size_change: function() {},
- on_draw_start: function() {},
- on_draw: function(canvas, ctx) {},
- on_draw_preview: function(canvas, ctx) {},
-});
-
-var View2DTest = new Class ({
- Extends: View2D,
-
- on_draw: function(canvas, ctx) {
- ctx.fillStyle = "rgb(255,255,255)";
- ctx.fillRect(-1000, -1000, 2000, 20000);
-
- ctx.lineWidth = .01;
- ctx.strokeTyle = "rgb(0,200,0)";
- ctx.strokeRect(-1, -1, 2, 2);
+ // Draw the preview area outline.
+ ctx.fillStyle = "rgba(128,128,128,.5)";
+ ctx.fillRect(this.previewPosition[0]-1, this.previewPosition[1]-1,
+ this.previewSize[0]+2, this.previewSize[1]+2);
+ ctx.lineWidth = 1;
+ ctx.strokeStyle = "rgb(0,0,0)";
+ ctx.strokeRect(this.previewPosition[0]-1, this.previewPosition[1]-1,
+ this.previewSize[0]+2, this.previewSize[1]+2);
- ctx.fillStyle = "rgb(200,0,0)";
- ctx.fillRect(-.8, -.8, 1, 1);
+ // Compute the aspect corrected preview area.
+ var pv_size = [this.previewSize[0], this.previewSize[1]];
+ if (this.aspect > 1) {
+ pv_size[1] /= this.aspect;
+ } else {
+ pv_size[0] *= this.aspect;
+ }
+ var pv_pos = vec2_add(this.previewPosition,
+ vec2_mulN(vec2_sub(this.previewSize, pv_size), .5));
- ctx.fillStyle = "rgb(0,0,200)";
- ctx.beginPath();
- ctx.arc(0, 0, .5, 0, 2 * Math.PI, false);
- ctx.fill();
- ctx.closePath();
- },
+ // Draw the preview, making sure to clip to the proper area.
+ ctx.save();
+ ctx.beginPath();
+ ctx.rect(pv_pos[0], pv_pos[1], pv_size[0], pv_size[1]);
+ ctx.clip();
+ ctx.closePath();
- on_draw_preview: function(canvas, ctx) {
- ctx.fillStyle = "rgba(255,255,255,.4)";
- ctx.fillRect(-1000, -1000, 2000, 20000);
-
- ctx.lineWidth = .01;
- ctx.strokeTyle = "rgba(0,200,0,.4)";
- ctx.strokeRect(-1, -1, 2, 2);
+ this.setPreviewMatrix(ctx, pv_pos, pv_size);
+ this.on_draw_preview(canvas, ctx);
+ ctx.restore();
- ctx.fillStyle = "rgba(200,0,0,.4)";
- ctx.fillRect(-.8, -.8, 1, 1);
+ // Draw the current view overlay.
+ //
+ // FIXME: Find a replacement for stippling.
+ ll = this.convertClientToWorld([0, 0])
+ ur = this.convertClientToWorld(this.size);
- ctx.fillStyle = "rgba(0,0,200,.4)";
- ctx.beginPath();
- ctx.arc(0, 0, .5, 0, 2 * Math.PI, false);
- ctx.fill();
- ctx.closePath();
- },
-});
+ // Convert to pixel coordinates instead of drawing in content
+ // perspective.
+ ll = vec2_floor(this.convertWorldToPreview(ll, pv_pos, pv_size))
+ ur = vec2_ceil(this.convertWorldToPreview(ur, pv_pos, pv_size))
+ ll = vec2_clamp(ll, this.previewPosition,
+ vec2_add(this.previewPosition, this.previewSize))
+ ur = vec2_clamp(ur, this.previewPosition,
+ vec2_add(this.previewPosition, this.previewSize))
-var Graph2D_GraphInfo = new Class ({
- initialize: function() {
- this.xAxisH = 0;
- this.yAxisW = 0;
- this.ll = [0, 0];
- this.ur = [1, 1];
- },
+ ctx.strokeStyle = "rgba(128,128,128,255)";
+ ctx.lineWidth = 1;
+ ctx.strokeRect(ll[0], ll[1], ur[0] - ll[0], ur[1] - ll[1]);
+}
- toNDC: function(pt) {
- return [2 * (pt[0] - this.ll[0]) / (this.ur[0] - this.ll[0]) - 1,
- 2 * (pt[1] - this.ll[1]) / (this.ur[1] - this.ll[1]) - 1];
- },
+View2D.prototype.on_size_change = function() {}
+View2D.prototype.on_draw_start = function() {}
+View2D.prototype.on_draw = function(canvas, ctx) {}
+View2D.prototype.on_draw_preview = function(canvas, ctx) {}
- fromNDC: function(pt) {
- return [this.ll[0] + (this.ur[0] - this.ll[0]) * (pt[0] + 1) * .5,
- this.ll[1] + (this.ur[1] - this.ll[1]) * (pt[1] + 1) * .5];
- },
-});
+/* View2DTest Class */
-var Graph2D_PlotStyle = new Class ({
- initialize: function() {},
+function View2DTest(canvasname) {
+ View2D.call(this, canvasname);
+}
+View2DTest.prototype = new View2D();
+View2DTest.prototype.constructor = View2DTest;
- plot: function(graph, ctx, data) {},
-});
+View2DTest.prototype.on_draw = function(canvas, ctx) {
+ ctx.fillStyle = "rgb(255,255,255)";
+ ctx.fillRect(-1000, -1000, 2000, 20000);
-var Graph2D_LinePlotStyle = new Class ({
- Extends: Graph2D_PlotStyle,
-
- initialize: function(width, color) {
- if (!width)
- width = 1;
- if (!color)
- color = [0,0,0];
-
- this.parent();
- this.width = width;
- this.color = color;
- },
+ ctx.lineWidth = .01;
+ ctx.strokeTyle = "rgb(0,200,0)";
+ ctx.strokeRect(-1, -1, 2, 2);
- plot: function(graph, ctx, data) {
- if (data.length === 0)
- return;
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect(-.8, -.8, 1, 1);
- ctx.beginPath();
- var co = graph.graphInfo.toNDC(data[0]);
- ctx.moveTo(co[0], co[1]);
- for (var i = 1, e = data.length; i != e; ++i) {
- var co = graph.graphInfo.toNDC(data[i]);
- ctx.lineTo(co[0], co[1]);
- }
- ctx.lineWidth = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
- ctx.strokeStyle = col3_to_rgb(this.color);
- ctx.stroke();
- },
-});
+ ctx.fillStyle = "rgb(0,0,200)";
+ ctx.beginPath();
+ ctx.arc(0, 0, .5, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.closePath();
+}
-var Graph2D_PointPlotStyle = new Class ({
- Extends: Graph2D_PlotStyle,
+View2DTest.prototype.on_draw_preview = function(canvas, ctx) {
+ ctx.fillStyle = "rgba(255,255,255,.4)";
+ ctx.fillRect(-1000, -1000, 2000, 20000);
- initialize: function(width, color) {
- if (!width)
- width = 1;
- if (!color)
- color = [0,0,0];
-
- this.parent();
- this.width = width;
- this.color = color;
- },
+ ctx.lineWidth = .01;
+ ctx.strokeTyle = "rgba(0,200,0,.4)";
+ ctx.strokeRect(-1, -1, 2, 2);
- plot: function(graph, ctx, data) {
- if (data.length === 0)
- return;
+ ctx.fillStyle = "rgba(200,0,0,.4)";
+ ctx.fillRect(-.8, -.8, 1, 1);
- ctx.beginPath();
- var radius = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
- for (var i = 0, e = data.length; i != e; ++i) {
- var co = graph.graphInfo.toNDC(data[i]);
- ctx.moveTo(co[0], co[1]);
- ctx.arc(co[0], co[1], radius, 0, Math.PI * 2, /*anticlockwise=*/false);
- }
- ctx.fillStyle = col3_to_rgb(this.color);
- ctx.fill();
- },
-});
+ ctx.fillStyle = "rgba(0,0,200,.4)";
+ ctx.beginPath();
+ ctx.arc(0, 0, .5, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.closePath();
+}
-var Graph2D_ErrorBarPlotStyle = new Class ({
- Extends: Graph2D_PlotStyle,
+/* Graph2D_GraphInfo Class */
- initialize: function(width, color) {
- if (!width)
- width = 1;
- if (!color)
- color = [0,0,0];
-
- this.parent();
- this.width = width;
- this.color = color;
- },
+function Graph2D_GraphInfo() {
+ this.xAxisH = 0;
+ this.yAxisW = 0;
+ this.ll = [0, 0];
+ this.ur = [1, 1];
+}
- plot: function(graph, ctx, data) {
- if (data.length === 0)
- return;
+Graph2D_GraphInfo.prototype.toNDC = function(pt) {
+ return [2 * (pt[0] - this.ll[0]) / (this.ur[0] - this.ll[0]) - 1,
+ 2 * (pt[1] - this.ll[1]) / (this.ur[1] - this.ll[1]) - 1];
+}
- ctx.beginPath();
- for (var i = 0, e = data.length; i != e; ++i) {
- var co_min = graph.graphInfo.toNDC([data[i][0], data[i][1]]);
- var co_max = graph.graphInfo.toNDC([data[i][0], data[i][2]]);
- ctx.moveTo(co_min[0], co_min[1]);
- ctx.lineTo(co_max[0], co_max[1]);
- }
- ctx.lineWidth = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
- ctx.strokeStyle = col3_to_rgb(this.color);
- ctx.stroke();
- },
-});
+Graph2D_GraphInfo.prototype.fromNDC = function(pt) {
+ return [this.ll[0] + (this.ur[0] - this.ll[0]) * (pt[0] + 1) * .5,
+ this.ll[1] + (this.ur[1] - this.ll[1]) * (pt[1] + 1) * .5];
+}
-var Graph2D_Axis = new Class ({
- // Static Methods
- formats: {
- normal: function(value, iDigits, fDigits) {
- // FIXME: iDigits?
- return value.toFixed(fDigits);
- },
- day: function(value, iDigits, fDigits) {
- var date = new Date(value * 1000.);
- var res = date.getUTCFullYear();
- res += "-" + (date.getUTCMonth() + 1);
- res += "-" + (date.getUTCDate() + 1);
- return res;
- },
- },
+/* Graph2D_PlotStyle Class */
- initialize: function(dir, format) {
- if (!format)
- format = this.formats.normal;
+function Graph2D_PlotStyle() {
+}
- this.dir = dir;
- this.format = format;
- },
+Graph2D_PlotStyle.prototype.plot = function(graph, ctx, data) {}
- draw: function(graph, ctx, ll, ur, mainUR) {
- var dir = this.dir, ndir = 1 - this.dir;
- var vMin = ll[dir];
- var vMax = ur[dir];
- var near = ll[ndir];
- var far = ur[ndir];
- var border = mainUR[ndir];
-
- var line_base = (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
- ctx.lineWidth = 2 * line_base;
- ctx.strokeStyle = "rgb(0,0,0)";
+/* Graph2D_LinePlotStyle Class */
- ctx.beginPath();
- var co = vec2_cswap([vMin, far], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.moveTo(co[0], co[1]);
- var co = vec2_cswap([vMax, far], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.lineTo(co[0], co[1]);
- ctx.stroke();
+function Graph2D_LinePlotStyle(width, color) {
+ Graph2D_PlotStyle.call(this);
- var delta = vMax - vMin;
- var steps = Math.floor(Math.log(delta) / Math.log(10));
- if (delta / Math.pow(10, steps) >= 5.0) {
- var size = .5;
- } else if (delta / Math.pow(10, steps) >= 2.5) {
- var size = .25;
- } else {
- var size = .1;
- }
- size *= Math.pow(10, steps);
+ if (!width)
+ width = 1;
+ if (!color)
+ color = [0,0,0];
- if (steps <= 0) {
- var iDigits = 0, fDigits = 1 + Math.abs(steps);
- } else {
- var iDigits = steps, fDigits = 0;
- }
+ this.width = width;
+ this.color = color;
+}
+Graph2D_LinePlotStyle.prototype = new Graph2D_PlotStyle();
+Graph2D_LinePlotStyle.prototype.constructor = Graph2D_LinePlotStyle;
- var start = Math.ceil(vMin / size);
- var end = Math.ceil(vMax / size);
+Graph2D_LinePlotStyle.prototype.plot = function(graph, ctx, data) {
+ if (data.length === 0)
+ return;
- // FIXME: Draw in window coordinates to make crisper.
+ ctx.beginPath();
+ var co = graph.graphInfo.toNDC(data[0]);
+ ctx.moveTo(co[0], co[1]);
+ for (var i = 1, e = data.length; i != e; ++i) {
+ var co = graph.graphInfo.toNDC(data[i]);
+ ctx.lineTo(co[0], co[1]);
+ }
+ ctx.lineWidth = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
+ ctx.strokeStyle = col3_to_rgb(this.color);
+ ctx.stroke();
+}
- // FIXME: Draw grid in layers to avoid ugly overlaps.
+/* Graph2D_PointPlotStyle Class */
- for (var i = start; i != end; ++i) {
- if (i == 0) {
- ctx.lineWidth = 3 * line_base;
- var p = .5;
- } else if (!(i & 1)) {
- ctx.lineWidth = 2 * line_base;
- var p = .5;
- } else {
- ctx.lineWidth = 1 * line_base;
- var p = .75;
- }
+function Graph2D_PointPlotStyle(width, color) {
+ Graph2D_PlotStyle.call(this);
- ctx.beginPath();
- var co = vec2_cswap([i * size, lerp(near, far, p)], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.moveTo(co[0], co[1]);
- var co = vec2_cswap([i * size, far], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.lineTo(co[0], co[1]);
- ctx.stroke();
- }
+ if (!width)
+ width = 1;
+ if (!color)
+ color = [0,0,0];
- for (var alt = 0; alt < 2; ++alt) {
- if (alt)
- ctx.strokeStyle = "rgba(190,190,190,.5)";
- else
- ctx.strokeStyle = "rgba(128,128,128,.5)";
+ this.width = width;
+ this.color = color;
+}
+Graph2D_PointPlotStyle.prototype = new Graph2D_PlotStyle();
+Graph2D_PointPlotStyle.prototype.constructor = Graph2D_PointPlotStyle;
+
+Graph2D_PointPlotStyle.prototype.plot = function(graph, ctx, data) {
+ if (data.length === 0)
+ return;
+
+ ctx.beginPath();
+ var radius = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
+ for (var i = 0, e = data.length; i != e; ++i) {
+ var co = graph.graphInfo.toNDC(data[i]);
+ ctx.moveTo(co[0], co[1]);
+ ctx.arc(co[0], co[1], radius, 0, Math.PI * 2, /*anticlockwise=*/false);
+ }
+ ctx.fillStyle = col3_to_rgb(this.color);
+ ctx.fill();
+}
+
+/* Graph2D_ErrorBarPlotStyle Class */
+
+function Graph2D_ErrorBarPlotStyle(width, color) {
+ Graph2D_PlotStyle.call(this);
+
+ if (!width)
+ width = 1;
+ if (!color)
+ color = [0,0,0];
+
+ this.width = width;
+ this.color = color;
+}
+Graph2D_ErrorBarPlotStyle.prototype = new Graph2D_PlotStyle();
+Graph2D_ErrorBarPlotStyle.prototype.constructor = Graph2D_ErrorBarPlotStyle;
+
+Graph2D_ErrorBarPlotStyle.prototype.plot = function(graph, ctx, data) {
+ if (data.length === 0)
+ return;
+
+ ctx.beginPath();
+ for (var i = 0, e = data.length; i != e; ++i) {
+ var co_min = graph.graphInfo.toNDC([data[i][0], data[i][1]]);
+ var co_max = graph.graphInfo.toNDC([data[i][0], data[i][2]]);
+ ctx.moveTo(co_min[0], co_min[1]);
+ ctx.lineTo(co_max[0], co_max[1]);
+ }
+ ctx.lineWidth = this.width * (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
+ ctx.strokeStyle = col3_to_rgb(this.color);
+ ctx.stroke();
+}
+
+/* Graph2D_Axis Class */
+
+function Graph2D_Axis(dir, format) {
+ if (!format)
+ format = this.formats.normal;
+
+ this.dir = dir;
+ this.format = format;
+}
+
+// Static Methods
+Graph2D_Axis.prototype.formats = {
+ normal: function(value, iDigits, fDigits) {
+ // FIXME: iDigits?
+ return value.toFixed(fDigits);
+ },
+ day: function(value, iDigits, fDigits) {
+ var date = new Date(value * 1000.);
+ var res = date.getUTCFullYear();
+ res += "-" + (date.getUTCMonth() + 1);
+ res += "-" + (date.getUTCDate() + 1);
+ return res;
+ },
+};
+
+Graph2D_Axis.prototype.draw = function(graph, ctx, ll, ur, mainUR) {
+ var dir = this.dir, ndir = 1 - this.dir;
+ var vMin = ll[dir];
+ var vMax = ur[dir];
+ var near = ll[ndir];
+ var far = ur[ndir];
+ var border = mainUR[ndir];
+
+ var line_base = (graph.getPixelSize()[0] + graph.getPixelSize()[1]) * .5;
+ ctx.lineWidth = 2 * line_base;
+ ctx.strokeStyle = "rgb(0,0,0)";
+
+ ctx.beginPath();
+ var co = vec2_cswap([vMin, far], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.moveTo(co[0], co[1]);
+ var co = vec2_cswap([vMax, far], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.lineTo(co[0], co[1]);
+ ctx.stroke();
+
+ var delta = vMax - vMin;
+ var steps = Math.floor(Math.log(delta) / Math.log(10));
+ if (delta / Math.pow(10, steps) >= 5.0) {
+ var size = .5;
+ } else if (delta / Math.pow(10, steps) >= 2.5) {
+ var size = .25;
+ } else {
+ var size = .1;
+ }
+ size *= Math.pow(10, steps);
+
+ if (steps <= 0) {
+ var iDigits = 0, fDigits = 1 + Math.abs(steps);
+ } else {
+ var iDigits = steps, fDigits = 0;
+ }
+
+ var start = Math.ceil(vMin / size);
+ var end = Math.ceil(vMax / size);
+
+ // FIXME: Draw in window coordinates to make crisper.
+
+ // FIXME: Draw grid in layers to avoid ugly overlaps.
+
+ for (var i = start; i != end; ++i) {
+ if (i == 0) {
+ ctx.lineWidth = 3 * line_base;
+ var p = .5;
+ } else if (!(i & 1)) {
+ ctx.lineWidth = 2 * line_base;
+ var p = .5;
+ } else {
ctx.lineWidth = 1 * line_base;
- ctx.beginPath();
- for (var i = start; i != end; ++i) {
- if (i == 0)
- continue;
- if ((i & 1) == alt) {
- var co = vec2_cswap([i * size, far], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.moveTo(co[0], co[1]);
- var co = vec2_cswap([i * size, border], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.lineTo(co[0], co[1]);
- }
- }
- ctx.stroke();
+ var p = .75;
+ }
+
+ ctx.beginPath();
+ var co = vec2_cswap([i * size, lerp(near, far, p)], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.moveTo(co[0], co[1]);
+ var co = vec2_cswap([i * size, far], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.lineTo(co[0], co[1]);
+ ctx.stroke();
+ }
- if (start <= 0 && 0 < end) {
- ctx.beginPath();
- var co = vec2_cswap([0, far], dir);
+ for (var alt = 0; alt < 2; ++alt) {
+ if (alt)
+ ctx.strokeStyle = "rgba(190,190,190,.5)";
+ else
+ ctx.strokeStyle = "rgba(128,128,128,.5)";
+ ctx.lineWidth = 1 * line_base;
+ ctx.beginPath();
+ for (var i = start; i != end; ++i) {
+ if (i == 0)
+ continue;
+ if ((i & 1) == alt) {
+ var co = vec2_cswap([i * size, far], dir);
co = graph.graphInfo.toNDC(co);
ctx.moveTo(co[0], co[1]);
- var co = vec2_cswap([0, border], dir);
+ var co = vec2_cswap([i * size, border], dir);
co = graph.graphInfo.toNDC(co);
ctx.lineTo(co[0], co[1]);
- ctx.strokeStyle = "rgba(64,64,64,.5)";
- ctx.lineWidth = 3 * line_base;
- ctx.stroke();
}
}
+ ctx.stroke();
- // FIXME: Draw this in screen coordinates, and stop being stupid. Also,
- // figure out font height?
- if (this.dir == 1) {
- var offset = [-.5, -.25];
- } else {
- var offset = [-.5, 1.1];
+ if (start <= 0 && 0 < end) {
+ ctx.beginPath();
+ var co = vec2_cswap([0, far], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.moveTo(co[0], co[1]);
+ var co = vec2_cswap([0, border], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.lineTo(co[0], co[1]);
+ ctx.strokeStyle = "rgba(64,64,64,.5)";
+ ctx.lineWidth = 3 * line_base;
+ ctx.stroke();
}
- ctx.fillStyle = "rgb(0,0,0)";
- var pxl = graph.getPixelSize();
- for (var i = start; i != end; ++i) {
- if ((i & 1) == 0) {
- var label = this.format(i * size, iDigits, fDigits);
- ctx.save();
- var co = vec2_cswap([i*size, lerp(near, far, .5)], dir);
- co = graph.graphInfo.toNDC(co);
- ctx.translate(co[0], co[1]);
- ctx.scale(pxl[0], -pxl[1]);
- // FIXME: Abstract.
- var bb_w = label.length * 5;
- if (ctx.measureText != null)
- bb_w = ctx.measureText(label).width;
- var bb_h = 12;
- // FIXME: Abstract? Or ignore.
- if (ctx.fillText != null) {
- ctx.fillText(label, bb_w*offset[0], bb_h*offset[1]);
- } else if (ctx.mozDrawText != null) {
- ctx.translate(bb_w*offset[0], bb_h*offset[1]);
- ctx.mozDrawText(label);
- }
- ctx.restore();
+ }
+
+ // FIXME: Draw this in screen coordinates, and stop being stupid. Also,
+ // figure out font height?
+ if (this.dir == 1) {
+ var offset = [-.5, -.25];
+ } else {
+ var offset = [-.5, 1.1];
+ }
+ ctx.fillStyle = "rgb(0,0,0)";
+ var pxl = graph.getPixelSize();
+ for (var i = start; i != end; ++i) {
+ if ((i & 1) == 0) {
+ var label = this.format(i * size, iDigits, fDigits);
+ ctx.save();
+ var co = vec2_cswap([i*size, lerp(near, far, .5)], dir);
+ co = graph.graphInfo.toNDC(co);
+ ctx.translate(co[0], co[1]);
+ ctx.scale(pxl[0], -pxl[1]);
+ // FIXME: Abstract.
+ var bb_w = label.length * 5;
+ if (ctx.measureText != null)
+ bb_w = ctx.measureText(label).width;
+ var bb_h = 12;
+ // FIXME: Abstract? Or ignore.
+ if (ctx.fillText != null) {
+ ctx.fillText(label, bb_w*offset[0], bb_h*offset[1]);
+ } else if (ctx.mozDrawText != null) {
+ ctx.translate(bb_w*offset[0], bb_h*offset[1]);
+ ctx.mozDrawText(label);
}
+ ctx.restore();
}
- },
-});
-
-var Graph2D = new Class ({
- Extends: View2D,
+ }
+}
- initialize: function(canvasname) {
- this.parent(canvasname);
- this.useWidgets = false;
- this.plots = [];
- this.graphInfo = null;
- this.xAxis = new Graph2D_Axis(0);
- this.yAxis = new Graph2D_Axis(1);
- this.debugText = null;
+/* Graph2D Class */
- this.clearColor = [.8, .8, .8];
- },
+function Graph2D(canvasname) {
+ View2D.call(this, canvasname)
- //
+ this.useWidgets = false;
+ this.plots = [];
+ this.graphInfo = null;
+ this.xAxis = new Graph2D_Axis(0);
+ this.yAxis = new Graph2D_Axis(1);
+ this.debugText = null;
- graphChanged: function() {
- this.graphInfo = null;
- // FIXME: Need event loop.
- this.refresh();
- },
+ this.clearColor = [.8, .8, .8];
+}
+Graph2D.prototype = new View2D();
+Graph2D.prototype.constructor = Graph2D;
- layoutGraph: function() {
- var gi = new Graph2D_GraphInfo();
+//
- gi.xAxisH = 40;
- gi.yAxisW = 60;
+Graph2D.prototype.graphChanged = function() {
+ this.graphInfo = null;
+ // FIXME: Need event loop.
+ this.refresh();
+}
+
+Graph2D.prototype.layoutGraph = function() {
+ var gi = new Graph2D_GraphInfo();
+
+ gi.xAxisH = 40;
+ gi.yAxisW = 60;
+
+ var min = null, max = null;
+ for (var i = 0, e = this.plots.length; i != e; ++i) {
+ var data = this.plots[i][0];
+ for (var i2 = 0, e2 = data.length; i2 != e2; ++i2) {
+ if (min == null)
+ min = data[i2];
+ else
+ min = vec2_min(min, data[i2]);
- var min = null, max = null;
- for (var i = 0, e = this.plots.length; i != e; ++i) {
- var data = this.plots[i][0];
- for (var i2 = 0, e2 = data.length; i2 != e2; ++i2) {
- if (min == null)
- min = data[i2];
- else
- min = vec2_min(min, data[i2]);
-
- if (max == null)
- max = data[i2];
- else
- max = vec2_max(max, data[i2]);
- }
+ if (max == null)
+ max = data[i2];
+ else
+ max = vec2_max(max, data[i2]);
}
+ }
- if (min === null)
- min = [0, 0];
- if (max === null)
- max = [0, 0];
- if (Math.abs(max[0] - min[0]) < .001)
- max[0] += 1;
- if (Math.abs(max[1] - min[1]) < .001)
- max[1] += 1;
-
- // Set graph transform to the [min,max] rect to the content area with
- // some padding.
- //
- // FIXME: Add real mat3 and implement this properly.
- var pad = 5;
- var vd = new ViewData();
- var ll_target = this.convertClientToWorld([gi.yAxisW + pad, gi.xAxisH + pad], vd);
- var ur_target = this.convertClientToWorld(vec2_subN(this.size, pad), vd);
- var target_size = vec2_sub(ur_target, ll_target);
- var target_center = vec2_add(ll_target, vec2_mulN(target_size, .5));
-
- var center = vec2_mulN(vec2_add(min, max), .5);
- var size = vec2_sub(max, min);
-
- var scale = vec2_mulN(target_size, .5);
- size = vec2_div(size, scale);
- center = vec2_sub(center, vec2_mulN(vec2_mul(target_center, size), .5));
+ if (min === null)
+ min = [0, 0];
+ if (max === null)
+ max = [0, 0];
+ if (Math.abs(max[0] - min[0]) < .001)
+ max[0] += 1;
+ if (Math.abs(max[1] - min[1]) < .001)
+ max[1] += 1;
- gi.ll = vec2_sub(center, vec2_mulN(size, .5));
- gi.ur = vec2_add(center, vec2_mulN(size, .5));
+ // Set graph transform to the [min,max] rect to the content area with
+ // some padding.
+ //
+ // FIXME: Add real mat3 and implement this properly.
+ var pad = 5;
+ var vd = new ViewData();
+ var ll_target = this.convertClientToWorld([gi.yAxisW + pad, gi.xAxisH + pad], vd);
+ var ur_target = this.convertClientToWorld(vec2_subN(this.size, pad), vd);
+ var target_size = vec2_sub(ur_target, ll_target);
+ var target_center = vec2_add(ll_target, vec2_mulN(target_size, .5));
+
+ var center = vec2_mulN(vec2_add(min, max), .5);
+ var size = vec2_sub(max, min);
+
+ var scale = vec2_mulN(target_size, .5);
+ size = vec2_div(size, scale);
+ center = vec2_sub(center, vec2_mulN(vec2_mul(target_center, size), .5));
- return gi;
- },
+ gi.ll = vec2_sub(center, vec2_mulN(size, .5));
+ gi.ur = vec2_add(center, vec2_mulN(size, .5));
- //
+ return gi;
+}
- convertClientToGraph: function(pt) {
- return this.graphInfo.fromNDC(this.convertClientToWorld(pt));
- },
+//
- //
+Graph2D.prototype.convertClientToGraph = function(pt) {
+ return this.graphInfo.fromNDC(this.convertClientToWorld(pt));
+}
- on_size_change: function() {
- this.graphInfo = null;
- },
+//
- on_draw_start: function() {
- if (!this.graphInfo)
- this.graphInfo = this.layoutGraph();
- },
+Graph2D.prototype.on_size_change = function() {
+ this.graphInfo = null;
+}
- on_draw: function(canvas, ctx) {
- var gi = this.graphInfo;
- var w = this.size[0], h = this.size[1];
-
- this.xAxis.draw(this, ctx,
- this.convertClientToGraph([gi.yAxisW, 0]),
- this.convertClientToGraph([w, gi.xAxisH]),
- this.convertClientToGraph([w, h]))
- this.yAxis.draw(this, ctx,
- this.convertClientToGraph([0, gi.xAxisH]),
- this.convertClientToGraph([gi.yAxisW, h]),
- this.convertClientToGraph([w, h]))
+Graph2D.prototype.on_draw_start = function() {
+ if (!this.graphInfo)
+ this.graphInfo = this.layoutGraph();
+}
- if (this.debugText != null) {
- ctx.save();
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.fillText(this.debugText, this.size[0]/2 + 10, this.size[1]/2 + 10);
- ctx.restore();
- }
+Graph2D.prototype.on_draw = function(canvas, ctx) {
+ var gi = this.graphInfo;
+ var w = this.size[0], h = this.size[1];
+
+ this.xAxis.draw(this, ctx,
+ this.convertClientToGraph([gi.yAxisW, 0]),
+ this.convertClientToGraph([w, gi.xAxisH]),
+ this.convertClientToGraph([w, h]))
+ this.yAxis.draw(this, ctx,
+ this.convertClientToGraph([0, gi.xAxisH]),
+ this.convertClientToGraph([gi.yAxisW, h]),
+ this.convertClientToGraph([w, h]))
- // Draw the contents.
+ if (this.debugText != null) {
ctx.save();
- ctx.beginPath();
- var content_ll = this.convertClientToWorld([gi.yAxisW, gi.xAxisH]);
- var content_ur = this.convertClientToWorld(this.size);
- ctx.rect(content_ll[0], content_ll[1],
- content_ur[0]-content_ll[0], content_ur[1]-content_ll[1]);
- ctx.clip();
-
- for (var i = 0, e = this.plots.length; i != e; ++i) {
- var data = this.plots[i][0];
- var style = this.plots[i][1];
- style.plot(this, ctx, data);
- }
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.fillText(this.debugText, this.size[0]/2 + 10, this.size[1]/2 + 10);
ctx.restore();
- },
-
- // Client API.
+ }
- clearPlots: function() {
- this.plots = [];
- this.graphChanged();
- },
+ // Draw the contents.
+ ctx.save();
+ ctx.beginPath();
+ var content_ll = this.convertClientToWorld([gi.yAxisW, gi.xAxisH]);
+ var content_ur = this.convertClientToWorld(this.size);
+ ctx.rect(content_ll[0], content_ll[1],
+ content_ur[0]-content_ll[0], content_ur[1]-content_ll[1]);
+ ctx.clip();
+
+ for (var i = 0, e = this.plots.length; i != e; ++i) {
+ var data = this.plots[i][0];
+ var style = this.plots[i][1];
+ style.plot(this, ctx, data);
+ }
+ ctx.restore();
+}
+
+// Client API.
+
+Graph2D.prototype.clearPlots = function() {
+ this.plots = [];
+ this.graphChanged();
+}
+
+Graph2D.prototype.addPlot = function(data, style) {
+ if (!style)
+ style = new Graph2D_LinePlotStyle(1);
+ this.plots.push( [data, style] );
+ this.graphChanged();
+}
- addPlot: function(data, style) {
- if (!style)
- style = new Graph2D_LinePlotStyle(1);
- this.plots.push( [data, style] );
- this.graphChanged();
- },
-});
Modified: zorg/trunk/lnt/lnt/viewer/js/View2DTest.html
URL: http://llvm.org/viewvc/llvm-project/zorg/trunk/lnt/lnt/viewer/js/View2DTest.html?rev=110918&r1=110917&r2=110918&view=diff
==============================================================================
--- zorg/trunk/lnt/lnt/viewer/js/View2DTest.html (original)
+++ zorg/trunk/lnt/lnt/viewer/js/View2DTest.html Thu Aug 12 11:03:30 2010
@@ -1,7 +1,6 @@
<html>
<head>
<title>View2D Test</title>
- <script src="../resources/mootools-1.2.4-core-nc.js"></script>
<script src="View2D.js"></script>
<script type="text/javascript">
var viewA, viewB, graphA;
@@ -28,11 +27,16 @@
var pts_2 = pts_0.map(function(item, index, array) {
return [item[0], 1 - item[1]];
});
+ var pts_3 = pts_0.map(function(item, index, array) {
+ return [item[0], item[1] - .1, item[1] + .1];
+ });
graphA = new Graph2D("graph2d");
if (1) {
graphA.addPlot(pts_0, new Graph2D_LinePlotStyle(2));
graphA.addPlot(pts_1);
graphA.addPlot(pts_2, new Graph2D_LinePlotStyle(null, [1,0,0]));
+ graphA.addPlot(pts_0, new Graph2D_PointPlotStyle(5, [.8, .5, 0]));
+ graphA.addPlot(pts_3, new Graph2D_ErrorBarPlotStyle(1, [0, 1, 0]));
} else {
graphA.addPlot([[1248617856.000000,1.398600],[1248960469.000000,1.241700],[1249396047.000000,1.214300],[1249488792.000000,1.211600],[1249564554.000000,1.239500],[1249732514.000000,1.239200],[1249819044.000000,1.236300],[1249910746.000000,1.234200],[1249996733.000000,1.236000],[1250083258.000000,1.252600],[1250255237.000000,1.260400],[1250341501.000000,1.253500],[1250427966.000000,1.262600],[1250514329.000000,1.261600],[1250600211.000000,1.249100],[1250686801.000000,1.250700],[1250773065.000000,1.255400],[1250859519.000000,1.246300],[1250946756.000000,1.245900],[1251032239.000000,1.238200],[1251118837.000000,1.238000],[1251205034.000000,1.241900],[1251292148.000000,1.236500],[1251379354.000000,1.230200],[1251466226.000000,1.228700],[1251552218.000000,1.233600],[1251638633.000000,1.222400],[1251725230.000000,1.222100],[1251811608.000000,1.239100],[1251898565.000000,1.230200],[1251984695.000000,1.241700],[1252070572.000000,1.205800],[1252157268.000000,1.211100],[1252243914.
000000,1.210300],[1252330714.000000,1.206000],[1252416809.000000,1.210800],[1252590190.000000,1.216800],[1252675459.000000,1.214400],[1252762486.000000,1.220700],[1252886652.000000,1.221700],[1252935938.000000,1.215200],[1253021864.000000,1.213800],[1253108596.000000,1.213800],[1253194864.000000,1.231900],[1253281344.000000,1.232000],[1253366664.000000,1.238400],[1253453169.000000,1.232500],[1253539839.000000,1.230100],[1253627357.000000,1.232600],[1253713381.000000,1.235700],[1253799754.000000,1.232400],[1253886021.000000,1.241900],[1253972269.000000,1.229700],[1254058753.000000,1.229100],[1254145361.000000,1.284000],[1254231276.000000,1.295200],[1254317581.000000,1.299800],[1254405166.000000,1.340600],[1254490117.000000,1.305300],[1254576631.000000,1.304100],[1254662979.000000,1.303700],[1254749498.000000,1.306800],[1254835808.000000,1.306200],[1254922190.000000,1.270100],[1255008713.000000,1.270900],[1255094924.000000,1.267300],[1255181629.000000,1.265100],[1255267916.000
000,1.283300],[1255354566.000000,1.285500],[1255440921.000000,1.287100],[1255526237.000000,1.269800],[1255613420.000000,1.318400],[1255700706.000000,1.301600],[1255786760.000000,1.305000],[1255873293.000000,1.305000],[1255959875.000000,1.438800],[1256046280.000000,1.437400],[1256132389.000000,1.439100],[1256218592.000000,1.461200],[1256304662.000000,1.464100],[1256391812.000000,1.462300],[1256478151.000000,1.469600],[1256564495.000000,1.472300],[1256823554.000000,1.474000],[1256909311.000000,1.477200],[1256996077.000000,1.459000],[1257082516.000000,1.426100],[1257258543.000000,1.433700],[1257344527.000000,1.452600],[1257431075.000000,1.440700],[1257516720.000000,1.443300],[1257602894.000000,1.503300],[1257863543.000000,1.550200],[1257948938.000000,1.532500],[1258035827.000000,1.534900],[1258122304.000000,1.535600],[1258207973.000000,1.546700],[1258294248.000000,1.534700],[1258382337.000000,1.544000],[1258551986.000000,1.509100],[1258640333.000000,1.554300],[1258728912.000000
,1.541100],[1258815149.000000,1.602700],[1258901720.000000,1.685900]]);
graphA.xAxis.format = graphA.xAxis.formats.day;
More information about the llvm-commits
mailing list