ADAM / AIAHTML5

Commit ab35d1ebbc3fafc3e8d34e9e16e3ce95cdb3d767

Authored by Nikita Kulshreshtha
1 parent 43f8f314

multi annotation is done. 

need to correct drag position and highlighting/unhighliting pins.
Inline Side-by-side
Showing 1 changed file with 92 additions and 85 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @ab35d1e
... ... @@ -23,6 +23,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
23 23 $scope.AllBodySystem = [];
24 24 $scope.AllOrientation = [];
25 25 $scope.AllImageType = [];
  26 + $scope.speechbubbleList = [];
  27 + $scope.speechBubbleCounter = 0;
26 28 $scope.query = {
27 29 selectedbodyregion: '',
28 30 selectedbodysystem: '',
... ... @@ -490,7 +492,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
490 492 }
491 493 })
492 494 //show annotation on first pin of the sysyem
493   - $scope.showAnnotation(selectedSystemPinData);
  495 + $scope.showAnnotation(selectedSystemPinData, false, false);
494 496 },
495 497 function (error) {
496 498 // handle errors here
... ... @@ -509,8 +511,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
509 511 )
510 512 }
511 513  
512   - $scope.showAnnotation = function (selectedSystemPinData) {
  514 + $scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) {
513 515  
  516 + $scope.selectedPin = [];
  517 + var isSameTermWithMultiPin = false;
514 518 var firstPinId = selectedSystemPinData[0]._PinId;
515 519 var pinTermNumber = selectedSystemPinData[0]._TermId;
516 520  
... ... @@ -534,18 +538,50 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
534 538 .from($scope.TermInfo)
535 539 .where("__ActualTermNumber == " + pinTermNumber)
536 540 .select();
  541 +
537 542 var termText = termTextdata[0].__TermText;
538 543 $scope.MultiLanguageAnnationArray = [];
539 544 $scope.MultiLanguageAnnationArray.push(termText);
540   - $scope.selectedPin = [];
  545 +
  546 + if (isCtrlPressed) {
  547 +
  548 + }
  549 + else {
  550 + if (isPinClicked) {
  551 + var existingSpeechBubble = $("div[id*='sppeachBubble']");
  552 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  553 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  554 +
  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 + //});
  562 + }
541 563  
  564 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  565 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  566 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
  567 + }
  568 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  569 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  570 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
  571 + }
  572 + }
  573 + }
  574 + if (pinDataWithFirstTermNumber.length > 1) {
  575 + isSameTermWithMultiPin = true;
  576 + }
542 577 angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
543 578 $scope.selectedPin.push(value._PinId);
544 579 var headX = (parseInt(value._HeadX));
545 580 var headY = (parseInt(value._HeadY));
546   - $scope.createSpeechBubble(parseInt(headX)+10, parseInt(headY)+10, value._PinId);
  581 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
547 582 })
548   - },
  583 +
  584 + },
549 585 function(error){})
550 586 }
551 587  
... ... @@ -557,79 +593,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
557 593 $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
558 594 };
559 595  
560   - $scope.createSpeechBubble = function (x, y, PinId) {
  596 + $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
561 597  
562 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
563 599 // we decide the size of speech bubble
564 600 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
565   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y, PinId);
566   -
567   - //2.
568   - //if (event.ctrlKey) {
569   - // console.log('ctrl pressed');
570   - // $scope.multiAnnotationIsON = true;
571   - // //2.1 create unique speech bubbles
572   - // $scope.speechBubbleCounter = $scope.speechBubbleCounter + 1;
573   - // var id = "speechBubble" + $scope.speechBubbleCounter;
574   - // //2.2 Get clicked locationa and find if it is already clicked earlier too on same location
575   - // var pointClicked = parseInt(x) + parseInt(y);
576   - // var isClickedOnSamePoint = $("#canvasDiv").find("div[id=" + pointClicked + "]").length;
577   - // console.log('isClickedOnSamePoint: ' + isClickedOnSamePoint);
578   - // // if user has not clciked on smae point then create speech bubble otherwise not
579   - // if (isClickedOnSamePoint == 0) {
580   - // console.log('not clicked on same point')
581   - // $scope.createSpeechBubbleBasedOnAnnotationLength(pointClicked, x, y, id);
582   - // $scope.speechbubbleList.push({ xaxis: x, yaxis: y, ids: id });
583   - // }
584   - // $('.appendDragg').draggable({
585   - // drag: function (evt) {
586   - // $(this).prev('div').css("display", "none");
587   - // var bor_id = $(this).next('div').attr('id');
588   - // var sub_id1 = $(this).attr('id');
589   - // var verticalScrollPosition = canvasDiv.scrollTop;
590   - // var horizontlScrollPosition = canvasDiv.scrollLeft;
591   - // if ($scope.speechbubbleList != null || $scope.speechbubbleList != undefined) {
592   - // for (var m = 0; m <= $scope.speechbubbleList.length - 1; m++) {
593   - // if ($scope.speechbubbleList[m].ids == sub_id1) {
594   - // $scope.angle1($scope.speechbubbleList[m].xaxis, $scope.speechbubbleList[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id);
595   - // break;
596   - // }
597   - // }
598   - // }
599   - // },
600   - // });
601   - // $('.dynCross').on('click', function (evt) {
602   - // //$(this).parent().parent().parent().css('display', 'none');
603   - // $(this).parent().parent().parent().remove();
604   - // });
605   - //}
606   - // else {
607   - // $scope.multiAnnotationIsON = false;
608   - //history maintained issue
609   - //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
610   - // $("#sppeachBubble").remove();
611   - // $("#dot").remove();
612   - //}
613   - // $(".com").remove();
614   - // $("#bord").remove();
615   -
616   - //history maintained issue
617   - //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
618   - //$('#sppeachBubble').draggable(
619   - //{
620   - // drag: function (evt) {
621   - // $("#dot").css("visibility", "hidden");
622   - // var verticalScrollPosition = canvasDiv.scrollTop;
623   - // var horizontlScrollPosition = canvasDiv.scrollLeft;
624   - // $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
625   - // },
626   - //});
627   - //$('.crossDiv_temp').on('click', function (evt) {
628   - // $('#sppeachBubble').remove();
629   - // $("#bord").remove();
630   - // $("#dot").remove();
631   - //});
632   - //}
  601 +
  602 + $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
  603 + $('#sppeachBubble').draggable(
  604 + {
  605 + drag: function (evt) {
  606 + $("#dot").css("visibility", "hidden");
  607 + var verticalScrollPosition = canvasDiv.scrollTop;
  608 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  609 + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  610 + },
  611 + });
  612 + $('.crossDiv_temp').on('click', function (evt) {
  613 + $('#sppeachBubble').remove();
  614 + $("#bord").remove();
  615 + $("#dot").remove();
  616 + });
  617 +
  618 +
633 619 }
634 620  
635 621 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
... ... @@ -720,7 +706,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
720 706 console.log("No text found");
721 707 } else {
722 708  
723   - $("#canvasDiv").append(sppechBubbleHTML);
  709 + $("#imageDiv").append(sppechBubbleHTML);
724 710  
725 711 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
726 712 var annotation = $scope.MultiLanguageAnnationArray[i];
... ... @@ -762,7 +748,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
762 748 }
763 749 }
764 750 $rootScope.Globe1 = [];
765   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
  751 + $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
766 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>'
767 753 + '<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;">'
768 754 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
... ... @@ -839,7 +825,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
839 825 }
840 826 }
841 827 var Globe = [];
842   - debugger;
  828 +
843 829 $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
844 830 Globe.push({ currentX: x, currentY: y });
845 831 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
... ... @@ -883,6 +869,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
883 869 $("#speechBubbleDraggedLine" + pinId).remove();
884 870 $("#speechBubbleLine" + pinId).remove();
885 871 });
  872 +
  873 + //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;
886 884 }
887 885  
888 886  
... ... @@ -952,7 +950,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
952 950 radius: 5,
953 951  
954 952 click: function (clickedPin) {
955   -
  953 +
956 954 //change the head color to green
957 955 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
958 956 x1: 50, y1: 50,
... ... @@ -972,14 +970,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
972 970 .from($scope.aaPinData)
973 971 .where("_PinId == " + pinID)
974 972 .select();
975   - $scope.showAnnotation(selectedPinData);
  973 + if (clickedPin.event.ctrlKey == true) {
  974 + $scope.showAnnotation(selectedPinData,true, true );
976 975  
977   - angular.forEach($scope.selectedPin, function (value, key) {
978   - var pinName = 'Arc_' + value;
979   - var pin = $('aaDetailViewCanvas').getLayer(pinName);
980   - pin.fillStyle = radialAfterClick;
981   - alert(pin);
982   - })
  976 + }
  977 + else {
  978 + $scope.showAnnotation(selectedPinData, false, true);
  979 +
  980 + }
  981 +
  982 + //angular.forEach($scope.selectedPin, function (value, key) {
  983 + // var pinHeadName = 'Arc_' + value;
  984 + // var pin = $('aaDetailViewCanvas').getLayer(pinHeadName);
  985 + // pin.fillStyle = radialAfterClick;
  986 +
  987 +
  988 +
  989 + //})
983 990  
984 991 }
985 992  
... ...