ADAM / AIAHTML5

Commit 7b9ed45e919689b1fe5ca7dd00b24fef15963053

Authored by Nikita Kulshreshtha
1 parent aa283308

Annotation in transparency is completed.

Inline Side-by-side
Showing 1 changed file with 100 additions and 82 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @7b9ed45
... ... @@ -844,6 +844,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
844 844  
845 845 var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
846 846  
  847 + if ($('#speechBubbleTrns').length > 0)
  848 + $('#speechBubbleTrns').remove();
  849 +
847 850 if ($('#speechBubble').length > 0) {
848 851 $('#speechBubble').remove();
849 852  
... ... @@ -1001,6 +1004,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1001 1004 annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
1002 1005  
1003 1006 }
  1007 +
  1008 + if ($('#speechBubbleTrns').length > 0)
  1009 + $('#speechBubbleTrns').remove();
1004 1010  
1005 1011 if ($('#speechBubble').length > 0) {
1006 1012 $('#speechBubble').remove();
... ... @@ -1349,7 +1355,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1349 1355  
1350 1356 canvasDiv.addEventListener("mousedown", function (e) {
1351 1357  
1352   -
  1358 + // debugger;
1353 1359 var currentMousePosition = $scope.getMousePos(e);
1354 1360  
1355 1361 var actulalX = currentMousePosition.x + horizontlScrollPosition
... ... @@ -1374,7 +1380,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1374 1380 $selection.appendTo($container);
1375 1381 }
1376 1382  
1377   - // this.removeEventListener('mousedown', arguments.callee);
  1383 + // this.removeEventListener('mousedown', arguments.callee);
1378 1384 }, false);
1379 1385  
1380 1386  
... ... @@ -1407,111 +1413,116 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1407 1413  
1408 1414  
1409 1415 var canvasDiv = document.getElementById('canvasDiv');
1410   - canvasDiv.addEventListener("mouseup", function (e) {
  1416 + canvasDiv.addEventListener("mouseup", mouseUpListener)
  1417 +
  1418 + }
1411 1419  
1412   - $selection.remove();
1413 1420  
1414   - var currentMousePosition = $scope.getMousePos(e);
  1421 + function mouseUpListener(e) {
  1422 + // $selection.remove();
  1423 + // debugger;
  1424 +
  1425 + $('.rectangle').remove();
1415 1426  
  1427 + var currentMousePosition = $scope.getMousePos(e);
1416 1428  
1417   - var canvasDiv = document.getElementById('canvasDiv');
1418   - var verticalScrollPosition = canvasDiv.scrollTop;
1419   - var horizontlScrollPosition = canvasDiv.scrollLeft;
1420   -
1421   - var TransparencyEndX = currentMousePosition.x + horizontlScrollPosition
1422   - var TransparencyBoxEndY = currentMousePosition.y + verticalScrollPosition
1423 1429  
  1430 + var canvasDiv = document.getElementById('canvasDiv');
  1431 + var verticalScrollPosition = canvasDiv.scrollTop;
  1432 + var horizontlScrollPosition = canvasDiv.scrollLeft;
1424 1433  
1425   - $scope.isTboxDrwan = true;
1426   - $scope.TbEndX = TransparencyEndX;
1427   - $scope.TbEndY = TransparencyBoxEndY;
1428   - $scope.TransparencyEndX = TransparencyEndX;
1429   - $scope.TransparencyBoxEndY = TransparencyBoxEndY;
  1434 + var TransparencyEndX = currentMousePosition.x + horizontlScrollPosition
  1435 + var TransparencyBoxEndY = currentMousePosition.y + verticalScrollPosition
1430 1436  
1431 1437  
  1438 + $scope.isTboxDrwan = true;
  1439 + $scope.TbEndX = TransparencyEndX;
  1440 + $scope.TbEndY = TransparencyBoxEndY;
  1441 + $scope.TransparencyEndX = TransparencyEndX;
  1442 + $scope.TransparencyBoxEndY = TransparencyBoxEndY;
1432 1443  
1433   - //draw temp box to store the canvas data with original transparecy
1434   - if (document.getElementById('tempCanvas') != null) {
1435   - $('#tempCanvas').remove();
1436   - }
1437   - if (document.getElementById('tempCanvas') == null) {
1438   - var tempCanvas = document.createElement('canvas');
1439   - tempCanvas.id = 'tempCanvas';
1440   - // $scope.tempCanvas = transparencyCanvas.id;
1441   - tempCanvas.height = TransparencyBoxEndY - $scope.startY;
1442   - tempCanvas.width = TransparencyEndX - $scope.startX;
1443   - tempCanvas.style.position = "absolute";
1444   - tempCanvas.style.left = 200 + 'px';
1445   - tempCanvas.style.top = 200 + 'px';
1446   - tempCanvas.style.backgroundColor = "transparent";
1447   - tempCanvas.style.visibility = 'hidden';
1448   - tempCanvas.style.border = "black 1px solid";
1449   - document.getElementById('canvasDiv').appendChild(tempCanvas);
1450   - }
1451 1444  
1452 1445  
1453   - var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
  1446 + //draw temp box to store the canvas data with original transparecy
  1447 + if (document.getElementById('tempCanvas') != null) {
  1448 + $('#tempCanvas').remove();
  1449 + }
  1450 + if (document.getElementById('tempCanvas') == null) {
  1451 + var tempCanvas = document.createElement('canvas');
  1452 + tempCanvas.id = 'tempCanvas';
  1453 + // $scope.tempCanvas = transparencyCanvas.id;
  1454 + tempCanvas.height = TransparencyBoxEndY - $scope.startY;
  1455 + tempCanvas.width = TransparencyEndX - $scope.startX;
  1456 + tempCanvas.style.position = "absolute";
  1457 + tempCanvas.style.left = 200 + 'px';
  1458 + tempCanvas.style.top = 200 + 'px';
  1459 + tempCanvas.style.backgroundColor = "transparent";
  1460 + tempCanvas.style.visibility = 'hidden';
  1461 + tempCanvas.style.border = "black 1px solid";
  1462 + document.getElementById('canvasDiv').appendChild(tempCanvas);
  1463 + }
1454 1464  
1455   - $scope.IncludedBodyRegions = [];
1456   - ////debugger;
1457   - $.each(BodyRegionDictionary, function (index, value) {
1458   - // alert(' $.each(BodyRegionDictionary1')
1459   - var transparencyBoxHeight = parseInt(TransparencyBoxEndY) - parseInt($scope.TransparencyBoxStartY);
1460   - var transparencyBoxWidth = parseInt(TransparencyEndX) - parseInt($scope.TransparencyBoxStartX);
1461   - var transparencyBoxBottom = parseInt($scope.TransparencyBoxStartY) + parseInt(transparencyBoxHeight);
1462   - var transparencyBoxRight = parseInt($scope.TransparencyBoxStartX) + parseInt(transparencyBoxWidth);
1463   - // alert(' $.each(BodyRegionDictionary2. transparencyBoxHeight: ' + transparencyBoxHeight + ',transparencyBoxBottom: ' + transparencyBoxBottom+', transparencyBoxRight: '+transparencyBoxRight)
1464   - var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
1465   - var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
1466 1465  
  1466 + var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
1467 1467  
  1468 + $scope.IncludedBodyRegions = [];
  1469 + ////debugger;
  1470 + $.each(BodyRegionDictionary, function (index, value) {
  1471 + // alert(' $.each(BodyRegionDictionary1')
  1472 + var transparencyBoxHeight = parseInt(TransparencyBoxEndY) - parseInt($scope.TransparencyBoxStartY);
  1473 + var transparencyBoxWidth = parseInt(TransparencyEndX) - parseInt($scope.TransparencyBoxStartX);
  1474 + var transparencyBoxBottom = parseInt($scope.TransparencyBoxStartY) + parseInt(transparencyBoxHeight);
  1475 + var transparencyBoxRight = parseInt($scope.TransparencyBoxStartX) + parseInt(transparencyBoxWidth);
  1476 + // alert(' $.each(BodyRegionDictionary2. transparencyBoxHeight: ' + transparencyBoxHeight + ',transparencyBoxBottom: ' + transparencyBoxBottom+', transparencyBoxRight: '+transparencyBoxRight)
  1477 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  1478 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
1468 1479  
1469   - var transparencyCanvas = document.createElement('canvas');
1470   - var tBox = document.getElementById('transparencyCanvas');
1471   - if (tBox == null) {
1472 1480  
1473   - transparencyCanvas.id = 'transparencyCanvas';
1474   - $scope.transparencyCanvasId = transparencyCanvas.id;
1475   - transparencyCanvas.height = TransparencyBoxEndY - $scope.startY;
1476   - transparencyCanvas.width = TransparencyEndX - $scope.startX;
1477   - transparencyCanvas.style.position = "absolute";
1478   - transparencyCanvas.style.left = $scope.startX + 'px' // x + "px";
1479   - transparencyCanvas.style.top = $scope.startY + "px"//y + "px";
1480   - transparencyCanvas.style.border = "black 1px solid";
1481   - transparencyCanvas.style.backgroundColor = "transparent";
1482   - // transparencyCanvas.style.visibility = 'hidden';
1483   - document.getElementById('canvasDiv').appendChild(transparencyCanvas);
1484   - $scope.transparencyChangeCounter = 0;
1485 1481  
1486   - $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeCanvas(); }, start: function (event, ui) { clearTransCanvas(); } });
  1482 + var transparencyCanvas = document.createElement('canvas');
  1483 + var tBox = document.getElementById('transparencyCanvas');
  1484 + if (tBox == null) {
1487 1485  
1488   - $scope.transparencyCanvasHeight = transparencyCanvas.height;
1489   - $scope.transparencyCanvasWidth = transparencyCanvas.width;
  1486 + transparencyCanvas.id = 'transparencyCanvas';
  1487 + $scope.transparencyCanvasId = transparencyCanvas.id;
  1488 + transparencyCanvas.height = TransparencyBoxEndY - $scope.startY;
  1489 + transparencyCanvas.width = TransparencyEndX - $scope.startX;
  1490 + transparencyCanvas.style.position = "absolute";
  1491 + transparencyCanvas.style.left = $scope.startX + 'px' // x + "px";
  1492 + transparencyCanvas.style.top = $scope.startY + "px"//y + "px";
  1493 + transparencyCanvas.style.border = "black 1px solid";
  1494 + transparencyCanvas.style.backgroundColor = "transparent";
  1495 + // transparencyCanvas.style.visibility = 'hidden';
  1496 + document.getElementById('canvasDiv').appendChild(transparencyCanvas);
  1497 + $scope.transparencyChangeCounter = 0;
1490 1498  
1491   - //bind click listener
1492   - transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
  1499 + $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeCanvas(); }, start: function (event, ui) { clearTransCanvas(); } });
1493 1500  
1494   - $(".ui-wrapper").css("z-index", "6000");
  1501 + $scope.transparencyCanvasHeight = transparencyCanvas.height;
  1502 + $scope.transparencyCanvasWidth = transparencyCanvas.width;
1495 1503  
1496   - // $('#transparencyScale').modal('show');
1497   - // this.removeEventListener('mouseup', arguments.callee);
1498   - // this.removeEventListener('mousedown', arguments.callee);
1499   - // this.removeEventListener('mousemove', arguments.callee);
1500   - }
1501   - if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
  1504 + //bind click listener
  1505 + transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
1502 1506  
  1507 + $(".ui-wrapper").css("z-index", "6000");
1503 1508  
1504   - $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
  1509 + // $('#transparencyScale').modal('show');
  1510 + //canvasDiv.removeEventListener('mouseup', arguments.callee);
  1511 + //canvasDiv.removeEventListener('mousedown', arguments.callee);
  1512 + //canvasDiv.removeEventListener('mousemove', arguments.callee);
  1513 + }
  1514 + if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
1505 1515  
1506   - }
1507   - })
1508   - }, false);
1509 1516  
1510   - }
  1517 + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
1511 1518  
  1519 + }
  1520 + })
  1521 + document.getElementById('canvasDiv').removeEventListener("mouseup", mouseUpListener);
  1522 + }
1512 1523  
1513 1524 $scope.loadTransparencyImage = function(bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) {
1514   -
  1525 + // debugger;
1515 1526 var scope1 = angular.element(document.getElementById("DAView")).scope();
1516 1527 var transparencyCanvas = document.getElementById('transparencyCanvas');
1517 1528  
... ... @@ -1811,7 +1822,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1811 1822  
1812 1823 // imageD.data = imageData;
1813 1824 // and put the imagedata back to the canvas
1814   - debugger
  1825 + // debugger
1815 1826 tempCtx.putImageData(imageD, 0, 0);
1816 1827  
1817 1828 }
... ... @@ -1993,7 +2004,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1993 2004  
1994 2005 function TransparencyCanvasClickListener(evt) {
1995 2006 //alert('tb clicked')
1996   - debugger;
  2007 + // debugger;
1997 2008 var pixelData;
1998 2009 var pixelDataTrans;
1999 2010 var mousePos = $scope.getMousePos(evt);
... ... @@ -2107,9 +2118,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2107 2118 //trans layer image data
2108 2119 pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
2109 2120 // console.log('at the time' + pixelData.data[0])
2110   -
  2121 + // debugger;
2111 2122 var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
  2123 + if ($('#speechBubble').length > 0)
  2124 + $('#speechBubble').remove();
2112 2125  
  2126 +
2113 2127 if ($('#speechBubbleTrns').length > 0) {
2114 2128 $('#speechBubbleTrns').remove();
2115 2129  
... ... @@ -2141,6 +2155,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2141 2155  
2142 2156 pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
2143 2157 var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
  2158 + //var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
  2159 +
  2160 + if ($('#speechBubble').length > 0)
  2161 + $('#speechBubble').remove();
2144 2162  
2145 2163 if ($('#speechBubbleTrns').length > 0) {
2146 2164 $('#speechBubbleTrns').remove();
... ...