filerobot-image-editor - npm Package Compare versions

Comparing version 3.12.3-beta.6 to 3.12.3-beta.7

dist/components/CustomizedCanvas.js

@@ -94,6 +94,5 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "prepareFinalCanvas", function () {
-      var _this$state$latestCan = _this.state.latestCanvasSize,
-          width = _this$state$latestCan.width,
-          height = _this$state$latestCan.height;
+    _defineProperty(_assertThisInitialized(_this), "prepareFinalCanvas", function (originalCanvasDimensions) {
+      var width = originalCanvasDimensions.width,
+          height = originalCanvasDimensions.height;
       var shapes = _this.props.shapes;
@@ -227,2 +226,8 @@ var newCanvas = document.createElement('canvas');
     _defineProperty(_assertThisInitialized(_this), "activateResizingActions", function () {
+      var selectedShape = _this.props.selectedShape;
+
+      if (selectedShape.lockScaleToPercentage) {
+        return;
+      }
+
       Array.from(document.getElementsByClassName('shape-resizing-control')).forEach(function (control) {
@@ -832,3 +837,3 @@ control.addEventListener('mousedown', _this.trackShapeResize);
         var addIt = function addIt() {
-          var _this$getSuitableImgD = _this.getSuitableImgDiemensions(img),
+          var _this$getSuitableImgD = _this.getSuitableImgDiemensions(img, others.lockScaleToPercentage),
               _this$getSuitableImgD2 = _slicedToArray(_this$getSuitableImgD, 2),
@@ -1004,2 +1009,3 @@ width = _this$getSuitableImgD2[0],
     _defineProperty(_assertThisInitialized(_this), "getSuitableImgDiemensions", function (img) {
+      var lockScaleToPercentage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var width = img.width;
@@ -1021,2 +1027,8 @@ var height = img.height; // Scaling down the image if it's bigger than the canvas
 
+      if (lockScaleToPercentage) {
+        var scaleValue = lockScaleToPercentage / 100;
+        width *= scaleValue;
+        height *= scaleValue;
+      }
+
       width = _this.fromLatestCanvasSizeValue(width, 'width');
@@ -1140,2 +1152,3 @@ height = _this.fromLatestCanvasSizeValue(height, 'height');
           selectedShape: _objectSpread(_objectSpread({}, selectedShape), {}, {
+            lockScaleToPercentage: updatedData.lockScaleToPercentage,
             img: updatedData.img
@@ -1182,3 +1195,4 @@ })
               width: updatedData.width,
-              height: updatedData.height
+              height: updatedData.height,
+              lockScaleToPercentage: updatedData.lockScaleToPercentage
             });
@@ -1352,3 +1366,3 @@ }
         if (dataObject) {
-          var _this$getSuitableImgD3 = _this.getSuitableImgDiemensions(img),
+          var _this$getSuitableImgD3 = _this.getSuitableImgDiemensions(img, dataObject.lockScaleToPercentage),
               _this$getSuitableImgD4 = _slicedToArray(_this$getSuitableImgD3, 2),
@@ -1497,2 +1511,4 @@ width = _this$getSuitableImgD4[0],
           resizingBox = _this$props3$selected6 === void 0 ? false : _this$props3$selected6,
+          _this$props3$selected7 = _this$props3$selected.lockScaleToPercentage,
+          lockScaleToPercentage = _this$props3$selected7 === void 0 ? 0 : _this$props3$selected7,
           wrapperId = _this$props3.wrapperId;
@@ -1516,3 +1532,3 @@ var resizingBoxLines = ['e', 'n', 'w', 's'];
         style: {
-          display: resizingBox ? 'block' : 'none',
+          display: resizingBox && !lockScaleToPercentage ? 'block' : 'none',
           width: width,
@@ -1519,0 +1535,0 @@ height: height,

dist/components/Toolbar/Watermark.js

@@ -89,3 +89,6 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "updateWatermarkProperty", function (data, shapeData, watermarkObjectData) {
-      var shapeOperations = _this.props.shapeOperations;
+      var _this$props = _this.props,
+          shapeOperations = _this$props.shapeOperations,
+          _this$props$watermark = _this$props.watermark.lockScaleToPercentage,
+          lockScaleToPercentage = _this$props$watermark === void 0 ? 0 : _this$props$watermark;
 
@@ -104,2 +107,3 @@ if (!shapeData) {
         shapeOperations.addOrUpdate(_objectSpread(_objectSpread({}, shapeData), {}, {
+          lockScaleToPercentage: lockScaleToPercentage,
           key: _config.WATERMARK_UNIQUE_KEY,
@@ -237,3 +241,6 @@ index: watermark.index,
       if (url) {
-        var shapeOperations = _this.props.shapeOperations;
+        var _this$props2 = _this.props,
+            shapeOperations = _this$props2.shapeOperations,
+            _this$props2$watermar = _this$props2.watermark.lockScaleToPercentage,
+            lockScaleToPercentage = _this$props2$watermar === void 0 ? 0 : _this$props2$watermar;
         var opacity = _this.state.opacity;
@@ -261,3 +268,4 @@ logoImage = new Image();
             key: _config.WATERMARK_UNIQUE_KEY,
-            tab: 'watermark'
+            tab: 'watermark',
+            lockScaleToPercentage: lockScaleToPercentage
           }, watermarkImageStateObj);
@@ -309,5 +317,5 @@ };
       var target = _ref.target;
-      var _this$props = _this.props,
-          updateState = _this$props.updateState,
-          config = _this$props.config;
+      var _this$props3 = _this.props,
+          updateState = _this$props3.updateState,
+          config = _this$props3.config;
       updateState({
@@ -314,0 +322,0 @@ isShowSpinner: true

package.json

 {
   "name": "filerobot-image-editor",
-  "version": "3.12.3-beta.6",
+  "version": "3.12.3-beta.7",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "description": "Edit, resize, and filter any image!",

README.md

@@ -359,2 +359,5 @@ > Repository includes React version and Vanilla JS adapter for standalone usage
 ##### `watermark.fonts`: array - the fonts that would be shown & used in text watermark
+
+##### `watermark.lockScaleToPercentage`: number | [0, 50, 100...etc] - default is 0 (don't scale the image & don't prevent user scaling), A percentage value to use in auto scaling the watermark's image width & height with preventing the ability to resize/scale the watermark's image for the user.
+
 example: [{ label: 'Arial', value: 'Arial' }]
@@ -361,0 +364,0 @@

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

778179

increased by0.21%

Lines of code

15418

increased by0.14%

Number of lines in readme file

572

increased by0.53%

No dependency changes