ADAM / AIAHTML5

Commit 2fdee721fcd2e8c44d59f1ee0ca0adc87372ab71

Authored by unknown
1 parent ac503277

Annotation: User should be able to see what he/she drawing

Inline Side-by-side
Showing 1 changed file with 98 additions and 78 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @2fdee72
... ... @@ -63,7 +63,6 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
63 63 $rootScope.rectDimension = [];
64 64  
65 65  
66   -
67 66 $rootScope.$on("$locationChangeSuccess", function () {
68 67  
69 68 if (($location.url() == "/da-body-view") || ($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) {
... ... @@ -611,9 +610,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
611 610 strokeStyle: shapestyleborderColor,
612 611 opacity: shapestyleOpacity,
613 612 strokeWidth: shapestyleborderWidth,
614   - x: offsetX1, y: offsetY1,
615   - width: x - offsetX1,
616   - height: y - offsetY1,
  613 + x: offsetX1 + 40, y: offsetY1 + 40,
  614 + width: (x - offsetX1),
  615 + height:(y - offsetY1),
617 616  
618 617 resizeFromCenter: false,
619 618  
... ... @@ -678,7 +677,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
678 677 }
679 678  
680 679 $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
681   -
  680 + // console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
682 681 $(canvasId).addLayer({
683 682 layer: true,
684 683 name: 'Circle_' + CircleNumber,
... ... @@ -688,15 +687,11 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
688 687 strokeStyle: shapestyleborderColor,
689 688 strokeWidth: shapestyleborderWidth,
690 689 fillStyle: shapestyleFillColor,
691   - x: offsetX1, y: offsetY1,
692   - width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,
  690 + x: (offsetX1 + 40), y: (offsetY1 + 40),
  691 + width: (x - offsetX1), height: (y - offsetY1),
693 692 // Place a handle at each side and each corner
694 693 handlePlacement: 'both',
695   -
696   -
697   -
698 694 click: function (layer) {
699   -
700 695 $rootScope.canvasLayerNameCollection = [];
701 696 $rootScope.canvasLayerNameCollection.push(layer.name);
702 697 $(canvasId).setLayer(layer.name, {
... ... @@ -935,7 +930,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
935 930 $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
936 931  
937 932  
938   - debugger;
  933 + // debugger;
939 934  
940 935 $('#canvas').drawText({
941 936 layer: true,
... ... @@ -967,9 +962,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
967 962 strokeStyle: $rootScope.shapestyleborderColor,
968 963 strokeWidth: $rootScope.shapestyleborderWidth,
969 964 fillStyle: $rootScope.shapestyleFillColor,
970   - x: $rootScope.offsetX1, y: $rootScope.offsetY1,
971   - width: $rootScope.x - $rootScope.offsetX1,
972   - height: $rootScope.y - $rootScope.offsetY1,
  965 + x: $rootScope.offsetX1 + 40, y: $rootScope.offsetY1 + 40,
  966 + width: ($rootScope.x - $rootScope.offsetX1),
  967 + height:($rootScope.y - $rootScope.offsetY1),
973 968 add: function (layer) {
974 969  
975 970 $rootScope.TextAreaRectID = layer.name;
... ... @@ -1119,15 +1114,16 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
1119 1114 // var y = event.clientY;
1120 1115 $rootScope.offsetX1 = 0;
1121 1116 $rootScope.offsetY1 = 0;
  1117 + var canvasDiv = document.getElementById('canvasDiv');
  1118 + var verticalScrollPosition = canvasDiv.scrollTop;
  1119 + var horizontlScrollPosition = canvasDiv.scrollLeft;
1122 1120 $rootScope.offsetX1 = event.offsetX;
1123 1121 $rootScope.offsetY1 = event.offsetY;
1124   -
1125 1122 ctx.clearRect(0, 0, 2277, 3248);
1126 1123 $rootScope.clicked = true;
1127   -
1128 1124 // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1);
  1125 + canvasElement.addEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
1129 1126 }
1130   -
1131 1127 $rootScope.rectNumber = 0;
1132 1128 $rootScope.LineNumber = 0;
1133 1129 $rootScope.CircleNumber = 0;
... ... @@ -1144,70 +1140,59 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
1144 1140 var arrayRect = {};
1145 1141  
1146 1142 var storeLine = '';
1147   - //$rootScope.canvasLayerNameCollection1 = [];
  1143 +
1148 1144 $rootScope.OnPaintCanvasMouseUp = function (event) {
1149   -
  1145 +
1150 1146 if (!$rootScope.clicked) {
1151 1147 return;
1152 1148 }
  1149 + var AnnotationCanvas = document.getElementById('canvas');
  1150 + AnnotationCanvas.removeEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
  1151 + $(".line").remove();
  1152 + $(".arrow").remove();
  1153 + $(".pin").remove();
  1154 + $(".circle").remove();
  1155 + $(".rectangle").remove();
  1156 + $(".textarea").remove();
1153 1157 $rootScope.clicked = false;
1154 1158 $rootScope.x = 0;
1155 1159 $rootScope.y = 0;
1156   - $rootScope.x = parseInt(event.clientX - ($("#canvas").offset().left));
1157   - $rootScope.y = parseInt(event.clientY - ($("#canvas").offset().top));
1158   -
  1160 + var canvasDiv = document.getElementById('canvasDiv');
  1161 + var verticalScrollPosition = canvasDiv.scrollTop;
  1162 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1163 + $rootScope.x = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1164 + $rootScope.y = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
1159 1165 var canvasElement = document.getElementById("canvas");
1160 1166 var ctx = canvasElement.getContext("2d");
1161   -
1162 1167 var canvasPaintElement = document.getElementById("canvasPaint");
1163 1168 var PaintCanvasctx = canvasPaintElement.getContext("2d");
1164   -
1165   -
1166 1169 switch ($rootScope.shapeType) {
1167   -
1168 1170 case "cursor":
1169   - // ctx.clearRect(0, 0, 2277, 3248);
1170 1171 ctx.beginPath();
1171 1172 PaintCanvasctx.beginPath();
1172   -
1173   -
1174 1173 break;
1175   -
1176 1174 case "Line":
1177   - //$rootScope.canvasLayerNameCollection = [];
1178 1175 $rootScope.LineNumber = $rootScope.ObjectIndex++;
1179   -
1180 1176 $rootScope.LineFn('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y)
1181   -
1182 1177 break;
1183   -
1184 1178 case "Rectangle":
1185 1179 $rootScope.rectNumber = $rootScope.ObjectIndex++;
1186 1180 $rootScope.RectangleFn('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1187   -
1188 1181 break;
1189   -
1190 1182 case "Circle":
1191   - // alert($rootScope.shapestyleborderWidth);
1192 1183 $rootScope.CircleNumber = $rootScope.ObjectIndex++;
1193   -
1194 1184 $rootScope.CircleFn('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1195 1185 break;
1196 1186 case "Arrow":
1197 1187 $rootScope.ArrowNumber = $rootScope.ObjectIndex++;
1198   -
1199 1188 $rootScope.ArrowFn('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1200   -
1201   - // $scope.resetRect += 1;
1202 1189 break;
1203 1190 case "Pin":
1204 1191 $rootScope.PinNumber = $rootScope.PinObjectIndex++;
1205 1192 $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++;
1206 1193 $rootScope.PinFn('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);
1207   -
1208 1194 break;
1209 1195 case "TextArea":
1210   -
1211 1196 $rootScope.IsTextAlreadySave = false;
1212 1197 $("#text_area").val('');
1213 1198 // Draw text
... ... @@ -1215,9 +1200,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
1215 1200 $rootScope.TextNumber = $rootScope.ObjectIndex++;
1216 1201 $rootScope.TextAreaFn('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y);
1217 1202 break;
1218   -
1219 1203 case "DrawPolygon":
1220   -
1221 1204 break;
1222 1205  
1223 1206 }
... ... @@ -1225,15 +1208,82 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
1225 1208  
1226 1209 }
1227 1210  
  1211 + $rootScope.OnPaintCanvasMouseMove = function (event) {
  1212 + var canvasDiv = document.getElementById('canvasDiv');
  1213 + var verticalScrollPosition = canvasDiv.scrollTop;
  1214 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1215 + $rootScope.MouseMoveXAxis = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1216 + $rootScope.MouseMoveYAxis = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
1228 1217  
  1218 + switch ($rootScope.shapeType) {
  1219 + case "Line":
  1220 + $(".line").remove();
  1221 + // console.log($rootScope.MouseMoveXAxis - $rootScope.offsetX1);
  1222 + $("#canvasDiv").append("<div class='line' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
  1223 + $rootScope.Annotationangle();
  1224 + break;
  1225 + case "Arrow":
  1226 + $(".arrow").remove();
  1227 + $("#canvasDiv").append("<div class='arrow' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='border-bottom: 9px solid transparent;border-right: 12px dashed #ccc;border-top: 7px solid transparent;height: 0;left: -6px;position: absolute;top: -8px;width: 0;'></div></div>");
  1228 + $rootScope.Annotationangle();
  1229 + break;
  1230 + case "Pin":
  1231 + $(".pin").remove();
  1232 + $("#canvasDiv").append("<div class='pin' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='background-color:#fff;left: -8px;position: absolute;top: -6px;width: 10;height:12px;width:12px;border:2px dashed #808080;border-radius:50%;'></div></div>");
  1233 + $rootScope.Annotationangle();
  1234 + break;
  1235 + case "Circle":
  1236 + $(".circle").remove();
  1237 + // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
  1238 + $("#canvasDiv").append("<div class='circle' style='border-radius:50%;border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1239 + break;
  1240 + case "Rectangle":
  1241 + $(".rectangle").remove();
  1242 + // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
  1243 + $("#canvasDiv").append("<div class='rectangle' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1244 + break;
  1245 + case "TextArea":
  1246 + $(".textarea").remove();
  1247 + // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
  1248 + $("#canvasDiv").append("<div class='textarea' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1249 + break;
  1250 + }
  1251 + }
1229 1252  
  1253 + $rootScope.Annotationangle = function (event) {
  1254 + var dy = $rootScope.MouseMoveYAxis - $rootScope.offsetY1;
  1255 + var dx = $rootScope.MouseMoveXAxis - $rootScope.offsetX1;
  1256 + var theta = 0;
  1257 + if (dx < 0) {
  1258 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1259 + theta = theta + 180;
1230 1260  
  1261 + }
  1262 + else if (dy < 0) {
  1263 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1264 + theta = theta + 360;
1231 1265  
  1266 + }
  1267 + else {
  1268 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1269 + }
  1270 + var dottedLineWidth = Math.sqrt(($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) * ($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) + ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis) * ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis));
  1271 + switch ($rootScope.shapeType) {
  1272 + case "Line":
  1273 + $('.line').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1274 + break;
  1275 + case "Arrow":
  1276 + $('.arrow').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1277 + break;
  1278 + case "Pin":
  1279 + $('.pin').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1280 + break;
  1281 + }
  1282 + }
1232 1283  
1233 1284 ///-----
1234   -
1235 1285 $rootScope.saveText = function () {
1236   - debugger;
  1286 +
1237 1287 document.getElementById('modelbackground').style.display = "none";
1238 1288 // this part will work first time when save button will be clicked
1239 1289 if ($rootScope.IsTextAlreadySave == false) {
... ... @@ -1248,15 +1298,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1248 1298 $rootScope.textArea = $("#text_area").val();
1249 1299  
1250 1300 // deleting previous text area
1251   -
1252   -
1253 1301 $("#canvas").removeLayer($rootScope.TextID).drawLayers();
1254 1302 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
1255   -
1256   -
1257   - // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
1258   - // $("#canvas").removeLayer("TextRect_" + $rootScope.TextNumber).drawLayers();
1259   -
1260 1303 // Text After Saving in Rectangle
1261 1304 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1262 1305 $('#canvas').drawText({
... ... @@ -1323,31 +1366,12 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1323 1366 var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
1324 1367 var TextAreaRectName = "TextAreaNew_";
1325 1368 var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
1326   - // alert(TextAreaRectNameConcatenated);
1327   - //if (_rectLayerOnSaveSplit[1]%2 == 0)
1328   - //{
1329   - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1] - 1;
1330   -
1331   - //}
1332   - //else
1333   - //{
1334   -
1335   - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1];
1336   - //}
1337 1369  
1338 1370 $rootScope.layerNameArr = layer.name;
1339 1371 $rootScope.rectTextArr = TextAreaRectNameConcatenated;
1340 1372  
1341 1373  
1342 1374 $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1343   - // var _rectLayerOnSaveSplitInt;
1344   -
1345   -
1346   - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
1347   -
1348   - //alert(_rectLayerOnSaveSplitInt);
1349   - // alert($rootScope.TextPropertyArray.length);
1350   -
1351 1375  
1352 1376 for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) {
1353 1377 if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) {
... ... @@ -1767,9 +1791,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1767 1791  
1768 1792 }
1769 1793 else if ($rootScope.shapeTypeText == "textAreaRect") {
1770   -
1771   -
1772   -
1773 1794 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
1774 1795 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
1775 1796 $rootScope.shapeTypeText = "";
... ... @@ -1777,7 +1798,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1777 1798 }
1778 1799 else {
1779 1800  
1780   - // alert($rootScope.canvasLayerNameCollection);
1781 1801 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
1782 1802 }
1783 1803  
... ...