start removal of goog.graphics.GroupElements to make IE8 happy

kemia/graphics/element_array.js

@@ -0,0 +1,44 @@
+goog.provide("kemia.graphics.ElementArray");
+goog.require('goog.array');
+goog.require("goog.debug.Logger");
+
+/**
+ * convenience class to contain group of goog.graphics.Elements since nested vml groups do not seem to work for IE8 in standards mode
+ * 
+ * @constructor
+ */
+kemia.graphics.ElementArray = function() {
+    /** @type{Array.<goog.graphics.Element>}
+     * @private
+	 */
+    this._elements = [];
+}
+
+/**
+ * Logging object.
+ * 
+ * @type {goog.debug.Logger}
+ * @protected
+ */
+kemia.graphics.ElementArray.prototype.logger = goog.debug.Logger
+		.getLogger('kemia.graphics.ElementArray');
+
+/**
+ * add a graphics element
+ * @param {goog.graphics.Element} element the element to add
+ */
+kemia.graphics.ElementArray.prototype.add = function(element) {
+    this._elements.push(element);
+}
+
+/** 
+ * remove all elements
+ */
+kemia.graphics.ElementArray.prototype.clear = function() {
+	goog.array.forEach(this._elements, function(element){
+		element.getGraphics().removeElement(element);
+	}, this);
+	this._elements.length=0;
+}
+
+

kemia/view/atom_renderer.js

@@ -18,6 +18,7 @@
 goog.provide('kemia.view.AtomRenderer');
 goog.require('kemia.view.Renderer');
 goog.require('goog.debug.Logger');
+goog.require('kemia.graphics.ElementArray');
 
 /**
  * Class to render an Atom object to a graphics representation
@@ -41,12 +42,15 @@ goog.inherits(kemia.view.AtomRenderer, kemia.view.Renderer);
  *            atom
  * @param {kemia.graphics.AffineTransform}
  *            transform
- * @return {goog.graphics.GroupElement}
+ * @param {kemia.graphics.ElementArray=} opt_element_array
+ * @return {kemia.graphics.ElementArray}
  */
-kemia.view.AtomRenderer.prototype.render = function(atom, transform, opt_group) {
+kemia.view.AtomRenderer.prototype.render = function(atom, transform, opt_element_array) {
 
 	this.setTransform(transform);
-
+	if(!opt_element_array){
+		opt_element_array = new kemia.graphics.ElementArray();
+	}
 	var atom_config = this.config.get("atom");
 	var color = this.config.get(atom.symbol) ? this.config.get(atom.symbol)['color']
 			: atom_config['color'];
@@ -67,52 +71,76 @@ kemia.view.AtomRenderer.prototype.render = function(atom, transform, opt_group)
 	var h = font.size;
 
 	if (symbol.text) {
-		graphics.drawText(symbol.text, point.x - w / 2, point.y - h / 2, w, h,
-				symbol.justification, null, font, stroke, fill, opt_group);
+		opt_element_array.add(
+			graphics.drawText(symbol.text, point.x - w / 2, point.y - h / 2, w, h,
+				symbol.justification, null, font, stroke, fill));
 		if (symbol.justification == 'left') {
 			if (symbol.subscript || symbol.superscript) {
 				var subSize = this.config.get("subscriptSize");
 				if (symbol.subscript) {
-					graphics.drawText(symbol.subscript, point.x + w * 0.9,
+					opt_element_array.add(
+						graphics.drawText(symbol.subscript, point.x + w * 0.9,
 							point.y, subSize, subSize, 'center', null, font,
-							stroke, fill, opt_group);
+							stroke, fill));
 				}
 				if (symbol.superscript) {
-					graphics.drawText(symbol.superscript, point.x + w, point.y
+					opt_element_array.add(
+						graphics.drawText(symbol.superscript, point.x + w, point.y
 							- h * 0.8, subSize, subSize, 'center', null, font,
-							stroke, fill, opt_group);
+							stroke, fill));
 				}
 			}
 		} else if (symbol.justification == 'right') {
 			if (symbol.subscript || symbol.superscript) {
 				var subSize = this.config.get("subscriptSize");
 				if (symbol.subscript) {
-					graphics.drawText('H', point.x - w * 3, point.y - h / 2, w,
-							h, 'center', null, font, stroke, fill, opt_group);
-					graphics.drawText(symbol.subscript, point.x - w * 1.8,
-							point.y, subSize, subSize, 'center', null, font,
-							stroke, fill, opt_group);
+					opt_element_array.add(
+						graphics.drawText(
+							'H', 
+							point.x - w * 3, 
+							point.y - h / 2, 
+							w,
+							h, 
+							'center', 
+							null, 
+							font, 
+							stroke, 
+							fill));
+					opt_element_array.add(
+						graphics.drawText(
+							symbol.subscript, 
+							point.x - w * 1.8,
+							point.y, 
+							subSize, 
+							subSize, 
+							'center', 
+							null, 
+							font,
+							stroke, 
+							fill));
 				}
 				if (symbol.superscript) {
-					graphics.drawText(symbol.superscript, point.x + w, point.y
+					opt_element_array.add(
+						graphics.drawText(
+							symbol.superscript, point.x + w, point.y
 							- h * 0.8, subSize, subSize, 'center', null, font,
-							stroke, fill, opt_group);
+							stroke, fill));
 				}
 			}
 		}
 	}
+	return opt_element_array;
 };
 
 /**
  * @param {kemia.model.Atom}
  *            atom
  * @param {string=}
  *            opt_color
- * @param {goog.graphics.Group=}
- *            opt_group
+ * @param {kemia.graphics.ElementArray} opt_element_array
  */
 kemia.view.AtomRenderer.prototype.highlightOn = function(atom, opt_color,
-		opt_group) {
+		opt_element_array) {
 //	this.logger.fine('hightlightOn');
 	var atom_config = this.config.get("atom");
 	var strokeWidth = atom_config['stroke']['width'] * 24;
@@ -121,20 +149,21 @@ kemia.view.AtomRenderer.prototype.highlightOn = function(atom, opt_color,
 				this.config.get(atom.symbol)['color']: 
 				atom_config['color'];
 	}
+	if (!opt_element_array){
+		opt_element_array = new kemia.graphics.ElementArray();
+	}
 
 	var stroke = null
 	var fill = new goog.graphics.SolidFill(opt_color, .3);
 	var radius = atom_config['highlight']['radius']
 			* this.transform.getScaleX();
 	var coords = this.transform.transformCoords( [ atom.coord ])[0];
 
-	if (!opt_group) {
-		opt_group = this.graphics.createGroup();
-	}
-	this.graphics.drawCircle(coords.x, coords.y, radius, stroke, fill,
-			opt_group);
+	opt_element_array.add(
+		opt_element_array.add(
+			this.graphics.drawCircle(coords.x, coords.y, radius, stroke, fill)));
 
-	return opt_group;
+	return opt_element_array;
 };
 
 /**

kemia/view/atom_renderer_demo.html

@@ -4,7 +4,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>kemia.view.AtomRenderer</title>
 
-<script src="http://localhost:9810/compile?id=atom_renderer_demo"></script>
+<script src="http://localhost:9810/compile?id=atom_renderer_demo&mode=raw"></script>
 <script>
 
 

kemia/view/atom_renderer_demo.js

@@ -2,45 +2,49 @@ goog.require('goog.dom');
 goog.require('goog.graphics');
 goog.require('kemia.view.AtomRenderer');
 goog.require('kemia.graphics.AffineTransform');
+goog.require('kemia.graphics.ElementArray');
 goog.require('kemia.model.Molecule');
 goog.require('kemia.model.Atom');
 goog.require('kemia.model.Bond');
+goog.require('goog.debug.Console');
 
 function initPage(){
 
 // note:  uncomment the next two lines to turn on console logging
-//	var c = new goog.debug.Console(); 
-//	c.setCapturing(true); 
+	var c = new goog.debug.Console(); 
+	c.setCapturing(true); 
+
 
 	var element = goog.dom.getElement('container')
 	var graphics = goog.graphics.createGraphics(element.clientWidth,
 			element.clientHeight);
-	var group = graphics.createGroup();
 	graphics.render(element);
+	var elements = new kemia.graphics.ElementArray();
 	var r = new kemia.view.AtomRenderer( graphics);
 
 	var trans = new kemia.graphics.AffineTransform(20,0,0,-20,0,0);
 	var mol1 = new kemia.model.Molecule();
 	var c1 = new kemia.model.Atom("C", 2, -2);
 	mol1.addAtom(c1);
-	r.render(c1, trans, group);
+	r.render(c1, trans, elements);
 
 
 	var mol2 = new kemia.model.Molecule();
 	var c2 = new kemia.model.Atom("C", 5, -2);
 	var o2 = new kemia.model.Atom("O", 6, -2);
 	mol2.addBond(new kemia.model.Bond(c2, o2, 2));
 	trans = new kemia.graphics.AffineTransform(30,0,0,-30,0,0);
-	r.render(c2, trans, group);
-	r.render(o2, trans, group);
+	r.render(c2, trans, elements);
+	r.render(o2, trans, elements);
+
 
 	var mol3 = new kemia.model.Molecule();
 	var c3 = new kemia.model.Atom("C", 7, -2);
 	var c4 = new kemia.model.Atom("C", 8, -2);
 	mol3.addBond(new kemia.model.Bond(c3, c4, 3));
 	trans = new kemia.graphics.AffineTransform(40,0,0,-40,0,0);
-	r.render(c3, trans, group);
-	r.render(c4, trans, group);
+	r.render(c3, trans, elements);
+	r.render(c4, trans, elements);
 
 	var mol4 = new kemia.model.Molecule();
 	var n = new kemia.model.Atom("N", 2, -4, 1);
@@ -57,14 +61,15 @@ function initPage(){
 	mol4.addBond(new kemia.model.Bond(i,h));
 
 	trans = new kemia.graphics.AffineTransform(30,0,0,-30,0,0);
-	r.render(n, trans, group);
-	r.render(s, trans, group);
-	r.render(p, trans, group);
-	r.render(cl, trans, group);
-	r.render(f, trans, group);
-	r.render(br, trans, group);
-	r.render(i, trans, group);
-	r.render(h, trans, group);
+	r.render(n, trans, elements);
+	r.render(s, trans, elements);
+	r.render(p, trans, elements);
+	r.render(cl, trans, elements);
+	r.render(f, trans, elements);
+	r.render(br, trans, elements);
+	r.render(i, trans, elements);
+	r.render(h, trans, elements);
+	// elements.clear();
 };
 
 goog.events.listen(window, goog.events.EventType.LOAD, initPage);

kemia/view/bond_renderer_demo.html

@@ -10,7 +10,7 @@
 </script>
 </head>
 
-<body>
+<body onload="initPage();">
 <div id="container" style="width: 400px; height: 400px"></div>
 
 </body>

kemia/view/bond_renderer_demo.js

@@ -13,6 +13,7 @@
 	goog.require('goog.graphics');
 	goog.require('kemia.graphics.AffineTransform');
 	goog.require('goog.debug.Console');
+	goog.require('kemia.graphics.ElementArray');
 
 
 function initPage(){
@@ -22,6 +23,7 @@ function initPage(){
 	var element = goog.dom.getElement('container')
 	var graphics = goog.graphics.createGraphics(element.clientWidth,
 			element.clientHeight);
+	var elements = kemia.graphics.ElementArray();
 
 	graphics.render(element);
 
@@ -32,7 +34,7 @@ function initPage(){
 	var c1 = new kemia.model.Atom("C", 2, -2);
 	var o1 = new kemia.model.Atom("O", 3, -3);
 	var b = new kemia.model.Bond(c1, o1, kemia.model.Bond.ORDER.SINGLE);
-	sbr.render(b, trans, bondPath);
+	sbr.render(b, trans, bondPath, elements);
 
 
 	var c0 = new kemia.model.Atom("C", 4, -3);
@@ -110,4 +112,3 @@ function initPage(){
  	graphics.drawPath(bondPath, bondStroke, bondFill);
 };
 
-goog.events.listen(window, goog.events.EventType.LOAD, initPage);