@up-group-ui/react-controls
Version:
Up shared react controls
281 lines • 12.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Shape_1 = (0, tslib_1.__importDefault)(require("./Shape"));
var jquery_1 = (0, tslib_1.__importDefault)(require("jquery"));
var CanvasState = (function () {
function CanvasState(canvas) {
var _this = this;
this.registerListeners = function () {
var myState = _this;
var canvas = _this.canvas;
canvas.addEventListener('selectstart', function (e) {
e.preventDefault();
return false;
}, false);
canvas.addEventListener('mousedown', function (e) {
if (myState.imageObj !== false && myState.imageObj.width + 2 * myState.border != canvas.width) {
myState.dragging = false;
myState.drawing = false;
if (myState.alert == false) {
alert("La sélection de zone n'est possible que si le zoom est désactivé !");
myState.alert = true;
}
}
else {
var mouse = myState.getMouse(e);
var mx = mouse.x;
var my = mouse.y;
var shapes = myState.shapes;
var l = shapes.length;
for (var i = l - 1; i >= 0; i--) {
if (shapes[i].contains(mx, my, myState.scale)) {
var mySel = shapes[i];
myState.dragoffx = mx - mySel.x;
myState.dragoffy = my - mySel.y;
myState.dragging = true;
myState.selection = mySel;
console.log('Selection : ');
console.log(myState.selection);
myState.valid = false;
return;
}
}
if (myState.selection) {
myState.selection = null;
console.log('Selection : ');
console.log(myState.selection);
myState.valid = false;
}
myState.drawing = true;
myState.drawingoffx = mx;
myState.drawingoffy = my;
}
}, true);
canvas.addEventListener('mousemove', function (e) {
if (myState.dragging) {
var mouse = myState.getMouse(e);
myState.selection.x = mouse.x - myState.dragoffx;
myState.selection.y = mouse.y - myState.dragoffy;
myState.valid = false;
}
else if (myState.drawing) {
var mouse = myState.getMouse(e);
var _h = Math.abs(mouse.y - myState.drawingoffy);
var _w = Math.abs(mouse.x - myState.drawingoffx);
var _shape = new Shape_1.default(myState.drawingoffx, myState.drawingoffy, _w, _h, 'rgba(0,255,0,.6)');
_shape.temp = true;
myState.addShape(_shape);
}
}, true);
canvas.addEventListener('mouseup', function (e) {
if (myState.drawing === true) {
var mouse = myState.getMouse(e);
var _h = Math.abs(mouse.y - myState.drawingoffy);
var _w = Math.abs(mouse.x - myState.drawingoffx);
if (_w > 120 && _h > 17) {
var _shape = new Shape_1.default(myState.drawingoffx, myState.drawingoffy, _w, _h, mouse.y, false);
myState.addShape(_shape);
}
else {
myState.removeTempShape();
}
myState.valid = false;
}
myState.dragging = false;
myState.drawing = false;
}, true);
};
this.removeTempShape = function () {
var _shapes = [];
for (var i in _this.shapes) {
if (_this.shapes[i].temp !== true) {
_shapes.push(_this.shapes[i]);
}
}
_this.shapes = _shapes;
};
this.addShape = function (shape) {
var _shapes = [];
var _nextRef = 1;
_this.shapes = _this.shapes.sort(function (a, b) {
if (a.ref < b.ref) {
return -1;
}
else if (a.ref > b.ref) {
return 1;
}
else {
return 0;
}
});
for (var i in _this.shapes) {
if (_this.shapes[i].temp !== true) {
var _ref = _this.shapes[i].ref;
if (_nextRef < _ref) {
break;
}
else if (_ref >= _nextRef) {
_nextRef = _ref + 1;
}
}
}
for (var i in _this.shapes) {
if (_this.shapes[i].temp !== true) {
_shapes.push(_this.shapes[i]);
}
}
_this.shapes = _shapes;
shape.ref = _nextRef;
if (_this.onAddShape && shape.temp === false) {
_this.onAddShape(shape);
}
_this.shapes.push(shape);
if (shape.temp !== true) {
}
_this.selection = null;
console.log('On AddShape -> Selection : ');
console.log(_this.selection);
_this.valid = false;
};
this.cropShape = function (shape) {
var left = shape.x, top = shape.y, width = shape.w, height = shape.h;
var crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
try {
crop_canvas
.getContext('2d')
.drawImage(_this.imageObj, left - _this.border, top - _this.border, width, height, 0, 0, width, height);
return crop_canvas.toDataURL('image/png');
}
catch (error) {
alert('La sélection de zone ' + shape.ref + " dépasse les limites de l'ordonnance !");
return null;
}
};
this.removeShape = function (shape) {
var _shapes = [];
for (var i in _this.shapes) {
if (!(shape.x == _this.shapes[i].x &&
shape.y == _this.shapes[i].y &&
shape.w == _this.shapes[i].w &&
shape.h == _this.shapes[i].h)) {
_shapes.push(_this.shapes[i]);
}
}
_this.shapes = _shapes;
_this.selection = null;
console.log('On RemoveShape -> Selection : ');
console.log(_this.selection);
_this.valid = false;
};
this.clear = function () {
_this.ctx.clearRect(0, 0, _this.width, _this.height);
};
this.drawImage = function () {
var WIDTH = _this.imageObj.width + 2 * _this.border;
var HEIGHT = _this.imageObj.height + 2 * _this.border;
_this.canvas.width = WIDTH * _this.scale;
_this.canvas.height = HEIGHT * _this.scale;
_this.canvas.getContext('2d').scale(_this.scale, _this.scale);
_this.width = _this.canvas.width;
_this.height = _this.canvas.height;
};
this.draw = function () {
if (!_this.valid) {
var ctx = _this.ctx;
_this.drawImage();
var shapes = _this.shapes;
_this.clear();
if (_this.imageObj !== false && _this.imageObj != undefined) {
if (_this.border) {
ctx.stroke();
ctx.rect(0, 0, _this.width, _this.height);
ctx.strokeStyle = 'white';
ctx.lineWidth = _this.border;
}
ctx.drawImage(_this.imageObj, _this.border, _this.border);
}
var l = shapes.length;
var _oneShapeDraw = false;
for (var i = 0; i < l; i++) {
var shape = shapes[i];
if (shape == undefined ||
shape.hide ||
typeof shape.draw != 'function' ||
shape.x > _this.width ||
shape.y > _this.height ||
shape.x + shape.w < 0 ||
shape.y + shape.h < 0) {
continue;
}
shape.draw(ctx);
_oneShapeDraw = true;
}
if (_oneShapeDraw && _this.selection != null) {
ctx.strokeStyle = _this.selectionColor;
ctx.lineWidth = _this.selectionWidth;
var mySel = _this.selection;
ctx.strokeRect(mySel.x, mySel.y, mySel.w, mySel.h);
}
_this.valid = true;
}
};
this.getMouse = function (e) {
var element = _this.canvas, offsetX = 0, offsetY = 0;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
offsetX += _this.stylePaddingLeft + _this.styleBorderLeft + _this.htmlLeft;
offsetY += _this.stylePaddingTop + _this.styleBorderTop + _this.htmlTop;
var scrollY = 0;
if (_this.handleParentScroll === true) {
element = _this.canvas;
do {
scrollY = (0, jquery_1.default)(element).scrollTop();
} while (scrollY == 0 && (element = element.parentNode));
}
var mx = e.pageX - offsetX;
var my = e.pageY + scrollY - offsetY;
return { x: mx, y: my };
};
this.canvas = canvas;
this.width = canvas.width;
this.height = canvas.height;
this.ctx = canvas.getContext('2d');
var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;
if (document.defaultView && document.defaultView.getComputedStyle) {
this.stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
this.stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
this.styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
this.styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
}
this.border = 1;
var html = document.body.parentElement;
this.htmlTop = html.offsetTop;
this.htmlLeft = html.offsetLeft;
this.handleParentScroll = false;
this.valid = false;
this.shapes = [];
this.dragging = false;
this.drawing = false;
this.selection = null;
this.dragoffx = 0;
this.dragoffy = 0;
var myState = this;
myState.alert = false;
this.selectionColor = '#CC0000';
this.selectionWidth = 2;
this.interval = 10;
setInterval(function () {
myState.draw();
}, myState.interval);
}
return CanvasState;
}());
exports.default = CanvasState;
//# sourceMappingURL=CanvasState.js.map