now the head is green on click and gray when not.

need to make it gray when it is closed.

now the head is green on click and gray when not.
need to make it gray when it is closed.
Nikita Kulshreshtha
1 parent ab35d1eb
Showing 1 changed file with 81 additions and 99 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -237,7 +237,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.aaPinData = result.data.Root.Item;
                 angular.forEach($scope.aaPinData, function (value, key) {
-                    $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY, $rootScope.pinID)
+                    $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
                 })
             },
@@ -475,21 +475,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                              .select();
                     angular.forEach(selectedSystemPinData, function (value, key) {
-                        $scope.context.beginPath();
-                        $scope.context.moveTo(value._PinX, value._PinY);
-                        $scope.context.lineTo(value._HeadX, value._HeadY);
-                        $scope.context.stroke();
+                        //$scope.context.beginPath();
+                        //$scope.context.moveTo(value._PinX, value._PinY);
+                        //$scope.context.lineTo(value._HeadX, value._HeadY);
+                        //$scope.context.stroke();
-                        var headX = (parseInt(value._HeadX)) - 20;
-                        var headY = (parseInt(value._HeadY)) - 15;
+                        //var headX = (parseInt(value._HeadX)) - 20;
+                        //var headY = (parseInt(value._HeadY)) - 15;
-                        var img = new Image();
-                        img.src = "~/../../../content/images/noraml-pin.png";
-                        img.onload = function () {
-                            $scope.context.drawImage(img, headX, headY);
+                        //var img = new Image();
+                        //img.src = "~/../../../content/images/noraml-pin.png";
+                        //img.onload = function () {
+                        //    $scope.context.drawImage(img, headX, headY);
-                        }
+                        //}
+                        $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+
                     })
                     //show annotation on first pin of the sysyem
                     $scope.showAnnotation(selectedSystemPinData, false, false);
@@ -552,13 +554,19 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 for (var i = 0; i < existingSpeechBubble.length; i++) {
                     existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
-                    //var radial = $('#aaDetailViewCanvas').createGradient({
-                    //    x1: 50, y1: 50,
-                    //    x2: 50, y2: 50,
-                    //    r1: 10, r2: 30,
-                    //    c1: 'rgba(100, 50, 0,0)',
-                    //    c2: 'rgb(216, 216, 216)'
-                    //});
+                    //make all pin heads grey
+                    var radial = $('#aaDetailViewCanvas').createGradient({
+                        x1: 50, y1: 50,
+                        x2: 50, y2: 50,
+                        r1: 10, r2: 30,
+                        c1: 'rgba(100, 50, 0,0)',
+                        c2: 'rgb(216, 216, 216)'
+                    });
+
+                  
+                    $('#aaDetailViewCanvas').setLayers({
+                        fillStyle: radial,
+                    }).drawLayers();
                 }
                 var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
@@ -594,13 +602,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     };
     $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
-
-        //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.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
-           $('#sppeachBubble').draggable(
+
+        $('#sppeachBubble').draggable(
         {
             drag: function (evt) {
                 $("#dot").css("visibility", "hidden");
@@ -609,13 +616,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $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();
-        });
-      
-        
+                
     }
     $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
@@ -695,64 +696,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
-    $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
-        var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div style='z-index:60000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;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;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.closeBtnImgPath + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
-        //Issue #7286 :Undefined annotation should not appear
-        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-            var annotation = $scope.MultiLanguageAnnationArray[i];
-        }
-
-        if (annotation == undefined) {
-            console.log("No text found");
-        } else {
-
-            $("#imageDiv").append(sppechBubbleHTML);
-
-            for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-                var annotation = $scope.MultiLanguageAnnationArray[i];
-
-                $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
-            }
-
-            if ($scope.longestAnnotation.length <= 10) {
-                $("#" + id).css("width", "100px");
-            }
-
-            else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
-                $("#" + id).css("width", "140px");
-            }
-            else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
-                $("#" + id).css("width", "195px");
-
-            }
-            else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
-                $("#" + id).css("width", "248px");
-            }
-            else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
-                $("#" + id).css("width", "300px");
-            }
-
-            else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
-                $("#" + id).css("width", "370px");
-            }
-            else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
-                $("#" + id).css("width", "450px");
-            }
-            else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
-                $("#" + id).css("width", "510px");
-
-            }
-            else {
-                $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
-            }
-        }
-    }
+  
     $rootScope.Globe1 = [];
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
-        var sppechBubbleDotHTML = '<div id="speechBubbleLine' + 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>'
+
+        var speechBubbleHTML = '<div id="speechBubbleLine' + 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 id="closeBtn' + PinId + '"class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
+                  + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
                   + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
                  + '</div>';
@@ -765,7 +716,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         if (MultipleLanguage == undefined) {
             console.log("No text is found");
         } else {
-            $('#imageDiv').append(sppechBubbleDotHTML);
+            $('#imageDiv').append(speechBubbleHTML);
             if ($scope.MultiLanguageAnnationArray.length > 0) {
                 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
@@ -863,24 +814,44 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             },
         });
         $('.crossDiv_temp').on('click', function (evt) {
+            debugger;
             var imgId = $(this).attr("id");
             var pinId = imgId.substring(8, imgId.length);
             $('#sppeachBubble' + pinId).remove();
             $("#speechBubbleDraggedLine" + pinId).remove();
             $("#speechBubbleLine" + pinId).remove();
+
+            //make all pin heads grey
+            var pinHeadName = 'PinArc_' + pinId;
+            var radial = $('#aaDetailViewCanvas').createGradient({
+                x1: 50, y1: 50,
+                x2: 50, y2: 50,
+                r1: 10, r2: 30,
+                c1: 'rgba(100, 50, 0,0)',
+                c2: 'rgb(216, 216, 216)'
+            });
+
+
+            $('#aaDetailViewCanvas').setLayer(pinHeadName,{
+                fillStyle: radial,
+            }).drawLayers();
         });
         //make the head green
-        //var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
-        //    x1: 50, y1: 50,
-        //    x2: 50, y2: 50,
-        //    r1: 10, r2: 30,
-        //    c1: 'rgba(100, 50, 0,0)',
-        //    c2: 'rgb(126, 187, 83)'
-        //});
-        //var pinHeadName = 'Arc_' + PinId;
-        //var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
-        //pin.fillStyle = radialAfterClick;
+        var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
+            x1: 50, y1: 50,
+            x2: 50, y2: 50,
+            r1: 10, r2: 30,
+            c1: 'rgba(100, 50, 0,0)',
+            c2: 'rgb(126, 187, 83)'
+        });
+        var pinHeadName = 'PinArc_' + PinId;
+        var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
+       // pin.fillStyle = radialAfterClick;
+
+        $('#aaDetailViewCanvas').setLayer(pinHeadName, {
+            fillStyle: radialAfterClick,
+        }).drawLayers();
     }
@@ -909,7 +880,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var f = cx;
         //   alert(d);
         if (BoolValues == true) {
-            $("#speechBubbleDraggedLine" + id).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%' });
+            $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e-10) + 'px', 'left': (f-5) + '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%' });
@@ -940,7 +911,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             x2: x, y2: y,
         }).drawArc({
-            name: "ArcPin_" + PinId,
+            name: "PinArc_" + PinId,
             layer: true,
             groups: ["Pin_" + PinId],
             strokeStyle: 'grey',
@@ -948,7 +919,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             fillStyle: radial,
             x: x, y: y,
             radius: 5,
-
+           
             click: function (clickedPin) {
                 //change the head color to green
@@ -994,6 +965,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
+
+    $scope.onCloseBtnClick = function (event) {
+        alert('closed')
+    }
+
+    $("#closeBtn").click(function () {
+        alert('closed')
+    });
 }]);
 function showSelectedSystemPins(event) {
@@ -1002,4 +981,7 @@ function showSelectedSystemPins(event) {
     scope.$apply(function () {
         scope.showSelectedSystemPins(event);
     });
-}
 \ No newline at end of file
+}
+onCloseBtnClick = function (event) {
+        alert('closed')
+    }