'use strict';
AIA.controller("TileViewListController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "DataService", "ModuleService",
function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, BodyRegions, BodySystems, ViewOrientations, ImageTypes, DataService, ModuleService) {
$rootScope.OpenedTileData = [];
var ATLAS_ANATOMY = 'Atlas Anatomy';
var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
var CLINICAL_ANIMATION = 'Clinical Animations';
var DISSECTIBLE_ANATOMY = 'Dissectible Anatomy';
$rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";
//variables to bind Filter by Controls
$scope.searchAAListViewData = [];
$scope.SelectedAAthumbImage = [];
$scope.SelectedAAImage = [];
$scope.SelectedAASummary = [];
$scope.SelectedAAId = [];
$scope.SelectedAATitle = [];
$scope.selectedAAListViewData = [];
$scope.filterstring = false;
$scope.AllBodyRegion = [];
$scope.AllBodySystem = [];
$scope.AllOrientation = [];
$scope.AllImageType = [];
$scope.speechbubbleList = [];
$scope.speechBubbleCounter = 0;
$scope.query = {
selectedbodyregion: '',
selectedbodysystem: '',
selectedorientation: '',
selectedimagetype: '',
};
$scope.loadForModuleById = function (moduleId) {
$scope.moduleId = moduleId;
console.log('loadForModuleById is called')
$rootScope.moduleName = Modules[moduleId].Name;
$scope.AllBodyRegion = BodyRegions;
$scope.AllBodySystem = BodySystems;
$scope.AllOrientation = ViewOrientations;
$scope.AllImageType = ImageTypes;
var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
.then(
function (result) {
$scope.moduleLandingData = result;
//console.log(JSON.stringify(result, null, 4));
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
}
$scope.openModuleItemView = function (event) {
//0. Get selected Image Id
var moduleItemDataToBeSaved = event.target.id;
//1.Filter selected module ietem data and get the pushed opened moduile array object
$rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
//2. Pick the image name to create a source to open
$rootScope.imageName = $rootScope.OpenedTileData[3];
$rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
//3. set opened module item title
localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
//3. Navigate to the Module-item-view
var u = $location.url();
$location.url('/module-item-view');
}
$scope.openModuleItem = function () {
var jsContentURL;
var moduleItemViewDivId;
//1. create a jsPanel and load the module item view
if ($rootScope.moduleName == ATLAS_ANATOMY) {
jsContentURL = 'app/views/aa/atlas-anatomy-detail.html';
moduleItemViewDivId = 'aaDetailPageDiv';
}
else if ($rootScope.moduleName == CLINICAL_ANIMATION) {
//to do, in next phase of project
}
else if ($rootScope.moduleName == CLINICAL_ILLUSTRATION) {
//to do, in next phase of project
}
$.jsPanel({
id: 'ImagePanel',
selector: '.aaBodyView',
theme: 'success',
currentController: 'TileViewListController',
parentSlug: 'tile-view',
ajax: {
url: jsContentURL
},
title: localStorage.getItem("currentViewTitle"),
position: {
top: 70,
left: 1,
},
size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },
});
console.log('jsPanel loaded ImagePanel exist= ' + document.getElementById('ImagePanel'))
//0.3
var aaViewElement = angular.element(document.getElementById(moduleItemViewDivId));
//0.4 for Opening module item, load it into image
var openedImage = new Image();
openedImage.name = $rootScope.OpenItemImagePath;
openedImage.onload = getImageHeightWidth;
openedImage.onerror = loadFailure;
openedImage.src = $rootScope.OpenItemImagePath;
$timeout(function () {
$compile(aaViewElement.contents())($scope);
if (document.getElementById('aaDetailPageDiv') != null) {
//0.4 added some stylesheets
$('#aaBodyView').css("height", $(window).outerHeight());
$('#aaBodyView').css("width", $(window).outerWidth());
$scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
$("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
$rootScope.ViewImageWidth = $("#modItemImage").width();
$("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
imageViewAt100Percent = $rootScope.ViewImageWidth;
imageViewAt25Percent = $rootScope.ViewImageWidth * 0.25;
imageViewAt40Percent = $rootScope.ViewImageWidth * 0.40;
imageViewAt55Percent = $rootScope.ViewImageWidth * 0.55;
imageViewAt70Percent = $rootScope.ViewImageWidth * 0.70;
imageViewAt85Percent = $rootScope.ViewImageWidth * 0.85;
//0.5 create canvas on the top of image so that I can draw a line over the canvas.
var canvas = document.createElement('canvas');
canvas.id = 'aaDetailViewCanvas';
canvas.height = parseInt(($scope.imageHeight));
canvas.width = parseInt($scope.imageWidth);
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.position = "absolute";
canvas.style.width = $rootScope.ViewImageWidth+ "px";
$("#imageDiv").append(canvas);
$scope.context = canvas.getContext("2d")
//6. Show all pins on AA opened item
// $("#aaDetailViewCanvas").![]()
$scope.showAllPins();
}
}, 1050);
}
function loadFailure() {
console.log('unable to load opened module ietem');
return true;
}
function getImageHeightWidth() {
$scope.imageWidth = this.width;
$scope.imageHeight = this.height;
}
function aaDetailViewCanvasClickListener(event) {
alert('pin clicked');
var mousePos = $scope.getMousePos(event);
var canvasDiv = document.getElementById('imageDiv');
var verticalScrollPosition = canvasDiv.scrollTop;
var horizontlScrollPosition = canvasDiv.scrollLeft;
//We substracted 135, as the difference between flex and html coordinates for same organ is 135
var actualX = mousePos.x + horizontlScrollPosition;
var actualY = mousePos.y + verticalScrollPosition;
alert('actualX = ' + actualX + ',actualY= ' + actualY)
//var RGBColor = $scope.GetRGBColor(maskCanvasContext, actualX, actualY, x, y);
angular.forEach($scope.aaPinData, function (value, key) {
var pinHeadX = value._HeadX;
var pinHeadY = value._HeadY;
var pinHeadRight = parseInt(value._HeadX) + 32;
var pinHeadTop = parseInt(value._HeadY) - 44;
if (actualX >= pinHeadX && actualX <= pinHeadRight && actualY <= pinHeadY && actualY >= pinHeadTop) {
alert('clicked pin = ' + value._PinId + ' and _TermId= ' + value._TermId);
var termNumber = value._TermId;
var selectedPinTermData = new jinqJs()
.from($scope.TermInfo)
.where("__ActualTermNumber == " + termNumber)
.select();
var annotationText = selectedPinTermData[0].__TermText;
// $scope.MultiLanguageAnnationArray = [];
// $scope.MultiLanguageAnnationArray.push(annotationText);
// $scope.createSpeechBubble(pinHeadX, pinHeadY, value._PinId);
}
//alert('pinId ='+value._PinId+', pinHeadX =' + pinHeadX + ',pinHeadY= ' + pinHeadY + ',pinHeadRight= ' + pinHeadRight + ',pinHeadTop =' + pinHeadTop);
});
}
$scope.getMousePos = function (evt) {
return {
x: Math.round(evt.pageX - $('#imageDiv').offset().left),
y: Math.round(evt.pageY - $('#imageDiv').offset().top)
}
}
angular.element(document).ready(function (e) {
$("#ImagePanel").resize(function () {
$("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
$("#imageDiv").scrollTop($rootScope.CanvasDivTopPosition);
});
})
$scope.showAllPins = function () {
var promise = ModuleService.getPinDataForImage($rootScope.imageName)
.then(
function (result) {
$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)
})
},
function (error) {
console.log(' error in showAllPins: ' + error.statusText);
}
)
}
$scope.FilterByImage = function (moduleId, query) {
//alert(JSON.stringify(query));
$scope.moduleId = moduleId;
console.log('loadForModuleById is called')
$rootScope.moduleName = Modules[moduleId].Name;
while ($scope.searchAAListViewData.length) {
$scope.searchAAListViewData.pop();
}
var filtercount = 0;
if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
filtercount = filtercount + 1;
localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion);
}
else {
localStorage.setItem("CurrentBodyRegion", '');
}
if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
filtercount = filtercount + 1;
localStorage.setItem("CurrentBodySystem", query.selectedbodysystem);
}
else {
localStorage.setItem("CurrentBodySystem", '');
}
if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) {
filtercount = filtercount + 1;
localStorage.setItem("CurrentOrientation", query.selectedorientation);
}
else {
localStorage.setItem("CurrentOrientation", '');
}
if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) {
filtercount = filtercount + 1;
localStorage.setItem("CurrentImageType", query.selectedimagetype);
}
else {
localStorage.setItem("CurrentImageType", '');
}
var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
.then(
function (result) {
// alert(JSON.stringify($scope.moduleLandingData));
$scope.moduleLandingData = result;
$scope.selectedAAListViewData = new jinqJs()
.from($scope.moduleLandingData.data.root.Item)
//.orderBy([{ field: '_Title', sort: 'asc' }])
.select();
$('#grid-view').empty();
//alert(JSON.stringify($scope.selectedAAListViewData))
angular.forEach($scope.selectedAAListViewData, function (value, key) {
var selectimg = true;
var count = 0;
if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim()));
if (posbodyregion > -1) {
selectimg = true;
count = count + 1;
}
else {
selectimg = false;
count = count - 1;
}
}
if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem);
if (posbodysystem > -1) {
count = count + 1;
selectimg = true;
} else {
selectimg = false;
count = count - 1;
}
}
if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) {
var posorientation = value._ViewOrientation.indexOf(query.selectedorientation);
if (posorientation > -1) {
count = count + 1;
selectimg = true;
} else {
selectimg = false;
count = count - 1;
}
}
if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) {
var posimagetype = value._ImageType.indexOf(query.selectedimagetype);
if (posimagetype > -1) {
count = count + 1;
selectimg = true;
} else {
selectimg = false;
count = count - 1;
}
}
if (selectimg === true && count >= filtercount) {
$scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
var $el = $(''
+ '
'
+ '
![]()
'
+ '
No illustration found for the selected search criteria!
').appendTo('#grid-view');
$compile($el)($scope);
}
console.log(JSON.stringify(result, null, 4));
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
}
$scope.Reset = function (moduleId, query) {
query.selectedbodyregion = "";
query.selectedbodysystem = "";
query.selectedorientation = "";
query.selectedimagetype = "";
query.selectedspecialty = "";
//set localstorage values
localStorage.setItem("CurrentBodyRegion", '');
localStorage.setItem("CurrentBodySystem", '');
localStorage.setItem("CurrentOrientation", '');
localStorage.setItem("CurrentImageType", '');
//localStorage.setItem("CISelectedRowId", "");
//localStorage.setItem("CIListViewScroll", '');
if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); }
$('#ListViewDiv').scrollTop(0);
// $scope.HideListViewDiv();
$scope.filterstring = false;
//while ($scope.searchCIListViewData.length) {
// $scope.searchCIListViewData.pop();
//}
$scope.FilterByImage(1, query);
}
$scope.showSelectedSystemPins = function (event) {
//1.Remove all the pins first
$scope.ClearAllPins();
var selectedSystemName = event.currentTarget.title;
//2. get pinData
var promise = ModuleService.getPinDataForImage($rootScope.imageName)
.then(
function (result) {
$scope.aaPinData = result.data.Root.Item;
//3. get termText info
var promise = ModuleService.getTermTextForPin($scope.moduleName)
.then(
function (response) {
$scope.TermInfo = response.data.Terms.Term;
//on gettng all required data, draw pins
var selectedSystemPinData = new jinqJs()
.from($scope.aaPinData)
.where("_BodySystemName == " + selectedSystemName)
.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();
//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);
//}
$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);
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
console.log(JSON.stringify(result, null, 4));
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
}
$scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) {
$scope.selectedPin = [];
var isSameTermWithMultiPin = false;
var firstPinId = selectedSystemPinData[0]._PinId;
var pinTermNumber = selectedSystemPinData[0]._TermId;
//check if other pin have same termNumber
var pinDataWithFirstTermNumber = new jinqJs()
.from($scope.aaPinData)
.where("_TermId == " + pinTermNumber)
.select();
//3. get termText info
var promise = ModuleService.getTermTextForPin($scope.moduleName)
.then(
function (response) {
$scope.TermInfo = response.data.Terms.Term;
var termTextdata = new jinqJs()
.from($scope.TermInfo)
.where("__ActualTermNumber == " + pinTermNumber)
.select();
var termText = termTextdata[0].__TermText;
$scope.MultiLanguageAnnationArray = [];
$scope.MultiLanguageAnnationArray.push(termText);
if (isCtrlPressed) {
}
else {
if (isPinClicked) {
var existingSpeechBubble = $("div[id*='sppeachBubble']");
for (var i = 0; i < existingSpeechBubble.length; i++) {
existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
//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']");
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, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
})
},
function(error){})
}
$scope.ClearAllPins = function () {
var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
$scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
};
$scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
$scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
$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);
},
});
}
$scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
var Annotation;
$scope.ActualTermNo = actualTermNo;
for (var j = 0; j <= $rootScope.vocabTermDataArray.length - 1; j++) {
if ($rootScope.vocabTermDataArray[j].language == language) {
if ($rootScope.vocabTermDataArray[j].VocabTermData != null || $rootScope.vocabTermDataArray[j].VocabTermData != undefined) {
$scope.matchedActualTermData = new jinqJs()
.from($rootScope.vocabTermDataArray[j].VocabTermData.VocabTerms.Term)
.where('_ActualTermNumber == ' + actualTermNo)
.select();
if ($scope.matchedActualTermData != null || $scope.matchedActualTermData != undefined) {
for (var z = 0; z <= $scope.matchedActualTermData.length; z++) {
//send actual term no to get the term text.
Annotation = $scope.matchedActualTermData[0]._TermText;
// alert("Annotation : " + Annotation);
break;
};
}
return Annotation;
}
else {
return null;
}
}
}
}
$scope.GetAnnotationText = function (termNumber) {
$rootScope.annotationText = [];
var annotationText;
var annotation = [];
//0
var figLeafTermNo = 5868; // to do declare constant for this
if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
$scope.TermNumber = termNumber;
for (var j = 0; j <= $rootScope.lexiconLanguageArray.length - 1; j++) {
if ($rootScope.TermNumberData != null || $rootScope.TermNumberData != undefined) {
$scope.matchedTermNoData = new jinqJs()
.from($rootScope.TermNumberData.TermData.Term)
.where('_TermNumber == ' + termNumber)
.select();
if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
//1.
var actualTermNo = 0;
for (var z = 0; z < $scope.matchedTermNoData.length; z++) {
//send actual term no to get the term text.
actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber;
annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo, $rootScope.lexiconLanguageArray[j].language);
annotation.push(annotationText);
$rootScope.annotationText.push(annotationText);
$rootScope.actualTermNumber = actualTermNo;
break;
};
//2.
}
else {
// send term no to vocab json data to get the text
}
}
}
}
return annotation;
}
$rootScope.Globe1 = [];
$scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
var speechBubbleHTML = ''
+ ''
+ '
'
+ '
'
+ '
';
//Issue #7286 :Undefined annotation should not appear
for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
}
if (MultipleLanguage == undefined) {
console.log("No text is found");
} else {
$('#imageDiv').append(speechBubbleHTML);
if ($scope.MultiLanguageAnnationArray.length > 0) {
for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
$("#sppeachBubble" + PinId).append("" + MultipleLanguage + "
");
}
}
else {
console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
}
if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
if ($scope.longestAnnotation.length <= 10) {
$("#sppeachBubble").css("width", "100px");
}
else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
$("#sppeachBubble").css("width", "140px");
}
else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
$("#sppeachBubble").css("width", "195px");
}
else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
$("#sppeachBubble").css("width", "248px");
}
else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
$("#sppeachBubble").css("width", "300px");
}
else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
$("#sppeachBubble").css("width", "370px");
}
else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
$("#sppeachBubble").css("width", "450px");
}
else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
$("#sppeachBubble").css("width", "510px");
}
else {
$("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
}
}
}
var Globe = [];
$rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
Globe.push({ currentX: x, currentY: y });
document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
$('.common-drag').draggable(
{
drag: function (evt) {
// $("#dot").css("visibility", "hidden");
var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
var a = $(this).attr("id");
var res = a.substring(13, a.length);
$("#speechBubbleLine" + res).css("visibility", "hidden");
// var c = ($("#sppeachBubble" + res).css("left")).toString().replace("px", "");
// alert(c);
//var d = ($("#sppeachBubble" + res).css("top")).toString().replace("px", "");
// alert(d);
console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
// alert(evt.pageX + "X" + evt.pageY + "horizontlScrollPosition" + horizontlScrollPosition + "verticalScrollPosition" + verticalScrollPosition);
for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
if ($rootScope.Globe1[i].id == res) {
// alert($rootScope.Globe1[i].currentX);
$scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
}
}
},
});
$('.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 = 'PinArc_' + PinId;
var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
// pin.fillStyle = radialAfterClick;
$('#aaDetailViewCanvas').setLayer(pinHeadName, {
fillStyle: radialAfterClick,
}).drawLayers();
}
$scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
// debugger;
// alert(ex + " " + ey);
var dy = ey - cy;
var dx = ex - cx;
var theta = 0;
if (dx < 0) {
theta = Math.atan(dy / dx) * (180 / Math.PI);
theta = theta + 180;
}
else if (dy < 0) {
theta = Math.atan(dy / dx) * (180 / Math.PI);
theta = theta + 360;
}
else {
theta = Math.atan(dy / dx) * (180 / Math.PI);
}
var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
var e = cy;
var f = cx;
// alert(d);
if (BoolValues == true) {
$("#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%' });
}
}
$scope.DrawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
var radial = $('#' + canvasId).createGradient({
x1: 50, y1: 50,
x2: 50, y2: 50,
r1: 10, r2: 30,
c1: 'rgba(100, 50, 0,0)',
c2: 'rgb(216, 216, 216)'
});
$('#' + canvasId).drawLine({
layer: true,
name: "Pin_" + PinId,
groups: ["Pin_" + PinId],
strokeStyle: 'black',
strokeWidth: 2,
x1: offsetX1, y1: offsetY1,
x2: x, y2: y,
}).drawArc({
name: "PinArc_" + PinId,
layer: true,
groups: ["Pin_" + PinId],
strokeStyle: 'grey',
strokeWidth: 2,
fillStyle: radial,
x: x, y: y,
radius: 5,
click: function (clickedPin) {
//change the head color to 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)'
});
clickedPin.fillStyle = radialAfterClick;
var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
// alert('pinId: ' + pinID);
//showAnnotation();
var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
var selectedPinData = new jinqJs()
.from($scope.aaPinData)
.where("_PinId == " + pinID)
.select();
if (clickedPin.event.ctrlKey == true) {
$scope.showAnnotation(selectedPinData,true, true );
}
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;
//})
}
}).drawLayers();
}
$scope.onCloseBtnClick = function (event) {
alert('closed')
}
$("#closeBtn").click(function () {
alert('closed')
});
}]);
function showSelectedSystemPins(event) {
console.log('OnBodySystem chnaged is called outside ');
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showSelectedSystemPins(event);
});
}
onCloseBtnClick = function (event) {
alert('closed')
}