From ab35d1ebbc3fafc3e8d34e9e16e3ce95cdb3d767 Mon Sep 17 00:00:00 2001 From: nikita Date: Mon, 5 Jun 2017 18:17:47 +0530 Subject: [PATCH] multi annotation is done. need to correct drag position and highlighting/unhighliting pins. --- 400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------- 1 file changed, 92 insertions(+), 85 deletions(-) diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js index 90ef1a5..865de71 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js @@ -23,6 +23,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.AllBodySystem = []; $scope.AllOrientation = []; $scope.AllImageType = []; + $scope.speechbubbleList = []; + $scope.speechBubbleCounter = 0; $scope.query = { selectedbodyregion: '', selectedbodysystem: '', @@ -490,7 +492,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } }) //show annotation on first pin of the sysyem - $scope.showAnnotation(selectedSystemPinData); + $scope.showAnnotation(selectedSystemPinData, false, false); }, function (error) { // handle errors here @@ -509,8 +511,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo ) } - $scope.showAnnotation = function (selectedSystemPinData) { + $scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) { + $scope.selectedPin = []; + var isSameTermWithMultiPin = false; var firstPinId = selectedSystemPinData[0]._PinId; var pinTermNumber = selectedSystemPinData[0]._TermId; @@ -534,18 +538,50 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .from($scope.TermInfo) .where("__ActualTermNumber == " + pinTermNumber) .select(); + var termText = termTextdata[0].__TermText; $scope.MultiLanguageAnnationArray = []; $scope.MultiLanguageAnnationArray.push(termText); - $scope.selectedPin = []; + + if (isCtrlPressed) { + + } + else { + if (isPinClicked) { + var existingSpeechBubble = $("div[id*='sppeachBubble']"); + for (var i = 0; i < existingSpeechBubble.length; i++) { + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]); + + //var radial = $('#aaDetailViewCanvas').createGradient({ + // x1: 50, y1: 50, + // x2: 50, y2: 50, + // r1: 10, r2: 30, + // c1: 'rgba(100, 50, 0,0)', + // c2: 'rgb(216, 216, 216)' + //}); + } + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']"); + for (var i = 0; i < existingSpeechBubbleLine.length; i++) { + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]); + } + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']"); + for (var i = 0; i < speechBubbleDraggedLine.length; i++) { + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]); + } + } + } + if (pinDataWithFirstTermNumber.length > 1) { + isSameTermWithMultiPin = true; + } angular.forEach(pinDataWithFirstTermNumber, function (value, key) { $scope.selectedPin.push(value._PinId); var headX = (parseInt(value._HeadX)); var headY = (parseInt(value._HeadY)); - $scope.createSpeechBubble(parseInt(headX)+10, parseInt(headY)+10, value._PinId); + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin); }) - }, + + }, function(error){}) } @@ -557,79 +593,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.context.clearRect(0, 0, canvasWidth, canvasHeight); }; - $scope.createSpeechBubble = function (x, y, PinId) { + $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) { //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that // we decide the size of speech bubble $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; }); - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y, PinId); - - //2. - //if (event.ctrlKey) { - // console.log('ctrl pressed'); - // $scope.multiAnnotationIsON = true; - // //2.1 create unique speech bubbles - // $scope.speechBubbleCounter = $scope.speechBubbleCounter + 1; - // var id = "speechBubble" + $scope.speechBubbleCounter; - // //2.2 Get clicked locationa and find if it is already clicked earlier too on same location - // var pointClicked = parseInt(x) + parseInt(y); - // var isClickedOnSamePoint = $("#canvasDiv").find("div[id=" + pointClicked + "]").length; - // console.log('isClickedOnSamePoint: ' + isClickedOnSamePoint); - // // if user has not clciked on smae point then create speech bubble otherwise not - // if (isClickedOnSamePoint == 0) { - // console.log('not clicked on same point') - // $scope.createSpeechBubbleBasedOnAnnotationLength(pointClicked, x, y, id); - // $scope.speechbubbleList.push({ xaxis: x, yaxis: y, ids: id }); - // } - // $('.appendDragg').draggable({ - // drag: function (evt) { - // $(this).prev('div').css("display", "none"); - // var bor_id = $(this).next('div').attr('id'); - // var sub_id1 = $(this).attr('id'); - // var verticalScrollPosition = canvasDiv.scrollTop; - // var horizontlScrollPosition = canvasDiv.scrollLeft; - // if ($scope.speechbubbleList != null || $scope.speechbubbleList != undefined) { - // for (var m = 0; m <= $scope.speechbubbleList.length - 1; m++) { - // if ($scope.speechbubbleList[m].ids == sub_id1) { - // $scope.angle1($scope.speechbubbleList[m].xaxis, $scope.speechbubbleList[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id); - // break; - // } - // } - // } - // }, - // }); - // $('.dynCross').on('click', function (evt) { - // //$(this).parent().parent().parent().css('display', 'none'); - // $(this).parent().parent().parent().remove(); - // }); - //} - // else { - // $scope.multiAnnotationIsON = false; - //history maintained issue - //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { - // $("#sppeachBubble").remove(); - // $("#dot").remove(); - //} - // $(".com").remove(); - // $("#bord").remove(); - - //history maintained issue - //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; } - //$('#sppeachBubble').draggable( - //{ - // drag: function (evt) { - // $("#dot").css("visibility", "hidden"); - // var verticalScrollPosition = canvasDiv.scrollTop; - // var horizontlScrollPosition = canvasDiv.scrollLeft; - // $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true); - // }, - //}); - //$('.crossDiv_temp').on('click', function (evt) { - // $('#sppeachBubble').remove(); - // $("#bord").remove(); - // $("#dot").remove(); - //}); - //} + + $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId); + $('#sppeachBubble').draggable( + { + drag: function (evt) { + $("#dot").css("visibility", "hidden"); + var verticalScrollPosition = canvasDiv.scrollTop; + var horizontlScrollPosition = canvasDiv.scrollLeft; + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true); + }, + }); + $('.crossDiv_temp').on('click', function (evt) { + $('#sppeachBubble').remove(); + $("#bord").remove(); + $("#dot").remove(); + }); + + } $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) { @@ -720,7 +706,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo console.log("No text found"); } else { - $("#canvasDiv").append(sppechBubbleHTML); + $("#imageDiv").append(sppechBubbleHTML); for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { var annotation = $scope.MultiLanguageAnnationArray[i]; @@ -762,7 +748,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } } $rootScope.Globe1 = []; - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) { + $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) { var sppechBubbleDotHTML = '' + '
' + '' @@ -839,7 +825,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } } var Globe = []; - debugger; + $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId }); Globe.push({ currentX: x, currentY: y }); document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block'; @@ -883,6 +869,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $("#speechBubbleDraggedLine" + pinId).remove(); $("#speechBubbleLine" + pinId).remove(); }); + + //make the head green + //var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ + // x1: 50, y1: 50, + // x2: 50, y2: 50, + // r1: 10, r2: 30, + // c1: 'rgba(100, 50, 0,0)', + // c2: 'rgb(126, 187, 83)' + //}); + //var pinHeadName = 'Arc_' + PinId; + //var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName); + //pin.fillStyle = radialAfterClick; } @@ -952,7 +950,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo radius: 5, click: function (clickedPin) { - + //change the head color to green var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ x1: 50, y1: 50, @@ -972,14 +970,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .from($scope.aaPinData) .where("_PinId == " + pinID) .select(); - $scope.showAnnotation(selectedPinData); + if (clickedPin.event.ctrlKey == true) { + $scope.showAnnotation(selectedPinData,true, true ); - angular.forEach($scope.selectedPin, function (value, key) { - var pinName = 'Arc_' + value; - var pin = $('aaDetailViewCanvas').getLayer(pinName); - pin.fillStyle = radialAfterClick; - alert(pin); - }) + } + else { + $scope.showAnnotation(selectedPinData, false, true); + + } + + //angular.forEach($scope.selectedPin, function (value, key) { + // var pinHeadName = 'Arc_' + value; + // var pin = $('aaDetailViewCanvas').getLayer(pinHeadName); + // pin.fillStyle = radialAfterClick; + + + + //}) } -- libgit2 0.21.4