advanced-cropper - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

boundary/index.js

@@ -1,6 +0,1 @@
-import 'tslib';
-import { ratio } from '../service/utils.js';
-import '../types/index.js';
-import '../state/setCoordinates.js';
-
 function stretchCropperBoundary(boundary, stretcher, size) {
@@ -21,14 +16,22 @@ // Reset stretcher
     stretcher.style.height = "0px";
-    // Stretch the boundary with respect to its width
-    var width = Math.max(boundary.clientWidth, size.width);
-    stretcher.style.width = width + "px";
-    stretcher.style.height = width / ratio(size) + "px";
-    // If the height of boundary larger than current stretcher height
-    // stretch the boundary with respect to its height
-    if (stretcher.clientHeight < boundary.clientHeight) {
-        stretcher.style.height = boundary.clientHeight + "px";
-        stretcher.style.width = stretcher.clientHeight * ratio(size) + "px";
+    // Try to fit the size by width:
+    stretcher.style.width = Math.max(boundary.getBoundingClientRect().width, size.width) + "px";
+    // After that try to fit the size by height and resulted width:
+    var ratio = size.width / size.height;
+    stretcher.style.height = Math.max(boundary.getBoundingClientRect().height, stretcher.getBoundingClientRect().width / ratio) + "px";
+    stretcher.style.width = stretcher.getBoundingClientRect().height * ratio + "px";
+    if (stretcher.clientWidth / stretcher.clientHeight > boundary.clientWidth / boundary.clientHeight) {
+        if (stretcher.clientWidth > boundary.clientWidth) {
+            stretcher.style.width = boundary.clientWidth + "px";
+            stretcher.style.height = boundary.clientWidth / ratio + "px";
+        }
     }
+    else {
+        if (stretcher.clientHeight > boundary.clientHeight) {
+            stretcher.style.height = boundary.clientHeight + "px";
+            stretcher.style.width = boundary.clientHeight * ratio + "px";
+        }
+    }
 }
 
 export { stretchCropperBoundary, stretchPreviewBoundary };

defaults/defaultBoundary.js

@@ -16,5 +16,6 @@ function fitBoundary(boundary, size) {
 function fillBoundary(boundary) {
+    var _a = boundary.getBoundingClientRect(), width = _a.width, height = _a.height;
     return {
-        width: boundary.clientWidth,
-        height: boundary.clientHeight,
+        width: width,
+        height: height,
     };
@@ -21,0 +22,0 @@ }

image/index.d.ts

@@ -1,2 +0,2 @@
-import { Coordinates, CropperImage, CropperState, CropperTransitions, Transforms } from "../types/index";
+import { Coordinates, CropperImage, CropperState, CropperTransitions, Size, Transforms } from "../types/index";
 declare function getStyleTransforms(transforms: Partial<Transforms> & {
@@ -25,3 +25,3 @@ scale?: number;
 declare function getBackgroundStyle(image: CropperImage, state: CropperState, transitions?: CropperTransitions | null): {};
-declare function getPreviewStyle(image: CropperImage, state: CropperState, coefficient: number, transitions?: CropperTransitions | null): {};
+declare function getPreviewStyle(image: CropperImage, state: CropperState, size: Size, transitions?: CropperTransitions | null): {};
 export { getStyleTransforms, createImage, loadImage, getImageStyle, getBackgroundStyle, getPreviewStyle };

image/index.js

 import { __assign } from 'tslib';
 import { isCrossOriginURL, isBlob, isLocal } from '../utils/index.js';
+import { ratio } from '../service/utils.js';
 import { getTransformedImageSize, getCoefficient } from '../service/helpers.js';
@@ -353,6 +354,8 @@ import '../types/index.js';
 }
-function getPreviewStyle(image, state, coefficient, transitions) {
+function getPreviewStyle(image, state, size, transitions) {
     if (transitions === void 0) { transitions = null; }
     if (image && state && state.visibleArea && state.coordinates) {
-        return getImageStyle(image, state, state.coordinates, coefficient, transitions);
+        return getImageStyle(image, state, state.coordinates, ratio(state.coordinates) > ratio(size)
+            ? state.coordinates.width / size.width
+            : state.coordinates.height / size.height, transitions);
     }
@@ -359,0 +362,0 @@ else {

instance/AbstractCropper.d.ts

@@ -46,2 +46,3 @@ import { Boundary, CoordinatesTransform, CoreSettings, CropperImage, CropperInteractions, CropperState, CropperTransitionsSettings, DefaultTransforms, ImageTransform, ModifierSettings, MoveDirections, Nullable, PostprocessAction, PostprocessFunction, Priority, ResizeAnchor, Rotate, Scale, VisibleArea } from "../types/index";
     onInteractionEnd?: AbstractCropperCallback<Instance>;
+    onUpdate?: AbstractCropperCallback<Instance>;
 }
@@ -48,0 +49,0 @@ interface AbstractCropperParameters<Settings extends CoreSettings> {

instance/AbstractCropper.js

@@ -1,2 +0,2 @@
-import { __assign, __rest } from 'tslib';
+import { __assign, __rest, __spreadArrays } from 'tslib';
 import { getOptions, deepClone, debounce, isArray, isFunction, deepCompare, isUndefined, isObject } from '../utils/index.js';
@@ -24,10 +24,5 @@ import { getCoefficient, isConsistentState, getStencilCoordinates, getRoundedCoordinates } from '../service/helpers.js';
 }
-function createCallback(callback, getInstance) {
-    return function () {
+function runCallbacks(callbacks, getInstance) {
+    callbacks.forEach(function (callback) {
         runCallback(callback, getInstance);
-    };
-}
-function runCallbacks(callbacks) {
-    callbacks.forEach(function (callback) {
-        callback();
     });
@@ -55,7 +50,7 @@ }
         this.startTransitions = function () {
-            var _a = _this.getProps(), onTransitionsStart = _a.onTransitionsStart, getInstance = _a.getInstance;
+            var _a = _this.getProps(), onTransitionsStart = _a.onTransitionsStart, onUpdate = _a.onUpdate, getInstance = _a.getInstance;
             var _b = _this.getData(), transitions = _b.transitions, data = __rest(_b, ["transitions"]);
             _this.setData(__assign(__assign({}, data), { transitions: true }));
             if (!transitions) {
-                runCallback(onTransitionsStart, getInstance);
+                runCallbacks([onTransitionsStart, onUpdate], getInstance);
             }
@@ -65,5 +60,5 @@ _this.endTransitions();
         this.endTransitions = debounce(function () {
-            var _a = _this.getProps(), onTransitionsEnd = _a.onTransitionsEnd, getInstance = _a.getInstance;
+            var _a = _this.getProps(), onTransitionsEnd = _a.onTransitionsEnd, onUpdate = _a.onUpdate, getInstance = _a.getInstance;
             _this.setData(__assign(__assign({}, _this.getData()), { transitions: false }));
-            runCallback(onTransitionsEnd, getInstance);
+            runCallbacks([onTransitionsEnd, onUpdate], getInstance);
         }, function () {
@@ -95,3 +90,3 @@ return _this.getTransitions().duration;
             var _a = options.transitions, transitions = _a === void 0 ? false : _a;
-            var _b = _this.getProps(), onTransitionsStart = _b.onTransitionsStart, getInstance = _b.getInstance, onChange = _b.onChange, settings = _b.settings;
+            var _b = _this.getProps(), onTransitionsStart = _b.onTransitionsStart, getInstance = _b.getInstance, onChange = _b.onChange, onUpdate = _b.onUpdate, settings = _b.settings;
             var previousData = _this.getData();
@@ -120,3 +115,3 @@ var state = isFunction(modifier) ? modifier(previousData.state, settings) : modifier;
             }
-            runCallbacks(callbacks.map(function (callback) { return createCallback(callback, getInstance); }));
+            runCallbacks(__spreadArrays(callbacks, [onUpdate]), getInstance);
         };
@@ -123,0 +118,0 @@ this.setInteractions = function (interactions) {

node/boundary/index.js

@@ -5,7 +5,2 @@ 'use strict';
 
-require('tslib');
-var utils = require('../service/utils.js');
-require('../types/index.js');
-require('../state/setCoordinates.js');
-
 function stretchCropperBoundary(boundary, stretcher, size) {
@@ -26,12 +21,20 @@ // Reset stretcher
     stretcher.style.height = "0px";
-    // Stretch the boundary with respect to its width
-    var width = Math.max(boundary.clientWidth, size.width);
-    stretcher.style.width = width + "px";
-    stretcher.style.height = width / utils.ratio(size) + "px";
-    // If the height of boundary larger than current stretcher height
-    // stretch the boundary with respect to its height
-    if (stretcher.clientHeight < boundary.clientHeight) {
-        stretcher.style.height = boundary.clientHeight + "px";
-        stretcher.style.width = stretcher.clientHeight * utils.ratio(size) + "px";
+    // Try to fit the size by width:
+    stretcher.style.width = Math.max(boundary.getBoundingClientRect().width, size.width) + "px";
+    // After that try to fit the size by height and resulted width:
+    var ratio = size.width / size.height;
+    stretcher.style.height = Math.max(boundary.getBoundingClientRect().height, stretcher.getBoundingClientRect().width / ratio) + "px";
+    stretcher.style.width = stretcher.getBoundingClientRect().height * ratio + "px";
+    if (stretcher.clientWidth / stretcher.clientHeight > boundary.clientWidth / boundary.clientHeight) {
+        if (stretcher.clientWidth > boundary.clientWidth) {
+            stretcher.style.width = boundary.clientWidth + "px";
+            stretcher.style.height = boundary.clientWidth / ratio + "px";
+        }
     }
+    else {
+        if (stretcher.clientHeight > boundary.clientHeight) {
+            stretcher.style.height = boundary.clientHeight + "px";
+            stretcher.style.width = boundary.clientHeight * ratio + "px";
+        }
+    }
 }
@@ -38,0 +41,0 @@

node/defaults/defaultBoundary.js

@@ -20,5 +20,6 @@ 'use strict';
 function fillBoundary(boundary) {
+    var _a = boundary.getBoundingClientRect(), width = _a.width, height = _a.height;
     return {
-        width: boundary.clientWidth,
-        height: boundary.clientHeight,
+        width: width,
+        height: height,
     };
@@ -25,0 +26,0 @@ }

node/image/index.js

@@ -7,2 +7,3 @@ 'use strict';
 var index = require('../utils/index.js');
+var utils = require('../service/utils.js');
 var helpers = require('../service/helpers.js');
@@ -358,6 +359,8 @@ require('../types/index.js');
 }
-function getPreviewStyle(image, state, coefficient, transitions) {
+function getPreviewStyle(image, state, size, transitions) {
     if (transitions === void 0) { transitions = null; }
     if (image && state && state.visibleArea && state.coordinates) {
-        return getImageStyle(image, state, state.coordinates, coefficient, transitions);
+        return getImageStyle(image, state, state.coordinates, utils.ratio(state.coordinates) > utils.ratio(size)
+            ? state.coordinates.width / size.width
+            : state.coordinates.height / size.height, transitions);
     }
@@ -364,0 +367,0 @@ else {

node/instance/AbstractCropper.js

@@ -28,10 +28,5 @@ 'use strict';
 }
-function createCallback(callback, getInstance) {
-    return function () {
+function runCallbacks(callbacks, getInstance) {
+    callbacks.forEach(function (callback) {
         runCallback(callback, getInstance);
-    };
-}
-function runCallbacks(callbacks) {
-    callbacks.forEach(function (callback) {
-        callback();
     });
@@ -59,7 +54,7 @@ }
         this.startTransitions = function () {
-            var _a = _this.getProps(), onTransitionsStart = _a.onTransitionsStart, getInstance = _a.getInstance;
+            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) {
-                runCallback(onTransitionsStart, getInstance);
+                runCallbacks([onTransitionsStart, onUpdate], getInstance);
             }
@@ -69,5 +64,5 @@ _this.endTransitions();
         this.endTransitions = index.debounce(function () {
-            var _a = _this.getProps(), onTransitionsEnd = _a.onTransitionsEnd, getInstance = _a.getInstance;
+            var _a = _this.getProps(), onTransitionsEnd = _a.onTransitionsEnd, onUpdate = _a.onUpdate, getInstance = _a.getInstance;
             _this.setData(tslib.__assign(tslib.__assign({}, _this.getData()), { transitions: false }));
-            runCallback(onTransitionsEnd, getInstance);
+            runCallbacks([onTransitionsEnd, onUpdate], getInstance);
         }, function () {
@@ -99,3 +94,3 @@ return _this.getTransitions().duration;
             var _a = options.transitions, transitions = _a === void 0 ? false : _a;
-            var _b = _this.getProps(), onTransitionsStart = _b.onTransitionsStart, getInstance = _b.getInstance, onChange = _b.onChange, settings = _b.settings;
+            var _b = _this.getProps(), onTransitionsStart = _b.onTransitionsStart, getInstance = _b.getInstance, onChange = _b.onChange, onUpdate = _b.onUpdate, settings = _b.settings;
             var previousData = _this.getData();
@@ -124,3 +119,3 @@ var state = index.isFunction(modifier) ? modifier(previousData.state, settings) : modifier;
             }
-            runCallbacks(callbacks.map(function (callback) { return createCallback(callback, getInstance); }));
+            runCallbacks(tslib.__spreadArrays(callbacks, [onUpdate]), getInstance);
         };
@@ -127,0 +122,0 @@ this.setInteractions = function (interactions$1) {

package.json

 {
 	"name": "advanced-cropper",
-	"version": "0.15.0",
+	"version": "0.16.0",
 	"description": "The core of the advanced cropper libraries family",
@@ -5,0 +5,0 @@ "author": "Norserium",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

479558

increased by0.36%

Number of package files

244

increased by0.83%

Lines of code

9518

increased by0.07%

No dependency changes