fix bug in annotation tools

Birendra
1 parent 744cfacf
Showing 4 changed files with 62 additions and 34 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
400-SOURCECODE/AIAHTML5.Web/index.aspx
400-SOURCECODE/AIAHTML5.Web/libs/sketch.js
@@ -8720,7 +8720,13 @@ AIA.controller(&quot;DAController&quot;, [&quot;$scope&quot;, &quot;$rootScope&quot;, &quot;$compile&quot;, &quot;$http&quot;, &quot;$l
                     $scope.SetwindowStoreData(windowviewid,'zoomInOut',25);
                     $('#zoomValueDA_' + windowviewid).attr('value', $scope.GetwindowStoreData(windowviewid,'zoomInOut'));
                 }
-
+                $rootScope.isLoading = true;
+                $('#spinner').css('visibility', 'visible');
+                var canDiv = document.getElementById('canvasDivDA_' + windowviewid);
+                var canDivChildCount = canDiv.childElementCount;
+                if (canDivChildCount > 0) {
+                    canDiv.innerHTML = '';
+                }
                 var viewOrientationId = $scope.GetwindowStoreData(windowviewid, 'viewOrientationId');
             $scope.CalculateImageCordinates(viewOrientationId,windowviewid);
@@ -2660,7 +2660,10 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.CIAnotationIdentifyModeOff = false;
     $rootScope.OnIdentifyClick = function () {
-
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
+        $rootScope.shapeType = "";
+        $(".btn-annotation").removeClass("activebtncolor");
         $("#OnIdentify").addClass("annotationtoolbartab");
         $("#DrawMode").removeClass("annotationtoolbartab");
@@ -2842,7 +2845,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.DrawingMode = function () {
-
+    //clear sketch js event for paint and erase
+    $.sketch = { tools: {}};
         //Annotation History
         $rootScope.isAnnotaionToolBarDrawingModeActive = true;
         $("#OnIdentify").removeClass("annotationtoolbartab");
@@ -2917,6 +2921,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     //----Annotation Toolbar: Jcanvas-----
     $rootScope.DrawLine = function (e) {
+       //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-line").addClass("activebtncolor");
@@ -2980,7 +2986,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.DrawPin = function (e) {
-
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-pin").addClass("activebtncolor");
@@ -3022,7 +3029,9 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
-    $rootScope.Cursor = function () {      
+    $rootScope.Cursor = function () { 
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};     
         $rootScope.shapeType = "cursor";
         $(".btn-annotation").removeClass("activebtncolor");
         //   $("#" + e.currentTarget.id).removeClass("activebtncolor");
@@ -3051,7 +3060,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.DrawRectangle = function (e) {
-
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-rectangle").addClass("activebtncolor");
@@ -3152,13 +3162,12 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                         }
                         $rootScope.shapeType = "FreeStylePaint";
-                        var btnBrushSizeValue = $("#btnBrushSize").val();
-                        $rootScope.shapeSize = parseInt(btnBrushSizeValue);
-                        $("#annotationpaintbrushsize").attr("data-size", $rootScope.shapeSize);
+
+                        $("#annotationpaintbrushsize").attr("data-size", parseInt($("#btnBrushSize").val()));
                         $("#annotationpaintbrushsize").attr("data-color", $rootScope.shapestyleColorWithOpacity);
-                        if ($rootScope.shapeSize == '') {
+                        if (parseInt($("#btnBrushSize").val()) <1) {
                             $("#" + canvasPaintId).sketch({ defaultSize: 1});
                         }
                         else {
@@ -3195,12 +3204,10 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                     $rootScope.isAnnotaionToolBarDrawingModeActive = true;
                     $rootScope.switchCanvasToPaintCanvas(paneld);
-                    var btneraseBrushSizeValue = $("#btnBrushSize").val();                  
-                    $rootScope.shapeSize = parseInt(btneraseBrushSizeValue);
                     $('#' + canvasPaintId).sketch();
-                     $("#annotationpainteraser").attr("data-size", $rootScope.shapeSize);
+                     $("#annotationpainteraser").attr("data-size", parseInt($("#btnBrushSize").val()));
                      $scope.PaintEraseEvent();
                  }
             }
@@ -3219,14 +3226,14 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                           this.stopPainting();
                       }
                       this.color= $rootScope.shapestyleColorWithOpacity!=undefined ? $rootScope.shapestyleColorWithOpacity : "#fff";
-                      this.size=$rootScope.shapeSize;
+                      this.size= parseInt($("#btnBrushSize").val());
                       if ($("#annotationpaintbrushsize").hasClass("activebtncolor")) {
                         this.tool='marker';
                         this.startPainting();
                       }
                       else if ($("#annotationpainteraser").hasClass("activebtncolor")) {
                         this.tool='eraser';
-                        this.size=$rootScope.shapeSize>5?$rootScope.shapeSize:5;
+                        this.size=parseInt($("#btnBrushSize").val())>5?parseInt($("#btnBrushSize").val()):5;
                         this.startPainting();
                       }
                       else
@@ -3360,7 +3367,9 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
         }
     }
-    $rootScope.DrawCircle = function (e) {      
+    $rootScope.DrawCircle = function (e) {  
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};    
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-circle").addClass("activebtncolor");
@@ -3402,6 +3411,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.DrawArrow = function (e) {
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-arrow").addClass("activebtncolor");
@@ -3442,6 +3453,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
 			}       
     }
     $rootScope.DrawText = function () {
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $(".btn-annotation-Text").addClass("activebtncolor");
@@ -3484,6 +3497,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     }
     $rootScope.DrawPolygon = function () {
+        //clear sketch js event for paint and erase
+        $.sketch = { tools: {}};
         $("#OnIdentify").removeClass('annotationtoolbartab');
         $("#DrawMode").addClass('annotationtoolbartab');
@@ -4516,7 +4531,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                 strokeStyle: shapestyleborderColor,
                 strokeWidth: shapestyleborderWidth,
                 rounded: true,
-                startArrow: true,
+                endArrow: true,
                 arrowRadius: 7,
                 arrowAngle: 90,
                 x1: offsetX1, y1: offsetY1,
@@ -4778,7 +4793,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                 strokeStyle: 'grey',
                 strokeWidth: shapestyleborderWidth,
                 fillStyle: radial,
-                x: offsetX1, y: offsetY1,
+                x: x, y: y,
                 radius: 5,
                 add: function (layer) {
                     layer.draggable = false;                
@@ -5641,7 +5656,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     //Birendra updated due to some issue
     $rootScope.OnPaintCanvasMouseDown = function (event) {
-       event.preventDefault();              
+       event.preventDefault();           
         if ($rootScope.isAnnotatiomToolBarPopupClosed == false) { 
             if ($rootScope.shapeType==undefined || $rootScope.shapeType=='cursor'||$rootScope.shapeType=="") {
                 return;
@@ -5688,12 +5703,13 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
     //Birendra updated due to some issue
     $rootScope.OnPaintCanvasMouseUp = function (event) {
         event.preventDefault();
+       
         if ($rootScope.isAnnotatiomToolBarPopupClosed == false) {
             if ($rootScope.shapeType==undefined || $rootScope.shapeType=='cursor'||$rootScope.shapeType=="") {
                 return;
             }
             $rootScope.clicked=false;
-            if (isDrawing === true) {                
+            if (isDrawing === true) {                             
                 isDrawing = false;               
                 $(".line").remove();
                 $(".arrow").remove();
@@ -5820,7 +5836,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
             if ($rootScope.shapeType==undefined || $rootScope.shapeType=='cursor'||$rootScope.shapeType=="") {
                 return;
             }
-            if ($rootScope.clicked == true) {               
+            if ($rootScope.clicked == true) {                
                 var canvasElement=event.target;
                 if (canvasElement!= null || canvasElement != undefined)
                 {
@@ -5828,7 +5844,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                     if (canvasId != null ||canvasId != undefined)
                     {
                         if(canvasId.match("canvasDA")||canvasId.match("canvasAA")||canvasId.match("canvasCI")||canvasId.match("canvasAI")||canvasId.match("canvasPIC"))
-                        {
+                        {                      
                             var canvasDiv =  (event.target.parentElement);                            
                             var canvasDivId = canvasDiv.id;
                             isDrawing = true;
@@ -5841,19 +5857,19 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                                 case "Line":
                                     $(".line").remove();
                                     $rootScope.isLinePreviewCompleted = true;
-                                    $("#" + canvasDivId).append("<div class='line' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
+                                    $("#" + canvasDivId).append("<div class='line' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + ($rootScope.offsetY1+5) + "px;'></div>");
                                     $rootScope.Annotationangle();
                                     break;
                                 case "Arrow":
                                     $(".arrow").remove();
                                     $rootScope.isArrowPreviewCompleted = true;
-                                    $("#" + canvasDivId).append("<div class='arrow' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='border-bottom: 9px solid transparent;border-right: 12px dashed #ccc;border-top: 7px solid transparent;height: 0;left: -6px;position: absolute;top: -8px;width: 0;'></div></div>");
+                                    $("#" + canvasDivId).append("<div class='arrow' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + ($rootScope.offsetY1+5) + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div class='arrowPoint' style='border-bottom: 9px solid transparent;border-left: 12px dashed #ccc;border-top: 7px solid transparent;height: 0;left:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;position: absolute;top: -8px;width: 0;'></div></div>");
                                     $rootScope.Annotationangle();
                                     break;
                                 case "Pin":
                                     $(".pin").remove();
                                     $rootScope.isPinPreviewCompleted = true;
-                                    $("#" + canvasDivId).append("<div class='pin' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='background-color:#fff;left: -8px;position: absolute;top: -6px;width: 10;height:12px;width:12px;border:2px dashed #808080;border-radius:50%;'></div></div>");
+                                    $("#" + canvasDivId).append("<div class='pin' style='z-index:12001;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + ($rootScope.offsetY1+5) + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div class='pinPoint' style='background-color:#fff;left:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;position: absolute;top: -6px;height:12px;width:12px;border:2px dashed #808080;border-radius:50%;'></div></div>");
                                     $rootScope.Annotationangle();
                                     break;
                                 case "Circle":
@@ -5917,9 +5933,11 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
                 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' });
+                $('.arrowPoint').css({ 'left': 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' });
+                $('.pinPoint').css({ 'left': dottedLineWidth + 'px' });
                 break;
             case "Circle":
                 var classname=".circle"
@@ -1807,12 +1807,12 @@
     <script>
         $(function () {
             function onBrushSizeChange() {
-                $('.btnCursor').trigger('click');
-                $('.btnCursor').addClass('activebtncolor');
-                $(".btn-annotation").removeClass("activebtncolor");
-                $(".btn-annotation-erase").removeClass("activebtncolor");
-                $(".btn-annotation-erase").removeClass("activebtncolor");
-                $(".annotationpaintbrushsize").removeClass("activebtncolor");
+                //$('.btnCursor').trigger('click');
+               // $('.btnCursor').addClass('activebtncolor');
+               // $(".btn-annotation").removeClass("activebtncolor");
+               // $(".btn-annotation-erase").removeClass("activebtncolor");
+               // $(".btn-annotation-erase").removeClass("activebtncolor");
+               // $(".annotationpaintbrushsize").removeClass("activebtncolor");
                 var x = $('#canvasPaint').css("z-index");
                 var y = $('#canvas').css("z-index");
@@ -106,9 +106,13 @@ var __slice = Array.prototype.slice;
         e.pageX = e.originalEvent.targetTouches[0].pageX;
         e.pageY = e.originalEvent.targetTouches[0].pageY;
       }
-      $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
-      e.preventDefault();
-      return false;
+      if($.sketch.tools[$(this).data('sketch').tool]!=undefined) //Birendra-after paint/erase create problem while drawing other shape
+      {
+        $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
+        e.preventDefault();
+        return false;
+      }
+      
     };
     Sketch.prototype.redraw = function() {
       var sketch;