From 7c05a26cfb2ebb2ed056bbf73d53a595d3a23735 Mon Sep 17 00:00:00 2001 From: nikita Date: Tue, 6 Jun 2017 17:09:25 +0530 Subject: [PATCH] now the head is green on click and gray when not. need to make it gray when it is closed. --- 400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------- 1 file changed, 81 insertions(+), 99 deletions(-) diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js index 865de71..8637ed8 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js @@ -237,7 +237,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.aaPinData = result.data.Root.Item; angular.forEach($scope.aaPinData, function (value, key) { - $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY, $rootScope.pinID) + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) }) }, @@ -475,21 +475,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .select(); angular.forEach(selectedSystemPinData, function (value, key) { - $scope.context.beginPath(); - $scope.context.moveTo(value._PinX, value._PinY); - $scope.context.lineTo(value._HeadX, value._HeadY); - $scope.context.stroke(); + //$scope.context.beginPath(); + //$scope.context.moveTo(value._PinX, value._PinY); + //$scope.context.lineTo(value._HeadX, value._HeadY); + //$scope.context.stroke(); - var headX = (parseInt(value._HeadX)) - 20; - var headY = (parseInt(value._HeadY)) - 15; + //var headX = (parseInt(value._HeadX)) - 20; + //var headY = (parseInt(value._HeadY)) - 15; - var img = new Image(); - img.src = "~/../../../content/images/noraml-pin.png"; - img.onload = function () { - $scope.context.drawImage(img, headX, headY); + //var img = new Image(); + //img.src = "~/../../../content/images/noraml-pin.png"; + //img.onload = function () { + // $scope.context.drawImage(img, headX, headY); - } + //} + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) + }) //show annotation on first pin of the sysyem $scope.showAnnotation(selectedSystemPinData, false, false); @@ -552,13 +554,19 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo 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)' - //}); + //make all pin heads grey + 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)' + }); + + + $('#aaDetailViewCanvas').setLayers({ + fillStyle: radial, + }).drawLayers(); } var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']"); @@ -594,13 +602,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }; $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.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId); - $('#sppeachBubble').draggable( + + $('#sppeachBubble').draggable( { drag: function (evt) { $("#dot").css("visibility", "hidden"); @@ -609,13 +616,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $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) { @@ -695,64 +696,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) { - var sppechBubbleHTML = "
"; - //Issue #7286 :Undefined annotation should not appear - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { - var annotation = $scope.MultiLanguageAnnationArray[i]; - } - - if (annotation == undefined) { - console.log("No text found"); - } else { - - $("#imageDiv").append(sppechBubbleHTML); - - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { - var annotation = $scope.MultiLanguageAnnationArray[i]; - - $("#" + id).append("

" + annotation + "

"); - } - - if ($scope.longestAnnotation.length <= 10) { - $("#" + id).css("width", "100px"); - } - - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) { - $("#" + id).css("width", "140px"); - } - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) { - $("#" + id).css("width", "195px"); - - } - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) { - $("#" + id).css("width", "248px"); - } - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) { - $("#" + id).css("width", "300px"); - } - - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) { - $("#" + id).css("width", "370px"); - } - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) { - $("#" + id).css("width", "450px"); - } - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) { - $("#" + id).css("width", "510px"); - - } - else { - $("#" + id).css("width", ($scope.longestAnnotation.length) + "%"); - } - } - } + $rootScope.Globe1 = []; $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) { - var sppechBubbleDotHTML = '' + + var speechBubbleHTML = '' + '
' + '' - + '
' + + '' + ''; @@ -765,7 +716,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if (MultipleLanguage == undefined) { console.log("No text is found"); } else { - $('#imageDiv').append(sppechBubbleDotHTML); + $('#imageDiv').append(speechBubbleHTML); if ($scope.MultiLanguageAnnationArray.length > 0) { for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { @@ -863,24 +814,44 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }, }); $('.crossDiv_temp').on('click', function (evt) { + debugger; var imgId = $(this).attr("id"); var pinId = imgId.substring(8, imgId.length); $('#sppeachBubble' + pinId).remove(); $("#speechBubbleDraggedLine" + pinId).remove(); $("#speechBubbleLine" + pinId).remove(); + + //make all pin heads grey + var pinHeadName = 'PinArc_' + pinId; + 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)' + }); + + + $('#aaDetailViewCanvas').setLayer(pinHeadName,{ + fillStyle: radial, + }).drawLayers(); }); //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; + 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 = 'PinArc_' + PinId; + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName); + // pin.fillStyle = radialAfterClick; + + $('#aaDetailViewCanvas').setLayer(pinHeadName, { + fillStyle: radialAfterClick, + }).drawLayers(); } @@ -909,7 +880,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var f = cx; // alert(d); if (BoolValues == true) { - $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e-10) + 'px', 'left': (f-5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); } else { $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); @@ -940,7 +911,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo x2: x, y2: y, }).drawArc({ - name: "ArcPin_" + PinId, + name: "PinArc_" + PinId, layer: true, groups: ["Pin_" + PinId], strokeStyle: 'grey', @@ -948,7 +919,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo fillStyle: radial, x: x, y: y, radius: 5, - + click: function (clickedPin) { //change the head color to green @@ -994,6 +965,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } + + $scope.onCloseBtnClick = function (event) { + alert('closed') + } + + $("#closeBtn").click(function () { + alert('closed') + }); }]); function showSelectedSystemPins(event) { @@ -1002,4 +981,7 @@ function showSelectedSystemPins(event) { scope.$apply(function () { scope.showSelectedSystemPins(event); }); -} \ No newline at end of file +} +onCloseBtnClick = function (event) { + alert('closed') + } -- libgit2 0.21.4