@geekie/geekie-image - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

lib/index.cjs.js

@@ -428,2 +428,7 @@ 'use strict';
 
+var ACCEPTED_MIMES = ['image/gif', 'image/jpeg', 'image/jpg', 'image/png'];
+var MAX_IMAGE_INITIAL_DIMENSION_PX = 500;
+var MIN_CONSTRAINT_PX = 50;
+var MAX_CONSTRAINT_PX = 824;
+
 var defaultTheme = {
@@ -487,2 +492,33 @@ image: "irjtz94",
 
+  var _useState2 = React.useState(null),
+      constraints = _useState2[0],
+      setConstraints = _useState2[1];
+
+  if (!constraints) {
+    var ratio = width / height;
+
+    if (ratio === 1) {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX,
+        minHeight: MIN_CONSTRAINT_PX,
+        maxWidth: MAX_CONSTRAINT_PX,
+        maxHeight: MAX_CONSTRAINT_PX
+      });
+    } else if (ratio > 1) {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX * ratio,
+        minHeight: MIN_CONSTRAINT_PX,
+        maxWidth: MAX_CONSTRAINT_PX,
+        maxHeight: MAX_CONSTRAINT_PX / ratio
+      });
+    } else {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX,
+        minHeight: MIN_CONSTRAINT_PX / ratio,
+        maxWidth: MAX_CONSTRAINT_PX * ratio,
+        maxHeight: MAX_CONSTRAINT_PX
+      });
+    }
+  }
+
   React.useEffect(function () {
@@ -553,6 +589,6 @@ return onChangeFocus(isFocus);
     width: width,
-    maxConstraints: [864, 864],
+    minConstraints: [(constraints == null ? void 0 : constraints.minWidth) || MIN_CONSTRAINT_PX, (constraints == null ? void 0 : constraints.minHeight) || MIN_CONSTRAINT_PX],
+    maxConstraints: [(constraints == null ? void 0 : constraints.maxWidth) || MAX_CONSTRAINT_PX, (constraints == null ? void 0 : constraints.maxHeight) || MAX_CONSTRAINT_PX],
     resizeHandles: isFocus ? ['sw', 'nw', 'se', 'ne'] : [],
     handle: renderHandle,
-    handleSize: [10, 10],
     lockAspectRatio: true,
@@ -673,4 +709,2 @@ onResize: function onResize(_event, _ref) {
 
-var ACCEPTED_MIMES = ['image/gif', 'image/jpeg', 'image/jpg', 'image/png'];
-var MAX_IMAGE_DIMENSION_PX = 500;
 var getAcceptableSize = function getAcceptableSize(_ref) {
@@ -680,3 +714,3 @@ var width = _ref.width,
       maxDimension = _ref.maxDimension;
-  var max = maxDimension || MAX_IMAGE_DIMENSION_PX;
+  var max = maxDimension || MAX_IMAGE_INITIAL_DIMENSION_PX;
   var limitWidth = width;
@@ -920,2 +954,3 @@ var limitHeight = height;
   if (nodeName === 'img' && node.hasAttribute(imageTypeAttributeLabel)) {
+    var maxImageInitialDimension = MAX_IMAGE_INITIAL_DIMENSION_PX.toString();
     return {
@@ -926,4 +961,4 @@ type: 'GEEKIE_IMAGE',
         src: node.getAttribute('src') || '',
-        height: parseFloat(getDataAttribute(node, 'height') || '500'),
-        width: parseFloat(getDataAttribute(node, 'width') || '500')
+        height: parseFloat(getDataAttribute(node, 'height') || maxImageInitialDimension),
+        width: parseFloat(getDataAttribute(node, 'width') || maxImageInitialDimension)
       }
@@ -930,0 +965,0 @@ };

lib/index.esm.js

@@ -420,2 +420,7 @@ import { AtomicBlockUtils, EditorState, SelectionState, Modifier } from 'draft-js';
 
+var ACCEPTED_MIMES = ['image/gif', 'image/jpeg', 'image/jpg', 'image/png'];
+var MAX_IMAGE_INITIAL_DIMENSION_PX = 500;
+var MIN_CONSTRAINT_PX = 50;
+var MAX_CONSTRAINT_PX = 824;
+
 var defaultTheme = {
@@ -479,2 +484,33 @@ image: "irjtz94",
 
+  var _useState2 = useState(null),
+      constraints = _useState2[0],
+      setConstraints = _useState2[1];
+
+  if (!constraints) {
+    var ratio = width / height;
+
+    if (ratio === 1) {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX,
+        minHeight: MIN_CONSTRAINT_PX,
+        maxWidth: MAX_CONSTRAINT_PX,
+        maxHeight: MAX_CONSTRAINT_PX
+      });
+    } else if (ratio > 1) {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX * ratio,
+        minHeight: MIN_CONSTRAINT_PX,
+        maxWidth: MAX_CONSTRAINT_PX,
+        maxHeight: MAX_CONSTRAINT_PX / ratio
+      });
+    } else {
+      setConstraints({
+        minWidth: MIN_CONSTRAINT_PX,
+        minHeight: MIN_CONSTRAINT_PX / ratio,
+        maxWidth: MAX_CONSTRAINT_PX * ratio,
+        maxHeight: MAX_CONSTRAINT_PX
+      });
+    }
+  }
+
   useEffect(function () {
@@ -545,6 +581,6 @@ return onChangeFocus(isFocus);
     width: width,
-    maxConstraints: [864, 864],
+    minConstraints: [(constraints == null ? void 0 : constraints.minWidth) || MIN_CONSTRAINT_PX, (constraints == null ? void 0 : constraints.minHeight) || MIN_CONSTRAINT_PX],
+    maxConstraints: [(constraints == null ? void 0 : constraints.maxWidth) || MAX_CONSTRAINT_PX, (constraints == null ? void 0 : constraints.maxHeight) || MAX_CONSTRAINT_PX],
     resizeHandles: isFocus ? ['sw', 'nw', 'se', 'ne'] : [],
     handle: renderHandle,
-    handleSize: [10, 10],
     lockAspectRatio: true,
@@ -665,4 +701,2 @@ onResize: function onResize(_event, _ref) {
 
-var ACCEPTED_MIMES = ['image/gif', 'image/jpeg', 'image/jpg', 'image/png'];
-var MAX_IMAGE_DIMENSION_PX = 500;
 var getAcceptableSize = function getAcceptableSize(_ref) {
@@ -672,3 +706,3 @@ var width = _ref.width,
       maxDimension = _ref.maxDimension;
-  var max = maxDimension || MAX_IMAGE_DIMENSION_PX;
+  var max = maxDimension || MAX_IMAGE_INITIAL_DIMENSION_PX;
   var limitWidth = width;
@@ -912,2 +946,3 @@ var limitHeight = height;
   if (nodeName === 'img' && node.hasAttribute(imageTypeAttributeLabel)) {
+    var maxImageInitialDimension = MAX_IMAGE_INITIAL_DIMENSION_PX.toString();
     return {
@@ -918,4 +953,4 @@ type: 'GEEKIE_IMAGE',
         src: node.getAttribute('src') || '',
-        height: parseFloat(getDataAttribute(node, 'height') || '500'),
-        width: parseFloat(getDataAttribute(node, 'width') || '500')
+        height: parseFloat(getDataAttribute(node, 'height') || maxImageInitialDimension),
+        width: parseFloat(getDataAttribute(node, 'width') || maxImageInitialDimension)
       }
@@ -922,0 +957,0 @@ };

package.json

 {
   "name": "@geekie/geekie-image",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "sideEffects": [
@@ -5,0 +5,0 @@ "*.css"

No alert changes

Improved metrics

Total package byte prevSize

96157

increased by1.49%

Lines of code

2208

increased by3.08%

No dependency changes