ADAM / AIAHTML5

Commit db699b743a282c9311faf7236878635913c94402

Authored by Nikita Kulshreshtha
1 parent 0b7b51bf

pin click is working but need to correct speech bubble position and also remove duplicate code. 

now removing canvas and image and again drawing on zoom with new dimensions.
Inline Side-by-side
Showing 1 changed file with 82 additions and 101 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @db699b7
... ... @@ -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]);
... ... @@ -157,20 +158,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
157 158  
158 159 $scope.relativeDimesion = 0;
159 160 $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
160   - //imageViewAt100Percent = $rootScope.ViewImageWidth;
161   - //imageViewAt25Percent = $rootScope.ViewImageWidth * 0.25;
162   - //imageViewAt40Percent = $rootScope.ViewImageWidth * 0.40;
163   - //imageViewAt55Percent = $rootScope.ViewImageWidth * 0.55;
164   - //imageViewAt70Percent = $rootScope.ViewImageWidth * 0.70;
165   - //imageViewAt85Percent = $rootScope.ViewImageWidth * 0.85;
166   -
167   -
168   -
169   -
  161 +
170 162  
171 163 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
172 164 var canvas = document.createElement('canvas');
173 165 canvas.id = 'aaDetailViewCanvas';
  166 + canvas.className = '.aaCanvas'
174 167 canvas.height = parseInt(($scope.imageHeight));
175 168 canvas.width = parseInt($scope.imageWidth);
176 169 canvas.style.left = '0px';
... ... @@ -712,7 +705,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
712 705 $("#dot").css("visibility", "hidden");
713 706 var verticalScrollPosition = canvasDiv.scrollTop;
714 707 var horizontlScrollPosition = canvasDiv.scrollLeft;
715   - $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);
716 709 },
717 710 });
718 711  
... ... @@ -720,6 +713,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
720 713  
721 714 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
722 715  
  716 + x = x * $scope.sliderPercentValue;
  717 + y = y * $scope.sliderPercentValue;
  718 +
723 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>'
724 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;">'
725 721 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
... ... @@ -800,11 +796,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
800 796 $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
801 797 speechBubbleDims.push({ currentX: x, currentY: y });
802 798 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
803   - document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45)) + 'px';
804   - 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';
805 801 document.getElementById('speechBubble' + PinId + '').style.display = 'block';
806   - document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70) + 'px';
807   - 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';
808 804  
809 805 $('.common-drag').draggable(
810 806 {
... ... @@ -906,8 +902,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
906 902  
907 903  
908 904 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
909   -
910   - if ($rootScope.isSliderChanged == true) {
  905 + console.log('drawStaticPinsOnImage')
  906 + if ($scope.isSliderChange == true) {
  907 + console.log('isSliderrChange')
911 908 var radial = $('#' + canvasId).createGradient({
912 909 x1: 50, y1: 50,
913 910 x2: 50, y2: 50,
... ... @@ -923,8 +920,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
923 920 strokeStyle: 'black',
924 921 strokeWidth: 2,
925 922 visible: true,
926   - x1: offsetX1, y1: offsetY1,
927   - x2: x * 0.85, y2: y * 0.85,
  923 + x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
  924 + x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
928 925  
929 926 }).drawArc({
930 927 name: "PinArc_" + PinId,
... ... @@ -934,11 +931,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
934 931 strokeWidth: 2,
935 932 visible: true,
936 933 fillStyle: radial,
937   - x: x * 0.85, y: y * 0.85,
938   - radius: 5 * 0.85,
  934 + x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
  935 + radius: 5 * $scope.sliderPercentValue,
939 936  
940 937 click: function (clickedPin) {
941   - alert('pin clciked = ' + clickedPin.name)
  938 + // alert('pin clciked = ' + clickedPin.name)
942 939 //change the head color to green
943 940 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
944 941 x1: 50, y1: 50,
... ... @@ -1025,7 +1022,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1025 1022 visible: true,
1026 1023 fillStyle: radial,
1027 1024 x: x, y: y,
1028   - radius: 2,
  1025 + radius: 5,
1029 1026  
1030 1027 click: function (clickedPin) {
1031 1028 alert('pin clciked = ' + clickedPin.name) //change the head color to green
... ... @@ -1099,15 +1096,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1099 1096  
1100 1097 $scope.removePin = function (canvasId, pinId) {
1101 1098  
1102   - // var pinName = 'Pin_' + pinId;
1103   - // var pinArcName = 'PinArc_' + pinId;
1104   - // $('#' + canvasId).removeLayer(pinName).drawLayers();
1105   - // $('#' + canvasId).removeLayer(pinArcName).drawLayers();
  1099 + var pinName = 'Pin_' + pinId;
  1100 + var pinArcName = 'PinArc_' + pinId;
  1101 + $('#' + canvasId).removeLayer(pinName).drawLayers();
  1102 + $('#' + canvasId).removeLayer(pinArcName).drawLayers();
1106 1103  
1107   - // $scope.removeSpeechBubble();
  1104 + $scope.removeSpeechBubble();
1108 1105  
1109   - $rootScope.isSliderChanged = true;
1110   - $('#aaDetailViewCanvas').removeLayers();
  1106 + //$rootScope.isSliderChanged = true;
  1107 + //$('#aaDetailViewCanvas').removeLayers();
1111 1108 }
1112 1109  
1113 1110 $rootScope.$on('annotationToolEvent', function (event, data) {
... ... @@ -1396,6 +1393,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1396 1393  
1397 1394 $scope.IsSearchVisible = false;
1398 1395 }
  1396 +
1399 1397 $rootScope.isShowHideButtonClicked = true;
1400 1398 $scope.ShowHideAnnotation = function () {
1401 1399 if ($rootScope.isShowHideButtonClicked == true) {
... ... @@ -1495,35 +1493,28 @@ function showSelectedPins(event) {
1495 1493 });
1496 1494 }
1497 1495  
1498   -function removePinOnZoom(scope) {
  1496 +function onZoom(scope) {
1499 1497 debugger;
1500   - $(".common-drag").remove();
1501   - $(".commonDot").remove();
1502   - $(".commonDraggedLine").remove();
1503   - var radial = $('#aaDetailViewCanvas').createGradient({
1504   - x1: 50, y1: 50,
1505   - x2: 50, y2: 50,
1506   - r1: 10, r2: 30,
1507   - c1: 'rgba(100, 50, 0,0)',
1508   - c2: 'rgb(216, 216, 216)'
1509   - });
1510   - $('#aaDetailViewCanvas').setLayers({
1511   - fillStyle: radial,
1512   - }).drawLayers();
1513   - // var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1514   - //scope.$apply(function () {
1515   - scope.removePin();
1516   - scope.showAllPins();
  1498 + //$(".common-drag").remove();
  1499 + //$(".commonDot").remove();
  1500 + //$(".commonDraggedLine").remove();
  1501 + //var radial = $('#aaDetailViewCanvas').createGradient({
  1502 + // x1: 50, y1: 50,
  1503 + // x2: 50, y2: 50,
  1504 + // r1: 10, r2: 30,
  1505 + // c1: 'rgba(100, 50, 0,0)',
  1506 + // c2: 'rgb(216, 216, 216)'
1517 1507 //});
  1508 + //$('#aaDetailViewCanvas').setLayers({
  1509 + // fillStyle: radial,
  1510 + //}).drawLayers();
  1511 + // scope.removePin();
  1512 + // scope.showAllPins();
  1513 +
  1514 +
  1515 + //6. Show all pins on AA opened item
1518 1516 }
1519 1517  
1520   -//var imageViewAt25Percent = 0.0;
1521   -//var imageViewAt40Percent = 0.0;
1522   -//var imageViewAt55Percent = 0.0;
1523   -//var imageViewAt70Percent = 0.0;
1524   -//var imageViewAt70Percent = 0.0;
1525   -//var imageViewAt85Percent = 0.0;
1526   -//var imageViewAt100Percent = 0.0;
1527 1518 var sliderVal = 0.0;
1528 1519 $(document).ready(function () {
1529 1520 $(".slider").slider({
... ... @@ -1541,35 +1532,38 @@ $(document).ready(function () {
1541 1532 // scope.showSelectedSystemPins(event);
1542 1533 var relativeWidth = 0;
1543 1534 var relativeHeight = 0;
  1535 + //scope.sliderPercentValue = 0;
1544 1536 if (ui.value == 100) {
1545 1537 relativeWidth = scope.ViewImageWidth;
1546 1538 relativeHeight = scope.ViewImageHeight
1547   -
  1539 + scope.sliderPercentValue = 1.0;
1548 1540 }
1549 1541 else if (ui.value == 85) {
1550 1542 relativeWidth = scope.ViewImageWidth * 0.85;
1551 1543 relativeHeight = scope.ViewImageHeight * 0.85;
  1544 + scope.sliderPercentValue = 0.85;
1552 1545  
1553 1546 } else if (ui.value == 70) {
1554 1547 relativeWidth = scope.ViewImageWidth * 0.70;
1555 1548 relativeHeight = scope.ViewImageHeight * 0.70;
1556   -
  1549 + scope.sliderPercentValue = 0.70;
1557 1550 } else if (ui.value == 55) {
1558 1551  
1559 1552 relativeWidth = scope.ViewImageWidth * 0.55;
1560 1553 relativeHeight = scope.ViewImageHeight * 0.55;
1561   -
  1554 + scope.sliderPercentValue = 0.55;
1562 1555  
1563 1556 } else if (ui.value == 40) {
1564 1557  
1565 1558 relativeWidth = scope.ViewImageWidth * 0.40;
1566 1559 relativeHeight = scope.ViewImageHeight * 0.40;
  1560 + scope.sliderPercentValue = 0.40;
1567 1561  
1568 1562 } else if (ui.value == 25) {
1569 1563  
1570 1564 relativeWidth = scope.ViewImageWidth * 0.25;
1571 1565 relativeHeight = scope.ViewImageHeight * 0.25;
1572   -
  1566 + scope.sliderPercentValue = 0.25;
1573 1567  
1574 1568 }
1575 1569  
... ... @@ -1579,48 +1573,35 @@ $(document).ready(function () {
1579 1573 $("#modItemImage").css("height", relativeHeight + "px");
1580 1574 $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
1581 1575 $("#modItemImage").css("height", relativeHeight + "px");
1582   - removePinOnZoom(scope);
  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 + //canvas.addEventListener('click', function () {
  1591 + // alert('canvas clicked');
  1592 + // var clickedPint = scope.getMousePos(event);
  1593 + // alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
  1594 + //})
  1595 + $("#canvasDiv").append(canvas);
  1596 + scope.context = canvas.getContext("2d")
  1597 + $("#modItemImage").attr('src', scope.OpenItemImagePath);
  1598 + scope.isSliderChange = true;
  1599 + scope.showAllPins();
1583 1600 }
1584   - //if (ui.value == 100) {
1585   -
1586   - // $("#modItemImage").css("width", imageViewAt100Percent + "px");
1587   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1588   - // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
1589   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1590   - //}
1591   - //else if (ui.value == 85) {
1592   -
1593   - // $("#modItemImage").css("width", imageViewAt85Percent + "px");
1594   - // $("#modItemImage").css("height", imageViewAt85Percent + "px");
1595   - // $("#aaDetailViewCanvas").css("width", imageViewAt85Percent + "px");
1596   - // $("#modItemImage").css("height", imageViewAt85Percent + "px");
1597   - //} else if (ui.value == 70) {
1598   -
1599   - // $("#modItemImage").css("width", imageViewAt70Percent + "px");
1600   - // $("#modItemImage").css("height", imageViewAt70Percent + "px");
1601   - // $("#aaDetailViewCanvas").css("width", imageViewAt70Percent + "px");
1602   - // $("#modItemImage").css("height", imageViewAt70Percent + "px");
1603   - //} else if (ui.value == 55) {
1604   -
1605   - // $("#modItemImage").css("width", imageViewAt55Percent + "px");
1606   - // $("#modItemImage").css("height", imageViewAt55Percent + "px");
1607   - // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
1608   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1609   -
1610   - //} else if (ui.value == 40) {
1611   -
1612   - // $("#modItemImage").css("width", imageViewAt100Percent + "px");
1613   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1614   - // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
1615   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1616   -
1617   - //} else if (ui.value == 25) {
1618   -
1619   - // $("#modItemImage").css("width", imageViewAt100Percent + "px");
1620   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1621   - // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
1622   - // $("#modItemImage").css("height", imageViewAt100Percent + "px");
1623   - //}
  1601 +
  1602 +
  1603 +
  1604 +
1624 1605 });
1625 1606 }
1626 1607 })
... ...