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                          53×   53×                                                           53× 53×     53×                   53×     53×   53×             53×   53×       53×          
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'
];