all files / lib/features/touch/ TouchFix.js

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