69a1d6ad7727f261c598484c39a10821d0e73cd43847c481cdd6e9e9420ea746b08dc9b3e7a8f9eb0cabe6a65c5400e2b55daae36e7b803d7da85a742f1ca0 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. describe('WalkontableBorder', () => {
  2. var $table,
  3. $container,
  4. $wrapper,
  5. debug = false;
  6. beforeEach(() => {
  7. $container = $('<div></div>');
  8. $wrapper = $('<div></div>');
  9. $container.width(100).height(200);
  10. $table = $('<table></table>');
  11. $container.append($wrapper);
  12. $wrapper.append($table);
  13. $container.appendTo('body');
  14. createDataArray();
  15. });
  16. afterEach(() => {
  17. if (!debug) {
  18. $('.wtHolder').remove();
  19. }
  20. $container.remove();
  21. });
  22. it('should add/remove border to selection when cell is clicked', () => {
  23. var wt = new Walkontable.Core({
  24. table: $table[0],
  25. data: getData,
  26. totalRows: 5,
  27. totalColumns: 5,
  28. selections: [
  29. new Walkontable.Selection({
  30. border: {
  31. width: 1,
  32. color: 'red'
  33. }
  34. })
  35. ],
  36. onCellMouseDown(event, coords, TD) {
  37. wt.selections.current.clear();
  38. wt.selections.current.add(coords);
  39. wt.draw();
  40. }
  41. });
  42. shimSelectionProperties(wt);
  43. wt.draw();
  44. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  45. var $td2 = $table.find('tbody tr:eq(2) td:eq(1)');
  46. var $top = $(wt.selections.current.getBorder(wt).top);
  47. var $right = $(wt.selections.current.getBorder(wt).right);
  48. var $bottom = $(wt.selections.current.getBorder(wt).bottom);
  49. var $left = $(wt.selections.current.getBorder(wt).left);
  50. $td1.simulate('mousedown');
  51. expect($top.css('height')).toBe('1px');
  52. expect($top.position().top).toBe(23);
  53. expect($top.position().left).toBe(0);
  54. expect($right.css('width')).toBe('1px');
  55. expect($right.position().top).toBe(23);
  56. expect($right.position().left).toBe(49);
  57. expect($bottom.css('height')).toBe('1px');
  58. expect($bottom.position().top).toBe(46);
  59. expect($bottom.position().left).toBe(0);
  60. expect($left.css('width')).toBe('1px');
  61. expect($left.position().top).toBe(23);
  62. expect($left.position().left).toBe(0);
  63. $td2.simulate('mousedown');
  64. expect($top.css('height')).toBe('1px');
  65. expect($top.position().top).toBe(46);
  66. expect($top.position().left).toBe(49);
  67. expect($right.css('width')).toBe('1px');
  68. expect($right.position().top).toBe(46);
  69. expect($right.position().left).toBe(99);
  70. expect($bottom.css('height')).toBe('1px');
  71. expect($bottom.position().top).toBe(69);
  72. expect($bottom.position().left).toBe(49);
  73. expect($left.css('width')).toBe('1px');
  74. expect($left.position().top).toBe(46);
  75. expect($left.position().left).toBe(49);
  76. });
  77. it('should add/remove corner to selection when cell is clicked', () => {
  78. var wt = new Walkontable.Core({
  79. table: $table[0],
  80. data: getData,
  81. totalRows: 5,
  82. totalColumns: 5,
  83. selections: [
  84. new Walkontable.Selection({
  85. border: {
  86. width: 2,
  87. color: 'green',
  88. cornerVisible() {
  89. return true;
  90. }
  91. }
  92. }),
  93. new Walkontable.Selection({})
  94. ],
  95. onCellMouseDown(event, coords, TD) {
  96. wt.selections.current.clear();
  97. wt.selections.current.add(coords);
  98. wt.draw();
  99. }
  100. });
  101. shimSelectionProperties(wt);
  102. wt.draw();
  103. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  104. var $td2 = $table.find('tbody tr:eq(2) td:eq(1)');
  105. var $corner = $(wt.selections.current.getBorder(wt).corner);
  106. $td1.simulate('mousedown');
  107. expect($corner.css('width')).toBe('5px');
  108. expect($corner.css('height')).toBe('5px');
  109. expect($corner.position().top).toBe(42);
  110. expect($corner.position().left).toBe(45);
  111. $td2.simulate('mousedown');
  112. expect($corner.css('width')).toBe('5px');
  113. expect($corner.css('height')).toBe('5px');
  114. expect($corner.position().top).toBe(65);
  115. expect($corner.position().left).toBe(95);
  116. });
  117. it('should move the fill handle / corner border to the left, if in the position it would overlap the container (e.g.: far-right)', () => {
  118. $container.css({
  119. overflow: 'hidden',
  120. width: '200px'
  121. });
  122. var wt = new Walkontable.Core({
  123. table: $table[0],
  124. data: getData,
  125. totalRows: 5,
  126. totalColumns: 4,
  127. selections: [
  128. new Walkontable.Selection({
  129. border: {
  130. width: 2,
  131. color: 'green',
  132. cornerVisible() {
  133. return true;
  134. }
  135. }
  136. }),
  137. new Walkontable.Selection({})
  138. ],
  139. onCellMouseDown(event, coords, TD) {
  140. wt.selections.current.clear();
  141. wt.selections.current.add(coords);
  142. wt.draw();
  143. }
  144. });
  145. shimSelectionProperties(wt);
  146. wt.draw();
  147. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  148. var $td2 = $table.find('tbody tr:eq(3) td:eq(3)');
  149. var $td3 = $table.find('tbody tr:eq(2) td:eq(1)');
  150. var $corner = $(wt.selections.current.getBorder(wt).corner);
  151. $td1.simulate('mousedown');
  152. expect($corner.css('width')).toBe('5px');
  153. expect($corner.css('height')).toBe('5px');
  154. expect($corner.position().top).toBe(42);
  155. expect($corner.position().left).toBe(45);
  156. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  157. $td2.simulate('mousedown');
  158. expect($corner.css('width')).toBe('5px');
  159. expect($corner.css('height')).toBe('5px');
  160. expect($corner.position().top).toBe(88);
  161. expect($corner.position().left).toBe(193);
  162. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  163. $td3.simulate('mousedown');
  164. expect($corner.css('width')).toBe('5px');
  165. expect($corner.css('height')).toBe('5px');
  166. expect($corner.position().top).toBe(65);
  167. expect($corner.position().left).toBe(95);
  168. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  169. });
  170. });