'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 DISSECTIBLE_ANATOMY = 'Dissectible Anatomy';
var ATLAS_ANATOMY = 'Atlas Anatomy';
var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
var CLINICAL_ANIMATION = 'Clinical Animations';
$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 = [];
$rootScope.speechBubbleDimaensions = [];
$scope.runningSearchWorkers = [];
$scope.clickedPins = [];
$scope.sliderPercentValue = 1;
$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.imageId = $rootScope.OpenedTileData[0];
$rootScope.imageName = $rootScope.OpenedTileData[3];
$rootScope.bodySystemName = $rootScope.OpenedTileData[2];
$rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
$scope.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
}
//1. create a jsPanel and load the module item view
if ($rootScope.moduleName == ATLAS_ANATOMY) {
$.jsPanel({
id: 'ImagePanel',
selector: '.aaBodyView',
theme: 'success',
currentController: 'TileViewListController',
parentSlug: 'tile-view-list',
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();
$scope.ViewImageWidth = $("#modItemImage").width();
$scope.ViewImageHeight = $("#modItemImage").height();
$scope.relativeDimesion = 0;
$("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
//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.className = '.aaCanvas'
canvas.height = parseInt(($scope.imageHeight));
canvas.width = parseInt($scope.imageWidth);
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.position = "absolute";
//canvas.addEventListener('click', function () {
// alert('canvas clicked');
// var clickedPint = $scope.getMousePos(event);
// alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
//})
$("#canvasDiv").append(canvas);
$scope.context = canvas.getContext("2d")
//6. Show all pins on AA opened item
$scope.showAllPins();
//7. Highlight all system body list in left side
$scope.highlightBodySystemList();
}
}, 1050);
}
}
$scope.highlightBodySystemList = function () {
$rootScope.bodySystemNames = $rootScope.bodySystemName.trim().split(/\s*,\s*/);
var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a");
var bodySystemListlength = bodySystemListObj.length;
for (var i = 0; i < bodySystemListlength; i++) {
//var boldTag = lis[i];
for (var j = 0; j < $rootScope.bodySystemNames.length; j++) {
if ((bodySystemListObj[i].innerHTML) == ($rootScope.bodySystemNames[j])) {
$("#" + i).parent().removeClass("disabled");
}
}
}
}
function loadFailure() {
console.log('unable to load opened module ietem');
return true;
}
function getImageHeightWidth() {
$scope.imageWidth = this.width;
$scope.imageHeight = this.height;
}
angular.element(document).ready(function (e) {
$("#ImagePanel").resize(function () {
$("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
$("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
});
})
$scope.showAllPins = function () {
var promise = ModuleService.getPinDataForImage($rootScope.imageName)
.then(
function (result) {
//load navigator image
if (result.data.Root._NavigatorImage != undefined) {
document.getElementById('navimg').src = '~/../content/images/aa/images/navigator/' + result.data.Root._NavigatorImage;
}
else {
document.getElementById('navimg').style.visibility = 'hidden';
document.getElementById('navigatorBtn').style.visibility = 'hidden';
document.getElementById('navigatorDiv').style.visibility = 'hidden';
}
//draw pins
$scope.aaPinData = result.data.Root.Item;
if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
angular.forEach($scope.aaPinData, function (value, key) {
$scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
})
//load search/vocab data
$rootScope.loadSearchData();
}
},
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) {
$rootScope.isLoading = true;
$('#spinner').css('visibility', 'visible');
$scope.removeSpeechBubble();
if (event.currentTarget.id == "0") {
$scope.selectedSystemName = null;
if ($scope.isHidePinBtnClicked) {
// $scope.showAllPinsAfterHide($scope.aaPinData);
$scope.showAllPinsAfterHide();
}
else {
$scope.showAllPins();
}
}
else {
$scope.selectedSystemName = event.currentTarget.title;
// get termText info
var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
.then(
function (response) {
$scope.TermInfo = response.data.Terms.Term;
//on gettng all required data, draw pins
if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
$scope.selectedSystemPinData = new jinqJs()
.from($scope.aaPinData)
.where("_BodySystemName == " + $scope.selectedSystemName)
.select();
if ($scope.isHidePinBtnClicked) {
// $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
$scope.showAllPinsAfterHide();
}
else {
//remove other system pins
if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
$scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
})
angular.forEach($scope.selectedSystemPinData, function (value, key) {
$scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
})
//show annotation on first pin of the sysyem
$scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
}
}
}
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
}
}
$scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
$scope.selectedPin = [];
var isSameTermWithMultiPin = false;
var firstPinId = selectedPinData[0]._PinId;
var pinTermNumber = selectedPinData[0]._TermId;
//check if other pin have same termNumber
if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
var pinDataWithFirstTermNumber = new jinqJs()
.from($scope.aaPinData)
.where("_TermId == " + pinTermNumber)
.select();
$scope.MultiLanguageAnnationArray = [];
$scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
if (isCtrlPressed) {
}
else {
if (isPinClicked || isItemSearched) {
var existingSpeechBubble = $("div[id*='speechBubble']");
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);
})
}
$rootScope.isLoading = false;
$('#spinner').css('visibility', 'hidden');
// $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i])
}
$scope.removeSpeechBubble = function () {
//clear speech bubbles
var speechBubbles = $("div[id*='speechBubble']");
if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
for (var j = 0; j < speechBubbles.length; j++) {
speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
}
}
var speechBubbleLines = $("div[id*='speechBubbleLine']");
if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
for (var j = 0; j < speechBubbleLines.length; j++) {
speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
}
}
var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]);
}
}
};
$scope.showSpeechBubble = function () {
//clear speech bubbles
var speechBubbles = $("div[id*='speechBubble']");
if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
for (var j = 0; j < speechBubbles.length; j++) {
document.getElementById(speechBubbles[j].id).style.visibility = 'visible';
}
}
var speechBubbleLines = $("div[id*='speechBubbleLine']");
if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
for (var j = 0; j < speechBubbleLines.length; j++) {
document.getElementById(speechBubbleLines[j].id).style.visibility = 'visible';
}
}
var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible';
}
}
};
$scope.hideSpeechBubble = function () {
//clear speech bubbles
var speechBubbles = $("div[id*='speechBubble']");
if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
for (var j = 0; j < speechBubbles.length; j++) {
document.getElementById(speechBubbles[j].id).style.visibility = 'hidden';
}
}
var speechBubbleLines = $("div[id*='speechBubbleLine']");
if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
for (var j = 0; j < speechBubbleLines.length; j++) {
document.getElementById(speechBubbleLines[j].id).style.visibility = 'hidden';
}
}
var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden';
}
}
};
$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);
$('#speechBubble').draggable(
{
drag: function (evt) {
$("#dot").css("visibility", "hidden");
var verticalScrollPosition = canvasDiv.scrollTop;
var horizontlScrollPosition = canvasDiv.scrollLeft;
$scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
},
});
}
$scope.sliderVal = 100;
$scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
x = x * $scope.sliderPercentValue;
y = y * $scope.sliderPercentValue;
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 {
$('#canvasDiv').append(speechBubbleHTML);
if ($scope.MultiLanguageAnnationArray.length > 0) {
for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
$("#speechBubble" + PinId).append("" + MultipleLanguage + "
");
}
}
else {
console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
}
if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
if ($scope.longestAnnotation.length <= 10) {
$("#speechBubble").css("width", "100px");
}
else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
$("#speechBubble").css("width", "140px");
}
else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
$("#speechBubble").css("width", "195px");
}
else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
$("#speechBubble").css("width", "248px");
}
else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
$("#speechBubble").css("width", "300px");
}
else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
$("#speechBubble").css("width", "370px");
}
else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
$("#speechBubble").css("width", "450px");
}
else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
$("#speechBubble").css("width", "510px");
}
else {
$("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
}
}
}
var speechBubbleDims = [];
$rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
speechBubbleDims.push({ currentX: x, currentY: y });
document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
if ($scope.sliderVal == 25) {
document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
}
else
{
document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
}
document.getElementById('speechBubble' + PinId + '').style.display = 'block';
document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
$('.common-drag').draggable(
{
drag: function (evt) {
var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
var clickedSpeechBubbleId = $(this).attr("id");
var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
$("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
$("#speechBubbleLine" + clickedPinId).css("display", "none");
for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
$scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
}
}
},
});
$('.crossDiv_temp').on('click', function (evt) {
var imgId = $(this).attr("id");
var pinId = imgId.substring(8, imgId.length);
$('#speechBubble' + 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) {
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;
if (BoolValues == true) {
if ($scope.sliderVal == 40) {
$("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
}
else if ($scope.sliderVal == 25) {
$("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
}
else {
$("#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) {
$scope.clickedPins = [];
// if ($scope.isSliderChange == true) {
console.log('isSliderrChange')
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: '#565656',
strokeWidth: 2,
visible: true,
x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
}).drawArc({
name: "PinArc_" + PinId,
layer: true,
groups: ["Pin_" + PinId],
strokeStyle: 'grey',
strokeWidth: 2,
visible: true,
fillStyle: radial,
x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
radius: 5 * $scope.sliderPercentValue,
click: function (clickedPin) {
// alert('pin clciked = ' + clickedPin.name)
var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
// alert('pinId: ' + pinID);
//showAnnotation();
var pinData = new jinqJs()
.from($scope.aaPinData)
.where("_PinId == " + pinID)
.select();
var pinTermNumber = pinData[0]._TermId;
var pinWithSameTerm = new jinqJs()
.from($scope.aaPinData)
.where("_TermId == " + pinTermNumber)
.select();
if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
for (var i = 0; i < pinWithSameTerm.length; i++) {
$scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
}
}
var selectedPinData = new jinqJs()
.from($scope.aaPinData)
.where("_PinId == " + pinID)
.select();
if (clickedPin.event.ctrlKey == true) {
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;
$scope.showAnnotation(selectedPinData, true, true, false);
}
else {
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();
//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;
$scope.showAnnotation(selectedPinData, false, true, false);
}
}
}).drawLayers();
//}
// else
// {
// 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,
// visible: true,
// x1: offsetX1, y1: offsetY1,
// x2: x, y2: y,
// }).drawArc({
// name: "PinArc_" + PinId,
// layer: true,
// groups: ["Pin_" + PinId],
// strokeStyle: 'grey',
// strokeWidth: 2,
// visible: true,
// fillStyle: radial,
// x: x, y: y,
// radius: 5,
// click: function (clickedPin) {
// alert('pin clciked = ' + clickedPin.name) //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 pinData = new jinqJs()
// .from($scope.aaPinData)
// .where("_PinId == " + pinID)
// .select();
// var pinTermNumber = pinData[0]._TermId;
// var pinWithSameTerm = new jinqJs()
// .from($scope.aaPinData)
// .where("_TermId == " + pinTermNumber)
// .select();
// if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
// for (var i = 0; i < pinWithSameTerm.length; i++) {
// $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
// }
// }
// var selectedPinData = new jinqJs()
// .from($scope.aaPinData)
// .where("_PinId == " + pinID)
// .select();
// if (clickedPin.event.ctrlKey == true) {
// $scope.showAnnotation(selectedPinData, true, true, false);
// }
// else {
// $scope.showAnnotation(selectedPinData, false, true, false);
// }
// }
// }).drawLayers();
//}
}
$scope.getMousePos = function (evt) {
return {
x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
}
}
$scope.removePin = function (canvasId, pinId) {
var pinName = 'Pin_' + pinId;
var pinArcName = 'PinArc_' + pinId;
$('#' + canvasId).removeLayer(pinName).drawLayers();
$('#' + canvasId).removeLayer(pinArcName).drawLayers();
$scope.removeSpeechBubble();
//$rootScope.isSliderChanged = true;
//$('#aaDetailViewCanvas').removeLayers();
}
$rootScope.$on('annotationToolEvent', function (event, data) {
$('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
$('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
$('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
$('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
$("#canvas").css("display", "block");
$("#canvasPaint").css("display", "block");
$rootScope.onDrawingCanvasClick();
$rootScope.FreeStylePaint();
});
$rootScope.loadSearchData = function () {
var imageId = $rootScope.imageId;
var promise = ModuleService.getTermTextDataForAAImage(imageId)
.then(
function (response) {
$scope.AAPinTermData = response.data.PinTermData.TermData;
$rootScope.isLoading = false;
$('#setting-spinner').css('visibility', 'hidden');
$scope.pinTermData = [];
var primaryLexicon = $rootScope.lexiconLanguageArray[0].id;
$scope.matchedLanguageTermData = new jinqJs()
.from($scope.AAPinTermData)
.where('_LanguageId == ' + primaryLexicon)
.select();
for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) {
$scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[i]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[i]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[i]._TermText });
}
$scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) {
if ($('#termlistfilter').html() != "")
$('#termlistfilter').empty()
if ($scope.pinTermData.length > 0) {
$timeout(function () {
console.log('pinTermData= ' + $scope.pinTermData.length);
for (var j = 0; j < $scope.pinTermData.length; j++) {
var $el = $('' + $scope.pinTermData[j].TermTxt + '').appendTo('#termlistfilter')
$compile($el)($scope);
}
}, 500);
}
})
},
function (error) {
// handle errors here
console.log(' error: ' + error.statusText);
}
)
}
$scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
var languageArray = $rootScope.lexiconLanguageArray;
if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
$scope.matchedTermNoData = new jinqJs()
.from($scope.AAPinTermData)
.where('_TermNumber == ' + actualTermNo)
.select();
if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
for (var j = 0; j <= languageArray.length - 1; j++) {
$scope.matchedLanguageTermNoData = new jinqJs()
.from($scope.matchedTermNoData)
.where('_LanguageId == ' + languageArray[j].id)
.select();
var termText = $scope.matchedLanguageTermNoData[0]._TermText;
$scope.MultiLanguageAnnationArray.push(termText);
};
}
}
}
$scope.hidePins = function () {
$rootScope.isLoading = true;
$('#spinner').css('visibility', 'visible');
$scope.hideSpeechBubble();
$scope.isHidePinBtnClicked = true;
angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
var pinName = 'Pin_' + aaPinDataValue._PinId;
var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
$('#aaDetailViewCanvas').setLayer(pinName, {
visible: false // set to true instead to show the layer again
}).drawLayers();
$('#aaDetailViewCanvas').setLayer(pinArcName, {
visible: false // set to true instead to show the layer again
}).drawLayers();
})
$rootScope.isLoading = false;
$('#spinner').css('visibility', 'hidden');
}
$scope.showAllPinsAfterHide = function (event) {
$rootScope.isLoading = true;
$('#spinner').css('visibility', 'visible');
$scope.isHidePinBtnClicked = false;
if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
$scope.showSystemPins($scope.selectedSystemPinData, false);
} else {
$scope.showSystemPins($scope.aaPinData, false);
}
$scope.showSpeechBubble();
};
$scope.showSelectedPins = function () {
$rootScope.isLoading = true;
$('#spinner').css('visibility', 'visible');
$scope.isHidePinBtnClicked = false;
if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
$scope.showSystemPins($scope.selectedSystemPinData, true);
}
else {
$scope.showSystemPins($scope.aaPinData, true);
}
$scope.showSpeechBubble();
};
$scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
if (isShowSelectedPins) {
angular.forEach($scope.clickedPins, function (value, key) {
seletedSystemPinData = new jinqJs()
.from(seletedSystemPinData)
.where('_PinId != ' + value.id)
.select();
})
angular.forEach($scope.clickedPins, function (value1, key1) {
// if (aaPinDataValue._PinId != value.id) {
var pinName = 'Pin_' + value1.id;
var pinArcName = 'PinArc_' + value1.id;
$('#aaDetailViewCanvas').setLayer(pinName, {
visible: true // set to true instead to show the layer again
}).drawLayers();
$('#aaDetailViewCanvas').setLayer(pinArcName, {
visible: true // set to true instead to show the layer again
}).drawLayers();
// }
})
angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
// if (aaPinDataValue._PinId != value.id) {
var pinName = 'Pin_' + aaPinDataValue._PinId;
var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
$('#aaDetailViewCanvas').setLayer(pinName, {
visible: false // set to true instead to show the layer again
}).drawLayers();
$('#aaDetailViewCanvas').setLayer(pinArcName, {
visible: false // set to true instead to show the layer again
}).drawLayers();
// }
})
// })
// $scope.clickedPins = [];
}
else {
angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
var pinName = 'Pin_' + aaPinDataValue._PinId;
var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
$('#aaDetailViewCanvas').setLayer(pinName, {
visible: true // set to true instead to show the layer again
}).drawLayers();
$('#aaDetailViewCanvas').setLayer(pinArcName, {
visible: true // set to true instead to show the layer again
}).drawLayers();
})
}
$rootScope.isLoading = false;
$('#spinner').css('visibility', 'hidden');
}
$scope.showItemsForSearch = function () {
console.log('showItemsForSearch is called');
//this check is for log only because we are writing length so need to check if its not null or undefined
$timeout(function () {
if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
$scope.IsSearchVisible = true;
document.getElementById("termlistfilter").style.display = "block";
}
else {
$rootScope.loadSearchData();
if ($scope.AAPinTermData.length > 0) {
$scope.showItemsForSearch();
}
}
if ($rootScope.isSearchInputClicked == true) {
$rootScope.isSearchInputClicked = false;
$rootScope.searchListArray = [];
$("#backdrop > #searchListDivAA > #termlistfilter > li").each(function (key, value) {
$rootScope.searchListArray.push({ "name": $(this).find("a").html(), "id": $(this).find("a").attr("id") });
});
}
}, 500);
}
$scope.HideSearchList = function () {
$timeout(function () {
$("#termlistfilter").css("display", "none");
}, 1000);
}
$scope.highlightPinBasedOnSerachItem = function (event) {
$scope.searchItemId = event.currentTarget.id;
$scope.searchItemText = event.currentTarget.innerHTML;
$('#termList option[selected="selected"]').prop("selected", false);
$('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
$('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
$scope.searchFilter = event.currentTarget.innerHTML;
selectedTermName.placeholder = event.currentTarget.innerHTML;
//get data from pindata for this trem
var pinDataForTerm = new jinqJs()
.from($scope.aaPinData)
.where("_TermId == " + $scope.searchItemId)
.select();
$scope.showAnnotation(pinDataForTerm, false, false, true);
$scope.IsSearchVisible = false;
}
$rootScope.isShowHideButtonClicked = true;
$scope.ShowHideAnnotation = function () {
if ($rootScope.isShowHideButtonClicked == true) {
$rootScope.annotationArray = [];
$("#canvasDiv").find(".common-drag").each(function () {
var speechBubbleID = $(this).attr("id");
var sppechBubbleId = $(this).attr("id").substring(12);
var b = $("#speechBubbleDraggedLine" + sppechBubbleId).css("display");
var speechBubbleLineDispProp = $("#speechBubbleLine" + sppechBubbleId).css("display");
var speechBubbleLineID = "speechBubbleLine" + sppechBubbleId;
var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId;
if (speechBubbleLineDispProp == "block") {
$rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleLineID });
}
else {
$rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleDraggedLineID });
}
});
$rootScope.isShowHideButtonClicked = false;
for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
$("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "none");
$("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
}
}
else {
$rootScope.isShowHideButtonClicked = true;
for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
$("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
$("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "block");
}
}
}
}]);
function showSelectedSystemPins(event) {
console.log('OnBodySystem chnaged is called outside ');
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showSelectedSystemPins(event);
});
}
function hidePins(event) {
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.hidePins(event);
});
}
function showAllPins(event) {
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showAllPinsAfterHide(event);
});
}
function onSearchAA(event) {
console.log('AA search is called')
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showItemsForSearch();
});
}
function hideSearchList(event) {
console.log('AA hide search is called')
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.HideSearchList();
});
}
function onSearchItemSelection(event) {
console.log('AA hide search is called')
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.highlightPinBasedOnSerachItem(event);
});
}
function showHideAnnotation(event) {
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.ShowHideAnnotation(event);
});
}
function showSelectedPins(event) {
console.log('showSelectedPins is called')
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showSelectedPins(event);
});
}
function onZoom(scope) {
//$(".common-drag").remove();
//$(".commonDot").remove();
//$(".commonDraggedLine").remove();
//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();
// scope.removePin();
// scope.showAllPins();
//6. Show all pins on AA opened item
}
$(document).ready(function () {
$(".slider").slider({
min: 25,
max: 100,
value: 100,
range: "min",
orientation: "vertical",
slide: function (event, ui) {
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.sliderVal = ui.value;
scope.removeSpeechBubble();
var relativeWidth = 0;
var relativeHeight = 0;
if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
if (ui.value == 100) {
relativeWidth = scope.ViewImageWidth;
relativeHeight = scope.ViewImageHeight
scope.sliderPercentValue = 1.0;
}
else if (ui.value == 85) {
relativeWidth = scope.ViewImageWidth * 0.85;
relativeHeight = scope.ViewImageHeight * 0.85;
scope.sliderPercentValue = 0.85;
} else if (ui.value == 70) {
relativeWidth = scope.ViewImageWidth * 0.70;
relativeHeight = scope.ViewImageHeight * 0.70;
scope.sliderPercentValue = 0.70;
} else if (ui.value == 55) {
relativeWidth = scope.ViewImageWidth * 0.55;
relativeHeight = scope.ViewImageHeight * 0.55;
scope.sliderPercentValue = 0.55;
} else if (ui.value == 40) {
relativeWidth = scope.ViewImageWidth * 0.40;
relativeHeight = scope.ViewImageHeight * 0.40;
scope.sliderPercentValue = 0.40;
} else if (ui.value == 25) {
relativeWidth = scope.ViewImageWidth * 0.25;
relativeHeight = scope.ViewImageHeight * 0.25;
scope.sliderPercentValue = 0.25;
}
}
console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
$("#modItemImage").css("width", relativeWidth + "px");
$("#modItemImage").css("height", relativeHeight + "px");
$("#aaDetailViewCanvas").css("width", relativeWidth + "px");
$("#modItemImage").css("height", relativeHeight + "px");
$("#modItemImage").attr('src', '');
$("#aaDetailViewCanvas").remove();
//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.className = 'aaCanvas';
canvas.height = relativeHeight;
canvas.width = relativeWidth;
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.position = "absolute";
$("#canvasDiv").append(canvas);
scope.context = canvas.getContext("2d")
$("#modItemImage").attr('src', scope.OpenItemImagePath);
scope.isSliderChange = true;
scope.showAllPins();
}
});
}
})
.slider("pips", {
rest: "label",
step: "15"
});
});