@arche-mc2/arche-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
182 lines • 9.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var classnames = require("classnames");
var typestyle_1 = require("typestyle");
var CanvasState_1 = require("./CanvasState");
var UpButton_1 = require("../../Inputs/Button/UpButton");
var ButtonGroup_1 = require("../../Containers/ButtonGroup");
var Toggle_1 = require("../../Inputs/Toggle");
var Label_1 = 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) {
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 + "_" + 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 = typestyle_1.style({});
var CanvasStyle = typestyle_1.style({
border: "1px solid #111",
borderRadius: "4px"
});
var _a = this.props, onChange = _a.onChange, src = _a.src, shapes = _a.shapes, others = tslib_1.__rest(_a, ["onChange", "src", "shapes"]);
return (React.createElement("div", { className: classnames(WrapperStyle, 'up-drawing') },
this.props.displayActions &&
React.createElement("div", { className: "up-canvas-actions" },
React.createElement(Label_1.default, { text: "Zones : " },
React.createElement(Toggle_1.default, { value: true, onChange: this.toggleActivationShape, checked: this.state.activationShape === true })),
React.createElement(ButtonGroup_1.default, null,
React.createElement(UpButton_1.default, { onClick: this.zoomIn, width: 'icon', actionType: "zoom-in", tooltip: "Zoom avant" }),
React.createElement(UpButton_1.default, { onClick: this.zoomOut, width: 'icon', actionType: "zoom-out", tooltip: "Zoom arrière" }),
React.createElement(UpButton_1.default, { onClick: this.zoomNormal, width: 'icon', actionType: "maximize", tooltip: "Zoom normal" }),
this.props.onRotate &&
React.createElement(UpButton_1.default, { onClick: this.rotate, width: 'icon', actionType: "rotate-cw", tooltip: "Appliquer une rotation de l\'image de 90° vers la droite" }),
React.createElement(UpButton_1.default, { onClick: this.open, width: 'icon', actionType: "external-link", tooltip: "Ouvrir l\'image dans une nouvelle fenêtre" }))),
React.createElement(ContextMenu_1.UpContextMenuTrigger, { key: this.contextKey, id: this.contextKey, holdToDisplay: 1000 },
React.createElement("canvas", { width: "100%", height: "500px", className: CanvasStyle, ref: this.setCanvas }, "Votre navigateur ne supporte pas les fonctions d'\u00E9dition d'image.")),
React.createElement(ContextMenu_1.UpContextMenu, { key: "ContextMenu_" + this.contextKey, id: this.contextKey },
React.createElement(ContextMenu_1.UpContextMenuItem, { onClick: this.crop, data: { action: 'up-crop' } }, "Ajouter la s\u00E9lection"),
React.createElement(ContextMenu_1.UpContextMenuItem, { onClick: this.cropAll, data: { action: 'up-crop-all' } }, "Ajouter tous"),
React.createElement(ContextMenu_1.UpContextMenuItemDivider, { size: 2 }),
React.createElement(ContextMenu_1.UpContextMenuItem, { onClick: this.del, data: { action: 'up-del' } }, "Supprimer"),
React.createElement(ContextMenu_1.UpContextMenuItem, { onClick: this.delAll, data: { action: 'up-del-all' } }, "Tout supprimer"))));
};
UpDrawing.defaultProps = {
src: "",
activationShape: true,
displayActions: true,
disabled: false
};
return UpDrawing;
}(React.Component));
exports.default = UpDrawing;
;
//# sourceMappingURL=UpDrawing.js.map