@up-group-ui/react-controls
Version:
Up shared react controls
167 lines • 9.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var CanvasState_1 = (0, tslib_1.__importDefault)(require("./CanvasState"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Button/UpButton"));
var ButtonGroup_1 = (0, tslib_1.__importDefault)(require("../../Containers/ButtonGroup"));
var Toggle_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Toggle"));
var Label_1 = (0, tslib_1.__importDefault)(require("../../Display/Label"));
var ContextMenu_1 = require("../../Display/ContextMenu");
var helpers_1 = require("../../../Common/utils/helpers");
var DRAWING_MENU_TYPE = 'DRAWING_MENU_TYPE';
var UpDrawing = (function (_super) {
(0, tslib_1.__extends)(UpDrawing, _super);
function UpDrawing(p, c) {
var _this = _super.call(this, p, c) || this;
_this.setCanvas = function (canvas) {
if (_this.canvas == null) {
_this.canvas = canvas;
var ctx = _this.canvas.getContext('2d');
_this.canvasState = new CanvasState_1.default(canvas);
if (_this.state.src) {
_this.canvasState.scale = _this.state.scale;
_this.canvasState.imageObj = new Image();
_this.canvasState.imageObj.crossOrigin = '';
var self_1 = _this;
_this.canvasState.imageObj.onload = function () {
self_1.canvasState.valid = false;
self_1.canvasState.draw();
};
_this.canvasState.imageObj.src = _this.state.src;
_this.canvasState.registerListeners();
}
}
};
_this.zoomIn = function (event) {
var self = _this;
_this.setState({ scale: _this.state.scale + 0.2 }, function () {
self.canvasState.scale = _this.state.scale;
self.canvasState.valid = false;
});
};
_this.zoomOut = function (event) {
var self = _this;
_this.setState({ scale: _this.state.scale - 0.2 }, function () {
self.canvasState.scale = _this.state.scale;
self.canvasState.valid = false;
});
};
_this.zoomNormal = function (event) {
var self = _this;
_this.setState({ scale: 1 }, function () {
self.canvasState.scale = _this.state.scale;
self.canvasState.valid = false;
});
};
_this.rotate = function (event) {
if (typeof _this.props.onRotate == 'function') {
var callback = function (result) {
};
_this.props.onRotate(callback);
}
};
_this.open = function () {
var _windowWidth = _this.canvas.width;
var _windowHeight = _this.canvas.height;
var _windowArgs = 'scrollbars=yes,resizable=yes, width=' + _windowWidth + ', height=' + _windowHeight;
var _html = '<p>' + "<img style='height: auto;' class='img-rounded thumb' src='" + _this.state.src + "' />" + '</p>';
var _window = window.open('', '', _windowArgs);
var _document = _window.document.open('text/html', 'replace');
_document.write('<!DOCTYPE html><html><body>' + _html + '</body></html>');
_document.close();
};
_this.crop = function (event) {
console.log(_this.canvasState);
console.log(_this.canvasState.selection);
if (_this.canvasState.selection) {
var _imageCropped = _this.canvasState.cropShape(_this.canvasState.selection);
if (_imageCropped != null) {
var _data = {
dataURL: _imageCropped,
shape: _this.canvasState.selection,
};
if (_this.props.onCrop) {
_this.props.onCrop(_data);
}
}
}
};
_this.cropAll = function (event) {
var _shapesChecked = true;
for (var i in _this.canvasState.shapes) {
var _shape = _this.canvasState.shapes[i];
var _imageCropped = _this.canvasState.cropShape(_shape);
if (_imageCropped == null) {
_shapesChecked = false;
}
}
if (_shapesChecked) {
for (var i in _this.canvasState.shapes) {
var _shape = _this.canvasState.shapes[i];
var _imageCropped = _this.canvasState.cropShape(_shape);
if (_imageCropped != null) {
var _data = {
dataURL: _imageCropped,
shape: _shape,
};
_this.props.onCrop(_data);
}
}
}
};
_this.del = function (event) {
if (_this.canvasState.selection && _this.props.onDel) {
_this.props.onDel(_this.canvasState.selection);
}
};
_this.delAll = function () {
if (_this.canvasState.selection && _this.props.onDelAll) {
_this.props.onDelAll(_this.canvasState.shapes);
}
};
_this.toggleActivationShape = function (value) {
_this.setState({ activationShape: value }, function () {
_this.canvasState.shapes.map(function (shape) {
shape.hide = !value;
});
_this.canvasState.valid = false;
});
};
_this.state = {
src: p.src,
zones: p.zones || [],
activationShape: true,
scale: 1,
};
_this.contextKey = DRAWING_MENU_TYPE + "_" + (0, helpers_1.generateUniqueId)();
return _this;
}
UpDrawing.prototype.componentWillReceiveProps = function (nextProps) {
var _newState = {};
if (nextProps.src !== this.props.src) {
_newState.src == nextProps.src;
}
};
UpDrawing.prototype.render = function () {
var WrapperStyle = (0, typestyle_1.style)({});
var CanvasStyle = (0, typestyle_1.style)({
border: '1px solid #111',
borderRadius: '4px',
});
var _a = this.props, onChange = _a.onChange, src = _a.src, shapes = _a.shapes, others = (0, tslib_1.__rest)(_a, ["onChange", "src", "shapes"]);
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(WrapperStyle, 'up-drawing') }, { children: [this.props.displayActions && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-canvas-actions" }, { children: [(0, jsx_runtime_1.jsx)(Label_1.default, (0, tslib_1.__assign)({ text: "Zones : " }, { children: (0, jsx_runtime_1.jsx)(Toggle_1.default, { value: true, onChange: this.toggleActivationShape, checked: this.state.activationShape === true }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { children: [(0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.zoomIn, width: 'icon', actionType: 'zoom-in', tooltip: 'Zoom avant' }, void 0), (0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.zoomOut, width: 'icon', actionType: 'zoom-out', tooltip: 'Zoom arrière' }, void 0), (0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.zoomNormal, width: 'icon', actionType: 'zoom-normal', tooltip: 'Zoom normal' }, void 0), this.props.onRotate && ((0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.rotate, width: 'icon', actionType: 'image-rotate-right', tooltip: "Appliquer une rotation de l'image de 90° vers la droite" }, void 0)), (0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.open, width: 'icon', actionType: 'open', tooltip: "Ouvrir l'image dans une nouvelle fenêtre" }, void 0)] }, void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuTrigger, (0, tslib_1.__assign)({ id: this.contextKey, holdToDisplay: 1000 }, { children: (0, jsx_runtime_1.jsx)("canvas", (0, tslib_1.__assign)({ width: '100%', height: '500px', className: CanvasStyle, ref: this.setCanvas }, { children: "Votre navigateur ne supporte pas les fonctions d'\u00E9dition d'image." }), void 0) }), this.contextKey), (0, jsx_runtime_1.jsxs)(ContextMenu_1.UpContextMenu, (0, tslib_1.__assign)({ id: this.contextKey }, { children: [(0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: this.crop, data: { action: 'up-crop' } }, { children: "Ajouter la s\u00E9lection" }), void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: this.cropAll, data: { action: 'up-crop-all' } }, { children: "Ajouter tous" }), void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItemDivider, { size: 2 }, void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: this.del, data: { action: 'up-del' } }, { children: "Supprimer" }), void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: this.delAll, data: { action: 'up-del-all' } }, { children: "Tout supprimer" }), void 0)] }), "ContextMenu_" + this.contextKey)] }), void 0));
};
UpDrawing.defaultProps = {
src: '',
activationShape: true,
displayActions: true,
disabled: false,
};
return UpDrawing;
}(react_1.default.Component));
exports.default = UpDrawing;
//# sourceMappingURL=UpDrawing.js.map