vue-rubberband/dist/vue-rubberband.js

Rubberband component of Vue.js

/*!
 * vue-rubberband v0.1.0
 * https://github.com/ktsn/vue-rubberband
 *
 * @license
 * Copyright (c) 2017 katashin
 * Released under the MIT license
 * https://github.com/ktsn/vue-rubberband/blob/master/LICENSE
 */
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.VueRubberband = factory());
}(this, (function () { 'use strict';

function relativeMousePosition(event) {
  var rect = event.currentTarget.getBoundingClientRect();
  return {
    left: event.clientX - rect.left,
    top: event.clientY - rect.top
  };
}

var Rubberband = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "rubberband", on: { "mousedown": function mousedown($event) {
          $event.preventDefault();_vm.onDragStart($event);
        }, "mousemove": function mousemove($event) {
          $event.preventDefault();_vm.onDragMove($event);
        }, "mouseup": function mouseup($event) {
          $event.preventDefault();_vm.onDragEnd($event);
        }, "mouseleave": function mouseleave($event) {
          $event.preventDefault();_vm.onDragEnd($event);
        } } }, [_vm._t("default"), _c('div', { directives: [{ name: "show", rawName: "v-show", value: _vm.show, expression: "show" }], staticClass: "rubberband-rect", style: _vm.rubberBandStyles })], 2);
  }, staticRenderFns: [], _scopeId: 'data-v-89072bc4',
  name: 'rubberband',

  props: {
    min: {
      type: Number,
      default: 900
    }
  },

  data: function data() {
    return {
      bounds: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0
      },
      show: false,
      dragging: false
    };
  },


  methods: {
    onDragStart: function onDragStart(event) {
      var mousePos = relativeMousePosition(event);
      var bounds = this.bounds;

      this.show = this.dragging = true;
      bounds.x1 = bounds.x2 = mousePos.left;
      bounds.y1 = bounds.y2 = mousePos.top;
    },
    onDragMove: function onDragMove(event) {
      if (!this.dragging) return;

      var mousePos = relativeMousePosition(event);
      var bounds = this.bounds;

      bounds.x2 = mousePos.left;
      bounds.y2 = mousePos.top;
    },
    onDragEnd: function onDragEnd(event) {
      if (!this.dragging) return;

      var mousePos = relativeMousePosition(event);
      var bounds = this.bounds;

      bounds.x2 = mousePos.left;
      bounds.y2 = mousePos.top;

      this.show = this.dragging = false;

      if (this.isValidLink) {
        this.emitAddEvent();
      }
    },
    emitAddEvent: function emitAddEvent() {
      this.$emit('add', this.rubberBandRect);
    }
  },

  computed: {
    isValidLink: function isValidLink() {
      var _rubberBandRect = this.rubberBandRect,
          width = _rubberBandRect.width,
          height = _rubberBandRect.height;

      return width * height >= this.min;
    },
    rubberBandRect: function rubberBandRect() {
      var bounds = this.bounds;


      var x = Math.min(bounds.x1, bounds.x2);
      var y = Math.min(bounds.y1, bounds.y2);
      var width = Math.abs(bounds.x1 - bounds.x2);
      var height = Math.abs(bounds.y1 - bounds.y2);

      return { x: x, y: y, width: width, height: height };
    },
    rubberBandStyles: function rubberBandStyles() {
      var _rubberBandRect2 = this.rubberBandRect,
          x = _rubberBandRect2.x,
          y = _rubberBandRect2.y,
          width = _rubberBandRect2.width,
          height = _rubberBandRect2.height;


      return {
        transform: "translate(" + x + "px, " + y + "px)",
        width: width + "px",
        height: height + "px"
      };
    }
  }
};

function install(Vue) {
  Vue.component('rubberband', Rubberband);
}

/* global window */
if (typeof window !== 'undefined' && typeof window.Vue === 'function') {
  window.Vue.use(install);
}

return install;

})));