ADAM / AIAHTML5

Commit 7f908aa1c91087eff861727323a620dd505871e7

Authored by Nikita Kulshreshtha
2 parents 71c35d32 3374c186

Merge branch 'AAZoom5Merge' into Develop

Inline Side-by-side
Showing 2 changed files with 491 additions and 254 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @7f908aa
@@ -26,7 +26,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -26,7 +26,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
26 $rootScope.speechBubbleDimaensions = []; 26 $rootScope.speechBubbleDimaensions = [];
27 $scope.runningSearchWorkers = []; 27 $scope.runningSearchWorkers = [];
28 $scope.clickedPins = []; 28 $scope.clickedPins = [];
29 - 29 + $scope.sliderPercentValue = 1;
30 $scope.query = { 30 $scope.query = {
31 selectedbodyregion: '', 31 selectedbodyregion: '',
32 selectedbodysystem: '', 32 selectedbodysystem: '',
@@ -76,6 +76,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -76,6 +76,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
76 $rootScope.imageName = $rootScope.OpenedTileData[3]; 76 $rootScope.imageName = $rootScope.OpenedTileData[3];
77 $rootScope.bodySystemName = $rootScope.OpenedTileData[2]; 77 $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
78 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; 78 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
  79 + $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
79 80
80 //3. set opened module item title 81 //3. set opened module item title
81 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]); 82 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
@@ -150,15 +151,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -150,15 +151,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
150 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle"); 151 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
151 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath); 152 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
152 153
  154 +
  155 + $rootScope.ViewImageWidth = $("#modItemImage").width();
  156 + $scope.ViewImageWidth = $("#modItemImage").width();
  157 + $scope.ViewImageHeight = $("#modItemImage").height();
  158 +
  159 + $scope.relativeDimesion = 0;
  160 + $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
  161 +
  162 +
153 //0.5 create canvas on the top of image so that I can draw a line over the canvas. 163 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
154 var canvas = document.createElement('canvas'); 164 var canvas = document.createElement('canvas');
155 canvas.id = 'aaDetailViewCanvas'; 165 canvas.id = 'aaDetailViewCanvas';
  166 + canvas.className = '.aaCanvas'
156 canvas.height = parseInt(($scope.imageHeight)); 167 canvas.height = parseInt(($scope.imageHeight));
157 canvas.width = parseInt($scope.imageWidth); 168 canvas.width = parseInt($scope.imageWidth);
158 canvas.style.left = '0px'; 169 canvas.style.left = '0px';
159 canvas.style.top = '0px'; 170 canvas.style.top = '0px';
160 canvas.style.position = "absolute"; 171 canvas.style.position = "absolute";
161 - 172 + //canvas.addEventListener('click', function () {
  173 + // alert('canvas clicked');
  174 + // var clickedPint = $scope.getMousePos(event);
  175 + // alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
  176 + //})
162 $("#canvasDiv").append(canvas); 177 $("#canvasDiv").append(canvas);
163 $scope.context = canvas.getContext("2d") 178 $scope.context = canvas.getContext("2d")
164 179
@@ -196,7 +211,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -196,7 +211,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
196 $scope.imageHeight = this.height; 211 $scope.imageHeight = this.height;
197 } 212 }
198 213
199 - 214 +
200 215
201 216
202 angular.element(document).ready(function (e) { 217 angular.element(document).ready(function (e) {
@@ -208,7 +223,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -208,7 +223,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
208 }) 223 })
209 224
210 $scope.showAllPins = function () { 225 $scope.showAllPins = function () {
211 - 226 +
212 var promise = ModuleService.getPinDataForImage($rootScope.imageName) 227 var promise = ModuleService.getPinDataForImage($rootScope.imageName)
213 228
214 .then( 229 .then(
@@ -234,8 +249,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -234,8 +249,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
234 $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) 249 $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
235 }) 250 })
236 251
237 -  
238 - 252 +
  253 +
239 //load search/vocab data 254 //load search/vocab data
240 $rootScope.loadSearchData(); 255 $rootScope.loadSearchData();
241 } 256 }
@@ -458,7 +473,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -458,7 +473,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
458 $scope.selectedSystemName = null; 473 $scope.selectedSystemName = null;
459 if ($scope.isHidePinBtnClicked) { 474 if ($scope.isHidePinBtnClicked) {
460 475
461 - // $scope.showAllPinsAfterHide($scope.aaPinData); 476 + // $scope.showAllPinsAfterHide($scope.aaPinData);
462 $scope.showAllPinsAfterHide(); 477 $scope.showAllPinsAfterHide();
463 } 478 }
464 else { 479 else {
@@ -469,56 +484,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -469,56 +484,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
469 484
470 $scope.selectedSystemName = event.currentTarget.title; 485 $scope.selectedSystemName = event.currentTarget.title;
471 486
472 -  
473 - // get termText info  
474 - var promise = ModuleService.getTermTextDataForPin($scope.moduleName)  
475 - .then(  
476 - function (response) {  
477 487
478 - $scope.TermInfo = response.data.Terms.Term; 488 + // get termText info
  489 + var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
  490 + .then(
  491 + function (response) {
479 492
480 - //on gettng all required data, draw pins  
481 - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { 493 + $scope.TermInfo = response.data.Terms.Term;
482 494
483 - $scope.selectedSystemPinData = new jinqJs()  
484 - .from($scope.aaPinData)  
485 - .where("_BodySystemName == " + $scope.selectedSystemName)  
486 - .select();  
487 - if ($scope.isHidePinBtnClicked) {  
488 - // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);  
489 - $scope.showAllPinsAfterHide(); 495 + //on gettng all required data, draw pins
  496 + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
490 497
491 - }  
492 - else  
493 - {  
494 - //remove other system pins  
495 - if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) { 498 + $scope.selectedSystemPinData = new jinqJs()
  499 + .from($scope.aaPinData)
  500 + .where("_BodySystemName == " + $scope.selectedSystemName)
  501 + .select();
  502 + if ($scope.isHidePinBtnClicked) {
  503 + // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
  504 + $scope.showAllPinsAfterHide();
  505 +
  506 + }
  507 + else {
  508 + //remove other system pins
  509 + if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
496 510
497 - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { 511 + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
498 512
499 - if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)  
500 - $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);  
501 - }) 513 + if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
  514 + $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
  515 + })
502 516
503 - angular.forEach($scope.selectedSystemPinData, function (value, key) { 517 + angular.forEach($scope.selectedSystemPinData, function (value, key) {
504 518
505 519
506 - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) 520 + $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
507 521
508 - })  
509 - //show annotation on first pin of the sysyem  
510 - $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);  
511 - }  
512 - } 522 + })
  523 + //show annotation on first pin of the sysyem
  524 + $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
513 } 525 }
514 - },  
515 - function (error) {  
516 - // handle errors here  
517 - console.log(' error: ' + error.statusText);  
518 - }  
519 - )  
520 -  
521 - } 526 + }
  527 + }
  528 + },
  529 + function (error) {
  530 + // handle errors here
  531 + console.log(' error: ' + error.statusText);
  532 + }
  533 + )
  534 +
  535 + }
522 } 536 }
523 537
524 $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) { 538 $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
@@ -540,53 +554,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -540,53 +554,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
540 554
541 $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber); 555 $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
542 556
543 - if (isCtrlPressed) { 557 + if (isCtrlPressed) {
544 558
  559 + }
  560 + else {
  561 + if (isPinClicked || isItemSearched) {
  562 + var existingSpeechBubble = $("div[id*='speechBubble']");
  563 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  564 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  565 +
  566 + //make all pin heads grey
  567 + var radial = $('#aaDetailViewCanvas').createGradient({
  568 + x1: 50, y1: 50,
  569 + x2: 50, y2: 50,
  570 + r1: 10, r2: 30,
  571 + c1: 'rgba(100, 50, 0,0)',
  572 + c2: 'rgb(216, 216, 216)'
  573 + });
  574 +
  575 +
  576 + $('#aaDetailViewCanvas').setLayers({
  577 + fillStyle: radial,
  578 + }).drawLayers();
545 } 579 }
546 - else {  
547 - if (isPinClicked || isItemSearched) {  
548 - var existingSpeechBubble = $("div[id*='speechBubble']");  
549 - for (var i = 0; i < existingSpeechBubble.length; i++) {  
550 - existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);  
551 -  
552 - //make all pin heads grey  
553 - var radial = $('#aaDetailViewCanvas').createGradient({  
554 - x1: 50, y1: 50,  
555 - x2: 50, y2: 50,  
556 - r1: 10, r2: 30,  
557 - c1: 'rgba(100, 50, 0,0)',  
558 - c2: 'rgb(216, 216, 216)'  
559 - });  
560 -  
561 -  
562 - $('#aaDetailViewCanvas').setLayers({  
563 - fillStyle: radial,  
564 - }).drawLayers();  
565 - }  
566 -  
567 - var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");  
568 - for (var i = 0; i < existingSpeechBubbleLine.length; i++) {  
569 - existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);  
570 - }  
571 - var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");  
572 - for (var i = 0; i < speechBubbleDraggedLine.length; i++) {  
573 - speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);  
574 - }  
575 - } 580 +
  581 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  582 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  583 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
576 } 584 }
577 - if (pinDataWithFirstTermNumber.length > 1) {  
578 - isSameTermWithMultiPin = true; 585 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  586 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  587 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
579 } 588 }
  589 + }
  590 + }
  591 + if (pinDataWithFirstTermNumber.length > 1) {
  592 + isSameTermWithMultiPin = true;
  593 + }
  594 +
  595 + angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
  596 + $scope.selectedPin.push(value._PinId);
  597 + var headX = (parseInt(value._HeadX));
  598 + var headY = (parseInt(value._HeadY));
  599 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
  600 + })
  601 +
  602 +
580 603
581 - angular.forEach(pinDataWithFirstTermNumber, function (value, key) {  
582 - $scope.selectedPin.push(value._PinId);  
583 - var headX = (parseInt(value._HeadX));  
584 - var headY = (parseInt(value._HeadY));  
585 - $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);  
586 - })  
587 -  
588 -  
589 -  
590 } 604 }
591 605
592 $rootScope.isLoading = false; 606 $rootScope.isLoading = false;
@@ -596,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -596,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
596 610
597 $scope.removeSpeechBubble = function () { 611 $scope.removeSpeechBubble = function () {
598 612
599 - 613 +
600 //clear speech bubbles 614 //clear speech bubbles
601 var speechBubbles = $("div[id*='speechBubble']"); 615 var speechBubbles = $("div[id*='speechBubble']");
602 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { 616 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
@@ -652,7 +666,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -652,7 +666,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
652 666
653 $scope.hideSpeechBubble = function () { 667 $scope.hideSpeechBubble = function () {
654 668
655 - 669 +
656 //clear speech bubbles 670 //clear speech bubbles
657 var speechBubbles = $("div[id*='speechBubble']"); 671 var speechBubbles = $("div[id*='speechBubble']");
658 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { 672 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
@@ -691,14 +705,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -691,14 +705,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
691 $("#dot").css("visibility", "hidden"); 705 $("#dot").css("visibility", "hidden");
692 var verticalScrollPosition = canvasDiv.scrollTop; 706 var verticalScrollPosition = canvasDiv.scrollTop;
693 var horizontlScrollPosition = canvasDiv.scrollLeft; 707 var horizontlScrollPosition = canvasDiv.scrollLeft;
694 - $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true); 708 + $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
695 }, 709 },
696 }); 710 });
697 711
698 } 712 }
699 - 713 + $scope.sliderVal = 100;
700 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) { 714 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
701 715
  716 + x = x * $scope.sliderPercentValue;
  717 + y = y * $scope.sliderPercentValue;
  718 +
702 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>' 719 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>'
703 + '<div id="speechBubble' + 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;">' 720 + '<div id="speechBubble' + 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;">'
704 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">' 721 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
@@ -779,17 +796,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -779,17 +796,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
779 $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId }); 796 $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
780 speechBubbleDims.push({ currentX: x, currentY: y }); 797 speechBubbleDims.push({ currentX: x, currentY: y });
781 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block'; 798 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
782 - document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45)) + 'px';  
783 - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20) + 'px'; 799 + document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
  800 + if ($scope.sliderVal == 25) {
  801 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
  802 + }
  803 + else
  804 + {
  805 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
  806 + }
784 document.getElementById('speechBubble' + PinId + '').style.display = 'block'; 807 document.getElementById('speechBubble' + PinId + '').style.display = 'block';
785 - document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70) + 'px';  
786 - document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58) + 'px';  
787 - 808 + document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
  809 + document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
788 $('.common-drag').draggable( 810 $('.common-drag').draggable(
789 { 811 {
790 - 812 +
791 drag: function (evt) { 813 drag: function (evt) {
792 - 814 +
793 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop; 815 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
794 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft; 816 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
795 var clickedSpeechBubbleId = $(this).attr("id"); 817 var clickedSpeechBubbleId = $(this).attr("id");
@@ -850,7 +872,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -850,7 +872,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
850 872
851 873
852 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) { 874 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
853 - 875 +
854 var dy = ey - cy; 876 var dy = ey - cy;
855 var dx = ex - cx; 877 var dx = ex - cx;
856 var theta = 0; 878 var theta = 0;
@@ -871,9 +893,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -871,9 +893,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
871 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey)); 893 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
872 var e = cy; 894 var e = cy;
873 var f = cx; 895 var f = cx;
874 - 896 +
875 if (BoolValues == true) { 897 if (BoolValues == true) {
876 - $("#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%' }); 898 + if ($scope.sliderVal == 40) {
  899 + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
  900 + }
  901 + else if ($scope.sliderVal == 25) {
  902 + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
  903 + }
  904 + else {
  905 + $("#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%' });
  906 + }
  907 +
877 } 908 }
878 else { 909 else {
879 $("#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%' }); 910 $("#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%' });
@@ -886,105 +917,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -886,105 +917,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
886 917
887 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) { 918 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
888 $scope.clickedPins = []; 919 $scope.clickedPins = [];
889 - var radial = $('#' + canvasId).createGradient({  
890 - x1: 50, y1: 50,  
891 - x2: 50, y2: 50,  
892 - r1: 10, r2: 30,  
893 - c1: 'rgba(100, 50, 0,0)',  
894 - c2: 'rgb(216, 216, 216)'  
895 - });  
896 - $('#' + canvasId).drawLine({  
897 -  
898 - layer: true,  
899 - name: "Pin_" + PinId,  
900 - groups: ["Pin_" + PinId],  
901 - strokeStyle: 'black',  
902 - strokeWidth: 2,  
903 - visible: true,  
904 - x1: offsetX1, y1: offsetY1,  
905 - x2: x, y2: y,  
906 -  
907 - }).drawArc({  
908 - name: "PinArc_" + PinId,  
909 - layer: true,  
910 - groups: ["Pin_" + PinId],  
911 - strokeStyle: 'grey',  
912 - strokeWidth: 2,  
913 - visible: true,  
914 - fillStyle: radial,  
915 - x: x, y: y,  
916 - radius: 5,  
917 -  
918 - click: function (clickedPin) {  
919 -  
920 - //change the head color to green  
921 - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({  
922 - x1: 50, y1: 50,  
923 - x2: 50, y2: 50,  
924 - r1: 10, r2: 30,  
925 - c1: 'rgba(100, 50, 0,0)',  
926 - c2: 'rgb(126, 187, 83)'  
927 - }); 920 + // if ($scope.isSliderChange == true) {
  921 + console.log('isSliderrChange')
  922 + var radial = $('#' + canvasId).createGradient({
  923 + x1: 50, y1: 50,
  924 + x2: 50, y2: 50,
  925 + r1: 10, r2: 30,
  926 + c1: 'rgba(100, 50, 0,0)',
  927 + c2: 'rgb(216, 216, 216)'
  928 + });
  929 + $('#' + canvasId).drawLine({
  930 +
  931 + layer: true,
  932 + name: "Pin_" + PinId,
  933 + groups: ["Pin_" + PinId],
  934 + strokeStyle: '#565656',
  935 + strokeWidth: 2,
  936 + visible: true,
  937 + x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
  938 + x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
  939 +
928 940
929 - clickedPin.fillStyle = radialAfterClick; 941 + }).drawArc({
  942 + name: "PinArc_" + PinId,
  943 + layer: true,
  944 + groups: ["Pin_" + PinId],
  945 + strokeStyle: 'grey',
  946 + strokeWidth: 2,
  947 + visible: true,
  948 + fillStyle: radial,
  949 + x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
  950 + radius: 5 * $scope.sliderPercentValue,
930 951
931 - var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);  
932 - // alert('pinId: ' + pinID);  
933 - //showAnnotation(); 952 + click: function (clickedPin) {
  953 + // alert('pin clciked = ' + clickedPin.name)
  954 + //change the head color to green
  955 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  956 + x1: 50, y1: 50,
  957 + x2: 50, y2: 50,
  958 + r1: 10, r2: 30,
  959 + c1: 'rgba(100, 50, 0,0)',
  960 + c2: 'rgb(126, 187, 83)'
  961 + });
  962 +
  963 + clickedPin.fillStyle = radialAfterClick;
  964 +
  965 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  966 + // alert('pinId: ' + pinID);
  967 + //showAnnotation();
  968 +
  969 + var pinData = new jinqJs()
  970 + .from($scope.aaPinData)
  971 + .where("_PinId == " + pinID)
  972 + .select();
  973 +
  974 +
  975 + var pinTermNumber = pinData[0]._TermId;
  976 +
  977 + var pinWithSameTerm = new jinqJs()
  978 +
  979 + .from($scope.aaPinData)
  980 + .where("_TermId == " + pinTermNumber)
  981 + .select();
  982 +
  983 +
  984 + if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
934 985
935 - var pinData = new jinqJs()  
936 - .from($scope.aaPinData)  
937 - .where("_PinId == " + pinID)  
938 - .select();  
939 -  
940 -  
941 - var pinTermNumber = pinData[0]._TermId;  
942 -  
943 - var pinWithSameTerm = new jinqJs()  
944 -  
945 - .from($scope.aaPinData)  
946 - .where("_TermId == " + pinTermNumber)  
947 - .select();  
948 -  
949 -  
950 - if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {  
951 -  
952 for (var i = 0; i < pinWithSameTerm.length; i++) { 986 for (var i = 0; i < pinWithSameTerm.length; i++) {
953 -  
954 - $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })  
955 - }  
956 -  
957 - }  
958 987
959 - var selectedPinData = new jinqJs()  
960 - .from($scope.aaPinData)  
961 - .where("_PinId == " + pinID)  
962 - .select();  
963 - if (clickedPin.event.ctrlKey == true) {  
964 - $scope.showAnnotation(selectedPinData, true, true, false); 988 + $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  989 + }
  990 +
  991 + }
  992 +
  993 + var selectedPinData = new jinqJs()
  994 + .from($scope.aaPinData)
  995 + .where("_PinId == " + pinID)
  996 + .select();
  997 + if (clickedPin.event.ctrlKey == true) {
  998 + $scope.showAnnotation(selectedPinData, true, true, false);
  999 +
  1000 + }
  1001 + else {
  1002 + $scope.showAnnotation(selectedPinData, false, true, false);
  1003 +
  1004 + }
965 1005
966 - }  
967 - else {  
968 - $scope.showAnnotation(selectedPinData, false, true, false);  
969 1006
970 } 1007 }
971 1008
  1009 + }).drawLayers();
  1010 + //}
  1011 + // else
  1012 + // {
  1013 + // var radial = $('#' + canvasId).createGradient({
  1014 + // x1: 50, y1: 50,
  1015 + // x2: 50, y2: 50,
  1016 + // r1: 10, r2: 30,
  1017 + // c1: 'rgba(100, 50, 0,0)',
  1018 + // c2: 'rgb(216, 216, 216)'
  1019 + // });
  1020 + // $('#' + canvasId).drawLine({
972 1021
973 - } 1022 + // layer: true,
  1023 + // name: "Pin_" + PinId,
  1024 + // groups: ["Pin_" + PinId],
  1025 + // strokeStyle: 'black',
  1026 + // strokeWidth: 2,
  1027 + // visible: true,
  1028 + // x1: offsetX1, y1: offsetY1,
  1029 + // x2: x, y2: y,
974 1030
975 - }).drawLayers(); 1031 + // }).drawArc({
  1032 + // name: "PinArc_" + PinId,
  1033 + // layer: true,
  1034 + // groups: ["Pin_" + PinId],
  1035 + // strokeStyle: 'grey',
  1036 + // strokeWidth: 2,
  1037 + // visible: true,
  1038 + // fillStyle: radial,
  1039 + // x: x, y: y,
  1040 + // radius: 5,
  1041 +
  1042 + // click: function (clickedPin) {
  1043 + // alert('pin clciked = ' + clickedPin.name) //change the head color to green
  1044 + // var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  1045 + // x1: 50, y1: 50,
  1046 + // x2: 50, y2: 50,
  1047 + // r1: 10, r2: 30,
  1048 + // c1: 'rgba(100, 50, 0,0)',
  1049 + // c2: 'rgb(126, 187, 83)'
  1050 + // });
  1051 +
  1052 + // clickedPin.fillStyle = radialAfterClick;
  1053 +
  1054 + // var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  1055 + // // alert('pinId: ' + pinID);
  1056 + // //showAnnotation();
  1057 +
  1058 + // var pinData = new jinqJs()
  1059 + // .from($scope.aaPinData)
  1060 + // .where("_PinId == " + pinID)
  1061 + // .select();
  1062 +
  1063 +
  1064 + // var pinTermNumber = pinData[0]._TermId;
  1065 +
  1066 + // var pinWithSameTerm = new jinqJs()
976 1067
  1068 + // .from($scope.aaPinData)
  1069 + // .where("_TermId == " + pinTermNumber)
  1070 + // .select();
  1071 +
  1072 +
  1073 + // if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
  1074 +
  1075 + // for (var i = 0; i < pinWithSameTerm.length; i++) {
  1076 +
  1077 + // $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  1078 + // }
  1079 +
  1080 + // }
  1081 +
  1082 + // var selectedPinData = new jinqJs()
  1083 + // .from($scope.aaPinData)
  1084 + // .where("_PinId == " + pinID)
  1085 + // .select();
  1086 + // if (clickedPin.event.ctrlKey == true) {
  1087 + // $scope.showAnnotation(selectedPinData, true, true, false);
  1088 +
  1089 + // }
  1090 + // else {
  1091 + // $scope.showAnnotation(selectedPinData, false, true, false);
  1092 +
  1093 + // }
  1094 +
  1095 +
  1096 + // }
  1097 +
  1098 + // }).drawLayers();
  1099 + //}
  1100 +
  1101 + }
  1102 +
  1103 +
  1104 + $scope.getMousePos = function (evt) {
  1105 +
  1106 + return {
  1107 + x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
  1108 + y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
  1109 + }
977 } 1110 }
978 1111
  1112 + $scope.removePin = function (canvasId, pinId) {
979 1113
980 - $scope.removePin = function (canvasId,pinId) { 1114 + var pinName = 'Pin_' + pinId;
  1115 + var pinArcName = 'PinArc_' + pinId;
  1116 + $('#' + canvasId).removeLayer(pinName).drawLayers();
  1117 + $('#' + canvasId).removeLayer(pinArcName).drawLayers();
981 1118
982 - var pinName = 'Pin_' + pinId;  
983 - var pinArcName = 'PinArc_' + pinId;  
984 - $('#' + canvasId).removeLayer(pinName).drawLayers();  
985 - $('#' + canvasId).removeLayer(pinArcName).drawLayers(); 1119 + $scope.removeSpeechBubble();
986 1120
987 - $scope.removeSpeechBubble(); 1121 + //$rootScope.isSliderChanged = true;
  1122 + //$('#aaDetailViewCanvas').removeLayers();
988 } 1123 }
989 1124
990 $rootScope.$on('annotationToolEvent', function (event, data) { 1125 $rootScope.$on('annotationToolEvent', function (event, data) {
@@ -1045,13 +1180,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1045,13 +1180,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1045 console.log(' error: ' + error.statusText); 1180 console.log(' error: ' + error.statusText);
1046 } 1181 }
1047 ) 1182 )
1048 - 1183 +
1049 } 1184 }
1050 1185
1051 1186
1052 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { 1187 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
1053 1188
1054 - 1189 +
1055 var languageArray = $rootScope.lexiconLanguageArray; 1190 var languageArray = $rootScope.lexiconLanguageArray;
1056 1191
1057 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) { 1192 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
@@ -1062,30 +1197,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1062,30 +1197,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1062 .select(); 1197 .select();
1063 1198
1064 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) { 1199 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
1065 - 1200 +
1066 for (var j = 0; j <= languageArray.length - 1; j++) { 1201 for (var j = 0; j <= languageArray.length - 1; j++) {
1067 - 1202 +
1068 $scope.matchedLanguageTermNoData = new jinqJs() 1203 $scope.matchedLanguageTermNoData = new jinqJs()
1069 .from($scope.matchedTermNoData) 1204 .from($scope.matchedTermNoData)
1070 .where('_LanguageId == ' + languageArray[j].id) 1205 .where('_LanguageId == ' + languageArray[j].id)
1071 .select(); 1206 .select();
1072 1207
1073 - var termText = $scope.matchedLanguageTermNoData[0]._TermText; 1208 + var termText = $scope.matchedLanguageTermNoData[0]._TermText;
1074 1209
1075 $scope.MultiLanguageAnnationArray.push(termText); 1210 $scope.MultiLanguageAnnationArray.push(termText);
1076 - 1211 +
1077 1212
1078 }; 1213 };
1079 1214
1080 -  
1081 1215
1082 - }  
1083 - 1216 +
1084 } 1217 }
  1218 +
1085 } 1219 }
  1220 + }
  1221 +
  1222 +
1086 1223
1087 -  
1088 -  
1089 1224
1090 1225
1091 $scope.hidePins = function () { 1226 $scope.hidePins = function () {
@@ -1102,20 +1237,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1102,20 +1237,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1102 var pinArcName = 'PinArc_' + aaPinDataValue._PinId; 1237 var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1103 1238
1104 $('#aaDetailViewCanvas').setLayer(pinName, { 1239 $('#aaDetailViewCanvas').setLayer(pinName, {
1105 - visible: false // set to true instead to show the layer again 1240 + visible: false // set to true instead to show the layer again
1106 }).drawLayers(); 1241 }).drawLayers();
1107 1242
1108 $('#aaDetailViewCanvas').setLayer(pinArcName, { 1243 $('#aaDetailViewCanvas').setLayer(pinArcName, {
1109 visible: false // set to true instead to show the layer again 1244 visible: false // set to true instead to show the layer again
1110 }).drawLayers(); 1245 }).drawLayers();
1111 }) 1246 })
1112 - 1247 +
1113 $rootScope.isLoading = false; 1248 $rootScope.isLoading = false;
1114 $('#spinner').css('visibility', 'hidden'); 1249 $('#spinner').css('visibility', 'hidden');
1115 } 1250 }
1116 1251
1117 $scope.showAllPinsAfterHide = function (event) { 1252 $scope.showAllPinsAfterHide = function (event) {
1118 1253
  1254 +
1119 $rootScope.isLoading = true; 1255 $rootScope.isLoading = true;
1120 $('#spinner').css('visibility', 'visible'); 1256 $('#spinner').css('visibility', 'visible');
1121 1257
@@ -1133,27 +1269,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1133,27 +1269,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1133 $scope.showSpeechBubble(); 1269 $scope.showSpeechBubble();
1134 }; 1270 };
1135 1271
1136 - 1272 +
1137 $scope.showSelectedPins = function () { 1273 $scope.showSelectedPins = function () {
  1274 +
  1275 + $rootScope.isLoading = true;
  1276 + $('#spinner').css('visibility', 'visible');
1138 1277
1139 - $rootScope.isLoading = true;  
1140 - $('#spinner').css('visibility', 'visible'); 1278 + $scope.isHidePinBtnClicked = false;
1141 1279
1142 - $scope.isHidePinBtnClicked = false; 1280 + if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
1143 1281
1144 - if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) { 1282 + $scope.showSystemPins($scope.selectedSystemPinData, true);
1145 1283
1146 - $scope.showSystemPins($scope.selectedSystemPinData, true); 1284 + }
  1285 + else {
  1286 + $scope.showSystemPins($scope.aaPinData, true);
1147 1287
1148 - }  
1149 - else {  
1150 - $scope.showSystemPins($scope.aaPinData, true); 1288 + }
  1289 + $scope.showSpeechBubble();
1151 1290
1152 - }  
1153 - $scope.showSpeechBubble();  
1154 }; 1291 };
1155 1292
1156 - 1293 +
1157 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) { 1294 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
1158 1295
1159 if (isShowSelectedPins) { 1296 if (isShowSelectedPins) {
@@ -1181,23 +1318,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1181,23 +1318,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1181 // } 1318 // }
1182 }) 1319 })
1183 1320
1184 - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { 1321 + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
1185 1322
1186 - // if (aaPinDataValue._PinId != value.id) {  
1187 - var pinName = 'Pin_' + aaPinDataValue._PinId;  
1188 - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; 1323 + // if (aaPinDataValue._PinId != value.id) {
  1324 + var pinName = 'Pin_' + aaPinDataValue._PinId;
  1325 + var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1189 1326
1190 - $('#aaDetailViewCanvas').setLayer(pinName, {  
1191 - visible: false // set to true instead to show the layer again  
1192 - }).drawLayers(); 1327 + $('#aaDetailViewCanvas').setLayer(pinName, {
  1328 + visible: false // set to true instead to show the layer again
  1329 + }).drawLayers();
1193 1330
1194 - $('#aaDetailViewCanvas').setLayer(pinArcName, {  
1195 - visible: false // set to true instead to show the layer again  
1196 - }).drawLayers();  
1197 - // }  
1198 - }) 1331 + $('#aaDetailViewCanvas').setLayer(pinArcName, {
  1332 + visible: false // set to true instead to show the layer again
  1333 + }).drawLayers();
  1334 + // }
  1335 + })
1199 1336
1200 - // }) 1337 + // })
1201 // $scope.clickedPins = []; 1338 // $scope.clickedPins = [];
1202 } 1339 }
1203 1340
@@ -1226,7 +1363,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1226,7 +1363,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1226 $scope.showItemsForSearch = function () { 1363 $scope.showItemsForSearch = function () {
1227 console.log('showItemsForSearch is called'); 1364 console.log('showItemsForSearch is called');
1228 //this check is for log only because we are writing length so need to check if its not null or undefined 1365 //this check is for log only because we are writing length so need to check if its not null or undefined
1229 - 1366 +
1230 1367
1231 $timeout(function () { 1368 $timeout(function () {
1232 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) { 1369 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
@@ -1289,6 +1426,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1289,6 +1426,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1289 1426
1290 $scope.IsSearchVisible = false; 1427 $scope.IsSearchVisible = false;
1291 } 1428 }
  1429 +
1292 $rootScope.isShowHideButtonClicked = true; 1430 $rootScope.isShowHideButtonClicked = true;
1293 $scope.ShowHideAnnotation = function () { 1431 $scope.ShowHideAnnotation = function () {
1294 if ($rootScope.isShowHideButtonClicked == true) { 1432 if ($rootScope.isShowHideButtonClicked == true) {
@@ -1313,8 +1451,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1313,8 +1451,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1313 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none"); 1451 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
1314 } 1452 }
1315 } 1453 }
1316 - else  
1317 - { 1454 + else {
1318 $rootScope.isShowHideButtonClicked = true; 1455 $rootScope.isShowHideButtonClicked = true;
1319 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { 1456 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
1320 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block"); 1457 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
@@ -1381,10 +1518,126 @@ function showHideAnnotation(event) { @@ -1381,10 +1518,126 @@ function showHideAnnotation(event) {
1381 } 1518 }
1382 1519
1383 function showSelectedPins(event) { 1520 function showSelectedPins(event) {
1384 - 1521 +
1385 console.log('showSelectedPins is called') 1522 console.log('showSelectedPins is called')
1386 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); 1523 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1387 scope.$apply(function () { 1524 scope.$apply(function () {
1388 scope.showSelectedPins(event); 1525 scope.showSelectedPins(event);
1389 }); 1526 });
1390 -}  
1391 \ No newline at end of file 1527 \ No newline at end of file
  1528 +}
  1529 +
  1530 +function onZoom(scope) {
  1531 +
  1532 + //$(".common-drag").remove();
  1533 + //$(".commonDot").remove();
  1534 + //$(".commonDraggedLine").remove();
  1535 + //var radial = $('#aaDetailViewCanvas').createGradient({
  1536 + // x1: 50, y1: 50,
  1537 + // x2: 50, y2: 50,
  1538 + // r1: 10, r2: 30,
  1539 + // c1: 'rgba(100, 50, 0,0)',
  1540 + // c2: 'rgb(216, 216, 216)'
  1541 + //});
  1542 + //$('#aaDetailViewCanvas').setLayers({
  1543 + // fillStyle: radial,
  1544 + //}).drawLayers();
  1545 + // scope.removePin();
  1546 + // scope.showAllPins();
  1547 +
  1548 +
  1549 + //6. Show all pins on AA opened item
  1550 +}
  1551 +
  1552 +
  1553 +$(document).ready(function () {
  1554 + $(".slider").slider({
  1555 + min: 25,
  1556 + max: 100,
  1557 + value: 100,
  1558 + range: "min",
  1559 + orientation: "vertical",
  1560 + slide: function (event, ui) {
  1561 +
  1562 +
  1563 +
  1564 + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
  1565 + scope.$apply(function () {
  1566 + scope.sliderVal = ui.value;
  1567 + scope.removeSpeechBubble();
  1568 + var relativeWidth = 0;
  1569 + var relativeHeight = 0;
  1570 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1571 + if (ui.value == 100) {
  1572 + relativeWidth = scope.ViewImageWidth;
  1573 + relativeHeight = scope.ViewImageHeight
  1574 + scope.sliderPercentValue = 1.0;
  1575 + }
  1576 + else if (ui.value == 85) {
  1577 + relativeWidth = scope.ViewImageWidth * 0.85;
  1578 + relativeHeight = scope.ViewImageHeight * 0.85;
  1579 + scope.sliderPercentValue = 0.85;
  1580 +
  1581 + } else if (ui.value == 70) {
  1582 + relativeWidth = scope.ViewImageWidth * 0.70;
  1583 + relativeHeight = scope.ViewImageHeight * 0.70;
  1584 + scope.sliderPercentValue = 0.70;
  1585 + } else if (ui.value == 55) {
  1586 +
  1587 + relativeWidth = scope.ViewImageWidth * 0.55;
  1588 + relativeHeight = scope.ViewImageHeight * 0.55;
  1589 + scope.sliderPercentValue = 0.55;
  1590 +
  1591 + } else if (ui.value == 40) {
  1592 +
  1593 + relativeWidth = scope.ViewImageWidth * 0.40;
  1594 + relativeHeight = scope.ViewImageHeight * 0.40;
  1595 + scope.sliderPercentValue = 0.40;
  1596 +
  1597 + } else if (ui.value == 25) {
  1598 +
  1599 + relativeWidth = scope.ViewImageWidth * 0.25;
  1600 + relativeHeight = scope.ViewImageHeight * 0.25;
  1601 + scope.sliderPercentValue = 0.25;
  1602 +
  1603 + }
  1604 + }
  1605 +
  1606 + console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
  1607 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1608 + $("#modItemImage").css("width", relativeWidth + "px");
  1609 + $("#modItemImage").css("height", relativeHeight + "px");
  1610 + $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
  1611 + $("#modItemImage").css("height", relativeHeight + "px");
  1612 +
  1613 + $("#modItemImage").attr('src', '');
  1614 +
  1615 +
  1616 + $("#aaDetailViewCanvas").remove();
  1617 + //0.5 create canvas on the top of image so that I can draw a line over the canvas.
  1618 + var canvas = document.createElement('canvas');
  1619 + canvas.id = 'aaDetailViewCanvas';
  1620 + canvas.className = 'aaCanvas';
  1621 + canvas.height = relativeHeight;
  1622 + canvas.width = relativeWidth;
  1623 + canvas.style.left = '0px';
  1624 + canvas.style.top = '0px';
  1625 + canvas.style.position = "absolute";
  1626 +
  1627 + $("#canvasDiv").append(canvas);
  1628 + scope.context = canvas.getContext("2d")
  1629 + $("#modItemImage").attr('src', scope.OpenItemImagePath);
  1630 + scope.isSliderChange = true;
  1631 + scope.showAllPins();
  1632 + }
  1633 +
  1634 +
  1635 +
  1636 +
  1637 + });
  1638 + }
  1639 + })
  1640 + .slider("pips", {
  1641 + rest: "label",
  1642 + step: "15"
  1643 + });
  1644 +});
1392 \ No newline at end of file 1645 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @7f908aa
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 <div class="tools pull-left" style="top:44px;"> 29 <div class="tools pull-left" style="top:44px;">
30 <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div> 30 <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
31 <div class=""> 31 <div class="">
32 - <div class="col-sm-6" title="Hide Pins"><button onclick="hidePins(event)" class="btn btn-black btn-sm" > <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div> 32 + <div class="col-sm-6" title="Hide Pins"><button onclick="hidePins(event)" class="btn btn-black btn-sm"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
33 <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right" onclick="showSelectedPins(event)"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div> 33 <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right" onclick="showSelectedPins(event)"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
34 <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5" onclick="showAllPins(event)"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div> 34 <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5" onclick="showAllPins(event)"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
35 <div class="col-sm-6" title="Select System"> 35 <div class="col-sm-6" title="Select System">
@@ -86,7 +86,7 @@ @@ -86,7 +86,7 @@
86 </div> 86 </div>
87 &nbsp; 87 &nbsp;
88 <!-- Single button --> 88 <!-- Single button -->
89 - <div class="btn-group"> 89 + <div class="btn-group" style="vertical-align:top;">
90 <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 90 <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
91 <i class="fa fa-arrow-circle-right"></i> 91 <i class="fa fa-arrow-circle-right"></i>
92 </button> 92 </button>
@@ -107,7 +107,7 @@ @@ -107,7 +107,7 @@
107 107
108 108
109 <div class="btn-group open" id="da-body-nav"> 109 <div class="btn-group open" id="da-body-nav">
110 - <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 110 + <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
111 <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" /> 111 <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" />
112 </button> 112 </button>
113 113
@@ -131,17 +131,17 @@ @@ -131,17 +131,17 @@
131 <div class="container-fluid"> 131 <div class="container-fluid">
132 <div class="row"> 132 <div class="row">
133 133
134 - <div class=" col-sm-12 img-thumbnail" id="canvasDiv" style="height: 478px; overflow: scroll;"> 134 + <div class=" col-sm-12 img-thumbnail" id="canvasDiv" style="height: 478px; overflow: scroll;">
135 <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas> 135 <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
136 <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas> 136 <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
137 137
138 - <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">  
139 - <!--<div class="clearfix"> 138 + <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
  139 + <!--<div class="clearfix">
140 140
141 - <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">  
142 - </div>  
143 - <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>  
144 - <div class="clearfix"></div>--> 141 + <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
  142 + </div>
  143 + <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
  144 + <div class="clearfix"></div>-->
145 </div> 145 </div>
146 </div> 146 </div>
147 </div> 147 </div>
@@ -163,23 +163,7 @@ @@ -163,23 +163,7 @@
163 $('[data-toggle="tooltip"]').tooltip(); 163 $('[data-toggle="tooltip"]').tooltip();
164 }); 164 });
165 </script> 165 </script>
166 -<script src="js/jquery-ui-slider-pips.js"></script>  
167 -<script>  
168 - $(".slider")  
169 -  
170 - .slider({  
171 - min: 25,  
172 - max: 100,  
173 - value: 100,  
174 - range: "min",  
175 - orientation: "vertical"  
176 - })  
177 -  
178 - .slider("pips", {  
179 - rest: "label",  
180 - step: "15"  
181 - });  
182 -</script> 166 +<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
183 167
184 <script> 168 <script>
185 $(function () { 169 $(function () {