ADAM / AIAHTML5

Commit 97fe1524b06a2072feb28b75a6e02146f3eefae0

Authored by Nikita Kulshreshtha
1 parent f084fd2a

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.
Inline Side-by-side
Showing 1 changed file with 87 additions and 38 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @97fe152
... ... @@ -476,6 +476,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
476 476  
477 477 $scope.showAnnotation = function (selectedSystemPinData)
478 478 {
  479 + alert("Annotation Called First Time");
  480 +
479 481 var firstPinId = selectedSystemPinData[0]._PinId;
480 482 var pinTermNumber = selectedSystemPinData[0]._TermId;
481 483  
... ... @@ -493,9 +495,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
493 495 $scope.MultiLanguageAnnationArray.push(termText);
494 496 angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
495 497  
496   - var headX = (parseInt(value._HeadX)) - 20;
497   - var headY = (parseInt(value._HeadY)) - 15;
498   - $scope.createSpeechBubble(headX, parseInt(headY-10));
  498 + var headX = (parseInt(value._HeadX));
  499 + var headY = (parseInt(value._HeadY));
  500 + $scope.createSpeechBubble(headX, parseInt(headY),value._PinId);
499 501 // alert('headX: ' + headX + ', headY: ' + headY + ',termText: ' + termText);
500 502 })
501 503 }
... ... @@ -508,11 +510,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
508 510 $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
509 511 };
510 512  
511   - $scope.createSpeechBubble = function (x,y) {
  513 + $scope.createSpeechBubble = function (x, y, PinId) {
512 514  
513 515 //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
514 516 // we decide the size of speech bubble
515 517 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
  518 + $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y,PinId);
  519 +
516 520 //2.
517 521 //if (event.ctrlKey) {
518 522 // console.log('ctrl pressed');
... ... @@ -553,31 +557,31 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
553 557 // });
554 558 //}
555 559 // else {
556   - $scope.multiAnnotationIsON = false;
  560 + // $scope.multiAnnotationIsON = false;
557 561 //history maintained issue
558   - if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
559   - $("#sppeachBubble").remove();
560   - $("#dot").remove();
561   - }
562   - $(".com").remove();
563   - $("#bord").remove();
564   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y);
  562 + //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
  563 + // $("#sppeachBubble").remove();
  564 + // $("#dot").remove();
  565 + //}
  566 + // $(".com").remove();
  567 + // $("#bord").remove();
  568 +
565 569 //history maintained issue
566   - if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
567   - $('#sppeachBubble').draggable(
568   - {
569   - drag: function (evt) {
570   - $("#dot").css("visibility", "hidden");
571   - var verticalScrollPosition = canvasDiv.scrollTop;
572   - var horizontlScrollPosition = canvasDiv.scrollLeft;
573   - $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
574   - },
575   - });
576   - $('.crossDiv_temp').on('click', function (evt) {
577   - $('#sppeachBubble').remove();
578   - $("#bord").remove();
579   - $("#dot").remove();
580   - });
  570 + //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
  571 + //$('#sppeachBubble').draggable(
  572 + //{
  573 + // drag: function (evt) {
  574 + // $("#dot").css("visibility", "hidden");
  575 + // var verticalScrollPosition = canvasDiv.scrollTop;
  576 + // var horizontlScrollPosition = canvasDiv.scrollLeft;
  577 + // $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  578 + // },
  579 + //});
  580 + //$('.crossDiv_temp').on('click', function (evt) {
  581 + // $('#sppeachBubble').remove();
  582 + // $("#bord").remove();
  583 + // $("#dot").remove();
  584 + //});
581 585 //}
582 586 }
583 587  
... ... @@ -710,16 +714,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
710 714 }
711 715 }
712 716 }
713   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y) {
  717 + $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
714 718  
715 719  
716 720  
717   - 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>'
718   - + '<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;">'
  721 + 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>'
  722 + + '<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;">'
719 723 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
720 724 + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
721 725  
722   - + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
  726 + + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord' + PinId + '">'
723 727 + '</div>';
724 728  
725 729 //Issue #7286 :Undefined annotation should not appear
... ... @@ -735,7 +739,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
735 739 if ($scope.MultiLanguageAnnationArray.length > 0) {
736 740 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
737 741 var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
738   - $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
  742 + $("#sppeachBubble"+PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
739 743 }
740 744 }
741 745 else {
... ... @@ -791,15 +795,60 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
791 795 }
792 796 var Globe = [];
793 797 Globe.push({ currentX: x, currentY: y });
794   - document.getElementById('dot').style.display = 'block';
795   - document.getElementById('dot').style.left = ((Globe[0].currentX-6) ) + 'px';
796   - document.getElementById('dot').style.top = ((Globe[0].currentY) + 3) + 'px';
797   - document.getElementById('sppeachBubble').style.display = 'block';
798   - document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
799   - document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';
  798 + document.getElementById('dot' + PinId + '').style.display = 'block';
  799 + document.getElementById('dot' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
  800 + document.getElementById('dot' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
  801 + document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
  802 + document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
  803 + document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
  804 +
  805 + $('.common-drag').draggable(
  806 + {
  807 + drag: function (evt) {
  808 + // $("#dot").css("visibility", "hidden");
  809 + var verticalScrollPosition = $('#imageDiv').scrollTop;
  810 + var horizontlScrollPosition = $('#imageDiv').scrollLeft;
  811 + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  812 + },
  813 + });
  814 +
  815 +
  816 + $scope.angle = function (cx, cy, ex, ey, BoolValues) {
  817 +
  818 +
  819 + var dy = ey - cy;
  820 + var dx = ex - cx;
  821 + var theta = 0;
  822 + if (dx < 0) {
  823 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  824 + theta = theta + 180;
  825 +
  826 + }
  827 + else if (dy < 0) {
  828 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  829 + theta = theta + 360;
800 830  
  831 + }
  832 + else {
  833 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  834 + }
  835 +
  836 + var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
  837 + var e = cy;
  838 + var f = cx;
  839 +
  840 + if (BoolValues == true) {
  841 + $("#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%' });
  842 +
  843 + }
  844 + else {
  845 + $("#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%' });
  846 + }
801 847  
802 848  
  849 +
  850 + }
  851 +
803 852 }
804 853 }]);
805 854  
... ...