From 27c1ba250a7db26cf24dd456d20af9ff1649e638 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Mon, 23 Apr 2012 17:04:48 -0700
Subject: canvas interaction

---
 js/lib/drawing/world.js  |  9 ++++++---
 js/lib/geom/circle.js    |  8 ++++++--
 js/lib/geom/rectangle.js | 39 +++++++++++++++++++++++++++------------
 3 files changed, 39 insertions(+), 17 deletions(-)

(limited to 'js/lib')

diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 945c9883..8ad4c6f5 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -362,9 +362,9 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
     
     // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state
     // in the case of a procedurally built scene an init state is not needed for loading data
+	this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
 	if (this._useWebGL) {
 		rdgeStarted = true;
-		this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
 		RDGE.globals.engine.unregisterCanvas( this._canvas );
 		RDGE.globals.engine.registerCanvas(this._canvas, this);
 		RDGE.RDGEStart( this._canvas );
@@ -835,8 +835,11 @@ World.prototype.importJSON = function (jObj) {
 
 	// import the objects
 	// there should be exactly one child of the parent object
-	if (jObj.children && (jObj.children.length === 1))
-		this.importObjectsJSON( jObj.children[0] );
+	if (jObj.children)
+	{
+		for (var i=0;  i<jObj.children.length;  i++)
+			this.importObjectsJSON( jObj.children[i] );
+	}
 	else
 		throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children );
 
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..896803bf 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -46,6 +46,10 @@ var Circle = function GLCircle() {
 			this._fillColor = fillColor;
 
 			this._strokeStyle = strokeStyle;
+
+			this._matrix = Matrix.I(4);
+			//this._matrix[12] = xOffset;
+			//this._matrix[13] = yOffset;
 		}
 
 		this.m_world = world;
@@ -187,7 +191,7 @@ var Circle = function GLCircle() {
 		// get the normalized device coordinates (NDC) for
 		// all position and dimensions.
 		var	vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-		var	xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+		var	xNDC = 2*this._xOffset/vpw,  yNDC = -2*this._yOffset/vph,
 			xRadNDC = this._width/vpw,  yRadNDC = this._height/vph,
 			xStrokeNDC = 2*this._strokeWidth/vpw,  yStrokeNDC = 2*this._strokeWidth/vph,
 			xInnRadNDC = this._innerRadius*xRadNDC,  yInnRadNDC = this._innerRadius*yRadNDC;
@@ -725,7 +729,7 @@ var Circle = function GLCircle() {
 		// get the normalized device coordinates (NDC) for
 		// the position and radii.
 		var	vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-		var	xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+		var	xNDC = 2*this._xOffset/vpw,  yNDC = -2*this._yOffset/vph,
 			xRadNDC = this._width/vpw,  yRadNDC = this._height/vph;
 		var projMat = world.makePerspectiveMatrix();
 		var z = -world.getViewDistance();
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..d9f1f0b1 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -7,6 +7,7 @@
 var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
 var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+
  ///////////////////////////////////////////////////////////////////////
 // Class GLRectangle
 //      GL representation of a rectangle.
@@ -54,6 +55,10 @@ var Rectangle = function GLRectangle() {
 			this.setBRRadius(brRadius);
 
 			this._strokeStyle = strokeStyle;
+
+			this._matrix = Matrix.I(4);
+			//this._matrix[12] = xoffset;
+			//this._matrix[13] = yoffset;
 		}
 
 		// the overall radius includes the fill and the stroke.  separate the two based onthe stroke width
@@ -365,26 +370,36 @@ var Rectangle = function GLRectangle() {
 		var blRad = this._blRadius;
 		var brRad = this._brRadius;
 
+		var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+		var world = this.getWorld();
+		viewUtils.pushViewportObj( world.getCanvas() );
+		var cop = viewUtils.getCenterOfProjection();
+		viewUtils.popViewportObj();
+		var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
+		var xLeft = xCtr - 0.5*this.getWidth(),				yTop = yCtr - 0.5*this.getHeight();
+		var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
+		var xOff = 0.5*world.getViewportWidth() - xDist,	yOff  = 0.5*world.getViewportHeight() - yDist;
+
 		if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
-			ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
+			ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
 		} else {
 			// get the top left point
 			rad = tlRad - inset;
 			if (rad < 0)  rad = 0;
 			pt[1] += rad;
 			if (MathUtils.fpSign(rad) == 0)  pt[1] = inset;
-			ctx.moveTo( pt[0],  pt[1] );
+			ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
 
 			// get the bottom left point
 			pt = [inset, height - inset];
 			rad = blRad - inset;
 			if (rad < 0)  rad = 0;
 			pt[1] -= rad;
-			ctx.lineTo( pt[0],  pt[1] );
+			ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
 
 			// get the bottom left curve
 			if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( inset, height-inset,  inset+rad, height-inset );
+				ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
             }
 
 			// do the bottom of the rectangle
@@ -392,11 +407,11 @@ var Rectangle = function GLRectangle() {
 			rad = brRad - inset;
 			if (rad < 0)  rad = 0;
 			pt[0] -= rad;
-			ctx.lineTo( pt[0], pt[1] );
+			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
 			// get the bottom right arc
 			if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( width-inset, height-inset,  width-inset, height-inset-rad );
+				ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
             }
 
 			// get the right of the rectangle
@@ -404,11 +419,11 @@ var Rectangle = function GLRectangle() {
 			rad = trRad - inset;
 			if (rad < 0)  rad = 0;
 			pt[1] += rad;
-			ctx.lineTo( pt[0], pt[1] );
+			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
 			// do the top right corner
 			if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
+				ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
             }
 
 			// do the top of the rectangle
@@ -416,13 +431,13 @@ var Rectangle = function GLRectangle() {
 			rad = tlRad - inset;
 			if (rad < 0)  rad = 0;
 			pt[0] += rad;
-			ctx.lineTo( pt[0], pt[1] );
+			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
 			// do the top left corner
 			if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
+				ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
             } else {
-				ctx.lineTo( inset, 2*inset );
+				ctx.lineTo( inset+xOff, 2*inset+yOff );
             }
 		}
 	};
@@ -430,7 +445,7 @@ var Rectangle = function GLRectangle() {
     this.render = function() {
         // get the world
         var world = this.getWorld();
-        if (!world)  throw( "null world in rectangle render" );
+        if (!world)  throw( "null world in rectangle render" );			
 
          // get the context
 		var ctx = world.get2DContext();
-- 
cgit v1.2.3