advanced-cropper
Version:
The core of the advanced cropper libraries family
472 lines (467 loc) • 26 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var index = require('../utils/index.js');
var helpers = require('../service/helpers.js');
var copyState = require('../state/copyState.js');
var setCoordinates = require('../state/setCoordinates.js');
var setVisibleArea = require('../state/setVisibleArea.js');
var createState = require('../state/createState.js');
var moveCoordinates = require('../state/moveCoordinates.js');
var resizeCoordinates = require('../state/resizeCoordinates.js');
var setBoundary = require('../state/setBoundary.js');
var transformImage = require('../state/transformImage.js');
var reconcileState = require('../state/reconcileState.js');
var normalize = require('../service/normalize.js');
var interactions = require('../service/interactions.js');
function runCallback(callback, getInstance) {
if (callback && getInstance) {
var instance = getInstance();
if (instance) {
callback(instance);
}
}
}
function runCallbacks(callbacks, getInstance) {
callbacks.forEach(function (callback) {
runCallback(callback, getInstance);
});
}
var AbstractCropperInstance = /** @class */ (function () {
function AbstractCropperInstance() {
var _this = this;
this.getTransitions = function () {
var data = _this.getData();
var transitions = _this.getProps().transitions;
return tslib.__assign(tslib.__assign({}, index.getOptions(transitions, {
timingFunction: 'ease-in-out',
duration: 350,
})), { active: data.transitions });
};
this.getInteractions = function () {
var interactions = _this.getData().interactions;
return index.deepClone(interactions);
};
this.hasInteractions = function () {
var interactions$1 = _this.getData().interactions;
return interactions.hasInteractions(interactions$1);
};
this.startTransitions = function () {
var _a = _this.getProps(), onTransitionsStart = _a.onTransitionsStart, onUpdate = _a.onUpdate, getInstance = _a.getInstance;
var _b = _this.getData(), transitions = _b.transitions, data = tslib.__rest(_b, ["transitions"]);
_this.setData(tslib.__assign(tslib.__assign({}, data), { transitions: true }));
if (!transitions) {
runCallbacks([onTransitionsStart, onUpdate], getInstance);
}
_this.endTransitions();
};
this.endTransitions = index.debounce(function () {
var _a = _this.getProps(), onTransitionsEnd = _a.onTransitionsEnd, onUpdate = _a.onUpdate, getInstance = _a.getInstance;
_this.setData(tslib.__assign(tslib.__assign({}, _this.getData()), { transitions: false }));
runCallbacks([onTransitionsEnd, onUpdate], getInstance);
}, function () {
return _this.getTransitions().duration;
});
this.applyPostProcess = function (action, state) {
var _a = _this.getProps(), settings = _a.settings, postProcess = _a.postProcess;
var name = action.name, _b = action.interaction, interaction = _b === void 0 ? false : _b, _c = action.transitions, transitions = _c === void 0 ? false : _c, _d = action.immediately, immediately = _d === void 0 ? false : _d;
var preparedAction = {
name: name,
interaction: interaction,
transitions: transitions,
immediately: immediately,
};
if (index.isArray(postProcess)) {
return postProcess.reduce(function (processedState, p) { return p(processedState, settings, preparedAction); }, state);
}
else if (index.isFunction(postProcess)) {
return postProcess(state, settings, preparedAction);
}
else {
return state;
}
};
this.updateState = function (modifier, options, callbacks) {
if (options === void 0) { options = {}; }
if (callbacks === void 0) { callbacks = []; }
var _a = options.transitions, transitions = _a === void 0 ? false : _a;
var _b = _this.getProps(), onTransitionsStart = _b.onTransitionsStart, getInstance = _b.getInstance, onChange = _b.onChange, onUpdate = _b.onUpdate, settings = _b.settings;
var previousData = _this.getData();
var state = index.isFunction(modifier) ? modifier(previousData.state, settings) : modifier;
var tolerance = state ? 1e-3 * helpers.getCoefficient(state) : 1e-3;
var somethingChanged = !index.deepCompare(previousData.state, state, tolerance);
var affectTransitionProperties = [
'coordinates',
'boundary',
'visibleArea',
'imageSize',
'transforms',
].some(function (property) { var _a; return !index.deepCompare((_a = previousData.state) === null || _a === void 0 ? void 0 : _a[property], state === null || state === void 0 ? void 0 : state[property], tolerance); });
var currentData = previousData;
if (somethingChanged) {
if (transitions && affectTransitionProperties) {
_this.endTransitions();
}
currentData = tslib.__assign(tslib.__assign({}, currentData), { state: copyState.copyState(state), transitions: transitions && affectTransitionProperties });
_this.setData(currentData);
runCallback(onChange, getInstance);
}
if (currentData.transitions && !previousData.transitions) {
runCallback(onTransitionsStart, getInstance);
}
runCallbacks(tslib.__spreadArrays(callbacks, [onUpdate]), getInstance);
};
this.setInteractions = function (interactions$1) {
var _a = _this.getProps(), onInteractionStart = _a.onInteractionStart, onInteractionEnd = _a.onInteractionEnd, getInstance = _a.getInstance;
var previousInteractions = _this.getInteractions();
var currentInteractions = tslib.__assign(tslib.__assign({}, previousInteractions), interactions$1);
if (!index.deepCompare(previousInteractions, currentInteractions)) {
_this.setData(tslib.__assign(tslib.__assign({}, _this.getData()), { interactions: currentInteractions }));
}
if (interactions.hasInteractions(previousInteractions) !== interactions.hasInteractions(currentInteractions)) {
if (!interactions.hasInteractions(previousInteractions)) {
runCallback(onInteractionStart, getInstance);
}
else {
var state_1 = _this.getData().state;
_this.updateState(function () {
return state_1 &&
_this.applyPostProcess({
name: 'interactionEnd',
immediately: true,
transitions: true,
}, state_1);
}, {
transitions: true,
}, [onInteractionEnd]);
}
}
};
this.resetState = function (boundary, image) {
_this.updateState(_this.createDefaultState(boundary, image));
};
this.clear = function () {
_this.updateState(null);
};
this.reconcileState = function (options) {
if (options === void 0) { options = {}; }
var _a = _this.getProps(), reconcileStateAlgorithm = _a.reconcileStateAlgorithm, settings = _a.settings;
var state = _this.getData().state;
var _b = options.transitions, transitions = _b === void 0 ? false : _b;
if (state && !helpers.isConsistentState(state, settings)) {
var reconciledState = (reconcileStateAlgorithm || reconcileState.reconcileState)(state, settings);
reconciledState = _this.applyPostProcess({
name: 'reconcileState',
immediately: true,
transitions: transitions,
}, reconciledState);
_this.updateState(reconciledState, {
transitions: transitions,
});
}
};
this.transformImage = function (transform, options) {
if (options === void 0) { options = {}; }
var _a = options.transitions, transitions = _a === void 0 ? true : _a, _b = options.interaction, interaction = _b === void 0 ? true : _b, _c = options.immediately, immediately = _c === void 0 ? false : _c, _d = options.normalize, normalize$1 = _d === void 0 ? true : _d;
var _e = _this.getProps(), transformImageAlgorithm = _e.transformImageAlgorithm, onTransformImage = _e.onTransformImage, onTransformImageEnd = _e.onTransformImageEnd, settings = _e.settings;
var state = _this.getData().state;
var callbacks = [];
if (state) {
if (normalize$1) {
transform = normalize.normalizeImageTransform(state, transform);
}
var result = _this.applyPostProcess({
name: 'transformImage',
transitions: transitions,
immediately: immediately,
}, (transformImageAlgorithm || transformImage.transformImage)(state, settings, transform));
callbacks.push(onTransformImage);
if (interaction) {
_this.setInteractions({
transformImage: {
rotate: !index.isUndefined(transform.rotate),
flip: !index.isUndefined(transform.flip),
scale: !index.isUndefined(transform.scale),
move: !index.isUndefined(transform.move),
},
});
}
else {
result = _this.applyPostProcess({
name: 'transformImageEnd',
transitions: transitions,
immediately: true,
}, result);
callbacks.push(onTransformImageEnd);
}
_this.updateState(result, {
transitions: immediately && transitions,
}, callbacks);
}
};
this.transformImageEnd = function (options) {
if (options === void 0) { options = {}; }
var _a = options.immediately, immediately = _a === void 0 ? true : _a, _b = options.transitions, transitions = _b === void 0 ? true : _b;
var state = _this.getData().state;
var onTransformImageEnd = _this.getProps().onTransformImageEnd;
_this.updateState(function () { return state && _this.applyPostProcess({ name: 'transformImageEnd', immediately: immediately, transitions: transitions }, state); }, {
transitions: transitions,
}, [onTransformImageEnd]);
_this.setInteractions({
transformImage: {
rotate: false,
flip: false,
scale: false,
move: false,
},
});
};
this.zoomImage = function (scale, options) {
if (options === void 0) { options = {}; }
var _a = options.interaction, interaction = _a === void 0 ? false : _a, _b = options.immediately, immediately = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? true : _c, _d = options.normalize, normalize = _d === void 0 ? false : _d;
_this.transformImage({
scale: scale,
}, { interaction: interaction, immediately: immediately, transitions: transitions, normalize: normalize });
};
this.moveImage = function (left, top, options) {
if (options === void 0) { options = {}; }
var _a = options.interaction, interaction = _a === void 0 ? false : _a, _b = options.immediately, immediately = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? true : _c, _d = options.normalize, normalize = _d === void 0 ? false : _d;
_this.transformImage({
move: {
left: left,
top: top,
},
}, { interaction: interaction, immediately: immediately, transitions: transitions, normalize: normalize });
};
this.flipImage = function (horizontal, vertical, options) {
if (options === void 0) { options = {}; }
var _a = options.interaction, interaction = _a === void 0 ? false : _a, _b = options.immediately, immediately = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? true : _c, _d = options.normalize, normalize$1 = _d === void 0 ? true : _d;
var state = _this.getState();
var flip = {
horizontal: horizontal,
vertical: vertical,
};
_this.transformImage({
flip: state && normalize$1 ? normalize.normalizeFlip(state, flip) : flip,
}, { interaction: interaction, immediately: immediately, transitions: transitions });
};
this.rotateImage = function (rotate, options) {
if (options === void 0) { options = {}; }
var _a = options.interaction, interaction = _a === void 0 ? false : _a, _b = options.immediately, immediately = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? true : _c, _d = options.normalize, normalize = _d === void 0 ? false : _d;
_this.transformImage({
rotate: rotate,
}, { interaction: interaction, immediately: immediately, transitions: transitions, normalize: normalize });
};
this.reset = function (boundary, image) {
_this.resetState(boundary, image);
};
this.setState = function (modifier, options) {
if (options === void 0) { options = {}; }
var settings = _this.getSettings();
var state = _this.getData().state;
var _a = options.transitions, transitions = _a === void 0 ? true : _a, _b = options.immediately, immediately = _b === void 0 ? false : _b, _c = options.interaction, interaction = _c === void 0 ? false : _c, _d = options.postprocess, postprocess = _d === void 0 ? false : _d;
var newState = modifier && (index.isFunction(modifier) ? modifier(state, settings) : tslib.__assign(tslib.__assign({}, state), modifier));
_this.updateState(function () {
return postprocess
? newState &&
_this.applyPostProcess({
name: 'setState',
immediately: immediately,
transitions: transitions,
interaction: interaction,
}, newState)
: newState;
}, {
transitions: transitions,
});
};
this.setCoordinates = function (transforms, options) {
if (options === void 0) { options = {}; }
var state = _this.getData().state;
var _a = _this.getProps(), setCoordinatesAlgorithm = _a.setCoordinatesAlgorithm, settings = _a.settings;
var _b = options.transitions, transitions = _b === void 0 ? true : _b, _c = options.immediately, immediately = _c === void 0 ? true : _c;
_this.updateState(function () {
return state &&
_this.applyPostProcess({
name: 'setCoordinates',
immediately: immediately,
transitions: transitions,
}, (setCoordinatesAlgorithm || setCoordinates.setCoordinates)(state, settings, transforms, setCoordinates.SetCoordinatesMode.zoom));
}, {
transitions: transitions,
});
};
this.setVisibleArea = function (visibleArea, options) {
if (options === void 0) { options = {}; }
var _a = options.transitions, transitions = _a === void 0 ? true : _a, _b = options.immediately, immediately = _b === void 0 ? true : _b;
var state = _this.getData().state;
var _c = _this.getProps(), setVisibleAreaAlgorithm = _c.setVisibleAreaAlgorithm, settings = _c.settings;
_this.updateState(function () {
return state &&
_this.applyPostProcess({ name: 'setVisibleArea', immediately: immediately, transitions: transitions }, (setVisibleAreaAlgorithm || setVisibleArea.setVisibleArea)(state, settings, visibleArea));
}, {
transitions: transitions,
});
};
this.setBoundary = function (boundary, options) {
if (options === void 0) { options = {}; }
var state = _this.getData().state;
var _a = _this.getProps(), setBoundaryAlgorithm = _a.setBoundaryAlgorithm, settings = _a.settings;
var _b = options.transitions, transitions = _b === void 0 ? false : _b, _c = options.immediately, immediately = _c === void 0 ? true : _c;
if (boundary) {
_this.updateState(function () {
return state &&
_this.applyPostProcess({ name: 'setBoundary', immediately: immediately, transitions: transitions }, (setBoundaryAlgorithm || setBoundary.setBoundary)(state, settings, boundary));
});
}
else {
_this.updateState(null);
}
};
this.moveCoordinates = function (directions, options) {
if (options === void 0) { options = {}; }
var data = _this.getData();
var _a = _this.getProps(), moveCoordinatesAlgorithm = _a.moveCoordinatesAlgorithm, onMove = _a.onMove, onMoveEnd = _a.onMoveEnd, settings = _a.settings;
var _b = options.interaction, interaction = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? false : _c, _d = options.immediately, immediately = _d === void 0 ? false : _d, _e = options.normalize, normalize$1 = _e === void 0 ? true : _e;
var callbacks = [];
if (!data.transitions && data.state) {
var normalizedDirections = normalize$1
? normalize.normalizeMoveDirections(data.state, directions)
: normalize.fillMoveDirections(directions);
var result = _this.applyPostProcess({ name: 'moveCoordinates', interaction: interaction, immediately: immediately, transitions: transitions }, (moveCoordinatesAlgorithm || moveCoordinates.moveCoordinates)(data.state, settings, normalizedDirections));
callbacks.push(onMove);
if (interaction) {
_this.setInteractions({
moveCoordinates: true,
});
}
else {
result = _this.applyPostProcess({ name: 'moveCoordinatesEnd', interaction: interaction, immediately: immediately, transitions: transitions }, result);
callbacks.push(onMoveEnd);
}
_this.updateState(result, {
transitions: immediately && transitions,
}, callbacks);
}
};
this.moveCoordinatesEnd = function (options) {
if (options === void 0) { options = {}; }
var state = _this.getData().state;
var onMoveEnd = _this.getProps().onMoveEnd;
var _a = options.transitions, transitions = _a === void 0 ? true : _a, _b = options.immediately, immediately = _b === void 0 ? false : _b;
_this.updateState(function () { return state && _this.applyPostProcess({ name: 'moveCoordinatesEnd', transitions: transitions, immediately: immediately }, state); }, {
transitions: transitions,
}, [onMoveEnd]);
_this.setInteractions({
moveCoordinates: false,
});
};
this.resizeCoordinates = function (anchor, directions, parameters, options) {
if (options === void 0) { options = {}; }
var state = _this.getData().state;
var _a = _this.getProps(), resizeCoordinatesAlgorithm = _a.resizeCoordinatesAlgorithm, onResize = _a.onResize, onResizeEnd = _a.onResizeEnd, settings = _a.settings;
var _b = options.interaction, interaction = _b === void 0 ? true : _b, _c = options.transitions, transitions = _c === void 0 ? false : _c, _d = options.immediately, immediately = _d === void 0 ? false : _d, _e = options.normalize, normalize$1 = _e === void 0 ? true : _e;
var transitionsOptions = _this.getTransitions();
if (!transitionsOptions.active && state) {
var callbacks = [];
var normalizedDirections = normalize$1
? normalize.normalizeResizeDirections(state, directions)
: normalize.fillResizeDirections(directions);
var result = _this.applyPostProcess({ name: 'resizeCoordinates', interaction: interaction, immediately: immediately, transitions: transitions }, (resizeCoordinatesAlgorithm || resizeCoordinates.resizeCoordinates)(state, settings, anchor, normalizedDirections, index.isObject(parameters) ? parameters : {}));
callbacks.push(onResize);
if (interaction) {
_this.setInteractions({
resizeCoordinates: true,
});
}
else {
result = _this.applyPostProcess({ name: 'resizeCoordinatesEnd', interaction: interaction, immediately: immediately, transitions: transitions }, result);
callbacks.push(onResizeEnd);
}
_this.updateState(result, {
transitions: immediately && transitions,
}, callbacks);
}
};
this.resizeCoordinatesEnd = function (options) {
if (options === void 0) { options = {}; }
var onResizeEnd = _this.getProps().onResizeEnd;
var state = _this.getData().state;
var _a = options.transitions, transitions = _a === void 0 ? true : _a, _b = options.immediately, immediately = _b === void 0 ? false : _b;
_this.updateState(function () { return state && _this.applyPostProcess({ name: 'resizeCoordinatesEnd', transitions: transitions, immediately: immediately }, state); }, {
transitions: transitions,
}, [onResizeEnd]);
_this.setInteractions({
resizeCoordinates: false,
});
};
this.getStencilCoordinates = function () {
var state = _this.getData().state;
return helpers.getStencilCoordinates(state);
};
this.getCoordinates = function (options) {
if (options === void 0) { options = {}; }
var state = _this.getData().state;
var settings = _this.getProps().settings;
if (state && state.coordinates) {
var _a = options.round, round = _a === void 0 ? true : _a;
if (round) {
return helpers.getRoundedCoordinates(state, settings);
}
else {
return tslib.__assign({}, state.coordinates);
}
}
else {
return null;
}
};
this.getVisibleArea = function () {
var state = _this.getData().state;
if (state === null || state === void 0 ? void 0 : state.visibleArea) {
return tslib.__assign({}, state.visibleArea);
}
else {
return null;
}
};
this.getSettings = function () {
var settings = _this.getProps().settings;
return tslib.__assign({}, settings);
};
this.getState = function () {
var state = _this.getData().state;
return copyState.copyState(state);
};
this.getTransforms = function () {
var state = _this.getData().state;
return state
? index.deepClone(state.transforms)
: {
rotate: 0,
flip: {
horizontal: false,
vertical: false,
},
};
};
this.createDefaultState = function (boundary, image) {
var _a = _this.getProps(), createStateAlgorithm = _a.createStateAlgorithm, settings = _a.settings;
return _this.applyPostProcess({
name: 'createState',
immediately: true,
transitions: false,
}, (createStateAlgorithm || createState.createState)({
image: image,
boundary: boundary,
}, settings));
};
this.isConsistent = function () {
var state = _this.getData().state;
var settings = _this.getProps().settings;
return state ? helpers.isConsistentState(state, settings) : true;
};
}
return AbstractCropperInstance;
}());
exports.AbstractCropperInstance = AbstractCropperInstance;