speech bubble is at proper position but line is not draggable.

Also need to remove speech bubble of the previous selected system on system selection.

speech bubble is at proper position but line is not draggable.
Also need to remove speech bubble of the previous selected system on system selection.
Nikita Kulshreshtha
1 parent f084fd2a
Showing 1 changed file with 87 additions and 38 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -476,6 +476,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.showAnnotation = function (selectedSystemPinData)
     {
+        alert("Annotation Called First Time");
+
         var firstPinId = selectedSystemPinData[0]._PinId;
         var pinTermNumber = selectedSystemPinData[0]._TermId;
@@ -493,9 +495,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.MultiLanguageAnnationArray.push(termText);
         angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
-            var headX = (parseInt(value._HeadX)) - 20;
-            var headY = (parseInt(value._HeadY)) - 15;
-            $scope.createSpeechBubble(headX, parseInt(headY-10));
+            var headX = (parseInt(value._HeadX));
+            var headY = (parseInt(value._HeadY));
+            $scope.createSpeechBubble(headX, parseInt(headY),value._PinId);
            // alert('headX: ' + headX + ', headY: ' + headY + ',termText: ' + termText);
         })
     }
@@ -508,11 +510,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
     };
-    $scope.createSpeechBubble = function (x,y) {
+    $scope.createSpeechBubble = function (x, y, PinId) {
         //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that 
         // we decide the size of speech bubble
         $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
+        $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y,PinId);
+        
         //2.
         //if (event.ctrlKey) {
         //    console.log('ctrl pressed');
@@ -553,31 +557,31 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //    });
         //}
        // else {
-            $scope.multiAnnotationIsON = false;
+          //  $scope.multiAnnotationIsON = false;
             //history maintained issue
-            if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
-                $("#sppeachBubble").remove();
-                $("#dot").remove();
-            }
-            $(".com").remove();
-            $("#bord").remove();
-            $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y);
+            //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
+            //    $("#sppeachBubble").remove();
+            //    $("#dot").remove();
+            //}
+           // $(".com").remove();
+           // $("#bord").remove();
+        
             //history maintained issue
-            if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
-            $('#sppeachBubble').draggable(
-            {
-                drag: function (evt) {
-                    $("#dot").css("visibility", "hidden");
-                    var verticalScrollPosition = canvasDiv.scrollTop;
-                    var horizontlScrollPosition = canvasDiv.scrollLeft;
-                    $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
-                },
-            });
-            $('.crossDiv_temp').on('click', function (evt) {
-                $('#sppeachBubble').remove();
-                $("#bord").remove();
-                $("#dot").remove();
-            });
+            //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
+            //$('#sppeachBubble').draggable(
+            //{
+            //    drag: function (evt) {
+            //        $("#dot").css("visibility", "hidden");
+            //        var verticalScrollPosition = canvasDiv.scrollTop;
+            //        var horizontlScrollPosition = canvasDiv.scrollLeft;
+            //        $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+            //    },
+            //});
+            //$('.crossDiv_temp').on('click', function (evt) {
+            //    $('#sppeachBubble').remove();
+            //    $("#bord").remove();
+            //    $("#dot").remove();
+            //});
         //}
     }
@@ -710,16 +714,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
     }
-    $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y) {
+    $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
-        var sppechBubbleDotHTML = '<div id="dot" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
-                  + '<div id="sppeachBubble" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
+        var sppechBubbleDotHTML = '<div id="dot' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
+                  + '<div id="sppeachBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                   + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                   + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
-                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
+                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord' + PinId + '">'
                  + '</div>';
         //Issue #7286 :Undefined annotation should not appear
@@ -735,7 +739,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             if ($scope.MultiLanguageAnnationArray.length > 0) {
                 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                     var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                    $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
+                    $("#sppeachBubble"+PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
                 }
             }
             else {
@@ -791,15 +795,60 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
         var Globe = [];
         Globe.push({ currentX: x, currentY: y });
-        document.getElementById('dot').style.display = 'block';
-        document.getElementById('dot').style.left = ((Globe[0].currentX-6) ) + 'px';
-        document.getElementById('dot').style.top = ((Globe[0].currentY) + 3) + 'px';
-        document.getElementById('sppeachBubble').style.display = 'block';
-        document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
-        document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';
+        document.getElementById('dot' + PinId + '').style.display = 'block';
+        document.getElementById('dot' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
+        document.getElementById('dot' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
+        document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
+        document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
+        document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
+
+        $('.common-drag').draggable(
+        {
+            drag: function (evt) {
+              //  $("#dot").css("visibility", "hidden");
+                var verticalScrollPosition = $('#imageDiv').scrollTop;
+                var horizontlScrollPosition = $('#imageDiv').scrollLeft;
+                $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+            },
+        });
+
+
+        $scope.angle = function (cx, cy, ex, ey, BoolValues) {
+
+
+            var dy = ey - cy;
+            var dx = ex - cx;
+            var theta = 0;
+            if (dx < 0) {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+                theta = theta + 180;
+
+            }
+            else if (dy < 0) {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+                theta = theta + 360;
+            }
+            else {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+            }
+
+            var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
+            var e = cy;
+            var f = cx;
+
+            if (BoolValues == true) {
+                $("#bord").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+
+            }
+            else {
+                $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+            }
+
+        }
+
     }
 }]);