@betterthings/scissors/es/scissors.js

handy image cropper with focus point editor

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import * as ReactCrop from 'react-image-crop';
var Scissors = /** @class */ (function (_super) {
    __extends(Scissors, _super);
    function Scissors() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.imageContainer = null;
        _this.focusPoint = null;
        _this.lastDragPosition = null;
        _this.onCropChange = function (crop) {
            try {
                _this.props.onChange(_this.props.scissors.updateRelativeCrop(crop));
            }
            catch (err) {
                // invalid crop
            }
        };
        _this.onImageLoaded = function (image) {
            _this.props.onChange(_this.props.scissors.setImage({
                height: image.naturalHeight,
                width: image.naturalWidth,
            }));
        };
        _this.onFocalDragStart = function (e) {
            _this.lastDragPosition = { x: e.clientX, y: e.clientY };
            document.addEventListener('mousemove', _this.onFocalDrag);
            document.addEventListener('mouseup', _this.onFocalDragEnd);
        };
        _this.onFocalDrag = function (e) {
            if (_this.props.scissors.focus && _this.imageContainer) {
                var scale = _this.props.scissors.getScale({
                    width: _this.imageContainer.clientWidth,
                    height: _this.imageContainer.clientHeight,
                });
                if (scale) {
                    try {
                        var _a = _this.lastDragPosition, x = _a.x, y = _a.y;
                        _this.props.onChange(_this.props.scissors.setFocus({
                            x: _this.props.scissors.focus.x + (e.clientX - x) * scale.x,
                            y: _this.props.scissors.focus.y + (e.clientY - y) * scale.y,
                        }));
                        // only update the last drag position if the state accepted it
                        _this.lastDragPosition = { x: e.clientX, y: e.clientY };
                    }
                    catch (err) {
                        // invalid focus
                    }
                }
            }
        };
        _this.onFocalDragEnd = function (e) {
            _this.lastDragPosition = null;
            document.removeEventListener('mousemove', _this.onFocalDrag);
            document.removeEventListener('mouseup', _this.onFocalDragEnd);
        };
        return _this;
    }
    Scissors.prototype.getFocusPointStyle = function () {
        var relativeFocus = this.props.scissors.getRelativeFocus();
        if (relativeFocus) {
            return {
                left: relativeFocus.x + "%",
                top: relativeFocus.y + "%",
                display: 'block',
            };
        }
        return { display: 'none' };
    };
    Scissors.prototype.componentDidMount = function () {
        this.focusPoint.addEventListener('mousedown', this.onFocalDragStart);
    };
    Scissors.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { className: "bt-scissors" },
            React.createElement("div", { ref: function (el) {
                    _this.imageContainer = el;
                }, style: { position: 'relative' } },
                React.createElement("div", { className: "bt-scissors__focal-point", style: this.getFocusPointStyle(), ref: function (el) {
                        _this.focusPoint = el;
                    } }),
                React.createElement(ReactCrop, { src: this.props.scissors.imageUrl, onImageLoaded: this.onImageLoaded, crop: this.props.scissors.getRelativeCrop(), onChange: this.onCropChange, keepSelection: this.props.keepSelection, disabled: this.props.disabled }))));
    };
    return Scissors;
}(React.Component));
export { Scissors };