[#74] replace graphics.Groups to make IE8 happy

kemia/controller/reaction_editor_demo.html

@@ -5,7 +5,7 @@
 <title >
 kemia.controller.ReactionEditor
 </title>
-		<script src="http://localhost:9810/compile?id=controller_reaction_editor_demo" ></script>
+		<script src="http://10.37.129.2:9810/compile?id=controller_reaction_editor_demo" ></script>
 		<script>
 		(function() {
 			window.onload = function() {

kemia/graphics/element_array.js

@@ -21,24 +21,44 @@ kemia.graphics.ElementArray = function() {
  * @protected
  */
 kemia.graphics.ElementArray.prototype.logger = goog.debug.Logger
-		.getLogger('kemia.graphics.ElementArray');
+.getLogger('kemia.graphics.ElementArray');
 
 /**
  * add a graphics element
  * @param {goog.graphics.Element} element the element to add
  */
 kemia.graphics.ElementArray.prototype.add = function(element) {
+    goog.asserts.assert(element instanceof goog.graphics.Element);
     this._elements.push(element);
+    return this;
 }
 
 /** 
  * 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;
+    goog.array.forEach(this._elements,
+    function(element) {
+        element.getGraphics().removeElement(element);
+    },
+    this);
+    this._elements.length = 0;
+}
+
+/**
+ * Set the transformation of the elements.
+ * @param {number} x The x coordinate of the translation transform.
+ * @param {number} y The y coordinate of the translation transform.
+ * @param {number} rotate The angle of the rotation transform.
+ * @param {number} centerX The horizontal center of the rotation transform.
+ * @param {number} centerY The vertical center of the rotation transform.
+ */
+kemia.graphics.ElementArray.prototype.setTransformation = function(x, y, rotate,
+centerX, centerY) {
+    goog.array.forEach(this._elements,
+    function(element) {
+        element.setTransformation(x, y, rotate, centerX, centerY);
+    });
 }
 
 

kemia/view/aromaticity_renderer.js

@@ -48,9 +48,6 @@ goog.inherits(kemia.view.AromaticityRenderer, kemia.view.BondRenderer);
 kemia.view.AromaticityRenderer.prototype.render = function(ring, transform, bondPath) {
 
     this.setTransform(transform);
-    if (!opt_element_array) {
-        opt_element_array = new kemia.graphics.ElementArray();
-    }
 
     var aromaticCircle = new goog.graphics.Path();
     var ringCenter = this.transform.transformCoords([ring.getCenter()])[0];

kemia/view/arrow_renderer.js

@@ -49,7 +49,15 @@ goog.inherits(kemia.view.ArrowRenderer, kemia.view.Renderer);
  */
 kemia.view.ArrowRenderer.prototype.render = function(arrow, transform) {
 	this.setTransform(transform);
-	arrow.group = this.graphics.createGroup();
+	// TTD this does not belong on arrow, neighborlist should track graphic elements not just model objects
+		if (!arrow._elements){
+			/** @type {kemia.graphics.ElementArray} 
+			 * @private
+			*/
+		    arrow._elements = new kemia.graphics.ElementArray();
+		} else {
+			arrow._elements.clear();
+		}
 	var h = this.config.get('arrow')['height'];
 	var l = goog.math.Coordinate.distance(arrow.target, arrow.source);
 	var angle = goog.math.angle(arrow.source.x, arrow.source.y, arrow.target.x,
@@ -115,15 +123,15 @@ kemia.view.ArrowRenderer.prototype.render = function(arrow, transform) {
 			fontSize * Math.cos(angle_down_rads), -fontSize
 					* Math.sin(angle_down_rads)), coords[1]);
 
-	this.graphics.drawTextOnLine(arrow.reagents_text, reagents_nock.x,
+	arrow._elements.add(this.graphics.drawTextOnLine(arrow.reagents_text, reagents_nock.x,
 			reagents_nock.y, reagents_tip.x, reagents_tip.y, 'center', font,
-			textStroke, fill, arrow.group);
-	this.graphics.drawTextOnLine(arrow.conditions_text, conditions_nock.x,
+			textStroke, fill));
+	arrow._elements.add(this.graphics.drawTextOnLine(arrow.conditions_text, conditions_nock.x,
 			conditions_nock.y, conditions_tip.x, conditions_tip.y, 'center',
-			font, textStroke, fill, arrow.group);
+			font, textStroke, fill));
 
 	// visible arrow
-	this.graphics.drawPath(path, arrowStroke, null, arrow.group);
+	arrow._elements.add(this.graphics.drawPath(path, arrowStroke));
 }
 /**
  * @param {kemia.model.Arrow}