--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/nodejs/component.js	Wed Apr 06 07:51:06 2011 +0800
@@ -0,0 +1,118 @@
+var mbfly = require("mbfly");
+var svg = require("./svg");
+var sys=require("sys");
+/*
+The Component and ComponentManager is used to keep track of the symbol 
+table in different frame. 
+
+
+*/
+function mul(a,b)
+{
+    var m = [a[0]*b[0]+a[1]*b[3], a[0]*b[1]+a[1]*b[4], a[0]*b[2]+a[1]*b[5]+a[2], 
+            a[3]*b[0]+a[4]*b[3], a[3]*b[1]+a[4]*b[4], a[3]*b[2]+a[4]*b[5]+a[5]];
+	a[0] = m[0];
+	a[1] = m[1];
+	a[2] = m[2];
+	a[3] = m[3];
+	a[4] = m[4];
+	a[5] = m[5];
+}
+
+function Component(app, name) {
+    this.app = app;
+	this.name = name;
+	this.coord = null;
+}
+
+Component.prototype.translate=function(tx,ty) {
+    if (this.coord) {
+	    mul(this.coord, [1,0,tx,0,1,ty]);
+	}
+}
+
+Component.prototype.resize=function(sx,sy) {
+
+    if (this.coord) {
+	    mul(this.coord, [sx,0,0,0,sy,0]);
+	}
+}
+
+Component.prototype.set=function(m) {
+
+    if (this.coord) {
+	    this.coord[0] = m[0];
+	    this.coord[1] = m[1];
+	    this.coord[2] = m[2];
+	    this.coord[3] = m[3];
+	    this.coord[4] = m[4];
+	    this.coord[5] = m[5];
+	}
+}
+Component.prototype.hide=function(m) {
+    if (this.coord) {
+	    this.coord.hide();
+	}
+}
+
+Component.prototype.show=function(m) {
+    if (this.coord) {
+	    this.coord.show();
+	}
+}
+
+Component.prototype.search=function() {
+    this.coord = this.app._componentmanager.search(this.name);
+}
+
+Component.prototype.realize=function() {
+    if (this.coord == null) {
+	    this.search();
+	}
+	return this.coord;
+}
+
+Component.prototype.toCoord=function() {
+   return this.coord; 
+}
+
+
+function ComponentManager(app)
+{
+    this.app = app;
+	this.object_table = {};
+}
+
+/*  \brief add an object into the current current component table. 
+ *  This first argument is the source node of the screen object. 
+ *  The second argument is the coord object which is displayed at
+ *  the screen now. 
+ *     
+ *  We need to use the soucer node to get the name of the object.
+ */
+ComponentManager.prototype.add=function(source,obj) {
+    if (source.refid==undefined) {
+	    sys.puts("Internal Error: no refid is defined\n");
+		return;
+	}
+    this.object_table[source.refid] = obj;
+}
+
+
+ComponentManager.prototype.del=function(name) {
+    delete this.object_table[name];
+}
+
+ComponentManager.prototype.dump=function(name) {
+    for(i in this.object_table) {
+	    sys.puts(i);
+	}
+}
+
+ComponentManager.prototype.search=function(name) {
+    return this.object_table[name];
+}
+
+
+exports.Component = Component;
+exports.ComponentManager = ComponentManager;

--- a/nodejs/mbapp.js	Wed Apr 06 07:48:29 2011 +0800
+++ b/nodejs/mbapp.js	Wed Apr 06 07:51:06 2011 +0800
@@ -4,6 +4,7 @@
 var svg = require("./svg");
 var sys = require("sys");
 var ldr = mbfly.img_ldr_new(".");
+var component = require("./component");
 
 function _reverse(m1) {
     var rev = new Array(1, 0, 0, 0, 1, 0);
@@ -126,6 +127,7 @@
     this.frame_interval = 1000/30; // 12 frame per second
     this.timer = null;
     this._time = Date.now();
+    this._componentmanager = new component.ComponentManager(this);
 }
 
 app.prototype.ts=function(m) {
@@ -154,9 +156,22 @@
     this.mb_rt.redraw_all();
     this.mb_rt.flush();
 }
+
 app.prototype.get=function(name) {
     return this.mb_rt.mbnames[name];
 }
+
+
+app.prototype.getComponent=function(name) {
+    var comp = new component.Component(this,name);
+    this._componentmanager.dump();
+    comp.realize();
+    sys.puts("Search for "+name);
+    var obj = comp.toCoord();
+    sys.puts("obj="+obj+" id="+obj.id+" refid="+obj.refid);
+    return comp;
+}
+
 app.prototype.addKeyboardListener=function(type,f) {
     return this.mb_rt.kbevents.add_event_observer(type,f);    
 }
@@ -185,8 +200,8 @@
     // Duplicate the group
     var nodes = src.children;
     if (src.dup) {
-        //src.dup.remove();
-        //src.dup = null;
+        src.dup.remove();
+        src.dup = null;
     }
     if (src.dup == null) {
         var dup = this.mb_rt.coord_new(src.parent);
@@ -195,6 +210,8 @@
 	    var ng = this.mb_rt.coord_new(dup);
 	    var k = dup.clone_from_subtree(c);
 	    c.dup = k;
+	    c.dup.id = c.id;
+	    c.dup.refid = c.refid;
 	}
 	src.dup = dup;
     } else {
@@ -207,9 +224,10 @@
 
     for(i in nodes) {
         coord= nodes[i];
-	if (coord.target)
+	if (coord.target) {
 	    this.generateScaleTweenObject(coord.dup,coord,coord.target,p,'');
-	else {
+	    this._componentmanager.add(coord,coord.dup);
+	} else {
 	    sys.puts(coord.id);
 	    sys.puts(coord[0]);
 	    sys.puts(coord[1]);

--- a/nodejs/svg.js	Wed Apr 06 07:48:29 2011 +0800
+++ b/nodejs/svg.js	Wed Apr 06 07:51:06 2011 +0800
@@ -1037,13 +1037,40 @@
     this.parseGroup(m,root,id, n)
 }
 
+function getName(n)
+{
+    var attr = n.attr('mbname');
+    var name;
+
+    if (attr) {
+        name = attr.value();
+        if (name != '') return name;
+    }
+    attr = n.attr('label');
+
+    if (attr) {
+        name = attr.value();
+        if (name != '') return name;
+    }
+    attr = n.attr('id');
+
+    if (attr) {
+        name = attr.value();
+        if (name != '') return name;
+    }
+
+    return '';
+
+}
+
 loadSVG.prototype._check_duplicate_src=function(n,coord) {
-    var id = n.attr('id');
-    coord.id = id;
+    var id = getName(n);
     if (id) {
-        coord.id = id.value();
+        coord.id = id;
+        coord.refid = id;
     } else {
         coord.id = "NA";
+	coord.refid ="NA";
     }
     if (n.name()=="use") {
         n.coord.isuse = true
@@ -1061,6 +1088,7 @@
 	    sys.puts("duplicated");
 	}
         this.mb_rt.mbnames[id].target = coord;
+	coord.refid = this.mb_rt.mbnames[id].id;
     } catch(e) {
         sys.puts("id "+id+" is not defined");
     }