Fix in offset for SVG.Wrap

7 files changed, 48 insertions, 52 deletions

diff --git a/src/arrange.js b/src/arrange.js
index 63ac659..1ec3561 100644
--- a/src/arrange.js
+++ b/src/arrange.js
@@ -4,7 +4,7 @@
 SVG.extend(SVG.Element, {
   // Get all siblings, including myself
   siblings: function() {
-    return this.parent.children();
+    return (this.nested() || this.doc()).children();
   },
   // Get the curent position siblings
   position: function() {
diff --git a/src/element.js b/src/element.js
index e7161c0..c23ea49 100644
--- a/src/element.js
+++ b/src/element.js
@@ -33,6 +33,7 @@ SVG.Element = function Element(node) {
     skewX:    0,
     skewY:    0
   };
+
 };
 
 //
@@ -71,6 +72,10 @@ SVG.extend(SVG.Element, {
       clone.child.trans = this.child.trans;
       clone.child.attr(this.child.attrs).transform({});
       
+      /* re-plot shape */
+      if (clone.plot)
+        clone.plot(this.child.attrs[this.child instanceof SVG.Path ? 'd' : 'points']);
+      
     } else {
       var name = this.node.nodeName;
       
@@ -104,6 +109,10 @@ SVG.extend(SVG.Element, {
   doc: function() {
     return this._parent(SVG.Doc);
   },
+  // Get parent nested document
+  nested: function() {
+    return this._parent(SVG.Nested);
+  },
   // Set svg element attribute
   attr: function(a, v, n) {
     if (arguments.length < 2) {
diff --git a/src/gradient.js b/src/gradient.js
index 0414d72..6554c92 100644
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -2,8 +2,7 @@ SVG.Gradient = function Gradient(type) {
   this.constructor.call(this, SVG.create(type + 'Gradient'));
   
   /* set unique id */
-  this.id = 'svgjs_' + (SVG.did++);
-  this.attr('id', this.id);
+  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)));
   
   /* store type */
   this.type = type;
diff --git a/src/mask.js b/src/mask.js
index b5baa14..e7e94a4 100644
--- a/src/mask.js
+++ b/src/mask.js
@@ -2,8 +2,7 @@ SVG.Mask = function Mask() {
   this.constructor.call(this, SVG.create('mask'));
   
   /* set unique id */
-  this.id = 'svgjs_' + (SVG.did++);
-  this.attr('id', this.id);
+  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)));
 };
 
 // Inherit from SVG.Element
diff --git a/src/pattern.js b/src/pattern.js
index 80985c8..9b37297 100644
--- a/src/pattern.js
+++ b/src/pattern.js
@@ -2,8 +2,7 @@ SVG.Pattern = function Pattern(type) {
   this.constructor.call(this, SVG.create('pattern'));
   
   /* set unique id */
-  this.id = 'svgjs_' + (SVG.did++);
-  this.attr('id', this.id);
+  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)));
 };
 
 // Inherit from SVG.Element
diff --git a/src/sugar.js b/src/sugar.js
index fef1363..b73be2e 100644
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -29,23 +29,35 @@ var _colorPrefix = function(type, attr) {
   
 });
 
-SVG.extend(SVG.Element, {
-  // Rotation
-  rotate: function(angle) {
-    return this.transform({
-      rotation: angle || 0
-    });
-  },
-  // Skew
-  skew: function(x, y) {
-    return this.transform({
-      skewX: x || 0,
-      skewY: y || 0
+[SVG.Element, SVG.FX].forEach(function(module) {
+  if (module) {
+    SVG.extend(module, {
+      // Rotation
+      rotate: function(angle) {
+        return this.transform({
+          rotation: angle || 0
+        });
+      },
+      // Skew
+      skew: function(x, y) {
+        return this.transform({
+          skewX: x || 0,
+          skewY: y || 0
+        });
+      },
+      // Scale
+      scale: function(x, y) {
+        return this.transform({
+          scaleX: x || 0,
+          scaleY: y || 0
+        });
+      }
+
     });
   }
-  
 });
 
+
 if (SVG.G) {
   SVG.extend(SVG.G, {
     // Move using translate
@@ -80,25 +92,3 @@ if (SVG.Text) {
   });
 }
 
-
-if (SVG.FX) {
-  SVG.extend(SVG.FX, {
-    // Rotation
-    rotate: function(angle) {
-      return this.transform({
-        rotation: angle || 0
-      });
-    },
-
-    // Skew
-    skew: function(x, y) {
-      return this.transform({
-        skewX: x || 0,
-        skewY: y || 0
-      });
-    }
-
-  });
-}
-
-
diff --git a/src/wrap.js b/src/wrap.js
index 656f93f..be343a3 100644
--- a/src/wrap.js
+++ b/src/wrap.js
@@ -13,10 +13,10 @@ SVG.Wrap.prototype = new SVG.Shape();
 SVG.extend(SVG.Wrap, {
   // Move wrapper around
   move: function(x, y) {
-    return this.center(
-      x + (this._b.width  * this.child.trans.scaleX) / 2,
-      y + (this._b.height * this.child.trans.scaleY) / 2
-    );
+    return this.transform({
+      x: x,
+      y: y
+    });
   },
   // Set the actual size in pixels
   size: function(width, height) {
@@ -31,10 +31,10 @@ SVG.extend(SVG.Wrap, {
   },
   // Move by center
   center: function(x, y) {
-    return this.transform({
-      x: x,
-      y: y
-    });
+    return this.move(
+      x + (this._b.width  * this.child.trans.scaleX) / -2,
+      y + (this._b.height * this.child.trans.scaleY) / -2
+    );
   },
   // Create distributed attr
   attr: function(a, v, n) {
@@ -71,8 +71,8 @@ SVG.extend(SVG.Wrap, {
     
     /* reposition element withing wrapper */
     this.child.transform({
-      x: -this._b.cx,
-      y: -this._b.cy
+      x: -this._b.x,
+      y: -this._b.y
     });
     
     return this;