diff --git a/script/BaseEdge.js b/script/BaseEdge.js
index cd5faaa..6f0569f 100755
--- a/script/BaseEdge.js
+++ b/script/BaseEdge.js
@@ -101,7 +101,7 @@ BaseEdge.prototype.GetPixelLength = function ()
 {
     if (this.vertex1 == this.vertex2)
     {
-        return (new CommonEdgeStyle()).sizeOfLoop * 2 * Math.PI;
+        return this.model.GetLoopSize() * 2 * Math.PI;
     }
     else
     {
diff --git a/script/BaseEdgeDrawer.js b/script/BaseEdgeDrawer.js
index 799ce69..3196e73 100644
--- a/script/BaseEdgeDrawer.js
+++ b/script/BaseEdgeDrawer.js
@@ -10,8 +10,6 @@ function CommonEdgeStyle()
  	this.fillStyle   = '#68aeba';
  	this.textPadding = 4;
 	this.textStrockeWidth = 2;
- 	this.sizeOfLoop = 24;
-	this.loopShiftAngel = Math.PI / 6;
 }
 
 function CommonPrintEdgeStyle()
@@ -178,7 +176,7 @@ BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
   this.context.lineWidth   = baseEdge.model.width;
   this.context.strokeStyle = arcStyle.strokeStyle;
   this.context.fillStyle   = arcStyle.fillStyle;
-  this.sizeOfLoop          = baseEdge.vertex1.model.diameter / 2;
+  this.model               = baseEdge.model;
 }
 
 BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
@@ -192,8 +190,8 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
   if (position1.equals(position2))
   {
     this.context.beginPath();
-    this.context.arc(position1.x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, 
-                     position1.y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, 0, 2 * Math.PI);
+    this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), 
+                     position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
     this.context.closePath();
     this.context.stroke();
   }
@@ -313,8 +311,8 @@ BaseEdgeDrawer.prototype.GetTextCenterPoint = function (position1, position2, ha
   var centerPoint = Point.interpolate(position1, position2, 0.5);
   if (position1.equals(position2))
   {
-    centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
-    centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+    centerPoint.y = centerPoint.y - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
+    centerPoint.x = centerPoint.x - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
   } 
     
   return centerPoint;
@@ -351,11 +349,11 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
     
     if (positions[0].equals(positions[1]))
     {
-        var sizeInRadian = progressSize / (2 * Math.PI * arcStyle.sizeOfLoop) * 6;
+        var sizeInRadian = progressSize / (2 * Math.PI * this.baseDrawer.model.GetLoopSize()) * 6;
         
         this.context.beginPath();
-        this.context.arc(positions[0].x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop,
-                         positions[0].y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, this.progress * 2 * Math.PI, this.progress * 2 * Math.PI + sizeInRadian);
+        this.context.arc(positions[0].x - Math.cos(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(),
+                         positions[0].y - Math.sin(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(), this.baseDrawer.model.GetLoopSize(), this.progress * 2 * Math.PI, this.progress * 2 * Math.PI + sizeInRadian);
         this.context.closePath();
         this.context.stroke();
     }
@@ -387,8 +385,8 @@ CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
   if (position1.equals(position2))
   {
     this.context.beginPath();
-    this.context.arc(position1.x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, 
-                     position1.y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, 0, 2 * Math.PI);
+    this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), 
+                     position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
     this.context.closePath();
     this.context.stroke();
   }
@@ -426,8 +424,8 @@ CurvedArcDrawer.prototype.GetTextCenterPoint = function (position1, position2, h
   var centerPoint = this.model.GetCurvedPoint(position1, position2, 0.5)
   if (position1.equals(position2))
   {
-    centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
-    centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+    centerPoint.y = centerPoint.y - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
+    centerPoint.x = centerPoint.x - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
   } 
     
   return centerPoint;
diff --git a/script/EdgeModel.js b/script/EdgeModel.js
index d9ee74b..8126f31 100755
--- a/script/EdgeModel.js
+++ b/script/EdgeModel.js
@@ -11,6 +11,8 @@ function EdgeModel()
     this.type  = EdgeModels.line;
     this.curvedValue = EdgeModel.prototype.defaultCruved;
     this.default = true;
+    this.sizeOfLoop = 24;
+    this.loopShiftAngel = Math.PI / 6;
 }
 
 EdgeModel.prototype.defaultCruved = 0.1;
@@ -101,9 +103,19 @@ EdgeModel.prototype.HitTestLine = function(position1, position2, mousePos, facto
       factor = 1.0;
     }
     
+    
     var pos1 = position1;
     var pos2 = position2;
     var pos0 = mousePos;
+    
+    // Self loop case
+    if (pos1.equals(pos2))
+    {
+        var xCenter = pos1.x - Math.cos(this.GetLoopShiftAngel()) * this.GetLoopSize(); 
+        var yCenter = pos1.y - Math.sin(this.GetLoopShiftAngel()) * this.GetLoopSize();
+        
+        return Math.abs((Point.distance(new Point(xCenter, yCenter), pos0)) - this.GetLoopSize()) <= this.width * 1.5 * factor;
+    }
 		
     var r1  = pos0.distance(pos1);
     var r2  = pos0.distance(pos2);
@@ -127,6 +139,19 @@ EdgeModel.prototype.HitTestLine = function(position1, position2, mousePos, facto
 
 EdgeModel.prototype.HitTestCurved = function(position1, position2, mousePos)
 {
+    var pos1 = position1;
+    var pos2 = position2;
+    var pos0 = mousePos;
+    
+    // Self loop case
+    if (pos1.equals(pos2))
+    {
+        var xCenter = pos1.x - Math.cos(this.GetLoopShiftAngel()) * this.GetLoopSize(); 
+        var yCenter = pos1.y - Math.sin(this.GetLoopShiftAngel()) * this.GetLoopSize();
+        
+        return Math.abs((Point.distance(new Point(xCenter, yCenter), pos0)) - this.GetLoopSize()) <= this.width * 1.5;
+    }
+    
     var interval_count = position1.distance(position2) / 100 * 30;
     
     var start = position1;
@@ -174,3 +199,14 @@ EdgeModel.prototype.SetCurvedValue = function (value)
     
     this.default = false;
 }
+
+EdgeModel.prototype.GetLoopSize = function ()
+{
+    return this.sizeOfLoop;
+}
+
+EdgeModel.prototype.GetLoopShiftAngel = function ()
+{
+    return this.loopShiftAngel;
+}
+
diff --git a/tpl/home.php b/tpl/home.php
index 7a837f8..98051f5 100755
--- a/tpl/home.php
+++ b/tpl/home.php
@@ -10,7 +10,7 @@
 
         <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
 	    <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
-        <script src="<?= Root("script/example.js?v=28")?>" ></script>
+        <script src="<?= Root("script/example.js?v=29")?>" ></script>
     </head>
 <!--
 <div class="pull-right">