ADAM / AIAHTML5

Commit 0ae372ae416f3e11459a685b8314d5f01b8dbdaf

Authored by unknown
1 parent 76295384

Atlas Anatomy > Multiple annotations on the single pins are appearing.

Inline Side-by-side
Showing 1 changed file with 129 additions and 115 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @0ae372a
... ... @@ -1040,170 +1040,184 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
1040 1040 }
1041 1041 $scope.sliderVal = 100;
1042 1042 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
1043   -
1044 1043 x = x * $scope.sliderPercentValue;
1045 1044 y = y * $scope.sliderPercentValue;
1046   -
1047   - var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:13000;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>'
1048   - + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;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;">'
1049   - + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
1050   - + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
1051   -
1052   - + '<div style="position:absolute;border:1px solid #000;display:none;z-index:12000;" id="speechBubbleDraggedLine' + PinId + '">'
1053   - + '</div>';
1054   -
1055   - //Issue #7286 :Undefined annotation should not appear
1056   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
1057   - var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
  1045 + if ($("#canvasDiv").find("div").length > 0) {
  1046 + $("#canvasDiv").find("div").each(function () {
  1047 + var str = $(this).attr("id");
  1048 + if (str.substr(0, 16) == "speechBubbleLine") {
  1049 + var res = str.substr(16);
  1050 + if (res == PinId) {
  1051 + $scope.isAnnotationDivAlreadyPresent = false;
  1052 + }
  1053 + else {
  1054 + $scope.isAnnotationDivAlreadyPresent = true;
  1055 + }
  1056 + }
  1057 + });
1058 1058 }
  1059 + else {
  1060 + $scope.isAnnotationDivAlreadyPresent = true;
  1061 + }
  1062 + if ($scope.isAnnotationDivAlreadyPresent == true) {
  1063 + var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:13000;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>'
  1064 + + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;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;">'
  1065 + + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
  1066 + + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
1059 1067  
1060   - if (MultipleLanguage == undefined) {
1061   - console.log("No text is found");
1062   - } else {
1063   - $('#canvasDiv').append(speechBubbleHTML);
  1068 + + '<div style="position:absolute;border:1px solid #000;display:none;z-index:12000;" id="speechBubbleDraggedLine' + PinId + '">'
  1069 + + '</div>';
1064 1070  
1065   - if ($scope.MultiLanguageAnnationArray.length > 0) {
1066   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
1067   - var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
1068   - $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0];
1069   - $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
1070   - }
1071   - }
1072   - else {
1073   - console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
  1071 + //Issue #7286 :Undefined annotation should not appear
  1072 + for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
  1073 + var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
1074 1074 }
1075 1075  
1076   -
  1076 + if (MultipleLanguage == undefined) {
  1077 + console.log("No text is found");
  1078 + } else {
  1079 + $('#canvasDiv').append(speechBubbleHTML);
1077 1080  
1078   -
  1081 + if ($scope.MultiLanguageAnnationArray.length > 0) {
  1082 + for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
  1083 + var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
  1084 + $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0];
  1085 + $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
  1086 + }
  1087 + }
  1088 + else {
  1089 + console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
  1090 + }
1079 1091  
1080   - if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
1081   - if ($scope.longestAnnotation.length <= 10) {
  1092 + if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
  1093 + if ($scope.longestAnnotation.length <= 10) {
1082 1094  
1083 1095  
1084   - $("#speechBubble").css("width", "100px");
  1096 + $("#speechBubble").css("width", "100px");
1085 1097  
1086   - }
  1098 + }
1087 1099  
1088   - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
  1100 + else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
1089 1101  
1090 1102  
1091 1103  
1092   - $("#speechBubble").css("width", "140px");
  1104 + $("#speechBubble").css("width", "140px");
1093 1105  
1094   - }
1095   - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
  1106 + }
  1107 + else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
1096 1108  
1097 1109  
1098   - $("#speechBubble").css("width", "195px");
  1110 + $("#speechBubble").css("width", "195px");
1099 1111  
1100   - }
1101   - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
  1112 + }
  1113 + else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
1102 1114  
1103   - $("#speechBubble").css("width", "248px");
  1115 + $("#speechBubble").css("width", "248px");
1104 1116  
1105   - }
1106   - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
  1117 + }
  1118 + else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
1107 1119  
1108 1120  
1109   - $("#speechBubble").css("width", "300px");
1110   - }
  1121 + $("#speechBubble").css("width", "300px");
  1122 + }
1111 1123  
1112   - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
  1124 + else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
1113 1125  
1114   - $("#speechBubble").css("width", "370px");
1115   - }
  1126 + $("#speechBubble").css("width", "370px");
  1127 + }
1116 1128  
1117   - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
1118   - $("#speechBubble").css("width", "450px");
1119   - }
1120   - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
1121   - $("#speechBubble").css("width", "510px");
1122   - }
1123   - else {
1124   - $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
  1129 + else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
  1130 + $("#speechBubble").css("width", "450px");
  1131 + }
  1132 + else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
  1133 + $("#speechBubble").css("width", "510px");
  1134 + }
  1135 + else {
  1136 + $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
  1137 + }
1125 1138 }
1126 1139 }
  1140 + var speechBubbleDims = [];
  1141 +
  1142 + $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
  1143 + speechBubbleDims.push({ currentX: x, currentY: y });
  1144 + document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
  1145 + document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
  1146 + if ($scope.sliderVal == 25) {
  1147 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
  1148 + }
  1149 + else {
  1150 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
  1151 + }
  1152 + document.getElementById('speechBubble' + PinId + '').style.display = 'block';
  1153 + document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
  1154 + document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
1127 1155 }
1128   - var speechBubbleDims = [];
1129   -
1130   - $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
1131   - speechBubbleDims.push({ currentX: x, currentY: y });
1132   - document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
1133   - document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
1134   - if ($scope.sliderVal == 25) {
1135   - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
1136   - }
1137   - else {
1138   - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
1139   - }
1140   - document.getElementById('speechBubble' + PinId + '').style.display = 'block';
1141   - document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
1142   - document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
1143   - $('.common-drag').draggable(
1144   - {
  1156 + $('.common-drag').draggable(
  1157 + {
1145 1158  
1146   - drag: function (evt) {
  1159 + drag: function (evt) {
1147 1160  
1148   - var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
1149   - var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
1150   - var clickedSpeechBubbleId = $(this).attr("id");
  1161 + var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
  1162 + var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
  1163 + var clickedSpeechBubbleId = $(this).attr("id");
1151 1164  
1152   - var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
  1165 + var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
1153 1166  
1154   - $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
1155   - $("#speechBubbleLine" + clickedPinId).css("display", "none");
  1167 + $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
  1168 + $("#speechBubbleLine" + clickedPinId).css("display", "none");
1156 1169  
1157   - for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
1158   - if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
1159   - $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
  1170 + for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
  1171 + if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
  1172 + $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
  1173 + }
1160 1174 }
1161   - }
1162 1175  
1163   - },
1164   - });
1165   - $('.crossDiv_temp').on('click', function (evt) {
  1176 + },
  1177 + });
  1178 +
  1179 + $('.crossDiv_temp').on('click', function (evt) {
  1180 +
  1181 + var imgId = $(this).attr("id");
  1182 + var pinId = imgId.substring(8, imgId.length);
  1183 + $('#speechBubble' + pinId).remove();
  1184 + $("#speechBubbleDraggedLine" + pinId).remove();
  1185 + $("#speechBubbleLine" + pinId).remove();
  1186 +
  1187 + //make all pin heads grey
  1188 + var pinHeadName = 'PinArc_' + pinId;
  1189 + var radial = $('#aaDetailViewCanvas').createGradient({
  1190 + x1: 50, y1: 50,
  1191 + x2: 50, y2: 50,
  1192 + r1: 10, r2: 30,
  1193 + c1: 'rgba(100, 50, 0,0)',
  1194 + c2: 'rgb(216, 216, 216)'
  1195 + });
1166 1196  
1167   - var imgId = $(this).attr("id");
1168   - var pinId = imgId.substring(8, imgId.length);
1169   - $('#speechBubble' + pinId).remove();
1170   - $("#speechBubbleDraggedLine" + pinId).remove();
1171   - $("#speechBubbleLine" + pinId).remove();
1172 1197  
1173   - //make all pin heads grey
1174   - var pinHeadName = 'PinArc_' + pinId;
1175   - var radial = $('#aaDetailViewCanvas').createGradient({
  1198 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  1199 + fillStyle: radial,
  1200 + }).drawLayers();
  1201 + });
  1202 +
  1203 + //make the head green
  1204 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
1176 1205 x1: 50, y1: 50,
1177 1206 x2: 50, y2: 50,
1178 1207 r1: 10, r2: 30,
1179 1208 c1: 'rgba(100, 50, 0,0)',
1180   - c2: 'rgb(216, 216, 216)'
  1209 + c2: 'rgb(126, 187, 83)'
1181 1210 });
1182   -
  1211 + var pinHeadName = 'PinArc_' + PinId;
  1212 + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
  1213 + // pin.fillStyle = radialAfterClick;
1183 1214  
1184 1215 $('#aaDetailViewCanvas').setLayer(pinHeadName, {
1185   - fillStyle: radial,
  1216 + fillStyle: radialAfterClick,
1186 1217 }).drawLayers();
1187   - });
1188   -
1189   - //make the head green
1190   - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
1191   - x1: 50, y1: 50,
1192   - x2: 50, y2: 50,
1193   - r1: 10, r2: 30,
1194   - c1: 'rgba(100, 50, 0,0)',
1195   - c2: 'rgb(126, 187, 83)'
1196   - });
1197   - var pinHeadName = 'PinArc_' + PinId;
1198   - var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
1199   - // pin.fillStyle = radialAfterClick;
  1218 +
1200 1219  
1201   - $('#aaDetailViewCanvas').setLayer(pinHeadName, {
1202   - fillStyle: radialAfterClick,
1203   - }).drawLayers();
1204 1220 }
1205   -
1206   -
1207 1221 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
1208 1222  
1209 1223 var dy = ey - cy;
... ...