diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 6f6ef1b..08458a2 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -613,9 +613,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 strokeStyle: shapestyleborderColor,
                 opacity: shapestyleOpacity,
                 strokeWidth: shapestyleborderWidth,
-                x: offsetX1 + 40, y: offsetY1 + 40,
-                width: (x - offsetX1),
-                height:(y - offsetY1),
+                x: offsetX1, y: offsetY1,
+                width: (x - offsetX1) * 2,
+                height: (y - offsetY1) * 2,
 
                 resizeFromCenter: false,
 
@@ -680,7 +680,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         }
 
         $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
-          //  console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
+            //  console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
             $(canvasId).addLayer({
                 layer: true,
                 name: 'Circle_' + CircleNumber,
@@ -690,8 +690,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 strokeStyle: shapestyleborderColor,
                 strokeWidth: shapestyleborderWidth,
                 fillStyle: shapestyleFillColor,
-                x: (offsetX1 + 40), y: (offsetY1 + 40),
-                width: (x - offsetX1), height: (y - offsetY1),
+                x: (offsetX1), y: (offsetY1),
+                width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,
                 // Place a handle at each side and each corner
                 handlePlacement: 'both',
                 click: function (layer) {
@@ -814,11 +814,10 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         }
 
         $rootScope.PinFn = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
-            
+
             var xAxisPinDiff = offsetX1 - x;
             var yAxisPinDiff = offsetY1 - y;
-            if (xAxisPinDiff != 0 && yAxisPinDiff != 0)
-            {
+            if (xAxisPinDiff != 0 && yAxisPinDiff != 0) {
 
                 var radial = $('#canvas').createGradient({
                     x1: 50, y1: 50,
@@ -923,8 +922,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
                 }).drawLayers();
             }
-          
-           
+
+
             $('.btnCursor').trigger('click');
             $(".btn-annotation").removeClass("activebtncolor");
             $('.btnCursor').addClass('activebtncolor');
@@ -933,7 +932,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
 
 
-          //  debugger;
+            //  debugger;
 
             $('#canvas').drawText({
                 layer: true,
@@ -965,9 +964,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 strokeStyle: $rootScope.shapestyleborderColor,
                 strokeWidth: $rootScope.shapestyleborderWidth,
                 fillStyle: $rootScope.shapestyleFillColor,
-                x: $rootScope.offsetX1 + 40, y: $rootScope.offsetY1 + 40,
-                width: ($rootScope.x - $rootScope.offsetX1),
-                height:($rootScope.y - $rootScope.offsetY1),
+                x: $rootScope.offsetX1, y: $rootScope.offsetY1,
+                width: ($rootScope.x - $rootScope.offsetX1) * 2,
+                height: ($rootScope.y - $rootScope.offsetY1) * 2,
                 add: function (layer) {
 
                     $rootScope.TextAreaRectID = layer.name;
@@ -1143,9 +1142,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         var arrayRect = {};
 
         var storeLine = '';
-        
+
         $rootScope.OnPaintCanvasMouseUp = function (event) {
-          
+
             if (!$rootScope.clicked) {
                 return;
             }
@@ -1221,7 +1220,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             switch ($rootScope.shapeType) {
                 case "Line":
                     $(".line").remove();
-                  //  console.log($rootScope.MouseMoveXAxis - $rootScope.offsetX1);
+                    //  console.log($rootScope.MouseMoveXAxis - $rootScope.offsetX1);
                     $("#canvasDiv").append("<div class='line' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
                     $rootScope.Annotationangle();
                     break;
@@ -1237,17 +1236,17 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                     break;
                 case "Circle":
                     $(".circle").remove();
-                   // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
+                    // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
                     $("#canvasDiv").append("<div class='circle' style='border-radius:50%;border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
                     break;
                 case "Rectangle":
                     $(".rectangle").remove();
-                 //   console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
+                    //   console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
                     $("#canvasDiv").append("<div class='rectangle' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
                     break;
                 case "TextArea":
                     $(".textarea").remove();
-                 //   console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
+                    //   console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
                     $("#canvasDiv").append("<div class='textarea' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
                     break;
             }
@@ -1271,22 +1270,22 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 theta = Math.atan(dy / dx) * (180 / Math.PI);
             }
             var dottedLineWidth = Math.sqrt(($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) * ($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) + ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis) * ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis));
-             switch ($rootScope.shapeType) {
+            switch ($rootScope.shapeType) {
                 case "Line":
                     $('.line').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
                     break;
-                 case "Arrow":
-                     $('.arrow').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
-                     break;
-                 case "Pin":
-                     $('.pin').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
-                     break;
+                case "Arrow":
+                    $('.arrow').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
+                    break;
+                case "Pin":
+                    $('.pin').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
+                    break;
             }
         }
 
         ///-----
         $rootScope.saveText = function () {
-           
+
             document.getElementById('modelbackground').style.display = "none";
             // this part will work first time when save button will be clicked
             if ($rootScope.IsTextAlreadySave == false) {
@@ -1920,18 +1919,18 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
             $('#listManager').css('display', 'block');
             $("#listManager").css("visibility", "visible");
-           
-         //   $('#termList option[selected="selected"]').prop("selected", false);
-          //  $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);
-           // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
-           // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
+
+            //   $('#termList option[selected="selected"]').prop("selected", false);
+            //  $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);
+            // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
+            // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
             $('#listManager').draggable();
 
 
             $rootScope.islistManagerEventAlredayDispachted = true;
 
             $rootScope.$broadcast('listManagerEvent', true);
-         
+
             $('#termList option[selected="selected"]').prop("selected", false);
             $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
             $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });