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,6 +22,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
22 $scope.AllBodySystem = []; 22 $scope.AllBodySystem = [];
23 $scope.AllOrientation = []; 23 $scope.AllOrientation = [];
24 $scope.AllImageType = []; 24 $scope.AllImageType = [];
  25 +
25 $scope.query = { 26 $scope.query = {
26 selectedbodyregion: '', 27 selectedbodyregion: '',
27 selectedbodysystem: '', 28 selectedbodysystem: '',
@@ -169,6 +170,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -169,6 +170,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
169 $scope.imageHeight = this.height; 170 $scope.imageHeight = this.height;
170 } 171 }
171 172
  173 +
  174 +
  175 +
172 angular.element(document).ready(function (e) { 176 angular.element(document).ready(function (e) {
173 $("#ImagePanel").resize(function () { 177 $("#ImagePanel").resize(function () {
174 $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition); 178 $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
@@ -185,28 +189,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -185,28 +189,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
185 function (result) { 189 function (result) {
186 $scope.aaPinData = result.data.Root.Item; 190 $scope.aaPinData = result.data.Root.Item;
187 angular.forEach($scope.aaPinData, function (value, key) { 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 function (error) { 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,7 +316,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
326 316
327 if (selectimg === true && count >= filtercount) { 317 if (selectimg === true && count >= filtercount) {
328 318
329 - 319 +
330 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName; 320 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
331 321
332 var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">' 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,23 +405,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
415 405
416 //1.Remove all the pins first 406 //1.Remove all the pins first
417 $scope.ClearAllPins(); 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 var selectedSystemName = event.currentTarget.title; 409 var selectedSystemName = event.currentTarget.title;
437 //2. get pinData 410 //2. get pinData
@@ -448,39 +421,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -448,39 +421,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
448 421
449 $scope.TermInfo = response.data.Terms.Term; 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 //show annotation on first pin of the sysyem 435 //show annotation on first pin of the sysyem
475 - $scope.showAnnotation(selectedSystemPinData);  
476 - }, 436 + $scope.showAnnotation(selectedSystemPinData, false, false);
  437 + },
477 function (error) { 438 function (error) {
478 // handle errors here 439 // handle errors here
479 console.log(' error: ' + error.statusText); 440 console.log(' error: ' + error.statusText);
480 } 441 }
481 ) 442 )
482 443
483 - 444 +
484 445
485 console.log(JSON.stringify(result, null, 4)); 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,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 var firstPinId = selectedSystemPinData[0]._PinId; 459 var firstPinId = selectedSystemPinData[0]._PinId;
498 var pinTermNumber = selectedSystemPinData[0]._TermId; 460 var pinTermNumber = selectedSystemPinData[0]._TermId;
499 461
@@ -502,38 +464,119 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -502,38 +464,119 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
502 .from($scope.aaPinData) 464 .from($scope.aaPinData)
503 .where("_TermId == " + pinTermNumber) 465 .where("_TermId == " + pinTermNumber)
504 .select(); 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 $scope.ClearAllPins = function () { 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 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; }); 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 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) { 582 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
@@ -613,64 +656,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -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 $rootScope.Globe1 = []; 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 + '<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;">' 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 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">' 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 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">' 668 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
676 + '</div>'; 669 + '</div>';
@@ -683,12 +676,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -683,12 +676,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
683 if (MultipleLanguage == undefined) { 676 if (MultipleLanguage == undefined) {
684 console.log("No text is found"); 677 console.log("No text is found");
685 } else { 678 } else {
686 - $('#imageDiv').append(sppechBubbleDotHTML); 679 + $('#imageDiv').append(speechBubbleHTML);
687 680
688 if ($scope.MultiLanguageAnnationArray.length > 0) { 681 if ($scope.MultiLanguageAnnationArray.length > 0) {
689 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { 682 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
690 var MultipleLanguage = $scope.MultiLanguageAnnationArray[i]; 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 else { 687 else {
@@ -743,89 +736,191 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -743,89 +736,191 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
743 } 736 }
744 } 737 }
745 var Globe = []; 738 var Globe = [];
746 - 739 +
747 $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId }); 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 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block'; 742 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
750 document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px'; 743 document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
751 document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px'; 744 document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
752 document.getElementById('sppeachBubble' + PinId + '').style.display = 'block'; 745 document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
753 document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px'; 746 document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
754 document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px'; 747 document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
755 - 748 +
756 $('.common-drag').draggable( 749 $('.common-drag').draggable(
757 { 750 {
758 drag: function (evt) { 751 drag: function (evt) {
759 - // $("#dot").css("visibility", "hidden"); 752 +
760 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop; 753 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
761 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft; 754 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
762 var a = $(this).attr("id"); 755 var a = $(this).attr("id");
763 - 756 +
764 var res = a.substring(13, a.length); 757 var res = a.substring(13, a.length);
765 $("#speechBubbleLine" + res).css("visibility", "hidden"); 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 $('.crossDiv_temp').on('click', function (evt) { 773 $('.crossDiv_temp').on('click', function (evt) {
  774 +
784 var imgId = $(this).attr("id"); 775 var imgId = $(this).attr("id");
785 var pinId = imgId.substring(8, imgId.length); 776 var pinId = imgId.substring(8, imgId.length);
786 $('#sppeachBubble' + pinId).remove(); 777 $('#sppeachBubble' + pinId).remove();
787 $("#speechBubbleDraggedLine" + pinId).remove(); 778 $("#speechBubbleDraggedLine" + pinId).remove();
788 $("#speechBubbleLine" + pinId).remove(); 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 function showSelectedSystemPins(event) { 926 function showSelectedSystemPins(event) {
@@ -834,4 +929,7 @@ function showSelectedSystemPins(event) { @@ -834,4 +929,7 @@ function showSelectedSystemPins(event) {
834 scope.$apply(function () { 929 scope.$apply(function () {
835 scope.showSelectedSystemPins(event); 930 scope.showSelectedSystemPins(event);
836 }); 931 });
  932 +}
  933 +onCloseBtnClick = function (event) {
  934 + alert('closed')
837 } 935 }
838 \ No newline at end of file 936 \ No newline at end of file