@betterthings/scissors/es/scissors-state.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 Immutable from 'immutable';
import * as ReactCrop from 'react-image-crop';
var isPointInRect = function (point, rect) {
    var xInRect = point.x >= rect.x && point.x <= rect.x + rect.width;
    var yInRect = point.y >= rect.y && point.y <= rect.y + rect.height;
    return xInRect && yInRect;
};
var ScissorsState = /** @class */ (function (_super) {
    __extends(ScissorsState, _super);
    function ScissorsState(props) {
        var _this = this;
        props ? _this = _super.call(this, props) || this : _this = _super.call(this) || this;
        return _this;
    }
    ScissorsState.prototype.isValid = function () {
        if (this.focus && this.crop) {
            return isPointInRect(this.focus, this.crop);
        }
        return true;
    };
    ScissorsState.prototype.setImage = function (image) {
        var newState = this.set('image', image);
        if (!this.crop) {
            newState = newState.setAspect(newState.aspect);
        }
        return newState;
    };
    ScissorsState.prototype.updateRelativeCrop = function (crop) {
        if (!this.image) {
            return this;
        }
        var newState = this.set('crop', {
            x: (crop.x * this.image.width) / 100,
            y: (crop.y * this.image.height) / 100,
            width: ((crop.width || 0) * this.image.width) / 100,
            height: ((crop.height || 0) * this.image.height) / 100,
        });
        if (!newState.isValid()) {
            throw new Error('invalid state');
        }
        return newState;
    };
    ScissorsState.prototype.getRelativeCrop = function () {
        if (!this.image || !this.crop) {
            return null;
        }
        return {
            x: (this.crop.x / this.image.width) * 100,
            y: (this.crop.y / this.image.height) * 100,
            width: (this.crop.width / this.image.width) * 100,
            height: (this.crop.height / this.image.height) * 100,
            aspect: this.aspect,
        };
    };
    ScissorsState.prototype.getScale = function (reference) {
        if (!this.image) {
            return null;
        }
        return {
            x: this.image.width / reference.width,
            y: this.image.height / reference.height,
        };
    };
    ScissorsState.prototype.getCropCenter = function () {
        if (!this.crop) {
            return null;
        }
        return {
            x: this.crop.x + this.crop.width / 2,
            y: this.crop.y + this.crop.height / 2,
        };
    };
    ScissorsState.prototype.setFocus = function (focus) {
        var newState = this.set('focus', focus);
        if (!newState.isValid()) {
            throw new Error('invalid state');
        }
        return newState;
    };
    ScissorsState.prototype.getRelativeFocus = function () {
        if (!this.image || !this.focus) {
            return null;
        }
        return {
            x: (this.focus.x / this.image.width) * 100,
            y: (this.focus.y / this.image.height) * 100,
        };
    };
    ScissorsState.prototype.setImageUrl = function (imageUrl) {
        return this.merge({
            imageUrl: imageUrl,
            image: null,
            crop: null,
            focus: null,
        });
    };
    ScissorsState.prototype.setAspect = function (aspect) {
        var newState = this.merge({
            aspect: aspect,
            crop: null,
            focus: null,
        });
        if (newState.image) {
            if (!aspect) {
                newState = newState.set('crop', {
                    x: 0,
                    y: 0,
                    height: newState.image.height,
                    width: newState.image.width,
                });
            }
            else {
                try {
                    newState = newState.updateRelativeCrop(ReactCrop.makeAspectCrop({
                        x: 0,
                        y: 0,
                        width: 100,
                        aspect: aspect,
                    }, newState.image.width / newState.image.height));
                }
                catch (err) {
                    // invalid crop
                }
            }
        }
        return newState;
    };
    return ScissorsState;
}(Immutable.Record({
    imageUrl: '',
    image: null,
    crop: null,
    focus: null,
    aspect: 0,
})));
export { ScissorsState };