124 lines
4.0 KiB
JavaScript
124 lines
4.0 KiB
JavaScript
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var config = require('./config');
|
|
var util = require('./util');
|
|
|
|
var DragHandle = function (handler) {
|
|
var _currentAxis;
|
|
var _dragHandle;
|
|
var _movedHandle;
|
|
|
|
// Event declarations
|
|
var events = {
|
|
mouseDown: function () {
|
|
_dragHandle = true;
|
|
|
|
_currentAxis = this.axis;
|
|
handler.canvas.getImage().trigger('mousedown');
|
|
},
|
|
mouseUp: function () {
|
|
if (!_dragHandle) {
|
|
return;
|
|
}
|
|
|
|
if (!_movedHandle) {
|
|
$(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
|
|
}
|
|
|
|
_dragHandle = false;
|
|
_movedHandle = false;
|
|
_currentAxis = null;
|
|
util.MouseMetrics.deletePreviousMouseData();
|
|
handler.canvas.getImage().trigger('mouseup');
|
|
},
|
|
mouseMove: function (e) {
|
|
if (!_dragHandle) {
|
|
return;
|
|
}
|
|
|
|
//Android devices have different structure of TouchEvent so e.e.touches[0] element uses in this case
|
|
var pageX = (typeof e.e.pageX !== 'undefined' ? e.e.pageX : e.e.touches[0].pageX);
|
|
var pageY = (typeof e.e.pageY !== 'undefined' ? e.e.pageY : e.e.touches[0].pageY);
|
|
|
|
// We're using a polyfill to calculate moude/touch movement if the browser/device
|
|
// does not support movementX/movementY.
|
|
var previousMouseData = util.MouseMetrics.previousMouseData;
|
|
var movement = {
|
|
x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? pageX - previousMouseData.x : 0),
|
|
y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? pageY - previousMouseData.y : 0)
|
|
};
|
|
util.MouseMetrics.setPreviousMouseData({x: pageX, y: pageY});
|
|
_movedHandle = true;
|
|
|
|
if (_currentAxis === 'x') {
|
|
handler.canvas.getImage().left -= movement.x;
|
|
} else {
|
|
handler.canvas.getImage().top -= movement.y;
|
|
}
|
|
// Trigger moving for image, to stay within bounds
|
|
handler.canvas.getImage().setCoords().trigger('moving');
|
|
handler.canvas.renderAll();
|
|
}
|
|
};
|
|
|
|
function getRect(text, width) {
|
|
var txt = new fabric.Text(text, config.dragHandle.text);
|
|
var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
|
|
width: width,
|
|
}));
|
|
|
|
return new fabric.Group([rect, txt]).set({
|
|
evented: false,
|
|
});
|
|
}
|
|
|
|
this.getCanvas = function () {
|
|
return handler.canvas;
|
|
};
|
|
|
|
this.getHandles = function () {
|
|
if (!this.__handles) {
|
|
return [];
|
|
}
|
|
|
|
return [].concat(this.__handles.x, this.__handles.y);
|
|
};
|
|
|
|
this.setHandlePosition = function() {
|
|
this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
|
|
this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
|
|
return this;
|
|
};
|
|
|
|
this.init = function () {
|
|
var viewportData = this.getCanvas().getViewport().getData();
|
|
var tracks = handler.getTracks();
|
|
|
|
if (this.__handles) {
|
|
this.getCanvas().remove(this.__handles.x);
|
|
this.getCanvas().remove(this.__handles.y);
|
|
}
|
|
|
|
this.__handles = {
|
|
x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
|
|
y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
|
|
};
|
|
|
|
this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
|
|
this.__handles.y.addTo(this.getCanvas())
|
|
.setAngle(-90)
|
|
.centerV().set({ left: tracks.y.left })
|
|
.setCoords();
|
|
|
|
this.getCanvas()
|
|
.on('mouse:move', events.mouseMove)
|
|
.on('mouse:up', events.mouseUp);
|
|
|
|
tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
|
|
tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
|
|
};
|
|
};
|
|
|
|
module.exports = DragHandle;
|