code for annoatations on pin click but not working for every point on pin head.

need to change the code/approach.

code for annoatations on pin click but not working for every point on pin head.
need to change the code/approach.
Nikita Kulshreshtha
1 parent 4d3879ab
Showing 1 changed file with 49 additions and 53 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -149,6 +149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 canvas.style.left = '0px';
                 canvas.style.top = '0px';
                 canvas.style.position = "absolute";
+                canvas.addEventListener('click', aaDetailViewCanvasClickListener);
                 $("#imageDiv").append(canvas);
                 $scope.context = canvas.getContext("2d")
@@ -169,6 +170,54 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $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);
@@ -185,59 +234,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             function (result) {
                 $scope.aaPinData = result.data.Root.Item;
                 angular.forEach($scope.aaPinData, function (value, key) {
-               //CREATING PIN WITHOUT CANAVS
-                    //var ax = value._PinX;
-                    //var ay = value._PinY;
-                    //var bx = value._HeadX;
-                    //var by = value._HeadY;
-
-                    //if (ax > bx) {
-                    //    bx = ax + bx;
-                    //    ax = bx - ax;
-                    //    bx = bx - ax;
-                    //    by = ay + by;
-                    //    ay = by - ay;
-                    //    by = by - ay;
-                    //}
-
-
-                    //console.log('ax: ' + ax);
-                    //console.log('ay: ' + ay);
-                    //console.log('bx: ' + bx);
-                    //console.log('by: ' + by);
-
-                    //var angle = Math.atan((ay - by) / (bx - ax));
-                    //console.log('angle: ' + angle);
-
-                    //angle = (angle * 180 / Math.PI);
-                    //console.log('angle: ' + angle);
-                    //angle = -angle;
-                    //console.log('angle: ' + angle);
-
-                    //var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
-                    //console.log('length: ' + length);
-
-                    //var style = ""
-                    //style += "left:" + (ax) + "px;"
-                    //style += "top:" + (ay) + "px;"
-                    //style += "width:" + length + "px;"
-                    //style += "height:1px;"
-                    //style += "background-color:black;"
-                    //style += "position:absolute;"
-                    //style += "transform:rotate(" + angle + "deg);"
-                    //style += "-ms-transform:rotate(" + angle + "deg);"
-                    //style += "transform-origin:0% 0%;"
-                    //style += "-moz-transform:rotate(" + angle + "deg);"
-                    //style += "-moz-transform-origin:0% 0%;"
-                    //style += "-webkit-transform:rotate(" + angle + "deg);"
-                    //style += "-webkit-transform-origin:0% 0%;"
-                    //style += "-o-transform:rotate(" + angle + "deg);"
-                    //style += "-o-transform-origin:0% 0%;"
-                    //style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
-                    //style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
-                    //style += "z-index:99;"
-                    //$("<div id= '"+value._PinId+"' style='" + style + "'></div>").appendTo('#imageDiv');
-                //END
                     $scope.context.beginPath();
                     $scope.context.moveTo(value._PinX, value._PinY);