tui-image-editor - npm Package Compare versions

Comparing version 3.10.0-alpha.0 to 3.10.0

index.d.ts

@@ -1,2 +0,2 @@
-// Type definitions for TOAST UI Image Editor v3.10.0-alpha.0
+// Type definitions for TOAST UI Image Editor v3.10.0
 // TypeScript Version: 3.2.2
@@ -3,0 +3,0 @@

package.json

 {
   "name": "tui-image-editor",
   "author": "NHN FE Development Lab <[e-mail]>",
-  "version": "3.10.0-alpha.0",
+  "version": "3.10.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "repository": {

src/js/graphics.js

@@ -812,3 +812,9 @@ /**
     createStaticCanvas() {
-        return new fabric.StaticCanvas();
+        const staticCanvas = new fabric.StaticCanvas();
+
+        staticCanvas.set({
+            enableRetinaScaling: false
+        });
+
+        return staticCanvas;
     }
@@ -815,0 +821,0 @@

src/js/helper/shapeFilterFillHelper.js

@@ -13,5 +13,2 @@ /**
 };
-
-const FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP);
-
 const POSITION_DIMENSION_MAP = {
@@ -22,2 +19,4 @@ x: 'width',
 
+const FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP);
+
 /**
@@ -51,3 +50,5 @@ * Cached canvas image element for fill image
     const fillImage = getFillImageFromShape(shapeObj);
-    let {width, height} = getRotatedDimension(shapeObj);
+    const rotatedShapeCornerDimension = getRotatedDimension(shapeObj);
+    const {right, bottom} = rotatedShapeCornerDimension;
+    let {width, height} = rotatedShapeCornerDimension;
     const diffLeft = (width - shapeObj.width) / 2;
@@ -59,4 +60,6 @@ const diffTop = (height - shapeObj.height) / 2;
     let top = (height / 2) - diffTop;
-    const fillImageMaxSize = Math.max(width, height);
-    const commonProps = {
+    const fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop);
+
+    ([left, top, width, height] = calculateFillImageDimensionOutsideCanvas({
+        shapeObj,
         left,
@@ -69,17 +72,18 @@ top,
         flipX,
-        flipY
-    };
+        flipY,
+        right,
+        bottom
+    }));
 
-    ([left, top, width, height] = calculateFillImageDimensionOutsideCanvas(extend({
-        shapeObj
-    }, commonProps)));
-
-    fillImage.set(extend({
-        angle: flipX === flipY ? -angle : angle
-    }, commonProps, {
+    fillImage.set({
+        angle: flipX === flipY ? -angle : angle,
         left,
         top,
         width,
-        height
-    }));
+        height,
+        cropX,
+        cropY,
+        flipX,
+        flipY
+    });
 
@@ -118,12 +122,111 @@ setCustomProperty(fillImage, {fillImageMaxSize});
  */
-function calculateFillImageDimensionOutsideCanvas({shapeObj, left, top, width, height, cropX, cropY, flipX, flipY}) {
-    const positionFixer = (type, outDistance) => calculateFillImagePositionOutsideCanvas({
+function calculateFillImageDimensionOutsideCanvas({
+    shapeObj, left, top, width, height, cropX, cropY, flipX, flipY, right, bottom
+}) {
+    const overflowAreaPositionFixer = (type, outDistance, imageLeft, imageTop) => calculateDistanceOverflowPart({
         type,
         outDistance,
         shapeObj,
+        flipX,
+        flipY,
+        left: imageLeft,
+        top: imageTop
+    });
+    const [originalWidth, originalHeight] = [width, height];
+
+    ([left, top, width, height] = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, {
         left,
         top,
-        flipX,
-        flipY
+        width,
+        height,
+        cropX,
+        cropY
+    }));
+
+    ([left, top, width, height] = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, {
+        left,
+        top,
+        insideCanvasRealImageWidth: width,
+        insideCanvasRealImageHeight: height,
+        right,
+        bottom,
+        cropX,
+        cropY,
+        originalWidth,
+        originalHeight
+    }));
+
+    return [left, top, width, height];
+}
+
+/**
+ * Calculate fill image position and size for for right bottom edge
+ * @param {Function} overflowAreaPositionFixer - position fixer
+ * @param {Object} options - options for position dimension calculate
+ *   @param {fabric.Object} shapeObj - shape object
+ *   @param {number} left - original left position
+ *   @param {number} top - original top position
+ *   @param {number} width - image width
+ *   @param {number} height - image height
+ *   @param {number} right - image right
+ *   @param {number} bottom - image bottom
+ *   @param {number} cropX - image cropX
+ *   @param {number} cropY - image cropY
+ *   @param {boolean} originalWidth - image original width
+ *   @param {boolean} originalHeight - image original height
+ * @returns {Object}
+ */
+function calculateDimensionRightBottomEdge(
+    overflowAreaPositionFixer, {
+        left,
+        top,
+        insideCanvasRealImageWidth,
+        insideCanvasRealImageHeight,
+        right,
+        bottom,
+        cropX,
+        cropY,
+        originalWidth,
+        originalHeight
+    }
+) {
+    let [width, height] = [insideCanvasRealImageWidth, insideCanvasRealImageHeight];
+    const {width: canvasWidth, height: canvasHeight} = cachedCanvasImageElement;
+
+    if (right > canvasWidth && cropX > 0) {
+        width = originalWidth - Math.abs(right - canvasWidth);
+    }
+    if (bottom > canvasHeight && cropY > 0) {
+        height = originalHeight - Math.abs(bottom - canvasHeight);
+    }
+
+    const diff = {
+        x: (insideCanvasRealImageWidth - width) / 2,
+        y: (insideCanvasRealImageHeight - height) / 2
+    };
+
+    forEach(['x', 'y'], type => {
+        const cropDistance2 = diff[type];
+        if (cropDistance2 > 0) {
+            [left, top] = overflowAreaPositionFixer(type, cropDistance2, left, top);
+        }
     });
+
+    return [left, top, width, height];
+}
+
+/**
+ * Calculate fill image position and size for for left top
+ * @param {Function} overflowAreaPositionFixer - position fixer
+ * @param {Object} options - options for position dimension calculate
+ *   @param {fabric.Object} shapeObj - shape object
+ *   @param {number} left - original left position
+ *   @param {number} top - original top position
+ *   @param {number} width - image width
+ *   @param {number} height - image height
+ *   @param {number} cropX - image cropX
+ *   @param {number} cropY - image cropY
+ * @returns {Object}
+ */
+function calculateDimensionLeftTopEdge(overflowAreaPositionFixer, {left, top, width, height, cropX, cropY}) {
     const dimension = {
@@ -135,5 +238,6 @@ width,
     forEach(['x', 'y'], type => {
+        const cropDistance = type === 'x' ? cropX : cropY;
         const compareSize = dimension[POSITION_DIMENSION_MAP[type]];
-        const cropDistance = type === 'x' ? cropX : cropY;
         const standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]];
+
         if (compareSize > standardSize) {
@@ -143,6 +247,6 @@ const outDistance = (compareSize - standardSize) / 2;
             dimension[POSITION_DIMENSION_MAP[type]] = standardSize;
-            [left, top] = positionFixer(type, outDistance);
+            [left, top] = overflowAreaPositionFixer(type, outDistance, left, top);
         }
         if (cropDistance < 0) {
-            [left, top] = positionFixer(type, cropDistance);
+            [left, top] = overflowAreaPositionFixer(type, cropDistance, left, top);
         }
@@ -211,2 +315,16 @@ });
 /**
+ * Calculate a point line outside the canvas. 
+ * @param {fabric.Image} canvasImage - canvas background image
+ * @param {boolean} reset - default is false
+ * @returns {HTMLImageElement}
+ */
+export function getCachedCanvasImageElement(canvasImage, reset = false) {
+    if (!cachedCanvasImageElement || reset) {
+        cachedCanvasImageElement = canvasImage.toCanvasElement();
+    }
+
+    return cachedCanvasImageElement;
+}
+
+/**
  * Calculate fill image position for out of Canvas
@@ -220,3 +338,3 @@ * @param {string} type - 'x' or 'y'
  */
-function calculateFillImagePositionOutsideCanvas({type, shapeObj, outDistance, left, top, flipX, flipY}) {
+function calculateDistanceOverflowPart({type, shapeObj, outDistance, left, top, flipX, flipY}) {
     const shapePointNavigation = getShapeEdgePoint(shapeObj);
@@ -396,2 +514,4 @@ const shapeNeighborPointNavigation = [[1, 2], [0, 3], [0, 3], [1, 2]];
         top,
+        right,
+        bottom,
         width: right - left,
@@ -403,16 +523,2 @@ height: bottom - top
 /**
- * Calculate a point line outside the canvas. 
- * @param {fabric.Image} canvasImage - canvas background image
- * @param {boolean} reset - default is false
- * @returns {HTMLImageElement}
- */
-function getCachedCanvasImageElement(canvasImage, reset = false) {
-    if (!cachedCanvasImageElement || reset) {
-        cachedCanvasImageElement = canvasImage.toCanvasElement();
-    }
-
-    return cachedCanvasImageElement;
-}
-
-/**
  * Make fill image
@@ -445,2 +551,1 @@ * @param {HTMLImageElement} copiedCanvasElement - html image element
 }
-

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2135251

increased by0.43%

Lines of code

20184

increased by0.57%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes