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 26 $rootScope.speechBubbleDimaensions = [];
27 27 $scope.runningSearchWorkers = [];
28 28 $scope.clickedPins = [];
29   -
  29 + $scope.sliderPercentValue = 1;
30 30 $scope.query = {
31 31 selectedbodyregion: '',
32 32 selectedbodysystem: '',
... ... @@ -76,6 +76,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
76 76 $rootScope.imageName = $rootScope.OpenedTileData[3];
77 77 $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
78 78 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
  79 + $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
79 80  
80 81 //3. set opened module item title
81 82 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
... ... @@ -150,15 +151,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
150 151 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
151 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 163 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
154 164 var canvas = document.createElement('canvas');
155 165 canvas.id = 'aaDetailViewCanvas';
  166 + canvas.className = '.aaCanvas'
156 167 canvas.height = parseInt(($scope.imageHeight));
157 168 canvas.width = parseInt($scope.imageWidth);
158 169 canvas.style.left = '0px';
159 170 canvas.style.top = '0px';
160 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 177 $("#canvasDiv").append(canvas);
163 178 $scope.context = canvas.getContext("2d")
164 179  
... ... @@ -196,7 +211,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
196 211 $scope.imageHeight = this.height;
197 212 }
198 213  
199   -
  214 +
200 215  
201 216  
202 217 angular.element(document).ready(function (e) {
... ... @@ -208,7 +223,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
208 223 })
209 224  
210 225 $scope.showAllPins = function () {
211   -
  226 +
212 227 var promise = ModuleService.getPinDataForImage($rootScope.imageName)
213 228  
214 229 .then(
... ... @@ -234,8 +249,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
234 249 $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
235 250 })
236 251  
237   -
238   -
  252 +
  253 +
239 254 //load search/vocab data
240 255 $rootScope.loadSearchData();
241 256 }
... ... @@ -458,7 +473,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
458 473 $scope.selectedSystemName = null;
459 474 if ($scope.isHidePinBtnClicked) {
460 475  
461   - // $scope.showAllPinsAfterHide($scope.aaPinData);
  476 + // $scope.showAllPinsAfterHide($scope.aaPinData);
462 477 $scope.showAllPinsAfterHide();
463 478 }
464 479 else {
... ... @@ -469,56 +484,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
469 484  
470 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 538 $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
... ... @@ -540,53 +554,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
540 554  
541 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 606 $rootScope.isLoading = false;
... ... @@ -596,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
596 610  
597 611 $scope.removeSpeechBubble = function () {
598 612  
599   -
  613 +
600 614 //clear speech bubbles
601 615 var speechBubbles = $("div[id*='speechBubble']");
602 616 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -652,7 +666,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
652 666  
653 667 $scope.hideSpeechBubble = function () {
654 668  
655   -
  669 +
656 670 //clear speech bubbles
657 671 var speechBubbles = $("div[id*='speechBubble']");
658 672 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -691,7 +705,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
691 705 $("#dot").css("visibility", "hidden");
692 706 var verticalScrollPosition = canvasDiv.scrollTop;
693 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 713  
700 714 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
701 715  
  716 + x = x * $scope.sliderPercentValue;
  717 + y = y * $scope.sliderPercentValue;
  718 +
702 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 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 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 796 $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
780 797 speechBubbleDims.push({ currentX: x, currentY: y });
781 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 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 805 $('.common-drag').draggable(
789 806 {
790   -
  807 +
791 808 drag: function (evt) {
792   -
  809 +
793 810 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
794 811 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
795 812 var clickedSpeechBubbleId = $(this).attr("id");
... ... @@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
850 867  
851 868  
852 869 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
853   -
  870 +
854 871 var dy = ey - cy;
855 872 var dx = ex - cx;
856 873 var theta = 0;
... ... @@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
871 888 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
872 889 var e = cy;
873 890 var f = cx;
874   -
  891 +
875 892 if (BoolValues == true) {
876 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 902  
886 903  
887 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 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 1110 $rootScope.$on('annotationToolEvent', function (event, data) {
... ... @@ -1045,13 +1165,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1045 1165 console.log(' error: ' + error.statusText);
1046 1166 }
1047 1167 )
1048   -
  1168 +
1049 1169 }
1050 1170  
1051 1171  
1052 1172 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
1053 1173  
1054   -
  1174 +
1055 1175 var languageArray = $rootScope.lexiconLanguageArray;
1056 1176  
1057 1177 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
... ... @@ -1062,30 +1182,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1062 1182 .select();
1063 1183  
1064 1184 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
1065   -
  1185 +
1066 1186 for (var j = 0; j <= languageArray.length - 1; j++) {
1067   -
  1187 +
1068 1188 $scope.matchedLanguageTermNoData = new jinqJs()
1069 1189 .from($scope.matchedTermNoData)
1070 1190 .where('_LanguageId == ' + languageArray[j].id)
1071 1191 .select();
1072 1192  
1073   - var termText = $scope.matchedLanguageTermNoData[0]._TermText;
  1193 + var termText = $scope.matchedLanguageTermNoData[0]._TermText;
1074 1194  
1075 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 1211 $scope.hidePins = function () {
... ... @@ -1102,14 +1222,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1102 1222 var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1103 1223  
1104 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 1226 }).drawLayers();
1107 1227  
1108 1228 $('#aaDetailViewCanvas').setLayer(pinArcName, {
1109 1229 visible: false // set to true instead to show the layer again
1110 1230 }).drawLayers();
1111 1231 })
1112   -
  1232 +
1113 1233 $rootScope.isLoading = false;
1114 1234 $('#spinner').css('visibility', 'hidden');
1115 1235 }
... ... @@ -1153,7 +1273,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1153 1273 $scope.showSpeechBubble();
1154 1274 };
1155 1275  
1156   -
  1276 +
1157 1277 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
1158 1278  
1159 1279 if (isShowSelectedPins) {
... ... @@ -1165,23 +1285,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1165 1285 .where('_PinId != ' + value.id)
1166 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 1305 $scope.clickedPins = [];
1186 1306 }
1187 1307  
... ... @@ -1210,7 +1330,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1210 1330 $scope.showItemsForSearch = function () {
1211 1331 console.log('showItemsForSearch is called');
1212 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 1335 $timeout(function () {
1216 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 1393  
1274 1394 $scope.IsSearchVisible = false;
1275 1395 }
  1396 +
1276 1397 $rootScope.isShowHideButtonClicked = true;
1277 1398 $scope.ShowHideAnnotation = function () {
1278 1399 if ($rootScope.isShowHideButtonClicked == true) {
... ... @@ -1297,8 +1418,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1297 1418 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
1298 1419 }
1299 1420 }
1300   - else
1301   - {
  1421 + else {
1302 1422 $rootScope.isShowHideButtonClicked = true;
1303 1423 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
1304 1424 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
... ... @@ -1365,10 +1485,123 @@ function showHideAnnotation(event) {
1365 1485 }
1366 1486  
1367 1487 function showSelectedPins(event) {
1368   -
  1488 +
1369 1489 console.log('showSelectedPins is called')
1370 1490 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1371 1491 scope.$apply(function () {
1372 1492 scope.showSelectedPins(event);
1373 1493 });
1374   -}
1375 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 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 29 <div class="tools pull-left" style="top:44px;">
30 30 <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
31 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 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 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 35 <div class="col-sm-6" title="Select System">
... ... @@ -107,7 +107,7 @@
107 107  
108 108  
109 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 111 <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" />
112 112 </button>
113 113  
... ... @@ -131,17 +131,17 @@
131 131 <div class="container-fluid">
132 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 135 <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
136 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 145 </div>
146 146 </div>
147 147 </div>
... ... @@ -163,23 +163,7 @@
163 163 $('[data-toggle="tooltip"]').tooltip();
164 164 });
165 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 168 <script>
185 169 $(function () {
... ...