ADAM / AIAHTML5

Commit fb0da0c8d5b6eb7e3c76b89f226a0e337f8b1f8c

Authored by Nikita Kulshreshtha
2 parents 99ad4ac4 45396a7a

Merge branch 'AAZoom2' of http://52.6.196.163/ADAM/AIAHTML5 into AAZoom4

Inline Side-by-side
Showing 2 changed files with 456 additions and 239 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @fb0da0c
@@ -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) {
  492 +
  493 + $scope.TermInfo = response.data.Terms.Term;
479 494
480 - //on gettng all required data, draw pins  
481 - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { 495 + //on gettng all required data, draw pins
  496 + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
482 497
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(); 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();
490 505
491 - }  
492 - else  
493 - {  
494 - //remove other system pins  
495 - if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) { 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,7 +705,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -691,7 +705,7 @@ 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
@@ -699,6 +713,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -699,6 +713,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
699 713
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,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -779,17 +796,17 @@ 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 - 45 * $scope.sliderPercentValue)) + 'px';
  800 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20 * $scope.sliderPercentValue) + 'px';
784 document.getElementById('speechBubble' + PinId + '').style.display = 'block'; 801 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'; 802 + document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70 * $scope.sliderPercentValue) + 'px';
  803 + document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58 * $scope.sliderPercentValue) + 'px';
787 804
788 $('.common-drag').draggable( 805 $('.common-drag').draggable(
789 { 806 {
790 - 807 +
791 drag: function (evt) { 808 drag: function (evt) {
792 - 809 +
793 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop; 810 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
794 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft; 811 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
795 var clickedSpeechBubbleId = $(this).attr("id"); 812 var clickedSpeechBubbleId = $(this).attr("id");
@@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
850 867
851 868
852 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) { 869 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
853 - 870 +
854 var dy = ey - cy; 871 var dy = ey - cy;
855 var dx = ex - cx; 872 var dx = ex - cx;
856 var theta = 0; 873 var theta = 0;
@@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
871 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey)); 888 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
872 var e = cy; 889 var e = cy;
873 var f = cx; 890 var f = cx;
874 - 891 +
875 if (BoolValues == true) { 892 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%' }); 893 $("#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%' });
877 } 894 }
@@ -885,106 +902,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -885,106 +902,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
885 902
886 903
887 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) { 904 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
  905 + console.log('drawStaticPinsOnImage')
  906 + // if ($scope.isSliderChange == true) {
  907 + console.log('isSliderrChange')
  908 + var radial = $('#' + canvasId).createGradient({
  909 + x1: 50, y1: 50,
  910 + x2: 50, y2: 50,
  911 + r1: 10, r2: 30,
  912 + c1: 'rgba(100, 50, 0,0)',
  913 + c2: 'rgb(216, 216, 216)'
  914 + });
  915 + $('#' + canvasId).drawLine({
  916 +
  917 + layer: true,
  918 + name: "Pin_" + PinId,
  919 + groups: ["Pin_" + PinId],
  920 + strokeStyle: 'black',
  921 + strokeWidth: 2,
  922 + visible: true,
  923 + x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
  924 + x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
  925 +
  926 + }).drawArc({
  927 + name: "PinArc_" + PinId,
  928 + layer: true,
  929 + groups: ["Pin_" + PinId],
  930 + strokeStyle: 'grey',
  931 + strokeWidth: 2,
  932 + visible: true,
  933 + fillStyle: radial,
  934 + x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
  935 + radius: 5 * $scope.sliderPercentValue,
888 936
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 - }); 937 + click: function (clickedPin) {
  938 + // alert('pin clciked = ' + clickedPin.name)
  939 + //change the head color to green
  940 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  941 + x1: 50, y1: 50,
  942 + x2: 50, y2: 50,
  943 + r1: 10, r2: 30,
  944 + c1: 'rgba(100, 50, 0,0)',
  945 + c2: 'rgb(126, 187, 83)'
  946 + });
928 947
929 - clickedPin.fillStyle = radialAfterClick; 948 + clickedPin.fillStyle = radialAfterClick;
930 949
931 - var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);  
932 - // alert('pinId: ' + pinID);  
933 - //showAnnotation(); 950 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  951 + // alert('pinId: ' + pinID);
  952 + //showAnnotation();
  953 +
  954 + var pinData = new jinqJs()
  955 + .from($scope.aaPinData)
  956 + .where("_PinId == " + pinID)
  957 + .select();
  958 +
  959 +
  960 + var pinTermNumber = pinData[0]._TermId;
  961 +
  962 + var pinWithSameTerm = new jinqJs()
  963 +
  964 + .from($scope.aaPinData)
  965 + .where("_TermId == " + pinTermNumber)
  966 + .select();
  967 +
  968 +
  969 + if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
934 970
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++) { 971 for (var i = 0; i < pinWithSameTerm.length; i++) {
953 -  
954 - $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })  
955 - }  
956 -  
957 - }  
958 972
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); 973 + $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  974 + }
  975 +
  976 + }
  977 +
  978 + var selectedPinData = new jinqJs()
  979 + .from($scope.aaPinData)
  980 + .where("_PinId == " + pinID)
  981 + .select();
  982 + if (clickedPin.event.ctrlKey == true) {
  983 + $scope.showAnnotation(selectedPinData, true, true, false);
  984 +
  985 + }
  986 + else {
  987 + $scope.showAnnotation(selectedPinData, false, true, false);
  988 +
  989 + }
965 990
966 - }  
967 - else {  
968 - $scope.showAnnotation(selectedPinData, false, true, false);  
969 991
970 } 992 }
971 993
  994 + }).drawLayers();
  995 + //}
  996 + // else
  997 + // {
  998 + // var radial = $('#' + canvasId).createGradient({
  999 + // x1: 50, y1: 50,
  1000 + // x2: 50, y2: 50,
  1001 + // r1: 10, r2: 30,
  1002 + // c1: 'rgba(100, 50, 0,0)',
  1003 + // c2: 'rgb(216, 216, 216)'
  1004 + // });
  1005 + // $('#' + canvasId).drawLine({
972 1006
973 - } 1007 + // layer: true,
  1008 + // name: "Pin_" + PinId,
  1009 + // groups: ["Pin_" + PinId],
  1010 + // strokeStyle: 'black',
  1011 + // strokeWidth: 2,
  1012 + // visible: true,
  1013 + // x1: offsetX1, y1: offsetY1,
  1014 + // x2: x, y2: y,
  1015 +
  1016 + // }).drawArc({
  1017 + // name: "PinArc_" + PinId,
  1018 + // layer: true,
  1019 + // groups: ["Pin_" + PinId],
  1020 + // strokeStyle: 'grey',
  1021 + // strokeWidth: 2,
  1022 + // visible: true,
  1023 + // fillStyle: radial,
  1024 + // x: x, y: y,
  1025 + // radius: 5,
  1026 +
  1027 + // click: function (clickedPin) {
  1028 + // alert('pin clciked = ' + clickedPin.name) //change the head color to green
  1029 + // var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  1030 + // x1: 50, y1: 50,
  1031 + // x2: 50, y2: 50,
  1032 + // r1: 10, r2: 30,
  1033 + // c1: 'rgba(100, 50, 0,0)',
  1034 + // c2: 'rgb(126, 187, 83)'
  1035 + // });
  1036 +
  1037 + // clickedPin.fillStyle = radialAfterClick;
  1038 +
  1039 + // var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  1040 + // // alert('pinId: ' + pinID);
  1041 + // //showAnnotation();
  1042 +
  1043 + // var pinData = new jinqJs()
  1044 + // .from($scope.aaPinData)
  1045 + // .where("_PinId == " + pinID)
  1046 + // .select();
974 1047
975 - }).drawLayers(); 1048 +
  1049 + // var pinTermNumber = pinData[0]._TermId;
  1050 +
  1051 + // var pinWithSameTerm = new jinqJs()
  1052 +
  1053 + // .from($scope.aaPinData)
  1054 + // .where("_TermId == " + pinTermNumber)
  1055 + // .select();
  1056 +
  1057 +
  1058 + // if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
  1059 +
  1060 + // for (var i = 0; i < pinWithSameTerm.length; i++) {
  1061 +
  1062 + // $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  1063 + // }
  1064 +
  1065 + // }
  1066 +
  1067 + // var selectedPinData = new jinqJs()
  1068 + // .from($scope.aaPinData)
  1069 + // .where("_PinId == " + pinID)
  1070 + // .select();
  1071 + // if (clickedPin.event.ctrlKey == true) {
  1072 + // $scope.showAnnotation(selectedPinData, true, true, false);
  1073 +
  1074 + // }
  1075 + // else {
  1076 + // $scope.showAnnotation(selectedPinData, false, true, false);
  1077 +
  1078 + // }
  1079 +
  1080 +
  1081 + // }
  1082 +
  1083 + // }).drawLayers();
  1084 + //}
976 1085
977 } 1086 }
978 1087
979 1088
980 - $scope.removePin = function (canvasId,pinId) { 1089 + $scope.getMousePos = function (evt) {
  1090 +
  1091 + return {
  1092 + x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
  1093 + y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
  1094 + }
  1095 + }
981 1096
982 - var pinName = 'Pin_' + pinId;  
983 - var pinArcName = 'PinArc_' + pinId;  
984 - $('#' + canvasId).removeLayer(pinName).drawLayers();  
985 - $('#' + canvasId).removeLayer(pinArcName).drawLayers(); 1097 + $scope.removePin = function (canvasId, pinId) {
986 1098
987 - $scope.removeSpeechBubble(); 1099 + var pinName = 'Pin_' + pinId;
  1100 + var pinArcName = 'PinArc_' + pinId;
  1101 + $('#' + canvasId).removeLayer(pinName).drawLayers();
  1102 + $('#' + canvasId).removeLayer(pinArcName).drawLayers();
  1103 +
  1104 + $scope.removeSpeechBubble();
  1105 +
  1106 + //$rootScope.isSliderChanged = true;
  1107 + //$('#aaDetailViewCanvas').removeLayers();
988 } 1108 }
989 1109
990 $rootScope.$on('annotationToolEvent', function (event, data) { 1110 $rootScope.$on('annotationToolEvent', function (event, data) {
@@ -1045,13 +1165,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1045,13 +1165,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1045 console.log(' error: ' + error.statusText); 1165 console.log(' error: ' + error.statusText);
1046 } 1166 }
1047 ) 1167 )
1048 - 1168 +
1049 } 1169 }
1050 1170
1051 1171
1052 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { 1172 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
1053 1173
1054 - 1174 +
1055 var languageArray = $rootScope.lexiconLanguageArray; 1175 var languageArray = $rootScope.lexiconLanguageArray;
1056 1176
1057 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) { 1177 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
@@ -1062,30 +1182,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1062,30 +1182,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1062 .select(); 1182 .select();
1063 1183
1064 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) { 1184 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
1065 - 1185 +
1066 for (var j = 0; j <= languageArray.length - 1; j++) { 1186 for (var j = 0; j <= languageArray.length - 1; j++) {
1067 - 1187 +
1068 $scope.matchedLanguageTermNoData = new jinqJs() 1188 $scope.matchedLanguageTermNoData = new jinqJs()
1069 .from($scope.matchedTermNoData) 1189 .from($scope.matchedTermNoData)
1070 .where('_LanguageId == ' + languageArray[j].id) 1190 .where('_LanguageId == ' + languageArray[j].id)
1071 .select(); 1191 .select();
1072 1192
1073 - var termText = $scope.matchedLanguageTermNoData[0]._TermText; 1193 + var termText = $scope.matchedLanguageTermNoData[0]._TermText;
1074 1194
1075 $scope.MultiLanguageAnnationArray.push(termText); 1195 $scope.MultiLanguageAnnationArray.push(termText);
1076 - 1196 +
1077 1197
1078 }; 1198 };
1079 1199
1080 -  
1081 1200
1082 - }  
1083 - 1201 +
1084 } 1202 }
  1203 +
1085 } 1204 }
  1205 + }
  1206 +
  1207 +
1086 1208
1087 -  
1088 -  
1089 1209
1090 1210
1091 $scope.hidePins = function () { 1211 $scope.hidePins = function () {
@@ -1102,14 +1222,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1102,14 +1222,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1102 var pinArcName = 'PinArc_' + aaPinDataValue._PinId; 1222 var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1103 1223
1104 $('#aaDetailViewCanvas').setLayer(pinName, { 1224 $('#aaDetailViewCanvas').setLayer(pinName, {
1105 - visible: false // set to true instead to show the layer again 1225 + visible: false // set to true instead to show the layer again
1106 }).drawLayers(); 1226 }).drawLayers();
1107 1227
1108 $('#aaDetailViewCanvas').setLayer(pinArcName, { 1228 $('#aaDetailViewCanvas').setLayer(pinArcName, {
1109 visible: false // set to true instead to show the layer again 1229 visible: false // set to true instead to show the layer again
1110 }).drawLayers(); 1230 }).drawLayers();
1111 }) 1231 })
1112 - 1232 +
1113 $rootScope.isLoading = false; 1233 $rootScope.isLoading = false;
1114 $('#spinner').css('visibility', 'hidden'); 1234 $('#spinner').css('visibility', 'hidden');
1115 } 1235 }
@@ -1153,7 +1273,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1153,7 +1273,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1153 $scope.showSpeechBubble(); 1273 $scope.showSpeechBubble();
1154 }; 1274 };
1155 1275
1156 - 1276 +
1157 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) { 1277 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
1158 1278
1159 if (isShowSelectedPins) { 1279 if (isShowSelectedPins) {
@@ -1165,23 +1285,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1165,23 +1285,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1165 .where('_PinId != ' + value.id) 1285 .where('_PinId != ' + value.id)
1166 .select(); 1286 .select();
1167 }) 1287 })
1168 - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { 1288 + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
1169 1289
1170 - // if (aaPinDataValue._PinId != value.id) {  
1171 - var pinName = 'Pin_' + aaPinDataValue._PinId;  
1172 - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; 1290 + // if (aaPinDataValue._PinId != value.id) {
  1291 + var pinName = 'Pin_' + aaPinDataValue._PinId;
  1292 + var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1173 1293
1174 - $('#aaDetailViewCanvas').setLayer(pinName, {  
1175 - visible: false // set to true instead to show the layer again  
1176 - }).drawLayers(); 1294 + $('#aaDetailViewCanvas').setLayer(pinName, {
  1295 + visible: false // set to true instead to show the layer again
  1296 + }).drawLayers();
1177 1297
1178 - $('#aaDetailViewCanvas').setLayer(pinArcName, {  
1179 - visible: false // set to true instead to show the layer again  
1180 - }).drawLayers();  
1181 - // }  
1182 - }) 1298 + $('#aaDetailViewCanvas').setLayer(pinArcName, {
  1299 + visible: false // set to true instead to show the layer again
  1300 + }).drawLayers();
  1301 + // }
  1302 + })
1183 1303
1184 - // }) 1304 + // })
1185 $scope.clickedPins = []; 1305 $scope.clickedPins = [];
1186 } 1306 }
1187 1307
@@ -1210,7 +1330,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1210,7 +1330,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1210 $scope.showItemsForSearch = function () { 1330 $scope.showItemsForSearch = function () {
1211 console.log('showItemsForSearch is called'); 1331 console.log('showItemsForSearch is called');
1212 //this check is for log only because we are writing length so need to check if its not null or undefined 1332 //this check is for log only because we are writing length so need to check if its not null or undefined
1213 - 1333 +
1214 1334
1215 $timeout(function () { 1335 $timeout(function () {
1216 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) { 1336 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
@@ -1273,6 +1393,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1273,6 +1393,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1273 1393
1274 $scope.IsSearchVisible = false; 1394 $scope.IsSearchVisible = false;
1275 } 1395 }
  1396 +
1276 $rootScope.isShowHideButtonClicked = true; 1397 $rootScope.isShowHideButtonClicked = true;
1277 $scope.ShowHideAnnotation = function () { 1398 $scope.ShowHideAnnotation = function () {
1278 if ($rootScope.isShowHideButtonClicked == true) { 1399 if ($rootScope.isShowHideButtonClicked == true) {
@@ -1297,8 +1418,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1297,8 +1418,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1297 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none"); 1418 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
1298 } 1419 }
1299 } 1420 }
1300 - else  
1301 - { 1421 + else {
1302 $rootScope.isShowHideButtonClicked = true; 1422 $rootScope.isShowHideButtonClicked = true;
1303 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { 1423 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
1304 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block"); 1424 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
@@ -1365,10 +1485,123 @@ function showHideAnnotation(event) { @@ -1365,10 +1485,123 @@ function showHideAnnotation(event) {
1365 } 1485 }
1366 1486
1367 function showSelectedPins(event) { 1487 function showSelectedPins(event) {
1368 - 1488 +
1369 console.log('showSelectedPins is called') 1489 console.log('showSelectedPins is called')
1370 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); 1490 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1371 scope.$apply(function () { 1491 scope.$apply(function () {
1372 scope.showSelectedPins(event); 1492 scope.showSelectedPins(event);
1373 }); 1493 });
1374 -}  
1375 \ No newline at end of file 1494 \ No newline at end of file
  1495 +}
  1496 +
  1497 +function onZoom(scope) {
  1498 + debugger;
  1499 + //$(".common-drag").remove();
  1500 + //$(".commonDot").remove();
  1501 + //$(".commonDraggedLine").remove();
  1502 + //var radial = $('#aaDetailViewCanvas').createGradient({
  1503 + // x1: 50, y1: 50,
  1504 + // x2: 50, y2: 50,
  1505 + // r1: 10, r2: 30,
  1506 + // c1: 'rgba(100, 50, 0,0)',
  1507 + // c2: 'rgb(216, 216, 216)'
  1508 + //});
  1509 + //$('#aaDetailViewCanvas').setLayers({
  1510 + // fillStyle: radial,
  1511 + //}).drawLayers();
  1512 + // scope.removePin();
  1513 + // scope.showAllPins();
  1514 +
  1515 +
  1516 + //6. Show all pins on AA opened item
  1517 +}
  1518 +
  1519 +var sliderVal = 0.0;
  1520 +$(document).ready(function () {
  1521 + $(".slider").slider({
  1522 + min: 25,
  1523 + max: 100,
  1524 + value: 100,
  1525 + range: "min",
  1526 + orientation: "vertical",
  1527 + slide: function (event, ui) {
  1528 +
  1529 + sliderVal = ui.value;
  1530 +
  1531 + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
  1532 + scope.$apply(function () {
  1533 + var relativeWidth = 0;
  1534 + var relativeHeight = 0;
  1535 +
  1536 + if (ui.value == 100) {
  1537 + relativeWidth = scope.ViewImageWidth;
  1538 + relativeHeight = scope.ViewImageHeight
  1539 + scope.sliderPercentValue = 1.0;
  1540 + }
  1541 + else if (ui.value == 85) {
  1542 + relativeWidth = scope.ViewImageWidth * 0.85;
  1543 + relativeHeight = scope.ViewImageHeight * 0.85;
  1544 + scope.sliderPercentValue = 0.85;
  1545 +
  1546 + } else if (ui.value == 70) {
  1547 + relativeWidth = scope.ViewImageWidth * 0.70;
  1548 + relativeHeight = scope.ViewImageHeight * 0.70;
  1549 + scope.sliderPercentValue = 0.70;
  1550 + } else if (ui.value == 55) {
  1551 +
  1552 + relativeWidth = scope.ViewImageWidth * 0.55;
  1553 + relativeHeight = scope.ViewImageHeight * 0.55;
  1554 + scope.sliderPercentValue = 0.55;
  1555 +
  1556 + } else if (ui.value == 40) {
  1557 +
  1558 + relativeWidth = scope.ViewImageWidth * 0.40;
  1559 + relativeHeight = scope.ViewImageHeight * 0.40;
  1560 + scope.sliderPercentValue = 0.40;
  1561 +
  1562 + } else if (ui.value == 25) {
  1563 +
  1564 + relativeWidth = scope.ViewImageWidth * 0.25;
  1565 + relativeHeight = scope.ViewImageHeight * 0.25;
  1566 + scope.sliderPercentValue = 0.25;
  1567 +
  1568 + }
  1569 +
  1570 + console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
  1571 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1572 + $("#modItemImage").css("width", relativeWidth + "px");
  1573 + $("#modItemImage").css("height", relativeHeight + "px");
  1574 + $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
  1575 + $("#modItemImage").css("height", relativeHeight + "px");
  1576 +
  1577 + $("#modItemImage").attr('src', '');
  1578 +
  1579 +
  1580 + $("#aaDetailViewCanvas").remove();
  1581 + //0.5 create canvas on the top of image so that I can draw a line over the canvas.
  1582 + var canvas = document.createElement('canvas');
  1583 + canvas.id = 'aaDetailViewCanvas';
  1584 + canvas.className = 'aaCanvas';
  1585 + canvas.height = relativeHeight;
  1586 + canvas.width = relativeWidth;
  1587 + canvas.style.left = '0px';
  1588 + canvas.style.top = '0px';
  1589 + canvas.style.position = "absolute";
  1590 +
  1591 + $("#canvasDiv").append(canvas);
  1592 + scope.context = canvas.getContext("2d")
  1593 + $("#modItemImage").attr('src', scope.OpenItemImagePath);
  1594 + scope.isSliderChange = true;
  1595 + scope.showAllPins();
  1596 + }
  1597 +
  1598 +
  1599 +
  1600 +
  1601 + });
  1602 + }
  1603 + })
  1604 + .slider("pips", {
  1605 + rest: "label",
  1606 + step: "15"
  1607 + });
  1608 +});
1376 \ No newline at end of file 1609 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @fb0da0c
@@ -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">
@@ -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 () {