# all files / diagram-js-cursor-debug/lib/ CursorDebug.js

57.69% Statements 15/26
0% Branches 0/10
57.14% Functions 4/7
57.69% Lines 15/26

    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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87

    1×

    53×

    53×

    53×
    53×

    53×

    1×

    53×

    53×

    53×

    53×

    53×

    1×
    53×

    1×

     import {
      append as svgAppend,
      attr as svgAttr,
      create as svgCreate
    } from 'tiny-svg';

    import {
      event as domEvent,
    } from 'min-dom';

    var LAYER_NAME = 'cursor';

    export default function CursorDebug(eventBus, canvas) {

      this._canvas = canvas;

      var self = this;

      function toPoint(event) {

        if (event.pointers && event.pointers.length) {
          event = event.pointers[0];
        }

        if (event.touches && event.touches.length) {
          event = event.touches[0];
        }

        return event ? {
          x: event.clientX,
          y: event.clientY
        } : null;
      }

      function toLocalPoint(globalPosition) {

        var viewbox = canvas.viewbox();

        var clientRect = canvas._container.getBoundingClientRect();

        return {
          x: viewbox.x + (globalPosition.x - clientRect.left) / viewbox.scale,
          y: viewbox.y + (globalPosition.y - clientRect.top) / viewbox.scale
        };
      }

      eventBus.on('diagram.init', function() {
        self._init();
      });

      domEvent.bind(document, 'mousemove', function(e) {
        var current = toPoint(e),
            localPoint = toLocalPoint(current);

        self._setCoordinates(localPoint);
      });

    }

    CursorDebug.prototype._init = function(event) {
      // create layer
      var parent = this._canvas.getLayer(LAYER_NAME, -2);

      // create box
      var box = this.box = svgCreate('text');

      svgAttr(box, {
        x: 150,
        y: 20,
        width: 50,
        height: 50
      });

      this._setCoordinates({ x: 0, y: 0 });

      svgAppend(parent, box);

    };

    CursorDebug.prototype._setCoordinates = function(point) {
      this.box.textContent = 'x: ' + point.x + ', y: ' + point.y;
    };

    CursorDebug.$inject = [
      'eventBus',
      'canvas'
    ];