advanced-cropper - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

html/updateStretcher.js

 function updateStretcher(_a) {
     var boundary = _a.boundary, stretcher = _a.stretcher, size = _a.size;
-    var height = boundary.clientWidth * (size.height / size.width);
-    stretcher.style.height = height + "px";
-    if (boundary) {
-        stretcher.style.height = Math.max(height, boundary.clientHeight) + "px";
-        stretcher.style.width = Math.max(boundary.clientWidth, stretcher.clientHeight * (size.height / size.width)) + "px";
-    }
-    // Prevent stretching in future until stretcher will be reinitialized
-    stretcher.style.width = boundary.clientWidth + "px";
+    // Reset stretcher
+    stretcher.style.width = "0px";
+    stretcher.style.height = "0px";
+    // Try to fit the size by width:
+    stretcher.style.width = Math.max(boundary.clientWidth, 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.clientHeight, stretcher.clientWidth / ratio) + "px";
+    stretcher.style.width = stretcher.clientHeight * ratio + "px";
 }
 
 export { updateStretcher };

image.d.ts

@@ -1,2 +0,2 @@
-import { CropperImage, CropperState, CropperTransitions, Size } from "./types";
+import { Coordinates, CropperImage, CropperState, CropperTransitions } from "./types";
 declare function getStyleTransforms({ rotate, flip, scaleX, scaleY }: {
@@ -14,5 +14,14 @@ rotate: any;
 declare function loadImage(src: string, settings?: LoadImageSettings): Promise<CropperImage>;
-declare function getImageStyle(image: CropperImage, state: CropperState, transitions?: CropperTransitions): {};
-declare function getPreviewStyle(image: CropperImage, state: CropperState, transitions?: CropperTransitions, size?: Partial<Size>): {};
+declare function getImageStyle(image: CropperImage, state: CropperState, area: Coordinates, coefficient: number, transitions?: CropperTransitions): {
+    width: string;
+    height: string;
+    left: string;
+    top: string;
+    transition: string;
+    transform: string;
+    willChange: string;
+};
+declare function getBackgroundStyle(image: CropperImage, state: CropperState, transitions?: CropperTransitions): {};
+declare function getPreviewStyle(image: CropperImage, state: CropperState, transitions?: CropperTransitions, coefficient?: number): {};
 declare function getMimeType(arrayBuffer: any, fallback?: any): any;
-export { getStyleTransforms, loadImage, getImageStyle, getPreviewStyle, getMimeType };
+export { getStyleTransforms, loadImage, getImageStyle, getBackgroundStyle, getPreviewStyle, getMimeType };

image.js

 import { __assign } from 'tslib';
-import { rotateSize } from './service/utils.js';
 import { isLocal, isBlob } from './utils.js';
-import { getTransformedImageSize, getComputedTransforms, getCoefficient } from './service/helpers.js';
+import { getTransformedImageSize, getCoefficient } from './service/helpers.js';
 
@@ -287,42 +286,54 @@ var XHR_DONE = 4;
 }
-function getImageStyle(image, state, transitions) {
-    if (state && image) {
-        var optimalImageSize = image.width > image.height
-            ? {
-                width: Math.min(512, image.width),
-                height: Math.min(512, image.width) / (image.width / image.height),
-            }
-            : {
-                height: Math.min(512, image.height),
-                width: Math.min(512, image.height) * (image.width / image.height),
-            };
-        var actualImageSize = getTransformedImageSize(state);
-        var imageTransforms = getComputedTransforms(state);
-        var coefficient = getCoefficient(state);
-        var compensations = {
-            rotate: {
-                left: (optimalImageSize.width - actualImageSize.width) / (2 * coefficient),
-                top: (optimalImageSize.height - actualImageSize.height) / (2 * coefficient),
-            },
-            scale: {
-                left: ((1 - 1 / coefficient) * optimalImageSize.width) / 2,
-                top: ((1 - 1 / coefficient) * optimalImageSize.height) / 2,
-            },
+function getImageStyle(image, state, area, coefficient, transitions) {
+    var optimalImageSize = image.width > image.height
+        ? {
+            width: Math.min(512, image.width),
+            height: Math.min(512, image.width) / (image.width / image.height),
+        }
+        : {
+            height: Math.min(512, image.height),
+            width: Math.min(512, image.height) * (image.width / image.height),
         };
-        var transforms = __assign(__assign({}, imageTransforms), { scaleX: imageTransforms.scaleX * (image.width / optimalImageSize.width), scaleY: imageTransforms.scaleY * (image.height / optimalImageSize.height) });
-        var result = {
-            width: optimalImageSize.width + "px",
-            height: optimalImageSize.height + "px",
-            left: '0px',
-            top: '0px',
-            transition: 'none',
-            transform: "translate3d(" + (-compensations.rotate.left - compensations.scale.left - imageTransforms.translateX) + "px, " + (-compensations.rotate.top - compensations.scale.top - imageTransforms.translateY) + "px, 0px)" + getStyleTransforms(transforms),
-            willChange: 'none',
-        };
-        if (transitions && transitions.active) {
-            result.willChange = 'transform';
-            result.transition = transitions.duration + "ms " + transitions.timingFunction;
-        }
-        return result;
+    var actualImageSize = getTransformedImageSize(state);
+    var imageTransforms = {
+        rotate: state.transforms.rotate,
+        flip: {
+            horizontal: state.transforms.flip.horizontal,
+            vertical: state.transforms.flip.vertical,
+        },
+        translateX: area.left / coefficient,
+        translateY: area.top / coefficient,
+        scaleX: 1 / coefficient,
+        scaleY: 1 / coefficient,
+    };
+    var compensations = {
+        rotate: {
+            left: (optimalImageSize.width - actualImageSize.width) / (2 * coefficient),
+            top: (optimalImageSize.height - actualImageSize.height) / (2 * coefficient),
+        },
+        scale: {
+            left: ((1 - 1 / coefficient) * optimalImageSize.width) / 2,
+            top: ((1 - 1 / coefficient) * optimalImageSize.height) / 2,
+        },
+    };
+    var transforms = __assign(__assign({}, imageTransforms), { scaleX: imageTransforms.scaleX * (image.width / optimalImageSize.width), scaleY: imageTransforms.scaleY * (image.height / optimalImageSize.height) });
+    var result = {
+        width: optimalImageSize.width + "px",
+        height: optimalImageSize.height + "px",
+        left: '0px',
+        top: '0px',
+        transition: 'none',
+        transform: "translate3d(" + (-compensations.rotate.left - compensations.scale.left - imageTransforms.translateX) + "px, " + (-compensations.rotate.top - compensations.scale.top - imageTransforms.translateY) + "px, 0px)" + getStyleTransforms(transforms),
+        willChange: 'none',
+    };
+    if (transitions && transitions.active) {
+        result.willChange = 'transform';
+        result.transition = transitions.duration + "ms " + transitions.timingFunction;
     }
+    return result;
+}
+function getBackgroundStyle(image, state, transitions) {
+    if (image && state && state.visibleArea) {
+        return getImageStyle(image, state, state.visibleArea, getCoefficient(state), transitions);
+    }
     else {
@@ -332,36 +343,5 @@ return {};
 }
-function getPreviewStyle(image, state, transitions, size) {
-    if (state.coordinates) {
-        var coefficient = state.coordinates.width / size.width;
-        var transforms = __assign(__assign({}, getComputedTransforms(state)), { scaleX: 1 / coefficient, scaleY: 1 / coefficient });
-        var width = image.width;
-        var height = image.height;
-        var virtualSize = rotateSize({
-            width: width,
-            height: height,
-        }, transforms.rotate);
-        var result = {
-            width: width + "px",
-            height: height + "px",
-            left: '0px',
-            top: '0px',
-            transform: 'none',
-            transition: 'none',
-        };
-        var compensations = {
-            rotate: {
-                left: ((width - virtualSize.width) * transforms.scaleX) / 2,
-                top: ((height - virtualSize.height) * transforms.scaleY) / 2,
-            },
-            scale: {
-                left: ((1 - transforms.scaleX) * width) / 2,
-                top: ((1 - transforms.scaleY) * height) / 2,
-            },
-        };
-        result.transform =
-            "translate(\n\t\t\t\t" + (-state.coordinates.left / coefficient - compensations.rotate.left - compensations.scale.left) + "px," + (-state.coordinates.top / coefficient - compensations.rotate.top - compensations.scale.top) + "px) " + getStyleTransforms(transforms);
-        if (transitions && transitions.active) {
-            result.transition = transitions.duration + "ms " + transitions.timingFunction;
-        }
-        return result;
+function getPreviewStyle(image, state, transitions, coefficient) {
+    if (image && state && state.visibleArea) {
+        return getImageStyle(image, state, state.coordinates, coefficient, transitions);
     }
@@ -412,2 +392,2 @@ else {
 
-export { getImageStyle, getMimeType, getPreviewStyle, getStyleTransforms, loadImage };
+export { getBackgroundStyle, getImageStyle, getMimeType, getPreviewStyle, getStyleTransforms, loadImage };

package.json

 {
 	"name": "advanced-cropper",
-	"version": "0.3.3",
+	"version": "0.4.0",
 	"description": "The core of the advanced cropper libraries family",
@@ -28,4 +28,4 @@ "author": "Norserium",
 		"lint:fix": "eslint --fix src/**/*.{js,vue}",
-		"prepare:dist": "copyfiles package.json dist",
-		"publish:dist": "npm run prepare:dist && npm publish dist"
+		"prepare:dist": "copyfiles package.json dist && copyfiles prepublish.js dist",
+		"publish:dist": "npm run prepare:dist && cross-env RELEASE=true npm publish dist"
 	},
@@ -32,0 +32,0 @@ "dependencies": {

service/helpers.d.ts

@@ -33,14 +33,3 @@ import { CropperSettings, CropperState } from "../types";
 };
-declare function getComputedTransforms(state: CropperState): {
-    rotate: number;
-    flip: {
-        horizontal: boolean;
-        vertical: boolean;
-    };
-    translateX: number;
-    translateY: number;
-    scaleX: number;
-    scaleY: number;
-};
 declare function getMinimumSize(state: CropperState): number;
-export { getAreaSizeRestrictions, getAreaPositionRestrictions, getSizeRestrictions, getPositionRestrictions, getCoefficient, getStencilCoordinates, getAspectRatio, getDefaultCoordinates, getDefaultVisibleArea, getTransformedImageSize, getComputedTransforms, getMinimumSize };
+export { getAreaSizeRestrictions, getAreaPositionRestrictions, getSizeRestrictions, getPositionRestrictions, getCoefficient, getStencilCoordinates, getAspectRatio, getDefaultCoordinates, getDefaultVisibleArea, getTransformedImageSize, getMinimumSize };

service/helpers.js

@@ -67,16 +67,2 @@ import { rotateSize } from './utils.js';
 }
-function getComputedTransforms(state) {
-    var coefficient = getCoefficient(state);
-    return {
-        rotate: state.transforms.rotate,
-        flip: {
-            horizontal: state.transforms.flip.horizontal,
-            vertical: state.transforms.flip.vertical,
-        },
-        translateX: state.visibleArea ? state.visibleArea.left / coefficient : 0,
-        translateY: state.visibleArea ? state.visibleArea.top / coefficient : 0,
-        scaleX: 1 / coefficient,
-        scaleY: 1 / coefficient,
-    };
-}
 function getMinimumSize(state) {
@@ -88,2 +74,2 @@ // The magic number is the approximation of the handler size
 
-export { getAreaPositionRestrictions, getAreaSizeRestrictions, getAspectRatio, getCoefficient, getComputedTransforms, getDefaultCoordinates, getDefaultVisibleArea, getMinimumSize, getPositionRestrictions, getSizeRestrictions, getStencilCoordinates, getTransformedImageSize };
+export { getAreaPositionRestrictions, getAreaSizeRestrictions, getAspectRatio, getCoefficient, getDefaultCoordinates, getDefaultVisibleArea, getMinimumSize, getPositionRestrictions, getSizeRestrictions, getStencilCoordinates, getTransformedImageSize };

service/index.js

 export { applyDirections, applyMove, applyScale, coordinatesToPositionRestrictions, diff, fitToPositionRestrictions, fitToSizeRestrictions, getBrokenRatio, getCenter, getIntersections, inverseMove, maxScale, mergePositionRestrictions, minScale, moveToPositionRestrictions, positionToSizeRestrictions, ratio, resizeToSizeRestrictions, rotatePoint, rotateSize, sizeDistance, toLimits } from './utils.js';
 export { calculateAreaSizeRestrictions, calculateSizeRestrictions, mergeSizeRestrictions, validateSizeRestrictions } from './sizeRestrictions.js';
-export { getAreaPositionRestrictions, getAreaSizeRestrictions, getAspectRatio, getCoefficient, getComputedTransforms, getDefaultCoordinates, getDefaultVisibleArea, getMinimumSize, getPositionRestrictions, getSizeRestrictions, getStencilCoordinates, getTransformedImageSize } from './helpers.js';
+export { getAreaPositionRestrictions, getAreaSizeRestrictions, getAspectRatio, getCoefficient, getDefaultCoordinates, getDefaultVisibleArea, getMinimumSize, getPositionRestrictions, getSizeRestrictions, getStencilCoordinates, getTransformedImageSize } from './helpers.js';
 export { approximateSize } from './approximateSize.js';
@@ -5,0 +5,0 @@ export { fitCoordinates } from './fitCoordinates.js';

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

Number of package files

111

increased by0.91%

Worsened metrics

Total package byte prevSize

604132

decreased by-0.23%

Lines of code

15245

decreased by-0.21%

No dependency changes