Files
image-editor/src/Draggable.js
T

76 lines
2.1 KiB
JavaScript

'use strict';
/* globals $ */
var util = require('./util');
/**
* @param {fabric.Image} img
* @param {fabric.Rect} boundingRect
*/
function Draggable(img, boundingRect) {
var _bounds = boundingRect;
var _img = img;
/**
* Triggers when object is moved
*/
function onMove() {
/*jshint validthis: true */
if (!this.__dragging) {
//Trigger start-drag on first 'moving' trigger.
$(document).trigger('PIE:start-drag');
this.__dragging = true;
}
this.canvas.disableScroll();
util.setPositionInside(this, _bounds);
}
this.onMouseUp = function () {
if (this.__dragging) {
this.__dragged = true;
this.__dragging = false;
this.canvas.getImageData().setCropData();
if (!util.isMobile()) {
this.canvas.enableScroll();
}
// Trigger event to tell the image has been dragged.
$(document).trigger('PIE:dragged');
}
if (this.__dragged) {
// Always set aperture transparency to false even if image hasn't been dragged this click.
this.canvas.getApertures().setTransparent(false);
}
this.canvas.renderAll();
};
// Attach onMove event to image
_img.on('moving', onMove);
// Attach mouse up event to canvas, can't do mouse up events on canvas objects.
_img.canvas.on('mouse:up', this.onMouseUp.bind(_img));
/**
* @param {fabric.Rect} localBoundingRect
* @return {Draggable}
*/
this.enable = function (localBoundingRect) {
if (localBoundingRect) {
_bounds = localBoundingRect;
}
// @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
if (_img.canvas.getViewport().getData().axis === 'x') {
_bounds.top.min = _bounds.top.max = _img.top;
} else {
_bounds.left.min = _bounds.left.max = _img.left;
}
_img.lockMovementX = _img.lockMovementY = false;
_img.selectable = true;
_img.hoverCursor = 'move';
return this;
};
}
module.exports = Draggable;