@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
268 lines • 12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Shape_1 = require("./Shape");
var $ = 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 crop_canvas, left = shape.x, top = shape.y, width = shape.w, height = shape.h;
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, mx, my;
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 = $(element).scrollTop();
} while (scrollY == 0 && (element = element.parentNode));
}
mx = e.pageX - offsetX;
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