Home | History | Annotate | Download | only in js
      1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 function getElementRegion(element) {
      6   // Check that node type is element.
      7   if (element.nodeType != 1)
      8     throw new Error(element + ' is not an element');
      9 
     10   // We try 2 methods to determine element region. Try the first client rect,
     11   // and then the bounding client rect.
     12   // SVG is one case that doesn't have a first client rect.
     13   var clientRects = element.getClientRects();
     14   if (clientRects.length == 0) {
     15     var box = element.getBoundingClientRect();
     16     if (element.tagName.toLowerCase() == 'area') {
     17       var coords = element.coords.split(',');
     18       if (element.shape.toLowerCase() == 'rect') {
     19         if (coords.length != 4)
     20           throw new Error('failed to detect the region of the area');
     21         var leftX = Number(coords[0]);
     22         var topY = Number(coords[1]);
     23         var rightX = Number(coords[2]);
     24         var bottomY = Number(coords[3]);
     25         return {
     26             'left': leftX,
     27             'top': topY,
     28             'width': rightX - leftX,
     29             'height': bottomY - topY
     30         };
     31       } else if (element.shape.toLowerCase() == 'circle') {
     32         if (coords.length != 3)
     33           throw new Error('failed to detect the region of the area');
     34         var centerX = Number(coords[0]);
     35         var centerY = Number(coords[1]);
     36         var radius = Number(coords[2]);
     37         return {
     38             'left': Math.max(0, centerX - radius),
     39             'top': Math.max(0, centerY - radius),
     40             'width': radius * 2,
     41             'height': radius * 2
     42         };
     43       } else if (element.shape.toLowerCase() == 'poly') {
     44         if (coords.length < 2)
     45           throw new Error('failed to detect the region of the area');
     46         var minX = Number(coords[0]);
     47         var minY = Number(coords[1]);
     48         var maxX = minX;
     49         var maxY = minY;
     50         for (i = 2; i < coords.length; i += 2) {
     51           var x = Number(coords[i]);
     52           var y = Number(coords[i + 1]);
     53           minX = Math.min(minX, x);
     54           minY = Math.min(minY, y);
     55           maxX = Math.max(maxX, x);
     56           maxY = Math.max(maxY, y);
     57         }
     58         return {
     59             'left': minX,
     60             'top': minY,
     61             'width': maxX - minX,
     62             'height': maxY - minY
     63         };
     64       } else {
     65         throw new Error('shape=' + element.shape + ' is not supported');
     66       }
     67     }
     68     return {
     69         'left': 0,
     70         'top': 0,
     71         'width': box.width,
     72         'height': box.height
     73     };
     74   } else {
     75     var clientRect = clientRects[0];
     76     var box = element.getBoundingClientRect();
     77     return {
     78         'left': clientRect.left - box.left,
     79         'top': clientRect.top - box.top,
     80         'width': clientRect.right - clientRect.left,
     81         'height': clientRect.bottom - clientRect.top
     82     };
     83   }
     84 }
     85