diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js index f537d30..435706f 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js @@ -150,6 +150,24 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $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"); + //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'; @@ -196,7 +214,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.imageHeight = this.height; } - + angular.element(document).ready(function (e) { @@ -234,8 +252,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) }) - - + + //load search/vocab data $rootScope.loadSearchData(); } @@ -458,7 +476,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.selectedSystemName = null; if ($scope.isHidePinBtnClicked) { - // $scope.showAllPinsAfterHide($scope.aaPinData); + // $scope.showAllPinsAfterHide($scope.aaPinData); $scope.showAllPinsAfterHide(); } else { @@ -469,56 +487,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.selectedSystemName = event.currentTarget.title; - - // get termText info - var promise = ModuleService.getTermTextDataForPin($scope.moduleName) - .then( - function (response) { - $scope.TermInfo = response.data.Terms.Term; + // get termText info + var promise = ModuleService.getTermTextDataForPin($scope.moduleName) + .then( + function (response) { - //on gettng all required data, draw pins - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { + $scope.TermInfo = response.data.Terms.Term; - $scope.selectedSystemPinData = new jinqJs() - .from($scope.aaPinData) - .where("_BodySystemName == " + $scope.selectedSystemName) - .select(); - if ($scope.isHidePinBtnClicked) { - // $scope.showAllPinsAfterHide($scope.selectedSystemPinData); - $scope.showAllPinsAfterHide(); + //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) { + } + else { + //remove other system pins + if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) { - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { - if (aaPinDataValue._BodySystemName != $scope.selectedSystemName) - $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId); - }) + if (aaPinDataValue._BodySystemName != $scope.selectedSystemName) + $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId); + }) - angular.forEach($scope.selectedSystemPinData, function (value, key) { + angular.forEach($scope.selectedSystemPinData, function (value, key) { - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) + $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); - } - } + }) + //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); - } - ) - - } + } + } + }, + function (error) { + // handle errors here + console.log(' error: ' + error.statusText); + } + ) + + } } $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) { @@ -540,53 +557,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber); - if (isCtrlPressed) { + 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(); } - 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]); - } - } + + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']"); + for (var i = 0; i < existingSpeechBubbleLine.length; i++) { + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]); } - if (pinDataWithFirstTermNumber.length > 1) { - isSameTermWithMultiPin = true; + 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); + }) + + - 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; @@ -596,7 +613,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.removeSpeechBubble = function () { - + //clear speech bubbles var speechBubbles = $("div[id*='speechBubble']"); if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { @@ -652,7 +669,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.hideSpeechBubble = function () { - + //clear speech bubbles var speechBubbles = $("div[id*='speechBubble']"); if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { @@ -787,9 +804,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $('.common-drag').draggable( { - + drag: function (evt) { - + var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop; var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft; var clickedSpeechBubbleId = $(this).attr("id"); @@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.angle = function (id, cx, cy, ex, ey, BoolValues) { - + var dy = ey - cy; var dx = ex - cx; var theta = 0; @@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey)); var e = cy; var f = cx; - + 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%' }); } @@ -936,25 +953,25 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .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 }) - } - - } + + + 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) @@ -977,14 +994,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.removePin = function (canvasId,pinId) { + $scope.removePin = function (canvasId, pinId) { - var pinName = 'Pin_' + pinId; - var pinArcName = 'PinArc_' + pinId; - $('#' + canvasId).removeLayer(pinName).drawLayers(); - $('#' + canvasId).removeLayer(pinArcName).drawLayers(); + // var pinName = 'Pin_' + pinId; + // var pinArcName = 'PinArc_' + pinId; + // $('#' + canvasId).removeLayer(pinName).drawLayers(); + // $('#' + canvasId).removeLayer(pinArcName).drawLayers(); - $scope.removeSpeechBubble(); + // $scope.removeSpeechBubble(); + + $rootScope.isSliderChanged = true; + $('#aaDetailViewCanvas').removeLayers(); } $rootScope.$on('annotationToolEvent', function (event, data) { @@ -1045,13 +1065,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo console.log(' error: ' + error.statusText); } ) - + } $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { - + var languageArray = $rootScope.lexiconLanguageArray; if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) { @@ -1062,30 +1082,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .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; + var termText = $scope.matchedLanguageTermNoData[0]._TermText; $scope.MultiLanguageAnnationArray.push(termText); - + }; - - } - + } + } + } + + - - $scope.hidePins = function () { @@ -1102,14 +1122,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var pinArcName = 'PinArc_' + aaPinDataValue._PinId; $('#aaDetailViewCanvas').setLayer(pinName, { - visible: false // set to true instead to show the layer again + 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'); } @@ -1153,7 +1173,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.showSpeechBubble(); }; - + $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) { if (isShowSelectedPins) { @@ -1165,23 +1185,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo .where('_PinId != ' + value.id) .select(); }) - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { - // if (aaPinDataValue._PinId != value.id) { - var pinName = 'Pin_' + aaPinDataValue._PinId; - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; + // 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(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(); - // } - }) + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + // } + }) - // }) + // }) $scope.clickedPins = []; } @@ -1210,7 +1230,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $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)) { @@ -1297,8 +1317,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none"); } } - else - { + else { $rootScope.isShowHideButtonClicked = true; for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block"); @@ -1365,10 +1384,145 @@ function showHideAnnotation(event) { } function showSelectedPins(event) { - + console.log('showSelectedPins is called') var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); scope.$apply(function () { scope.showSelectedPins(event); }); -} \ No newline at end of file +} + +function removePinOnZoom(scope) { + debugger; + $(".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(); + // var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + //scope.$apply(function () { + scope.removePin(); + scope.showAllPins(); + //}); +} + +//var imageViewAt25Percent = 0.0; +//var imageViewAt40Percent = 0.0; +//var imageViewAt55Percent = 0.0; +//var imageViewAt70Percent = 0.0; +//var imageViewAt70Percent = 0.0; +//var imageViewAt85Percent = 0.0; +//var imageViewAt100Percent = 0.0; +var sliderVal = 0.0; +$(document).ready(function () { + $(".slider").slider({ + min: 25, + max: 100, + value: 100, + range: "min", + orientation: "vertical", + slide: function (event, ui) { + + sliderVal = ui.value; + + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + // scope.showSelectedSystemPins(event); + var relativeWidth = 0; + var relativeHeight = 0; + if (ui.value == 100) { + relativeWidth = scope.ViewImageWidth; + relativeHeight = scope.ViewImageHeight + + } + else if (ui.value == 85) { + relativeWidth = scope.ViewImageWidth * 0.85; + relativeHeight = scope.ViewImageHeight * 0.85; + + } else if (ui.value == 70) { + relativeWidth = scope.ViewImageWidth * 0.70; + relativeHeight = scope.ViewImageHeight * 0.70; + + } else if (ui.value == 55) { + + relativeWidth = scope.ViewImageWidth * 0.55; + relativeHeight = scope.ViewImageHeight * 0.55; + + + } else if (ui.value == 40) { + + relativeWidth = scope.ViewImageWidth * 0.40; + relativeHeight = scope.ViewImageHeight * 0.40; + + } else if (ui.value == 25) { + + relativeWidth = scope.ViewImageWidth * 0.25; + relativeHeight = scope.ViewImageHeight * 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"); + removePinOnZoom(scope); + } + //if (ui.value == 100) { + + // $("#modItemImage").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + //} + //else if (ui.value == 85) { + + // $("#modItemImage").css("width", imageViewAt85Percent + "px"); + // $("#modItemImage").css("height", imageViewAt85Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt85Percent + "px"); + // $("#modItemImage").css("height", imageViewAt85Percent + "px"); + //} else if (ui.value == 70) { + + // $("#modItemImage").css("width", imageViewAt70Percent + "px"); + // $("#modItemImage").css("height", imageViewAt70Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt70Percent + "px"); + // $("#modItemImage").css("height", imageViewAt70Percent + "px"); + //} else if (ui.value == 55) { + + // $("#modItemImage").css("width", imageViewAt55Percent + "px"); + // $("#modItemImage").css("height", imageViewAt55Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + + //} else if (ui.value == 40) { + + // $("#modItemImage").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + + //} else if (ui.value == 25) { + + // $("#modItemImage").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px"); + // $("#modItemImage").css("height", imageViewAt100Percent + "px"); + //} + }); + } + }) + .slider("pips", { + rest: "label", + step: "15" + }); +}); \ No newline at end of file diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html index 1be33fe..3f4f3da 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html @@ -29,7 +29,7 @@