# all files / Github/diagram-js/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

    46×

    46×
    46×

    1×

    1×

    46×

    46×
    46×

    46×

    46×

    46×
    46×

    46×

    46×

     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);
    };