Annotations are working now in both mirror and non mirrored images in TBox.

Need to implement annotations code on Modesty canva sin TB.

Annotations are working now in both mirror and non mirrored images in TBox.
Need to implement annotations code on Modesty canva sin TB.
Nikita Kulshreshtha
1 parent ce06658e
Showing 1 changed file with 194 additions and 178 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -747,8 +747,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         if ($("#canvasDiv").find("canvas[id='canvasPaint']").length == 0) {
             $("#canvasDiv").append('<canvas id="canvasPaint" width="2277" height="3248" class="canvas-annotationStyle1"></canvas><canvas id="canvas" width="2277" height="3248" class="canvas-annotationStyle"></canvas>');
-           $scope.BindCanvasDrawingListners();
-        //  $rootScope.FreeStylePaint();
+            $scope.BindCanvasDrawingListners();
+            //  $rootScope.FreeStylePaint();
         }
@@ -1370,7 +1370,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     }
                 }
-              //  $rootScope.previousHighlightList.push(RGBColor);
+                //  $rootScope.previousHighlightList.push(RGBColor);
                 $scope.highLightBodyBasedOnIcolor(RGBColor);
             }
@@ -1382,7 +1382,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //}
             //extarct clicked body part is extarct button is already enabled.
-           // debugger;
+            // debugger;
             if ($rootScope.isExtract == true) {
                 $scope.enableExtract(false);
             }
@@ -1505,7 +1505,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //   console.log('$rootScope.isListManagerSelected= ' + $rootScope.isListManagerSelected + ' length= ' + $scope.ColoredImageSRC.length)
-                    if (($scope.ColoredImageSRC != null || $scope.ColoredImageSRC != undefined)) {
+                if (($scope.ColoredImageSRC != null || $scope.ColoredImageSRC != undefined)) {
                     if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                         $scope.isEligibleForHighlight = true;
@@ -1743,7 +1743,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     }
                 }
-               // $rootScope.previousHighlightList.push(RGBColor);
+                // $rootScope.previousHighlightList.push(RGBColor);
                 if (maskCanvasId.match('modestyImg') && RGBColor != '000000') { }
@@ -1758,7 +1758,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //    $rootScope.previousHighlightList.push(RGBColor);
             //}
-           // debugger;
+            // debugger;
             //extarct clisked body part is extarct button is already enabled.
             if ($rootScope.isExtract == true) {
                 $scope.enableExtract(false);
@@ -2220,7 +2220,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                                 $scope.aligneCanvasWithTerm()
                             }
-                          //  $timeout(function () { $scope.DisableProgressBar() }, 1000);
+                            //  $timeout(function () { $scope.DisableProgressBar() }, 1000);
@@ -2455,17 +2455,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                                 }
                                 else {
                                     var canvasDiv = document.getElementById('canvasDiv');
-                                      $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition);
-                                      $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition);
+                                    $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition);
+                                    $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition);
-                                      $rootScope.isLoading = false;
+                                    $rootScope.isLoading = false;
-                                      $('#spinner').css('visibility', 'hidden');
+                                    $('#spinner').css('visibility', 'hidden');
                                     //$('#canvasDiv').scrollLeft(newX);
-                                      //$('#canvasDiv').scrollTop(newY);
+                                    //$('#canvasDiv').scrollTop(newY);
                                 }
-                              //  $rootScope.isHighlightBodyByBodySystem = false;
+                                //  $rootScope.isHighlightBodyByBodySystem = false;
                             }
@@ -2661,46 +2661,46 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             var tCanvas = document.getElementById('transparencyCanvas');
-                var tCanvasContext = tCanvas.getContext('2d');
+            var tCanvasContext = tCanvas.getContext('2d');
-                var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
+            var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
-                var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
+            var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
-                //  var tCanvas = document.getElementById('transparencyCanvas');
-                if (tCanvas != null) {
-                    clearTransCanvas();
-                }
-                var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
-                var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
-                var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
-                var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
-                var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);
-                var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth);
+            //  var tCanvas = document.getElementById('transparencyCanvas');
+            if (tCanvas != null) {
+                clearTransCanvas();
+            }
+            var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
+            var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
+            var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
+            var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
+            var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);
+            var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth);
-                var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
+            var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
-                $.each(BodyRegionDictionary, function (index, value) {
-                    //debugger;
-                    //   alert(' $.each(BodyRegionDictionary1')
+            $.each(BodyRegionDictionary, function (index, value) {
+                //debugger;
+                //   alert(' $.each(BodyRegionDictionary1')
-                    var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
-                    var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
+                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
+                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
-                    //   alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
-                    if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
-                        //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);
-                        // debugger;
-                        $scope.layerNumber = parseInt(txtlayerNumber.value);
+                //   alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
+                if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
+                    //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);
+                    // debugger;
+                    $scope.layerNumber = parseInt(txtlayerNumber.value);
-                        $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);
-                    }
+                    $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);
+                }
-                })
+            })
         }
@@ -2758,10 +2758,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             if ($("#txtlayerNumber").val() == '') {
                 var layerInputVal = 0;
-                    var layerInputValInc = parseInt(layerInputVal);
-                    $scope.layerNumber = parseInt(layerInputValInc);
-                    $("#txtlayerNumber").val($scope.layerNumber);
-                  //  $rootScope.PreviouslayerNumbr = $scope.layerNumber;
+                var layerInputValInc = parseInt(layerInputVal);
+                $scope.layerNumber = parseInt(layerInputValInc);
+                $("#txtlayerNumber").val($scope.layerNumber);
+                //  $rootScope.PreviouslayerNumbr = $scope.layerNumber;
             }
             else {
@@ -2784,7 +2784,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 var layerInputValDec = parseInt(layerInputVal);
                 $scope.layerNumber = parseInt(layerInputValDec);
                 $("#txtlayerNumber").val($scope.layerNumber);
-             //   $rootScope.PreviouslayerNumbr = $scope.layerNumber;
+                //   $rootScope.PreviouslayerNumbr = $scope.layerNumber;
             }
             else
@@ -3071,10 +3071,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //$("#bord").css("display", "none");
                     //$("#dot").css("display", "none");
-                  $('#sppeachBubble').remove();
+                    $('#sppeachBubble').remove();
-                 $("#bord").remove();
-                  $("#dot").remove();
+                    $("#bord").remove();
+                    $("#dot").remove();
                 });
@@ -3501,7 +3501,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                  drag: function (evt) {
                      //$("#dot_annotation").css("display", "none");
-                    $("#dot_annotation").remove();
+                     $("#dot_annotation").remove();
                      var verticalScrollPosition = canvasDiv.scrollTop;
                      var horizontlScrollPosition = canvasDiv.scrollLeft;
@@ -4005,7 +4005,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 XforTransImage = 0;
             }
             else
-            XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
+                XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
             //  alert('1')
         }
         else if (TransparencyBoxStartX < X && TransparencyEndX < parseInt(X) + parseInt(Width)) {
@@ -4021,7 +4021,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 XforTransImage = 0;
             }
             else
-            XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
+                XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
             // alert('2')
         }
@@ -4037,7 +4037,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 XforTransImage = parseInt(TransparencyBoxStartX) - parseInt(X);
             }
             else
-            XforTransImage = 0;
+                XforTransImage = 0;
             //   alert('3')
         }
         else if (TransparencyBoxStartX > X && TransparencyEndX < parseInt(X) + parseInt(Width)) {
@@ -4070,7 +4070,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 YforTransImage = 0;
             }
             else
-             YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY)//parseFloat(Y) - (24.4);
+                YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY)//parseFloat(Y) - (24.4);
             //  alert('5')
         }
         else if (TransparencyBoxStartY < Y && TransparencyBoxEndY < (parseInt(Y) + parseInt(Height))) {
@@ -4084,7 +4084,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 YforTransImage = 0;
             }
             else
-            YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY);// - (24.4);
+                YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY);// - (24.4);
         }
         else if (TransparencyBoxStartY > Y && TransparencyBoxEndY > parseInt(Y) + parseInt(Height)) {
@@ -4742,49 +4742,49 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var isMirror;
         var width;
         var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
-                if ($rootScope.viewOrientationId == 5) {
+        if ($rootScope.viewOrientationId == 5) {
-                        var clickedBodyRegionData = new jinqJs()
-                                                          .from(BodyRegionDictionary)
-                                                         .where('bodyRegionId == 6')
-                                                          .select();
+            var clickedBodyRegionData = new jinqJs()
+                                              .from(BodyRegionDictionary)
+                                             .where('bodyRegionId == 6')
+                                              .select();
-                       // clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
-                        x = clickedBodyRegionData[0].X;
-                        y = clickedBodyRegionData[0].Y;
-                        width = clickedBodyRegionData[0].Width;
-                        var height = clickedBodyRegionData[0].Height;
-                        isMirror = clickedBodyRegionData[0].IsMirror;
-                        var bodyRegionRight = parseInt(x) + parseInt(width);
-                        var bodyRegionBottom = parseInt(y) + parseInt(height);
-                        if (actulalX <= bodyRegionRight && x <= actulalX && actualY <= bodyRegionBottom && y <= actualY) {
+            // clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
+            x = clickedBodyRegionData[0].X;
+            y = clickedBodyRegionData[0].Y;
+            width = clickedBodyRegionData[0].Width;
+            var height = clickedBodyRegionData[0].Height;
+            isMirror = clickedBodyRegionData[0].IsMirror;
+            var bodyRegionRight = parseInt(x) + parseInt(width);
+            var bodyRegionBottom = parseInt(y) + parseInt(height);
+            if (actulalX <= bodyRegionRight && x <= actulalX && actualY <= bodyRegionBottom && y <= actualY) {
-                                clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
-                                x = clickedBodyRegionData[0].X;
-                                y = clickedBodyRegionData[0].Y;
-                                width = clickedBodyRegionData[0].Width;
-                                var height = clickedBodyRegionData[0].Height;
-                                isMirror = clickedBodyRegionData[0].IsMirror;
-                       }
+                clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
+                x = clickedBodyRegionData[0].X;
+                y = clickedBodyRegionData[0].Y;
+                width = clickedBodyRegionData[0].Width;
+                var height = clickedBodyRegionData[0].Height;
+                isMirror = clickedBodyRegionData[0].IsMirror;
+            }
-                }
-            else {
-                $.each(BodyRegionDictionary, function (index, value) {
+        }
+        else {
+            $.each(BodyRegionDictionary, function (index, value) {
-                        var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
-                        var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
-                        if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) {
+                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
+                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
+                if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) {
-                                clickedBodyRegion = value.bodyRegionId;
-                                x = value.X;
-                                y = value.Y;
-                                width = value.Width;
-                                isMirror = value.IsMirror;
-                                return false;
-                            }
-                    })
-            }
+                    clickedBodyRegion = value.bodyRegionId;
+                    x = value.X;
+                    y = value.Y;
+                    width = value.Width;
+                    isMirror = value.IsMirror;
+                    return false;
+                }
+            })
+        }
         if (isMirror == "Yes") {
@@ -4795,30 +4795,40 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
             var clickedCanavs = document.getElementById(clickedCanvasMaskId);
-            //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation
-            var clickedBodyRegionData = new jinqJs()
-                                                .from(BodyRegionDictionary)
-                                               .where('bodyRegionId == ' + clickedBodyRegion)
-                                                .select();
-            if (clickedBodyRegionData != null || clickedBodyRegionData != undefined) {
+            var maskCanvasId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
+            var maskCanvas = document.getElementById(maskCanvasId);
+                       
+            //if (oldMirrorMask != null) {
+            //    document.getElementById('canvasDiv').removeChild(oldMirrorMask);
+            //}
+            if (maskCanvas != null) {
+                x = maskCanvas.style.left;
+                y = maskCanvas.style.top;
-                var nomMirroredBodyRegion = new jinqJs()
-                                                    .from(clickedBodyRegionData)
-                                                   .where('IsMirror == No')
-                                                    .select();
+                var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
+                var maskCanvastrans = document.getElementById(maskCanvasTransId);
+                var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
-                //debugger;
-                var maskCanvasId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
-                var maskCanvas = document.getElementById(maskCanvasId);
-                //if (oldMirrorMask != null) {
-                //    document.getElementById('canvasDiv').removeChild(oldMirrorMask);
-                //}
-                if (maskCanvas != null) {
-                    x = maskCanvas.style.left;
-                    y = maskCanvas.style.top;
-                }
-                if (maskCanvas == null) {
+                getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, maskCanvasContexttrans, clickedBodyRegion, x, y, evt)
+
+
+            }
+
+                //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation
+
+            else if (maskCanvas == null) {
+                var clickedBodyRegionData = new jinqJs()
+                                           .from(BodyRegionDictionary)
+                                          .where('bodyRegionId == ' + clickedBodyRegion)
+                                           .select();
+                if (clickedBodyRegionData != null || clickedBodyRegionData != undefined) {
+
+                    var nomMirroredBodyRegion = new jinqJs()
+                                                        .from(clickedBodyRegionData)
+                                                       .where('IsMirror == No')
+                                                        .select();
+
                     var transparencyTempcanavsMask = document.createElement('canvas');
                     transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
                     transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height;
@@ -4831,8 +4841,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);
                     var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion);
-                    var tempMaskImg = new Image();
                     var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
+
+                    var tempMaskImg = new Image();
+                    tempMaskImg.src = tranparencyMaskImgSrc;
+
                     tempMaskImg.onload = function () {
                         var transparencyTempcanavsMask = document.getElementById(maskCanvasId);
                         var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');
@@ -4841,70 +4854,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         //get x,y of non mirrored canvas for this body region
                         x = transparencyTempcanavsMask.style.left;
                         y = transparencyTempcanavsMask.style.top;
-                    }
-                    tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc;
-                }
-                    var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
-                    var maskCanvastrans = document.getElementById(maskCanvasTransId);
-                    var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
-
-
-
-
-                    var canvasDiv = document.getElementById('canvasDiv');
-                    var verticalScrollPosition = canvasDiv.scrollTop;
-                    var horizontlScrollPosition = canvasDiv.scrollLeft;
-                    var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
+                        getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, tempmaskCtx, clickedBodyRegion, x, y, evt)
-                    var mirrorXOnNormalImage = parseInt(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
-
-                    var actulalX = mirrorXOnNormalImage
-                    var actualY = mousePos.y + verticalScrollPosition
-
-
-
-                    var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
-                    var maskCanvas = document.getElementById(clickedCanvasMaskId);
-                    var maskCanvasContext = maskCanvas.getContext("2d");
-                    var imgX = Math.round(actulalX - parseInt(x));//.replace('px', '')));
-                    var imgY = Math.round(actualY - parseInt(y));//.replace('px', '')));
-                    pixelData = maskCanvasContext.getImageData(imgX, imgY, 1, 1);
-
-
-                    //trans  layer image data
-                    pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
-                    // console.log('at the time' + pixelData.data[0])
-                    // debugger;
-                    var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
-                    if ($('#speechBubble').length > 0)
-                        $('#speechBubble').remove();
-
-
-                    if ($('#speechBubbleTrns').length > 0) {
-                        $('#speechBubbleTrns').remove();
-
-                        //  createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
-
-                        $scope.annotationTextArrayT1 = [];
-                        $scope.annotationTextArrayT2 = [];
-                        $scope.annotationTextArrayT1.push(annotations.annotationT1);
-                        $scope.annotationTextArrayT2.push(annotations.annotationT2);
-
-                        $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
                     }
-                    else
-                        //   createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
-
-                        $scope.annotationTextArrayT1 = [];
-                    $scope.annotationTextArrayT2 = [];
-                    $scope.annotationTextArrayT1.push(annotations.annotationT1);
-                    $scope.annotationTextArrayT2.push(annotations.annotationT2);
-                  
-                    $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
-                
-
+                }
             }
+                
         }
         else {
@@ -4941,21 +4897,81 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
             else
                 //  $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
-
+            {
                 $scope.annotationTextArrayT1 = [];
+                $scope.annotationTextArrayT2 = [];
+                $scope.annotationTextArrayT1.push(annotations.annotationT1);
+                $scope.annotationTextArrayT2.push(annotations.annotationT2);
+
+            
+                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
+            }
+                
+        }
+    
+
+    }
+
+    function getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, maskCanvasContexttrans, clickedBodyRegion, x, y, evt)
+    {
+        var canvasDiv = document.getElementById('canvasDiv');
+        var verticalScrollPosition = canvasDiv.scrollTop;
+        var horizontlScrollPosition = canvasDiv.scrollLeft;
+
+        var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
+
+        var mirrorXOnNormalImage = parseInt(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
+
+        var actulalX = mirrorXOnNormalImage
+        var actualY = mousePos.y + verticalScrollPosition
+
+
+
+        var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
+        var maskCanvas = document.getElementById(clickedCanvasMaskId);
+        var maskCanvasContext = maskCanvas.getContext("2d");
+        var imgX = Math.round(actulalX - parseInt((x).replace('px', '')));
+        var imgY = Math.round(actualY - parseInt((y).replace('px', '')));
+        var pixelData = maskCanvasContext.getImageData(imgX, imgY, 1, 1);
+
+
+        //trans  layer image data
+        var pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
+        // console.log('at the time' + pixelData.data[0])
+        // debugger;
+        var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
+        if ($('#speechBubble').length > 0)
+            $('#speechBubble').remove();
+
+
+        if ($('#speechBubbleTrns').length > 0) {
+            $('#speechBubbleTrns').remove();
+
+            //  createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
+
+            $scope.annotationTextArrayT1 = [];
             $scope.annotationTextArrayT2 = [];
             $scope.annotationTextArrayT1.push(annotations.annotationT1);
             $scope.annotationTextArrayT2.push(annotations.annotationT2);
-            
             $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
+        }
+        else
+      {
+            $scope.annotationTextArrayT1 = [];
+        $scope.annotationTextArrayT2 = [];
+        $scope.annotationTextArrayT1.push(annotations.annotationT1);
+        $scope.annotationTextArrayT2.push(annotations.annotationT2);
+
+        $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
-        }
-        //debugger;
     }
-    function clearTransCanvas() {
+}
+        
+
+        function clearTransCanvas() {
         var tCanvas = document.getElementById('transparencyCanvas');
         if (tCanvas != null) {