ADAM / AIAHTML5

Commit 7c05a26cfb2ebb2ed056bbf73d53a595d3a23735

Authored by Nikita Kulshreshtha
1 parent ab35d1eb

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

need to make it gray when it is closed.
Inline Side-by-side
Showing 1 changed file with 81 additions and 99 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @7c05a26
... ... @@ -237,7 +237,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
237 237 $scope.aaPinData = result.data.Root.Item;
238 238 angular.forEach($scope.aaPinData, function (value, key) {
239 239  
240   - $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY, $rootScope.pinID)
  240 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
241 241 })
242 242  
243 243 },
... ... @@ -475,21 +475,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
475 475 .select();
476 476 angular.forEach(selectedSystemPinData, function (value, key) {
477 477  
478   - $scope.context.beginPath();
479   - $scope.context.moveTo(value._PinX, value._PinY);
480   - $scope.context.lineTo(value._HeadX, value._HeadY);
481   - $scope.context.stroke();
  478 + //$scope.context.beginPath();
  479 + //$scope.context.moveTo(value._PinX, value._PinY);
  480 + //$scope.context.lineTo(value._HeadX, value._HeadY);
  481 + //$scope.context.stroke();
482 482  
483   - var headX = (parseInt(value._HeadX)) - 20;
484   - var headY = (parseInt(value._HeadY)) - 15;
  483 + //var headX = (parseInt(value._HeadX)) - 20;
  484 + //var headY = (parseInt(value._HeadY)) - 15;
485 485  
486   - var img = new Image();
487   - img.src = "~/../../../content/images/noraml-pin.png";
488   - img.onload = function () {
489   - $scope.context.drawImage(img, headX, headY);
  486 + //var img = new Image();
  487 + //img.src = "~/../../../content/images/noraml-pin.png";
  488 + //img.onload = function () {
  489 + // $scope.context.drawImage(img, headX, headY);
490 490  
491 491  
492   - }
  492 + //}
  493 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
  494 +
493 495 })
494 496 //show annotation on first pin of the sysyem
495 497 $scope.showAnnotation(selectedSystemPinData, false, false);
... ... @@ -552,13 +554,19 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
552 554 for (var i = 0; i < existingSpeechBubble.length; i++) {
553 555 existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
554 556  
555   - //var radial = $('#aaDetailViewCanvas').createGradient({
556   - // x1: 50, y1: 50,
557   - // x2: 50, y2: 50,
558   - // r1: 10, r2: 30,
559   - // c1: 'rgba(100, 50, 0,0)',
560   - // c2: 'rgb(216, 216, 216)'
561   - //});
  557 + //make all pin heads grey
  558 + var radial = $('#aaDetailViewCanvas').createGradient({
  559 + x1: 50, y1: 50,
  560 + x2: 50, y2: 50,
  561 + r1: 10, r2: 30,
  562 + c1: 'rgba(100, 50, 0,0)',
  563 + c2: 'rgb(216, 216, 216)'
  564 + });
  565 +
  566 +
  567 + $('#aaDetailViewCanvas').setLayers({
  568 + fillStyle: radial,
  569 + }).drawLayers();
562 570 }
563 571  
564 572 var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
... ... @@ -594,13 +602,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
594 602 };
595 603  
596 604 $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
597   -
598   - //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
599   - // we decide the size of speech bubble
  605 +
600 606 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
601 607  
602 608 $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
603   - $('#sppeachBubble').draggable(
  609 +
  610 + $('#sppeachBubble').draggable(
604 611 {
605 612 drag: function (evt) {
606 613 $("#dot").css("visibility", "hidden");
... ... @@ -609,13 +616,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
609 616 $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
610 617 },
611 618 });
612   - $('.crossDiv_temp').on('click', function (evt) {
613   - $('#sppeachBubble').remove();
614   - $("#bord").remove();
615   - $("#dot").remove();
616   - });
617   -
618   -
  619 +
619 620 }
620 621  
621 622 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
... ... @@ -695,64 +696,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
695 696 }
696 697  
697 698  
698   - $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
699   - 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>";
700   - //Issue #7286 :Undefined annotation should not appear
701   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
702   - var annotation = $scope.MultiLanguageAnnationArray[i];
703   - }
704   -
705   - if (annotation == undefined) {
706   - console.log("No text found");
707   - } else {
708   -
709   - $("#imageDiv").append(sppechBubbleHTML);
710   -
711   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
712   - var annotation = $scope.MultiLanguageAnnationArray[i];
713   -
714   - $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
715   - }
716   -
717   - if ($scope.longestAnnotation.length <= 10) {
718   - $("#" + id).css("width", "100px");
719   - }
720   -
721   - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
722   - $("#" + id).css("width", "140px");
723   - }
724   - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
725   - $("#" + id).css("width", "195px");
726   -
727   - }
728   - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
729   - $("#" + id).css("width", "248px");
730   - }
731   - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
732   - $("#" + id).css("width", "300px");
733   - }
734   -
735   - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
736   - $("#" + id).css("width", "370px");
737   - }
738   - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
739   - $("#" + id).css("width", "450px");
740   - }
741   - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
742   - $("#" + id).css("width", "510px");
743   -
744   - }
745   - else {
746   - $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
747   - }
748   - }
749   - }
  699 +
750 700 $rootScope.Globe1 = [];
751 701 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
752   - 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>'
  702 +
  703 + 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>'
753 704 + '<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;">'
754 705 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
755   - + '<img id="closeBtn' + PinId + '"class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
  706 + + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
756 707  
757 708 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
758 709 + '</div>';
... ... @@ -765,7 +716,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
765 716 if (MultipleLanguage == undefined) {
766 717 console.log("No text is found");
767 718 } else {
768   - $('#imageDiv').append(sppechBubbleDotHTML);
  719 + $('#imageDiv').append(speechBubbleHTML);
769 720  
770 721 if ($scope.MultiLanguageAnnationArray.length > 0) {
771 722 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
... ... @@ -863,24 +814,44 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
863 814 },
864 815 });
865 816 $('.crossDiv_temp').on('click', function (evt) {
  817 + debugger;
866 818 var imgId = $(this).attr("id");
867 819 var pinId = imgId.substring(8, imgId.length);
868 820 $('#sppeachBubble' + pinId).remove();
869 821 $("#speechBubbleDraggedLine" + pinId).remove();
870 822 $("#speechBubbleLine" + pinId).remove();
  823 +
  824 + //make all pin heads grey
  825 + var pinHeadName = 'PinArc_' + pinId;
  826 + var radial = $('#aaDetailViewCanvas').createGradient({
  827 + x1: 50, y1: 50,
  828 + x2: 50, y2: 50,
  829 + r1: 10, r2: 30,
  830 + c1: 'rgba(100, 50, 0,0)',
  831 + c2: 'rgb(216, 216, 216)'
  832 + });
  833 +
  834 +
  835 + $('#aaDetailViewCanvas').setLayer(pinHeadName,{
  836 + fillStyle: radial,
  837 + }).drawLayers();
871 838 });
872 839  
873 840 //make the head green
874   - //var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
875   - // x1: 50, y1: 50,
876   - // x2: 50, y2: 50,
877   - // r1: 10, r2: 30,
878   - // c1: 'rgba(100, 50, 0,0)',
879   - // c2: 'rgb(126, 187, 83)'
880   - //});
881   - //var pinHeadName = 'Arc_' + PinId;
882   - //var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
883   - //pin.fillStyle = radialAfterClick;
  841 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  842 + x1: 50, y1: 50,
  843 + x2: 50, y2: 50,
  844 + r1: 10, r2: 30,
  845 + c1: 'rgba(100, 50, 0,0)',
  846 + c2: 'rgb(126, 187, 83)'
  847 + });
  848 + var pinHeadName = 'PinArc_' + PinId;
  849 + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
  850 + // pin.fillStyle = radialAfterClick;
  851 +
  852 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  853 + fillStyle: radialAfterClick,
  854 + }).drawLayers();
884 855 }
885 856  
886 857  
... ... @@ -909,7 +880,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
909 880 var f = cx;
910 881 // alert(d);
911 882 if (BoolValues == true) {
912   - $("#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%' });
  883 + $("#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%' });
913 884 }
914 885 else {
915 886 $("#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
940 911 x2: x, y2: y,
941 912  
942 913 }).drawArc({
943   - name: "ArcPin_" + PinId,
  914 + name: "PinArc_" + PinId,
944 915 layer: true,
945 916 groups: ["Pin_" + PinId],
946 917 strokeStyle: 'grey',
... ... @@ -948,7 +919,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
948 919 fillStyle: radial,
949 920 x: x, y: y,
950 921 radius: 5,
951   -
  922 +
952 923 click: function (clickedPin) {
953 924  
954 925 //change the head color to green
... ... @@ -994,6 +965,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
994 965  
995 966 }
996 967  
  968 +
  969 + $scope.onCloseBtnClick = function (event) {
  970 + alert('closed')
  971 + }
  972 +
  973 + $("#closeBtn").click(function () {
  974 + alert('closed')
  975 + });
997 976 }]);
998 977  
999 978 function showSelectedSystemPins(event) {
... ... @@ -1002,4 +981,7 @@ function showSelectedSystemPins(event) {
1002 981 scope.$apply(function () {
1003 982 scope.showSelectedSystemPins(event);
1004 983 });
1005   -}
1006 984 \ No newline at end of file
  985 +}
  986 +onCloseBtnClick = function (event) {
  987 + alert('closed')
  988 + }
... ...