diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 27ae48e..42ab28b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -5628,7 +5628,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $rootScope.Object1Index = 0;
     $rootScope.Object2Index = 0;
     $rootScope.resetText = 0;
-
+    $rootScope.resetTextSave = 0;
+    $rootScope.ObjectIndexSave = 0;
     var arrayRect = {};
 
 
@@ -5837,6 +5838,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
                         click: function (layer) {
+                          //  alert(layer.name);
                             $rootScope.canvasLayerNameCollection = [];
                             $rootScope.canvasLayerNameCollection.push(layer.name);
                             $('#canvas').setLayer(layer.name, {
@@ -5852,6 +5854,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         },
                         mouseout: function (layer) {
                             $rootScope.canvasLayerNameCollection = [];
+                            
                             $('#canvas').setLayer(layer.name, {
                                 handle: {
                                     type: 'arc',
@@ -6067,7 +6070,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $('.btnCursor').addClass('activebtncolor');
                     break;
                 case "TextArea":
-
+                    $rootScope.isTrue = false;
+                    $("#text_area").val('');
                     // Draw text
                     $rootScope.resetTextRect = $rootScope.ObjectIndex++;
                     $rootScope.resetText = $rootScope.ObjectIndex++;
@@ -6085,9 +6089,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         align: "left",
                         fontFamily: 'Verdana, sans-serif',
                         text: ''
-
-
-
+                        
                     })
                     // Draw rect as wide as the text
                     .drawRect({
@@ -6174,142 +6176,336 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $rootScope.underlineText;
     $rootScope.textArea;
     $rootScope.fontFamily;
+    $rootScope.TextAreaStyleProp = [];
+    $rootScope.modifySavedText = [];
+    $rootScope.TextRectangleArr = [];
+    $rootScope.rectDimension = [];
+  
     $rootScope.saveText = function () {
+        debugger;
+       if ($rootScope.isTrue == false) {
+           $rootScope.fontSizes = $("#text_area").css("font-size");
+           $rootScope.fontWeight = $("#text_area").css("font-weight");
+           $rootScope.fontStyle = $("#text_area").css("font-style");
+           $rootScope.textAlignmt = $("#text_area").css("text-align");
+           $rootScope.fontColor = $("#text_area").css("color");
+           $rootScope.fontFamily = $("#text_area").css("font-family");
+           $rootScope.underlineText = $("#text_area").css("text-decoration");
+           $rootScope.textArea = $("#text_area").val();
+        
+           $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
+           $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
+         
+           $('#canvas').drawText({
+               layer: true,
+               draggable: true,
+               name: 'TextArea_' + $rootScope.resetText,
+               groups: ['TextArea_' + $rootScope.resetText],
+               dragGroups: ['TextArea_' + $rootScope.resetText],
+               fillStyle: $rootScope.fontColor,
+               fontStyle: $rootScope.fontStyle,
+               fontSize: $rootScope.fontSizes,
+               fontFamily: $rootScope.fontFamily,
+               align: $rootScope.textAlignmt,
+               strokeWidth: 0,
+               text: $rootScope.textArea,
+               x: $scope.offsetX1, y: $scope.offsetY1,
+               maxWidth: $scope.x - $scope.offsetX1,
+               maxHeight: $scope.y - $scope.offsetY1,
+
+               add: function (layer) {
+               
+                   $rootScope.TextAreaStyleProp.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
+                   $rootScope.TextAreaStyleProp.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily });
+
+               //    $rootScope.TextAreaStyleProp.push({ Text: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
+               //    $rootScope.TextAreaStyleProp.push({ Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily });
+
+                
+               },
+
+               change: function (layer, props) {
+
+               }
+
+           })
+                 // Draw rect as wide as the text
+                 .drawRect({
+                     name: 'TextArea1_' + $rootScope.resetText,
+                     layer: true,
+                     draggable: true,
+                     groups: ['TextArea_' + $rootScope.resetText],
+                     dragGroups: ['TextArea_' + $rootScope.resetText],
+                     opacity: $rootScope.shapestyleOpacity,
+                    strokeStyle: $rootScope.shapestyleborderColor,
+                     strokeWidth: $rootScope.shapestyleborderWidth,
+                 
+                     x: $scope.offsetX1, y: $scope.offsetY1,
+                     width: $scope.x - $scope.offsetX1,
+                     height: $scope.y - $scope.offsetY1,
+                     add: function (layer) {
+                      
+                     },
+                     click: function (layer) {
+                         $rootScope.shapeTypeText = "textAreaRect";
+
+                         var layerNameSplit = layer.name;
+
+                         var splitedName = layerNameSplit.split("_");
+
+                         var textValName = "TextArea_";
+
+                         var concatinateResult = textValName.concat(splitedName[1]);
+
+                         $rootScope.canvasLayerNameCollection = [];
+                         $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
+
+
+
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: '#fff',
+                                 strokeStyle: '#c33',
+                                 strokeWidth: 2,
+                                 width: 5, height: 5,
+                                 cornerRadius: 3
+                             }
+                         }).drawLayers();
+
+                     },
+                     dblclick: function (layer) {
+                        // debugger;
+                         $rootScope.isTrue = true;
+                      
+                         var _rectLayerOnSave = layer.name;
+                         var  _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
+                         var str1 = "TextArea_";
+                         var res = str1.concat(_rectLayerOnSaveSplit[1]);
+                         
+                         $rootScope.modifySavedText.push({ TextName: layer.name, RectText: res});
+                         $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
+                        
+                         var _rectLayerOnSaveSplitInt;
+                         if (_rectLayerOnSaveSplit[1] >= 3) 
+                             _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2);
+                         else
+                             _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
+                  
+                         var b = $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].Text1;
+                         $("#text_area").val(b);
+                    //     alert($rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontSize);
+                                                
+                         $("#text_area").css("font-size", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontSize);
+                         $("#text_area").css("font-weight", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontStyle);
+                         $("#text_area").css("font-style", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontStyle);
+                         $("#text_area").css("text-align", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].Align);
+                         $("#text_area").css("color", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontColor);
+                         $("#text_area").css("font-family", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontFamily);
+                         $("#text_area").css("text-decoration", $rootScope.underlineText);
+                         
 
-        $rootScope.fontSizes = $("#text_area").css("font-size");
-        $rootScope.fontWeight = $("#text_area").css("font-weight");
-        $rootScope.fontStyle = $("#text_area").css("font-style");
-        $rootScope.textAlignmt = $("#text_area").css("text-align");
-        $rootScope.fontColor = $("#text_area").css("color");
-        $rootScope.fontFamily = $("#text_area").css("font-family");
-        $rootScope.underlineText = $("#text_area").css("text-decoration");
-        $rootScope.textArea = $("#text_area").val();
-        $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
-        $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
-       // alert($rootScope.fontColor);
-        $('#canvas').drawText({
-            layer: true,
-            draggable: true,
-            name: 'TextArea_' + $rootScope.resetText,
-            groups: ['TextArea_' + $rootScope.resetText],
-            dragGroups: ['TextArea_' + $rootScope.resetText],
-            fillStyle: $rootScope.fontColor,
-            fontStyle: $rootScope.fontStyle,
-            fontSize: $rootScope.fontSizes,
-            fontFamily: $rootScope.fontFamily,
-            align: $rootScope.textAlignmt,
-            strokeWidth: 0,
-            text: $rootScope.textArea,
-            x: $scope.offsetX1, y: $scope.offsetY1,
-            maxWidth: $scope.x - $scope.offsetX1,
-            maxHeight: $scope.y - $scope.offsetY1,
-
-            click: function (layer) {
+                         _rectLayerOnSaveSplitInt = ''; b = '';
+                         $("#annotationTextModal").modal("toggle");
+
+                     },
+                     mouseout: function (layer) {
+
+                         $rootScope.canvasLayerNameCollection = [];
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: 'pink',
+                                 strokeStyle: 'yellow',
+                                 strokeWidth: 0,
+                                 width: 0, height: 0,
+                                 cornerRadius: 0
+                             }
+
+                         }).drawLayers();
+                         // $rootScope.textss = '';
+
+                     },
+                     mouseover: function (layer) {
+
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: '#fff',
+                                 strokeStyle: '#c33',
+                                 strokeWidth: 2,
+                                 width: 5, height: 5,
+                                 cornerRadius: 3
+                             }
+                         }).drawLayers();
 
+                     }
+                 });
+           $("#text_area").val('');
+           $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
 
+       }
+       else {
+          // debugger;
+      
 
-            },
-            change: function (layer, props) {
+           var _modifiedText = $("#text_area").val();
+           var _modifiedFontSize = $("#text_area").css("font-size");
+           var _modifiedFontWeight = $("#text_area").css("font-weight");
+           var _modifiedFontStyle = $("#text_area").css("font-style");
+           var _modifiedTextAlign = $("#text_area").css("text-align");
+           var _modifiedFontColor = $("#text_area").css("color");
+           var _modifiedFontFamily = $("#text_area").css("font-family");
+           var _modifiedFontDecoration = $("#text_area").css("text-decoration");
+
+           $("#canvas").removeLayer($rootScope.modifySavedText[0].RectText).drawLayers();
+           $("#canvas").removeLayer($rootScope.modifySavedText[0].TextName).drawLayers();
+          
+           $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++;
+           $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;
+         //  alert($rootScope.resetText);
+          // alert('TextArea12_' + $rootScope.resetTextSave);
+           $('#canvas').drawText({
+               layer: true,
+               draggable: true,
+               name: 'TextArea12_' + $rootScope.resetTextSave,
+               groups: ['TextArea12_' + $rootScope.resetTextSave],
+               dragGroups: ['TextArea12_' + $rootScope.resetTextSave],
+               fillStyle: _modifiedFontColor,
+               fontStyle: _modifiedFontStyle,
+               fontSize: _modifiedFontSize,
+               fontFamily: _modifiedFontFamily,
+               align: _modifiedTextAlign,
+               strokeWidth: 0,
+               text: _modifiedText,
+               x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
+               maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
+               maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
+
+               add: function (layer) {
 
-            }
+               
 
-        })
-              // Draw rect as wide as the text
-              .drawRect({
-                  name: 'TextArea1_' + $rootScope.resetText,
-                  layer: true,
-                  draggable: true,
-                  groups: ['TextArea_' + $rootScope.resetText],
-                  dragGroups: ['TextArea_' + $rootScope.resetText],
-                  opacity: $rootScope.shapestyleOpacity,
-               //   strokeStyle: 'black',
-                 // strokeWidth: 2,
-                  strokeStyle: $rootScope.shapestyleborderColor,
-                  strokeWidth: $rootScope.shapestyleborderWidth,
-                 // fillStyle: $rootScope.shapestyleFillColor,
-                  x: $scope.offsetX1, y: $scope.offsetY1,
-                  width: $scope.x - $scope.offsetX1,
-                  height: $scope.y - $scope.offsetY1,
-
-                  click: function (layer) {
-                      $rootScope.shapeTypeText = "textAreaRect";
-
-                      var layerNameSplit = layer.name;
-
-                      var splitedName = layerNameSplit.split("_");
-
-                      var textValName = "TextArea_";
-
-                      var concatinateResult = textValName.concat(splitedName[1]);
-
-                      $rootScope.canvasLayerNameCollection = [];
-                      $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
-
-
-
-                      $('#canvas').setLayer(layer.name, {
-                          handle: {
-                              type: 'rectangle',
-                              fillStyle: '#fff',
-                              strokeStyle: '#c33',
-                              strokeWidth: 2,
-                              width: 5, height: 5,
-                              cornerRadius: 3
-                          }
-                      }).drawLayers();
-
-                  },
-                  dblclick: function () {
-                      $("#text_area").css("font-size", $rootScope.fontSizes);
-                      $("#text_area").css("font-weight", $rootScope.fontWeight);
-                      $("#text_area").css("font-style", $rootScope.fontStyle);
-                      $("#text_area").css("text-align", $rootScope.textAlignmt);
-                      $("#text_area").css("color", $rootScope.fontColor);
-                      $("#text_area").css("font-family", $rootScope.fontFamily);
-                      $("#text_area").css("text-decoration", $rootScope.underlineText);
-
-                      $("#text_area").val($rootScope.textArea);
-
-                       $("#annotationTextModal").modal("toggle");
-
-                  },
-                  mouseout: function (layer) {
-
-                      $rootScope.canvasLayerNameCollection = [];
-                      $('#canvas').setLayer(layer.name, {
-                          handle: {
-                              type: 'rectangle',
-                              fillStyle: 'pink',
-                              strokeStyle: 'yellow',
-                              strokeWidth: 0,
-                              width: 0, height: 0,
-                              cornerRadius: 0
-                          }
-
-                      }).drawLayers();
-
-                  },
-                  mouseover: function (layer) {
-
-                      $('#canvas').setLayer(layer.name, {
-                          handle: {
-                              type: 'rectangle',
-                              fillStyle: '#fff',
-                              strokeStyle: '#c33',
-                              strokeWidth: 2,
-                              width: 5, height: 5,
-                              cornerRadius: 3
-                          }
-                      }).drawLayers();
+               },
+
+               change: function (layer, props) {
+
+               }
+
+           })
+                 // Draw rect as wide as the text
+                 .drawRect({
+                     name: 'TextArea13_' + $rootScope.resetTextSave,
+                     layer: true,
+                     draggable: true,
+                     groups: ['TextArea12_' + $rootScope.resetTextSave],
+                     dragGroups: ['TextArea12_' + $rootScope.resetTextSave],
+                     opacity: $rootScope.shapestyleOpacity,
+                     strokeStyle: $rootScope.shapestyleborderColor,
+                     strokeWidth: $rootScope.shapestyleborderWidth,
+                     x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
+                     width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
+                     height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
+                  
+                     click: function (layer) {
+                         $rootScope.shapeTypeText = "textAreaRect";
+                         
+                         var layerNameSplit = layer.name;
+
+                         var splitedName = layerNameSplit.split("_");
+
+                         var textValName = "TextArea12_";
+
+                         var concatinateResult = textValName.concat(splitedName[1]);
+
+                         $rootScope.canvasLayerNameCollection = [];
+                         $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
+
+
+
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: '#fff',
+                                 strokeStyle: '#c33',
+                                 strokeWidth: 2,
+                                 width: 5, height: 5,
+                                 cornerRadius: 3
+                             }
+                         }).drawLayers();
+
+                     },
+                     dblclick: function (layer) {
+                     
+                         $rootScope.isTrue = true;
+
+                         var _rectLayerOnSave = layer.name;
+                         var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
+                         var str1 = "TextArea12_";
+                         var res = str1.concat(_rectLayerOnSaveSplit[1]);
+
+                         $rootScope.modifySavedText.push({ TextName: layer.name, RectText: res });
+                         $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
+                        
+                         $("#text_area").val(_modifiedText);
+                         $("#text_area").css("font-size", _modifiedFontSize);
+                         $("#text_area").css("font-weight", _modifiedFontWeight);
+                     $("#text_area").css("font-style", _modifiedFontStyle);
+                     $("#text_area").css("text-align", _modifiedTextAlign);
+                     $("#text_area").css("color", _modifiedFontColor);
+                     $("#text_area").css("font-family", _modifiedFontFamily);
+                     $("#text_area").css("text-decoration", _modifiedFontDecoration);
+
+
+                         $("#annotationTextModal").modal("toggle");
+
+                     },
+                     mouseout: function (layer) {
+                       
+                         $rootScope.canvasLayerNameCollection = [];
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: 'pink',
+                                 strokeStyle: 'yellow',
+                                 strokeWidth: 0,
+                                 width: 0, height: 0,
+                                 cornerRadius: 0
+                             }
+
+                         }).drawLayers();
+                        
+                     },
+                     mouseover: function (layer) {
+
+                         $('#canvas').setLayer(layer.name, {
+                             handle: {
+                                 type: 'rectangle',
+                                 fillStyle: '#fff',
+                                 strokeStyle: '#c33',
+                                 strokeWidth: 2,
+                                 width: 5, height: 5,
+                                 cornerRadius: 3
+                             }
+                         }).drawLayers();
 
-                  }
-              });
-        $("#text_area").val('');
+                     }
+                 });
+            $rootScope.modifySavedText = [];
 
-        $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
+       }
+   }
 
-    }
+    $rootScope.closeModal = function () {
+        debugger;
+
+   
+
+            $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
+            $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
+         
 
+    }
 
 
     function OnPaintCanvasMouseMove(event) {
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 91c355f..b0d2a26 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -253,7 +253,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $('.btnCursor').removeClass('activebtncolor');
             $(".btn-annotation").removeClass("activebtncolor");
             $(".btn-annotation-Text").addClass("activebtncolor");
-
+        //    $("#text_area").val('');
+        //    $("#text_area").css({ " font-family": 'Verdana, sans-serif', "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
         }
 
         $rootScope.DrawPolygon = function () {
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 28b86dd..b680f5e 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -391,7 +391,7 @@
                 </div>
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-sm-12"> 
+                        <div class="col-sm-12">
                             <h5>Mode</h5>
 
                             <div class="btn-group btn-group-justified" role="group" aria-label="...">
@@ -474,36 +474,36 @@
                                 <option>Arial Narrow</option>
                                 <option>Arial Rounded</option>
                                 <option>Arial TUR</option>
-                                
+
                             </select>
-                        <select class="form-control" id="selected-font-size">
-                            <option>14</option>
-                            <option>16</option>
-                            <option>18</option>
-                            <option>20</option>
-                            <option>22</option>
-                            <option>24</option>
-                            <option>26</option>
-                            <option>28</option>
-                            <option>36</option>
-                            <option>48</option>
-                            <option>72</option>
-                        </select>
-                           <span style="vertical-align:middle;">
+                            <select class="form-control" id="selected-font-size">
+                                <option>14</option>
+                                <option>16</option>
+                                <option>18</option>
+                                <option>20</option>
+                                <option>22</option>
+                                <option>24</option>
+                                <option>26</option>
+                                <option>28</option>
+                                <option>36</option>
+                                <option>48</option>
+                                <option>72</option>
+                            </select>
+                            <span style="vertical-align:middle;">
                                 <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
-                                <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
-                            </span>
-                               <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
-                                   <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
+                                    <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
+                                </span>
+                                <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
+                                    <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
 
-                               </span>
-                               <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
-                                   <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
-                               </span>
+                                </span>
+                                <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
+                                    <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
+                                </span>
                             </span>
 
                             <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
-                               
+
                                 <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
                             </div>
 
@@ -522,30 +522,24 @@
 
                                 </span>
                             </span>
-                           
 
-</div>
+
+                        </div>
                     </div>
                     <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button>
                     <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
                 </div>
             </div>
         </div>
     </div>
 
-    
-
-
 
 
 
     <!--List manager-->
-
-
-
     <!--List manager-->
     <style>
         #listManager {
@@ -657,7 +651,7 @@
     </div>
 
     <!--background disable div-->
-    
+
     <div id="modelbackground"></div>
 
 
@@ -683,7 +677,7 @@
                                     <div class="radio">
                                         <label>
                                             <input type="radio" name="filloption" id="filloption1" value="filloption1">
-                                            <span class="">Texture</span> 
+                                            <span class="">Texture</span>
                                             <img src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
                                         </label>
                                     </div>
@@ -691,15 +685,15 @@
                                         <label>
                                             <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
 
-                                          
+
                                             <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
-                                                <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 
+                                                <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
                                                 <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
                                             </div>
 
 
                                             <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">-->
-                                            <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>--> 
+                                            <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>-->
                                             <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
                                         </label>
                                     </div>
@@ -740,8 +734,8 @@
                                 </div>
                                 <div class="col-sm-6">
                                     <label class="marginTop5">
-                                        <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 
-                                        <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>--> 
+                                        <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
+                                        <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>-->
 
 
                                         <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
@@ -791,7 +785,7 @@
         </div>
     </div>
 
-   
+
 
     <script>
         function mytoggle() {
@@ -874,17 +868,17 @@
                 max: 60,
                 value: 10,
                 slide: function (event, ui) {
-                
+
                     $("#amount-2").val(ui.value);
-                   
-                
+
+
                 },
                 stop: function (event, ui) {
 
                     $("#paintLine").attr("data-size", ui.value);
 
                 }
-                              
+
             });
             //$("#slider-range-min-2").on("slidestart", function (event, ui) {
 
@@ -896,7 +890,7 @@
 
             //});
             //  $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); });
-           
+
             $("#amount-2").val($("#slider-vertical-2").slider("value"));
 
             $(function () {
@@ -950,7 +944,7 @@
                 theme: 'bootstrap',
                 change: function (hex) {
                     if (!hex) return;
-                    
+
                     $inlinehex.html(hex);
                 }
             });
@@ -1003,20 +997,20 @@
 
             $("#selected-font-size").change(function () {
 
-                $("#text_area").css("font-size", $(this).val()+"px");
+                $("#text_area").css("font-size", $(this).val() + "px");
             });
 
             $("#selected-font-family").change(function () {
-               
+
                 $("#text_area").css("font-family", $(this).val());
 
             });
 
-        
+
         });
-    
-    
-    
+
+
+
     </script>
 
 
@@ -1027,19 +1021,19 @@
             $("#borderWidthCanvasElement").change(function () {
 
                 borderWidth = $(this).val();
-                
+
                 if (borderColor != null) {
-                  
+
                     $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
                 } else {
-               
-                   $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
+
+                    $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
                 }
             });
-            
+
 
             $('.borderColorCanvasPreview').each(function () {
-             
+
                 $(this).minicolors({
                     control: $(this).attr('data-control') || 'hue',
                     defaultValue: $(this).attr('data-defaultValue') || '',
@@ -1055,11 +1049,11 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
-                         
+
                             borderColor = value;
                             $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
-                       
-                                                    
+
+
                         }
                     },
                     theme: 'bootstrap'
@@ -1087,7 +1081,7 @@
                         if (typeof console === 'object') {
                             console.log(value);
                             $("#imgOpacity").parent().css("background-color", value);
-                       
+
                         }
                     },
                     theme: 'bootstrap'
@@ -1133,7 +1127,7 @@
                slide: function (event, ui) {
 
                    $(".marginTopBtm10 img.imgopacity").css("opacity", ui.value);
-                 //  $("#slider-value").html(ui.value);
+                   //  $("#slider-value").html(ui.value);
 
                }
 
@@ -1153,5 +1147,5 @@
 
 
 
-            </body>
+</body>
 </html>
\ No newline at end of file