hal/hal-core/resources/web/js/lib/svg.draggable.js

/*!
* @svgdotjs/svg.draggable.js - An extension for svg.js which allows to drag elements with your mouse
* @version 3.0.2
* https://github.com/svgdotjs/svg.draggable.js
*
* @copyright Wout Fierens
* @license MIT
*
* BUILT: Tue Feb 19 2019 17:12:16 GMT+0100 (GMT+01:00)
*/;
(function (svg_js) {
  'use strict';

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  var getCoordsFromEvent = function getCoordsFromEvent(ev) {
    if (ev.changedTouches) {
      ev = ev.changedTouches[0];
    }

    return {
      x: ev.clientX,
      y: ev.clientY
    };
  }; // Creates handler, saves it


  var DragHandler =
  /*#__PURE__*/
  function () {
    function DragHandler(el) {
      _classCallCheck(this, DragHandler);

      el.remember('_draggable', this);
      this.el = el;
      this.drag = this.drag.bind(this);
      this.startDrag = this.startDrag.bind(this);
      this.endDrag = this.endDrag.bind(this);
    } // Enables or disabled drag based on input


    _createClass(DragHandler, [{
      key: "init",
      value: function init(enabled) {
        if (enabled) {
          this.el.on('mousedown.drag', this.startDrag);
          this.el.on('touchstart.drag', this.startDrag);
        } else {
          this.el.off('mousedown.drag');
          this.el.off('touchstart.drag');
        }
      } // Start dragging

    }, {
      key: "startDrag",
      value: function startDrag(ev) {
        var isMouse = !ev.type.indexOf('mouse'); // Check for left button

        if (isMouse && (ev.which || ev.buttons) !== 1) {
          return;
        } // Fire beforedrag event


        if (this.el.dispatch('beforedrag', {
          event: ev,
          handler: this
        }).defaultPrevented) {
          return;
        } // Prevent browser drag behavior as soon as possible


        ev.preventDefault(); // Prevent propagation to a parent that might also have dragging enabled

        ev.stopPropagation(); // Make sure that start events are unbound so that one element
        // is only dragged by one input only

        this.init(false);
        this.box = this.el.bbox();
        this.lastClick = this.el.point(getCoordsFromEvent(ev)); // We consider the drag done, when a touch is canceled, too

        var eventMove = (isMouse ? 'mousemove' : 'touchmove') + '.drag';
        var eventEnd = (isMouse ? 'mouseup' : 'touchcancel.drag touchend') + '.drag'; // Bind drag and end events to window

        svg_js.on(window, eventMove, this.drag);
        svg_js.on(window, eventEnd, this.endDrag); // Fire dragstart event

        this.el.fire('dragstart', {
          event: ev,
          handler: this,
          box: this.box
        });
      } // While dragging

    }, {
      key: "drag",
      value: function drag(ev) {
        var box = this.box,
            lastClick = this.lastClick;
        var currentClick = this.el.point(getCoordsFromEvent(ev));
        var x = box.x + (currentClick.x - lastClick.x);
        var y = box.y + (currentClick.y - lastClick.y);
        var newBox = new svg_js.Box(x, y, box.w, box.h);
        if (this.el.dispatch('dragmove', {
          event: ev,
          handler: this,
          box: newBox
        }).defaultPrevented) return;
        this.move(x, y);
        return newBox;
      }
    }, {
      key: "move",
      value: function move(x, y) {
        // Svg elements bbox depends on their content even though they have
        // x, y, width and height - strange!
        // Thats why we handle them the same as groups
        if (this.el.type === 'svg') {
          svg_js.G.prototype.move.call(this.el, x, y);
        } else {
          this.el.move(x, y);
        }
      }
    }, {
      key: "endDrag",
      value: function endDrag(ev) {
        // final drag
        var box = this.drag(ev); // fire dragend event

        this.el.fire('dragend', {
          event: ev,
          handler: this,
          box: box
        }); // unbind events

        svg_js.off(window, 'mousemove.drag');
        svg_js.off(window, 'touchmove.drag');
        svg_js.off(window, 'mouseup.drag');
        svg_js.off(window, 'touchend.drag'); // Rebind initial Events

        this.init(true);
      }
    }]);

    return DragHandler;
  }();

  svg_js.extend(svg_js.Element, {
    draggable: function draggable() {
      var enable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
      var dragHandler = this.remember('_draggable') || new DragHandler(this);
      dragHandler.init(enable);
      return this;
    }
  });

}(SVG));
//# sourceMappingURL=svg.draggable.js.map