TouchFix.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import {
  2. append as svgAppend,
  3. attr as svgAttr,
  4. create as svgCreate
  5. } from 'tiny-svg';
  6. export default function TouchFix(canvas, eventBus) {
  7. var self = this;
  8. eventBus.on('canvas.init', function(e) {
  9. self.addBBoxMarker(e.svg);
  10. });
  11. }
  12. TouchFix.$inject = [ 'canvas', 'eventBus' ];
  13. /**
  14. * Safari mobile (iOS 7) does not fire touchstart event in <SVG> element
  15. * if there is no shape between 0,0 and viewport elements origin.
  16. *
  17. * So touchstart event is only fired when the <g class="viewport"> element was hit.
  18. * Putting an element over and below the 'viewport' fixes that behavior.
  19. */
  20. TouchFix.prototype.addBBoxMarker = function(svg) {
  21. var markerStyle = {
  22. fill: 'none',
  23. class: 'outer-bound-marker'
  24. };
  25. var rect1 = svgCreate('rect');
  26. svgAttr(rect1, {
  27. x: -10000,
  28. y: 10000,
  29. width: 10,
  30. height: 10
  31. });
  32. svgAttr(rect1, markerStyle);
  33. svgAppend(svg, rect1);
  34. var rect2 = svgCreate('rect');
  35. svgAttr(rect2, {
  36. x: 10000,
  37. y: 10000,
  38. width: 10,
  39. height: 10
  40. });
  41. svgAttr(rect2, markerStyle);
  42. svgAppend(svg, rect2);
  43. };