ADAM / AIAHTML5

Commit 9f20848034f9061f1b67795ddb26853edd910405

Authored by Nikita Kulshreshtha
1 parent 9e88cfba

this branch is having annotaion code without multi languge 

this code has issue in select system feature
Inline Side-by-side
Showing 1 changed file with 287 additions and 189 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @9f20848
... ... @@ -22,6 +22,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
22 22 $scope.AllBodySystem = [];
23 23 $scope.AllOrientation = [];
24 24 $scope.AllImageType = [];
  25 +
25 26 $scope.query = {
26 27 selectedbodyregion: '',
27 28 selectedbodysystem: '',
... ... @@ -169,6 +170,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
169 170 $scope.imageHeight = this.height;
170 171 }
171 172  
  173 +
  174 +
  175 +
172 176 angular.element(document).ready(function (e) {
173 177 $("#ImagePanel").resize(function () {
174 178 $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
... ... @@ -185,28 +189,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
185 189 function (result) {
186 190 $scope.aaPinData = result.data.Root.Item;
187 191 angular.forEach($scope.aaPinData, function (value, key) {
188   -
189   - $scope.context.beginPath();
190   - $scope.context.moveTo(value._PinX, value._PinY);
191   - $scope.context.lineTo(value._HeadX, value._HeadY);
192   - $scope.context.stroke();
193   -
194   - var headX = (parseInt(value._HeadX)) - 20;
195   - var headY = (parseInt(value._HeadY)) - 15;
196   -
197   - var img = new Image();
198   - img.src = "~/../../../content/images/noraml-pin.png";
199   - img.onload = function () {
200   - $scope.context.drawImage(img, headX, headY);
201   - }
202 192  
  193 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
203 194 })
204 195  
205   - console.log(JSON.stringify(result, null, 4));
206 196 },
207 197 function (error) {
208   - // handle errors here
209   - console.log(' error: ' + error.statusText);
  198 +
  199 + console.log(' error in showAllPins: ' + error.statusText);
210 200 }
211 201 )
212 202 }
... ... @@ -326,7 +316,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
326 316  
327 317 if (selectimg === true && count >= filtercount) {
328 318  
329   -
  319 +
330 320 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
331 321  
332 322 var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
... ... @@ -415,23 +405,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
415 405  
416 406 //1.Remove all the pins first
417 407 $scope.ClearAllPins();
418   -
419   - //clear speech bubble
420   - var speechBubbles = $("div[id*='sppeachBubble']");
421   - if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
422   - for (var j = 0; j < speechBubbles.length; j++) {
423   -
424   - speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
425   - }
426   - }
427   - var speechBubbleLines = $("div[id*='sppeachBubbleLine']");
428   - if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
429   - for (var j = 0; j < speechBubbleLines.length; j++) {
430   -
431   - speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
432   - }
433   - }
434   -
435 408  
436 409 var selectedSystemName = event.currentTarget.title;
437 410 //2. get pinData
... ... @@ -448,39 +421,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
448 421  
449 422 $scope.TermInfo = response.data.Terms.Term;
450 423  
451   - //on gettng all required data, draw pins
452   - var selectedSystemPinData = new jinqJs()
453   - .from($scope.aaPinData)
454   - .where("_BodySystemName == " + selectedSystemName)
455   - .select();
456   - angular.forEach(selectedSystemPinData, function (value, key) {
457   -
458   - $scope.context.beginPath();
459   - $scope.context.moveTo(value._PinX, value._PinY);
460   - $scope.context.lineTo(value._HeadX, value._HeadY);
461   - $scope.context.stroke();
462   -
463   - var headX = (parseInt(value._HeadX)) - 20;
464   - var headY = (parseInt(value._HeadY)) - 15;
465   -
466   - var img = new Image();
467   - img.src = "~/../../../content/images/noraml-pin.png";
468   - img.onload = function () {
469   - $scope.context.drawImage(img, headX, headY);
470   -
471   -
472   - }
473   - })
  424 + //on gettng all required data, draw pins
  425 + var selectedSystemPinData = new jinqJs()
  426 + .from($scope.aaPinData)
  427 + .where("_BodySystemName == " + selectedSystemName)
  428 + .select();
  429 + angular.forEach(selectedSystemPinData, function (value, key) {
  430 +
  431 +
  432 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
  433 +
  434 + })
474 435 //show annotation on first pin of the sysyem
475   - $scope.showAnnotation(selectedSystemPinData);
476   - },
  436 + $scope.showAnnotation(selectedSystemPinData, false, false);
  437 + },
477 438 function (error) {
478 439 // handle errors here
479 440 console.log(' error: ' + error.statusText);
480 441 }
481 442 )
482 443  
483   -
  444 +
484 445  
485 446 console.log(JSON.stringify(result, null, 4));
486 447 },
... ... @@ -491,9 +452,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
491 452 )
492 453 }
493 454  
494   - $scope.showAnnotation = function (selectedSystemPinData)
495   - {
  455 + $scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) {
496 456  
  457 + $scope.selectedPin = [];
  458 + var isSameTermWithMultiPin = false;
497 459 var firstPinId = selectedSystemPinData[0]._PinId;
498 460 var pinTermNumber = selectedSystemPinData[0]._TermId;
499 461  
... ... @@ -502,38 +464,119 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
502 464 .from($scope.aaPinData)
503 465 .where("_TermId == " + pinTermNumber)
504 466 .select();
505   - var termTextdata = new jinqJs()
506   - .from($scope.TermInfo)
507   - .where("__ActualTermNumber == " + pinTermNumber)
508   - .select();
509   - var termText = termTextdata[0].__TermText;
510   - $scope.MultiLanguageAnnationArray = [];
511   - $scope.MultiLanguageAnnationArray.push(termText);
512   - angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
513   -
514   - var headX = (parseInt(value._HeadX));
515   - var headY = (parseInt(value._HeadY));
516   - $scope.createSpeechBubble(headX, parseInt(headY),value._PinId);
517   - // alert('headX: ' + headX + ', headY: ' + headY + ',termText: ' + termText);
518   - })
  467 +
  468 +
  469 +
  470 + //3. get termText info
  471 + var promise = ModuleService.getTermTextForPin($scope.moduleName)
  472 + .then(
  473 + function (response) {
  474 +
  475 + $scope.TermInfo = response.data.Terms.Term;
  476 +
  477 +
  478 + var termTextdata = new jinqJs()
  479 + .from($scope.TermInfo)
  480 + .where("__ActualTermNumber == " + pinTermNumber)
  481 + .select();
  482 +
  483 + var termText = termTextdata[0].__TermText;
  484 + $scope.MultiLanguageAnnationArray = [];
  485 + $scope.MultiLanguageAnnationArray.push(termText);
  486 +
  487 + if (isCtrlPressed) {
  488 +
  489 + }
  490 + else {
  491 + if (isPinClicked) {
  492 + var existingSpeechBubble = $("div[id*='sppeachBubble']");
  493 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  494 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  495 +
  496 + //make all pin heads grey
  497 + var radial = $('#aaDetailViewCanvas').createGradient({
  498 + x1: 50, y1: 50,
  499 + x2: 50, y2: 50,
  500 + r1: 10, r2: 30,
  501 + c1: 'rgba(100, 50, 0,0)',
  502 + c2: 'rgb(216, 216, 216)'
  503 + });
  504 +
  505 +
  506 + $('#aaDetailViewCanvas').setLayers({
  507 + fillStyle: radial,
  508 + }).drawLayers();
  509 + }
  510 +
  511 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  512 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  513 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
  514 + }
  515 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  516 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  517 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
  518 + }
  519 + }
  520 + }
  521 + if (pinDataWithFirstTermNumber.length > 1) {
  522 + isSameTermWithMultiPin = true;
  523 + }
  524 +
  525 + angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
  526 + $scope.selectedPin.push(value._PinId);
  527 + var headX = (parseInt(value._HeadX));
  528 + var headY = (parseInt(value._HeadY));
  529 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
  530 + })
  531 +
  532 + },
  533 + function (error) { })
519 534 }
520 535  
521 536 $scope.ClearAllPins = function () {
522 537  
523   - var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
524   - var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
  538 + //var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
  539 + //var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
  540 +
  541 + //$scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
  542 +
  543 + $('#aaDetailViewCanvas').clearCanvas();
  544 +
  545 + //clear speech bubbles
  546 + var speechBubbles = $("div[id*='sppeachBubble']");
  547 + if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
  548 + for (var j = 0; j < speechBubbles.length; j++) {
  549 +
  550 + speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
  551 + }
  552 + }
  553 + var speechBubbleLines = $("div[id*='sppeachBubbleLine']");
  554 + if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
  555 + for (var j = 0; j < speechBubbleLines.length; j++) {
525 556  
526   - $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
  557 + speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
  558 + }
  559 + }
527 560 };
528 561  
529   - $scope.createSpeechBubble = function (x, y, PinId) {
530 562  
531   - //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
532   - // we decide the size of speech bubble
  563 +
  564 + $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
  565 +
533 566 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
534   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y,PinId);
535   -
536   -
  567 +
  568 + $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
  569 +
  570 + $('#sppeachBubble').draggable(
  571 + {
  572 + drag: function (evt) {
  573 + $("#dot").css("visibility", "hidden");
  574 + var verticalScrollPosition = canvasDiv.scrollTop;
  575 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  576 + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  577 + },
  578 + });
  579 +
537 580 }
538 581  
539 582 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
... ... @@ -613,64 +656,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
613 656 }
614 657  
615 658  
616   - $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
617   - 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>";
618   - //Issue #7286 :Undefined annotation should not appear
619   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
620   - var annotation = $scope.MultiLanguageAnnationArray[i];
621   - }
622 659  
623   - if (annotation == undefined) {
624   - console.log("No text found");
625   - } else {
626   -
627   - $("#canvasDiv").append(sppechBubbleHTML);
628   -
629   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
630   - var annotation = $scope.MultiLanguageAnnationArray[i];
631   -
632   - $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
633   - }
634   -
635   - if ($scope.longestAnnotation.length <= 10) {
636   - $("#" + id).css("width", "100px");
637   - }
638   -
639   - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
640   - $("#" + id).css("width", "140px");
641   - }
642   - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
643   - $("#" + id).css("width", "195px");
644   -
645   - }
646   - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
647   - $("#" + id).css("width", "248px");
648   - }
649   - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
650   - $("#" + id).css("width", "300px");
651   - }
652   -
653   - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
654   - $("#" + id).css("width", "370px");
655   - }
656   - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
657   - $("#" + id).css("width", "450px");
658   - }
659   - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
660   - $("#" + id).css("width", "510px");
661   -
662   - }
663   - else {
664   - $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
665   - }
666   - }
667   - }
668 660 $rootScope.Globe1 = [];
669   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
670   - 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>'
  661 + $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
  662 +
  663 + 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>'
671 664 + '<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;">'
672 665 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
673   - + '<img id="closeBtn'+PinId+'"class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
  666 + + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
674 667  
675 668 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
676 669 + '</div>';
... ... @@ -683,12 +676,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
683 676 if (MultipleLanguage == undefined) {
684 677 console.log("No text is found");
685 678 } else {
686   - $('#imageDiv').append(sppechBubbleDotHTML);
  679 + $('#imageDiv').append(speechBubbleHTML);
687 680  
688 681 if ($scope.MultiLanguageAnnationArray.length > 0) {
689 682 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
690 683 var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
691   - $("#sppeachBubble"+PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
  684 + $("#sppeachBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
692 685 }
693 686 }
694 687 else {
... ... @@ -743,89 +736,191 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
743 736 }
744 737 }
745 738 var Globe = [];
746   -
  739 +
747 740 $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
748   - Globe.push({ currentX: x, currentY: y});
  741 + Globe.push({ currentX: x, currentY: y });
749 742 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
750 743 document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
751 744 document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
752 745 document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
753 746 document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
754 747 document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
755   -
  748 +
756 749 $('.common-drag').draggable(
757 750 {
758 751 drag: function (evt) {
759   - // $("#dot").css("visibility", "hidden");
  752 +
760 753 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
761 754 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
762 755 var a = $(this).attr("id");
763   -
  756 +
764 757 var res = a.substring(13, a.length);
765 758 $("#speechBubbleLine" + res).css("visibility", "hidden");
766   -
767   - // var c = ($("#sppeachBubble" + res).css("left")).toString().replace("px", "");
768   - // alert(c);
769   - //var d = ($("#sppeachBubble" + res).css("top")).toString().replace("px", "");
770   - // alert(d);
771   - console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
772   -
773   - // alert(evt.pageX + "X" + evt.pageY + "horizontlScrollPosition" + horizontlScrollPosition + "verticalScrollPosition" + verticalScrollPosition);
774   - for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
775   - if ($rootScope.Globe1[i].id == res) {
776   - // alert($rootScope.Globe1[i].currentX);
777   - $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
778   - }
779   - }
  759 +
  760 +
  761 + console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
  762 +
780 763  
  764 + for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
  765 + if ($rootScope.Globe1[i].id == res) {
  766 +
  767 + $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  768 + }
  769 + }
  770 +
781 771 },
782 772 });
783 773 $('.crossDiv_temp').on('click', function (evt) {
  774 +
784 775 var imgId = $(this).attr("id");
785 776 var pinId = imgId.substring(8, imgId.length);
786 777 $('#sppeachBubble' + pinId).remove();
787 778 $("#speechBubbleDraggedLine" + pinId).remove();
788 779 $("#speechBubbleLine" + pinId).remove();
  780 +
  781 + //make all pin heads grey
  782 + var pinHeadName = 'PinArc_' + pinId;
  783 + var radial = $('#aaDetailViewCanvas').createGradient({
  784 + x1: 50, y1: 50,
  785 + x2: 50, y2: 50,
  786 + r1: 10, r2: 30,
  787 + c1: 'rgba(100, 50, 0,0)',
  788 + c2: 'rgb(216, 216, 216)'
  789 + });
  790 +
  791 +
  792 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  793 + fillStyle: radial,
  794 + }).drawLayers();
789 795 });
  796 +
  797 + //make the head green
  798 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  799 + x1: 50, y1: 50,
  800 + x2: 50, y2: 50,
  801 + r1: 10, r2: 30,
  802 + c1: 'rgba(100, 50, 0,0)',
  803 + c2: 'rgb(126, 187, 83)'
  804 + });
  805 + var pinHeadName = 'PinArc_' + PinId;
  806 + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
  807 + // pin.fillStyle = radialAfterClick;
  808 +
  809 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  810 + fillStyle: radialAfterClick,
  811 + }).drawLayers();
790 812 }
  813 +
  814 +
  815 + $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
791 816  
  817 + var dy = ey - cy;
  818 + var dx = ex - cx;
  819 + var theta = 0;
  820 + if (dx < 0) {
  821 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  822 + theta = theta + 180;
  823 +
  824 + }
  825 + else if (dy < 0) {
  826 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  827 + theta = theta + 360;
  828 +
  829 + }
  830 + else {
  831 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  832 + }
  833 +
  834 + var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
  835 + var e = cy;
  836 + var f = cx;
792 837  
793   - $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
794   - // debugger;
795   - // alert(ex + " " + ey);
796   - var dy = ey - cy;
797   - var dx = ex - cx;
798   - var theta = 0;
799   - if (dx < 0) {
800   - theta = Math.atan(dy / dx) * (180 / Math.PI);
801   - theta = theta + 180;
  838 + if (BoolValues == true) {
  839 + $("#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%' });
  840 + }
  841 + else {
  842 + $("#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%' });
  843 + }
802 844  
803   - }
804   - else if (dy < 0) {
805   - theta = Math.atan(dy / dx) * (180 / Math.PI);
806   - theta = theta + 360;
807 845  
808   - }
809   - else {
810   - theta = Math.atan(dy / dx) * (180 / Math.PI);
811   - }
812 846  
813   - var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
814   - var e = cy;
815   - var f = cx;
816   - // alert(d);
817   - if (BoolValues == true) {
818   - $("#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%' });
819   - }
820   - else {
821   - $("#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%' });
  847 + }
  848 +
  849 +
  850 + $scope.DrawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
  851 +
  852 + var radial = $('#' + canvasId).createGradient({
  853 + x1: 50, y1: 50,
  854 + x2: 50, y2: 50,
  855 + r1: 10, r2: 30,
  856 + c1: 'rgba(100, 50, 0,0)',
  857 + c2: 'rgb(216, 216, 216)'
  858 + });
  859 + $('#' + canvasId).drawLine({
  860 +
  861 + layer: true,
  862 + name: "Pin_" + PinId,
  863 + groups: ["Pin_" + PinId],
  864 + strokeStyle: 'black',
  865 + strokeWidth: 2,
  866 + x1: offsetX1, y1: offsetY1,
  867 + x2: x, y2: y,
  868 +
  869 + }).drawArc({
  870 + name: "PinArc_" + PinId,
  871 + layer: true,
  872 + groups: ["Pin_" + PinId],
  873 + strokeStyle: 'grey',
  874 + strokeWidth: 2,
  875 + fillStyle: radial,
  876 + x: x, y: y,
  877 + radius: 5,
  878 +
  879 + click: function (clickedPin) {
  880 +
  881 + //change the head color to green
  882 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  883 + x1: 50, y1: 50,
  884 + x2: 50, y2: 50,
  885 + r1: 10, r2: 30,
  886 + c1: 'rgba(100, 50, 0,0)',
  887 + c2: 'rgb(126, 187, 83)'
  888 + });
  889 +
  890 + clickedPin.fillStyle = radialAfterClick;
  891 +
  892 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  893 + // alert('pinId: ' + pinID);
  894 + //showAnnotation();
  895 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  896 + var selectedPinData = new jinqJs()
  897 + .from($scope.aaPinData)
  898 + .where("_PinId == " + pinID)
  899 + .select();
  900 + if (clickedPin.event.ctrlKey == true) {
  901 + $scope.showAnnotation(selectedPinData, true, true);
  902 +
  903 + }
  904 + else {
  905 + $scope.showAnnotation(selectedPinData, false, true);
  906 +
  907 + }
  908 +
  909 +
822 910 }
823 911  
  912 + }).drawLayers();
824 913  
  914 + }
825 915  
826   - }
827 916  
828   -
  917 + $scope.onCloseBtnClick = function (event) {
  918 + alert('closed')
  919 + }
  920 +
  921 + $("#closeBtn").click(function () {
  922 + alert('closed')
  923 + });
829 924 }]);
830 925  
831 926 function showSelectedSystemPins(event) {
... ... @@ -834,4 +929,7 @@ function showSelectedSystemPins(event) {
834 929 scope.$apply(function () {
835 930 scope.showSelectedSystemPins(event);
836 931 });
  932 +}
  933 +onCloseBtnClick = function (event) {
  934 + alert('closed')
837 935 }
838 936 \ No newline at end of file
... ...