From 84b28320b57ead462230139f504157f1a977ad39 Mon Sep 17 00:00:00 2001
From: nikita <nikita.kulshreshtha@ebix.com>
Date: Fri, 2 Jun 2017 14:00:03 +0530
Subject: [PATCH] changed the implementation of pin drawing. Now using jcanvas to draw the pins on image.

---
 400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js         | 77 +++++++++++++++++++++++++++++++++++++++++++++--------------------------------
 400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js | 21 +++------------------
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 6cbd50c..a95c66d 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -3699,41 +3699,54 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
     };
 
 
-    $rootScope.DrawStaticPin = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+    $rootScope.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: "ArcPin_" + PinId,
+            layer: true,
+            groups: ["Pin_" + PinId],
+            strokeStyle: 'grey',
+            strokeWidth: 2,
+            fillStyle: radial,
+            x: x, y: y,
+            radius: 5,
+
+            click: function (clickedPin) {
+
+                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 radial = $('#aaDetailViewCanvas').createGradient({
-                x1: 50, y1: 50,
-                x2: 50, y2: 50,
-                r1: 10, r2: 30,
-                c1: 'rgba(100, 50, 0,0)',
-                c2: 'grey'
-            });
-            $(canvasId).drawLine({
-                draggable: true,
-                layer: true,
-                name: "Pin_" + PinId,
-                groups: ["Pin_" + PinId],
-                dragGroups: ["Pin_" + PinId],
-                strokeStyle: 'black',
-                strokeWidth: 2,
-                x1: offsetX1, y1: offsetY1,
-               x2: x, y2: y,
-                
-            }).drawArc({
-                draggable: true,
-                name: "ArcPin_" + PinId,
-                //  name: "Pin_" + $rootScope.resetPin,
-                layer: true,
-                groups: ["Pin_" + PinId],
-                dragGroups: ["Pin_" + PinId],
-                strokeStyle: 'grey',
-                strokeWidth: 2,
-                fillStyle: radial,
-                x: offsetX1, y: offsetY1,
-                radius: 5,
+                var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+               // alert('pinId: ' + pinID);
+                //showAnnotation();
 
-            }).drawLayers();
+            }
+
+        }).drawLayers();
 
     }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index a73abe2..eb069f8 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -150,7 +150,6 @@ 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")
@@ -236,27 +235,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.aaPinData = result.data.Root.Item;
                 angular.forEach($scope.aaPinData, 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);
-                    //}
-                    $rootScope.DrawStaticPin('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+                    $rootScope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY, $rootScope.pinID)
                 })
 
-                console.log(JSON.stringify(result, null, 4));
             },
              function (error) {
-                 // handle errors here
-                 console.log(' error: ' + error.statusText);
+              
+                 console.log(' error in showAllPins: ' + error.statusText);
              }
             )
     }
--
libgit2 0.21.4