@deboxsoft/react-native-elements

<!doctype html> <html lang="en"> <head> <title>Code coverage report for tooltip/getTooltipCoordinate.js</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../prettify.css" /> <link rel="stylesheet" href="../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../index.html">All files</a> / <a href="index.html">tooltip</a> getTooltipCoordinate.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 91.67% Statements 33/36 </div> <div class='fl pad1y space-right2'> 40% Branches 6/15 </div> <div class='fl pad1y space-right2'> 100% Functions 8/8 </div> <div class='fl pad1y space-right2'> 91.18% Lines 31/34 </div> </div> Press n or j to go to the next uncovered block, b, p or k for the previous block. </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> <a name='L4'></a><a href='#L4'>4</a> <a name='L5'></a><a href='#L5'>5</a> <a name='L6'></a><a href='#L6'>6</a> <a name='L7'></a><a href='#L7'>7</a> <a name='L8'></a><a href='#L8'>8</a> <a name='L9'></a><a href='#L9'>9</a> <a name='L10'></a><a href='#L10'>10</a> <a name='L11'></a><a href='#L11'>11</a> <a name='L12'></a><a href='#L12'>12</a> <a name='L13'></a><a href='#L13'>13</a> <a name='L14'></a><a href='#L14'>14</a> <a name='L15'></a><a href='#L15'>15</a> <a name='L16'></a><a href='#L16'>16</a> <a name='L17'></a><a href='#L17'>17</a> <a name='L18'></a><a href='#L18'>18</a> <a name='L19'></a><a href='#L19'>19</a> <a name='L20'></a><a href='#L20'>20</a> <a name='L21'></a><a href='#L21'>21</a> <a name='L22'></a><a href='#L22'>22</a> <a name='L23'></a><a href='#L23'>23</a> <a name='L24'></a><a href='#L24'>24</a> <a name='L25'></a><a href='#L25'>25</a> <a name='L26'></a><a href='#L26'>26</a> <a name='L27'></a><a href='#L27'>27</a> <a name='L28'></a><a href='#L28'>28</a> <a name='L29'></a><a href='#L29'>29</a> <a name='L30'></a><a href='#L30'>30</a> <a name='L31'></a><a href='#L31'>31</a> <a name='L32'></a><a href='#L32'>32</a> <a name='L33'></a><a href='#L33'>33</a> <a name='L34'></a><a href='#L34'>34</a> <a name='L35'></a><a href='#L35'>35</a> <a name='L36'></a><a href='#L36'>36</a> <a name='L37'></a><a href='#L37'>37</a> <a name='L38'></a><a href='#L38'>38</a> <a name='L39'></a><a href='#L39'>39</a> <a name='L40'></a><a href='#L40'>40</a> <a name='L41'></a><a href='#L41'>41</a> <a name='L42'></a><a href='#L42'>42</a> <a name='L43'></a><a href='#L43'>43</a> <a name='L44'></a><a href='#L44'>44</a> <a name='L45'></a><a href='#L45'>45</a> <a name='L46'></a><a href='#L46'>46</a> <a name='L47'></a><a href='#L47'>47</a> <a name='L48'></a><a href='#L48'>48</a> <a name='L49'></a><a href='#L49'>49</a> <a name='L50'></a><a href='#L50'>50</a> <a name='L51'></a><a href='#L51'>51</a> <a name='L52'></a><a href='#L52'>52</a> <a name='L53'></a><a href='#L53'>53</a> <a name='L54'></a><a href='#L54'>54</a> <a name='L55'></a><a href='#L55'>55</a> <a name='L56'></a><a href='#L56'>56</a> <a name='L57'></a><a href='#L57'>57</a> <a name='L58'></a><a href='#L58'>58</a> <a name='L59'></a><a href='#L59'>59</a> <a name='L60'></a><a href='#L60'>60</a> <a name='L61'></a><a href='#L61'>61</a> <a name='L62'></a><a href='#L62'>62</a> <a name='L63'></a><a href='#L63'>63</a> <a name='L64'></a><a href='#L64'>64</a> <a name='L65'></a><a href='#L65'>65</a> <a name='L66'></a><a href='#L66'>66</a> <a name='L67'></a><a href='#L67'>67</a> <a name='L68'></a><a href='#L68'>68</a> <a name='L69'></a><a href='#L69'>69</a> <a name='L70'></a><a href='#L70'>70</a> <a name='L71'></a><a href='#L71'>71</a> <a name='L72'></a><a href='#L72'>72</a> <a name='L73'></a><a href='#L73'>73</a> <a name='L74'></a><a href='#L74'>74</a> <a name='L75'></a><a href='#L75'>75</a> <a name='L76'></a><a href='#L76'>76</a> <a name='L77'></a><a href='#L77'>77</a> <a name='L78'></a><a href='#L78'>78</a> <a name='L79'></a><a href='#L79'>79</a> <a name='L80'></a><a href='#L80'>80</a> <a name='L81'></a><a href='#L81'>81</a> <a name='L82'></a><a href='#L82'>82</a> <a name='L83'></a><a href='#L83'>83</a> <a name='L84'></a><a href='#L84'>84</a> <a name='L85'></a><a href='#L85'>85</a> <a name='L86'></a><a href='#L86'>86</a> <a name='L87'></a><a href='#L87'>87</a> <a name='L88'></a><a href='#L88'>88</a> <a name='L89'></a><a href='#L89'>89</a> <a name='L90'></a><a href='#L90'>90</a> <a name='L91'></a><a href='#L91'>91</a> <a name='L92'></a><a href='#L92'>92</a> <a name='L93'></a><a href='#L93'>93</a> <a name='L94'></a><a href='#L94'>94</a> <a name='L95'></a><a href='#L95'>95</a> <a name='L96'></a><a href='#L96'>96</a> <a name='L97'></a><a href='#L97'>97</a> <a name='L98'></a><a href='#L98'>98</a> <a name='L99'></a><a href='#L99'>99</a> <a name='L100'></a><a href='#L100'>100</a> <a name='L101'></a><a href='#L101'>101</a> <a name='L102'></a><a href='#L102'>102</a> <a name='L103'></a><a href='#L103'>103</a> <a name='L104'></a><a href='#L104'>104</a> <a name='L105'></a><a href='#L105'>105</a> <a name='L106'></a><a href='#L106'>106</a> <a name='L107'></a><a href='#L107'>107</a> <a name='L108'></a><a href='#L108'>108</a> <a name='L109'></a><a href='#L109'>109</a> <a name='L110'></a><a href='#L110'>110</a> <a name='L111'></a><a href='#L111'>111</a> <a name='L112'></a><a href='#L112'>112</a> <a name='L113'></a><a href='#L113'>113</a> <a name='L114'></a><a href='#L114'>114</a> <a name='L115'></a><a href='#L115'>115</a> <a name='L116'></a><a href='#L116'>116</a> <a name='L117'></a><a href='#L117'>117</a> <a name='L118'></a><a href='#L118'>118</a> <a name='L119'></a><a href='#L119'>119</a> <a name='L120'></a><a href='#L120'>120</a> <a name='L121'></a><a href='#L121'>121</a> <a name='L122'></a><a href='#L122'>122</a> <a name='L123'></a><a href='#L123'>123</a> <a name='L124'></a><a href='#L124'>124</a> <a name='L125'></a><a href='#L125'>125</a> <a name='L126'></a><a href='#L126'>126</a> <a name='L127'></a><a href='#L127'>127</a> <a name='L128'></a><a href='#L128'>128</a> <a name='L129'></a><a href='#L129'>129</a> <a name='L130'></a><a href='#L130'>130</a> <a name='L131'></a><a href='#L131'>131</a></td><td class="line-coverage quiet">24x   2x 24x                                               2x                       6x 6x 6x 6x 6x     6x 6x 6x 6x               6x         24x   24x     6x 6x     6x 6x               6x   6x 6x 6x 6x     6x     6x                   2x             6x                   6x 6x                      </td><td class="text"><pre class="prettyprint lang-js">const getArea = (a, b) => a * b;   const getPointDistance = (a, b) => Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));   /* type Coord = { x: number, y: number, };   ~Tooltip coordinate system:~ The tooltip coordinates are based on the element which it is wrapping. We take the x and y coordinates of the element and find the best position to place the tooltip. To find the best position we look for the side with the most space. In order to find the side with the most space we divide the the surroundings in four quadrants and check for the one with biggest area. Once we know the quandrant with the biggest area it place the tooltip in that direction.   To find the areas we first get 5 coordinate points. The center and the other 4 extreme points which together make a perfect cross shape.   Once we know the coordincates we can get the length of the vertices which form each quadrant. Since they are squares we only need two. */   const getTooltipCoordinate = ( x, y, width, height, ScreenWidth, ScreenHeight, tooltipWidth, tooltipHeight, withPointer, ) => { // The following are point coordinates: [x, y] const center = [x + width / 2, y + height / 2]; const pOne = [center[0], 0]; const pTwo = [ScreenWidth, center[1]]; const pThree = [center[0], ScreenHeight]; const pFour = [0, center[1]];   // vertices const vOne = getPointDistance(center, pOne); const vTwo = getPointDistance(center, pTwo); const vThree = getPointDistance(center, pThree); const vFour = getPointDistance(center, pFour);   // Quadrant areas. // type Areas = { // area: number, // id: number, // };   const areas = [ getArea(vOne, vFour), getArea(vOne, vTwo), getArea(vTwo, vThree), getArea(vThree, vFour), ].map((each, index) => ({ area: each, id: index }));   const sortedArea = areas.sort((a, b) => b.area - a.area);   // deslocated points const dX = 0.001; const dY = height / 2;   // Deslocate the coordinates in the direction of the quadrant. const directionCorrection = [[-1, -1], [1, -1], [1, 1], [-1, 1]]; const deslocateReferencePoint = [ [-tooltipWidth, -tooltipHeight], [0, -tooltipHeight], [0, 0], [-tooltipWidth, 0], ];   // current quadrant index const qIndex = sortedArea[0].id;   const getWithPointerOffsetY = () => withPointer ? 10 * directionCorrection[qIndex][1] : 0; const getWithPointerOffsetX = () => withPointer ? center[0] - 18 * directionCorrection[qIndex][0] : center[0];   const newX = getWithPointerOffsetX() + (dX * directionCorrection[qIndex][0] + deslocateReferencePoint[qIndex][0]);   return { x: constraintX(newX, qIndex, center[0], ScreenWidth, tooltipWidth), y: center[1] + (dY * directionCorrection[qIndex][1] + deslocateReferencePoint[qIndex][1]) + getWithPointerOffsetY(), }; };   const constraintX = ( newX, qIndex, x, ScreenWidth, tooltipWidth, ) => { switch (qIndex) { // 0 and 3 are the left side quadrants. case 0: case 3: { const maxWidth = newX > ScreenWidth ? ScreenWidth - 10 : newX; return newX < 1 ? 10 : maxWidth; } // 1 and 2 are the right side quadrants case 1: case 2: { const leftOverSpace = ScreenWidth - newX; return leftOverSpace >= tooltipWidth ? newX : newX - (tooltipWidth - leftOverSpace + 10); } default: { return 0; } } };   export default getTooltipCoordinate;  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Tue Nov 06 2018 09:11:24 GMT+0700 (Western Indonesia Time) </div> </div> <script src="../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../sorter.js"></script> <script src="../block-navigation.js"></script> </body> </html>