ADAM / AIAHTML5

Commit e33a7329396bd89f2ffe38cf34b4e45fee48e697

Authored by Nikita Kulshreshtha
1 parent 4d3879ab

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

need to change the code/approach.
Inline Side-by-side
Showing 1 changed file with 49 additions and 53 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @e33a732
... ... @@ -149,6 +149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
149 149 canvas.style.left = '0px';
150 150 canvas.style.top = '0px';
151 151 canvas.style.position = "absolute";
  152 + canvas.addEventListener('click', aaDetailViewCanvasClickListener);
152 153  
153 154 $("#imageDiv").append(canvas);
154 155 $scope.context = canvas.getContext("2d")
... ... @@ -169,6 +170,54 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
169 170 $scope.imageHeight = this.height;
170 171 }
171 172  
  173 + function aaDetailViewCanvasClickListener(event) {
  174 +
  175 + alert('pin clicked');
  176 + var mousePos = $scope.getMousePos(event);
  177 +
  178 + var canvasDiv = document.getElementById('imageDiv');
  179 + var verticalScrollPosition = canvasDiv.scrollTop;
  180 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  181 +
  182 +
  183 + //We substracted 135, as the difference between flex and html coordinates for same organ is 135
  184 + var actualX = mousePos.x + horizontlScrollPosition;
  185 + var actualY = mousePos.y + verticalScrollPosition;
  186 + alert('actualX = ' + actualX + ',actualY= ' + actualY)
  187 + //var RGBColor = $scope.GetRGBColor(maskCanvasContext, actualX, actualY, x, y);
  188 + angular.forEach($scope.aaPinData, function (value, key) {
  189 +
  190 + var pinHeadX = value._HeadX;
  191 + var pinHeadY = value._HeadY;
  192 + var pinHeadRight = parseInt(value._HeadX) + 32;
  193 + var pinHeadTop = parseInt(value._HeadY) - 44;
  194 + if (actualX >= pinHeadX && actualX <= pinHeadRight && actualY <= pinHeadY && actualY >= pinHeadTop) {
  195 + alert('clicked pin = ' + value._PinId + ' and _TermId= ' + value._TermId);
  196 + var termNumber = value._TermId;
  197 +
  198 + var selectedPinTermData = new jinqJs()
  199 + .from($scope.TermInfo)
  200 + .where("__ActualTermNumber == " + termNumber)
  201 + .select();
  202 + var annotationText = selectedPinTermData[0].__TermText;
  203 + // $scope.MultiLanguageAnnationArray = [];
  204 + // $scope.MultiLanguageAnnationArray.push(annotationText);
  205 +
  206 + // $scope.createSpeechBubble(pinHeadX, pinHeadY, value._PinId);
  207 + }
  208 + //alert('pinId ='+value._PinId+', pinHeadX =' + pinHeadX + ',pinHeadY= ' + pinHeadY + ',pinHeadRight= ' + pinHeadRight + ',pinHeadTop =' + pinHeadTop);
  209 + });
  210 + }
  211 +
  212 + $scope.getMousePos = function (evt) {
  213 +
  214 + return {
  215 + x: Math.round(evt.pageX - $('#imageDiv').offset().left),
  216 + y: Math.round(evt.pageY - $('#imageDiv').offset().top)
  217 +
  218 + }
  219 + }
  220 +
172 221 angular.element(document).ready(function (e) {
173 222 $("#ImagePanel").resize(function () {
174 223 $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
... ... @@ -185,59 +234,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
185 234 function (result) {
186 235 $scope.aaPinData = result.data.Root.Item;
187 236 angular.forEach($scope.aaPinData, function (value, key) {
188   - //CREATING PIN WITHOUT CANAVS
189   - //var ax = value._PinX;
190   - //var ay = value._PinY;
191   - //var bx = value._HeadX;
192   - //var by = value._HeadY;
193   -
194   - //if (ax > bx) {
195   - // bx = ax + bx;
196   - // ax = bx - ax;
197   - // bx = bx - ax;
198   - // by = ay + by;
199   - // ay = by - ay;
200   - // by = by - ay;
201   - //}
202   -
203   -
204   - //console.log('ax: ' + ax);
205   - //console.log('ay: ' + ay);
206   - //console.log('bx: ' + bx);
207   - //console.log('by: ' + by);
208   -
209   - //var angle = Math.atan((ay - by) / (bx - ax));
210   - //console.log('angle: ' + angle);
211   -
212   - //angle = (angle * 180 / Math.PI);
213   - //console.log('angle: ' + angle);
214   - //angle = -angle;
215   - //console.log('angle: ' + angle);
216   -
217   - //var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
218   - //console.log('length: ' + length);
219   -
220   - //var style = ""
221   - //style += "left:" + (ax) + "px;"
222   - //style += "top:" + (ay) + "px;"
223   - //style += "width:" + length + "px;"
224   - //style += "height:1px;"
225   - //style += "background-color:black;"
226   - //style += "position:absolute;"
227   - //style += "transform:rotate(" + angle + "deg);"
228   - //style += "-ms-transform:rotate(" + angle + "deg);"
229   - //style += "transform-origin:0% 0%;"
230   - //style += "-moz-transform:rotate(" + angle + "deg);"
231   - //style += "-moz-transform-origin:0% 0%;"
232   - //style += "-webkit-transform:rotate(" + angle + "deg);"
233   - //style += "-webkit-transform-origin:0% 0%;"
234   - //style += "-o-transform:rotate(" + angle + "deg);"
235   - //style += "-o-transform-origin:0% 0%;"
236   - //style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
237   - //style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
238   - //style += "z-index:99;"
239   - //$("<div id= '"+value._PinId+"' style='" + style + "'></div>").appendTo('#imageDiv');
240   - //END
241 237  
242 238 $scope.context.beginPath();
243 239 $scope.context.moveTo(value._PinX, value._PinY);
... ...