@micromag/core 0.3.68 → 0.3.69

package/es/components.js

@@ -3369,6 +3369,7 @@ var VideoLoop = function VideoLoop(_ref) {
 
 var styles$8 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
+var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 var propTypes$a = {
   width: PropTypes$1.number,
   height: PropTypes$1.number,
@@ -3425,6 +3426,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
       return {
         width: finalContainerWidth,
         height: finalContainerHeight,
+        scale: _screenScale,
         transform: "scale(".concat(_screenScale, ")")
       };
     }
@@ -3441,6 +3443,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     return {
       width: finalContainerWidth,
       height: finalContainerHeight,
+      scale: screenScale,
       transform: "scale(".concat(screenScale, ") translate(").concat(x, "px, ").concat(y, "px)")
     };
   }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight, hasSize]),
@@ -3448,6 +3451,8 @@ var ScreenSizer = function ScreenSizer(_ref) {
       frameWidth = _useMemo$width === void 0 ? null : _useMemo$width,
       _useMemo$height = _useMemo.height,
       frameHeight = _useMemo$height === void 0 ? null : _useMemo$height,
+      _useMemo$scale = _useMemo.scale,
+      frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
       _useMemo$transform = _useMemo.transform,
       screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
 
@@ -3456,9 +3461,10 @@ var ScreenSizer = function ScreenSizer(_ref) {
       screen: 'mobile',
       screens: ['mobile'],
       width: screenWidth,
-      height: screenHeight
+      height: screenHeight,
+      resolution: frameScale !== null ? frameScale * devicePixelRatio : devicePixelRatio
     };
-  }, [screenWidth, screenHeight]);
+  }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React.createElement("div", {
     styles: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),

package/es/contexts.js

@@ -1029,11 +1029,13 @@ var ScreenProvider = function ScreenProvider(_ref6) {
 ScreenProvider.propTypes = propTypes$5;
 ScreenProvider.defaultProps = defaultProps$5;
 
+/* eslint-disable react/jsx-props-no-spreading */
 var ScreenSizeContext = /*#__PURE__*/React.createContext({
   screen: null,
   screens: [],
   width: 0,
   height: 0,
+  resolution: 1,
   landscape: false
 });
 var useScreenSize = function useScreenSize() {
@@ -1050,21 +1052,13 @@ var defaultProps$4 = {
 var ScreenSizeProvider = function ScreenSizeProvider(_ref) {
   var size = _ref.size,
       children = _ref.children;
-
-  var _useState = useState(size),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentSize = _useState2[0],
-      setSize = _useState2[1];
-
-  var prevWidth = currentSize.width,
-      prevHeight = currentSize.height;
-  var nextWidth = size.width,
-      nextHeight = size.height;
-  useEffect(function () {
-    if (prevWidth !== nextWidth || prevHeight !== nextHeight) {
-      setSize(size);
-    }
-  }, [setSize, nextWidth, nextHeight, prevWidth, prevHeight, size]);
+  var nextScreen = size.screen,
+      nextWidth = size.width,
+      nextHeight = size.height,
+      nextResolution = size.resolution;
+  var currentSize = useMemo(function () {
+    return size;
+  }, [nextScreen, nextWidth, nextHeight, nextResolution]);
   return /*#__PURE__*/React.createElement(ScreenSizeContext.Provider, {
     value: currentSize
   }, children);

package/es/hooks.js

@@ -1059,6 +1059,7 @@ var useParsedStory = function useParsedStory(story) {
 };
 
 var _excluded = ["width", "height"];
+var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 
 var useScreenSize = function useScreenSize(_ref) {
   var _ref$width = _ref.width,
@@ -1074,7 +1075,9 @@ var useScreenSize = function useScreenSize(_ref) {
       _ref$mediaType = _ref.mediaType,
       mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
       _ref$media = _ref.media,
-      providedMedia = _ref$media === void 0 ? null : _ref$media;
+      providedMedia = _ref$media === void 0 ? null : _ref$media,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? null : _ref$scale;
   var screenSize = useMemo(function () {
     var media = providedMedia !== null ? providedMedia : {
       type: mediaType,
@@ -1097,7 +1100,8 @@ var useScreenSize = function useScreenSize(_ref) {
       width: width,
       height: height,
       landscape: landscape,
-      menuOverScreen: menuOverScreen
+      menuOverScreen: menuOverScreen,
+      resolution: scale !== null ? scale * devicePixelRatio : devicePixelRatio
     };
   }, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
   return screenSize;
@@ -1166,17 +1170,19 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
-  var scale = finalWidth / screenWidth;
+  var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
   var screenSize = useScreenSize(_objectSpread({
-    width: withoutScale ? finalWidth : screenWidth,
-    height: withoutScale ? finalHeight : finalHeight / scale,
+    width: withoutScale || scale === null ? finalWidth : screenWidth,
+    height: withoutScale || scale === null ? finalHeight : finalHeight / scale,
     landscape: landscape,
-    menuOverScreen: menuOverScreen
+    menuOverScreen: menuOverScreen,
+    scale: !withoutScale ? scale : null
   }, opts));
   return {
     ref: ref,
     screenSize: screenSize,
-    scale: !withoutScale ? scale : null
+    scale: !withoutScale ? scale : null,
+    resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
   };
 };
 

package/es/utils.js

@@ -291,18 +291,23 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
   var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var containerHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var maxDiff = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 800;
 
-  var _ref = media || {},
-      _ref$sizes = _ref.sizes,
-      sizes = _ref$sizes === void 0 ? null : _ref$sizes,
-      _ref$url = _ref.url,
-      defaultUrl = _ref$url === void 0 ? null : _ref$url,
-      _ref$metadata = _ref.metadata;
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+      _ref$resolution = _ref.resolution,
+      resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
+      _ref$maxDiff = _ref.maxDiff,
+      maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff;
 
-  _ref$metadata = _ref$metadata === void 0 ? {} : _ref$metadata;
-  var imgWidth = _ref$metadata.width,
-      imgHeight = _ref$metadata.height;
+  var _ref2 = media || {},
+      _ref2$sizes = _ref2.sizes,
+      sizes = _ref2$sizes === void 0 ? null : _ref2$sizes,
+      _ref2$url = _ref2.url,
+      defaultUrl = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$metadata = _ref2.metadata;
+
+  _ref2$metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+  var imgWidth = _ref2$metadata.width,
+      imgHeight = _ref2$metadata.height;
 
   if (sizes === null || containerWidth === null && containerHeight === null) {
     return defaultUrl;
@@ -316,6 +321,9 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
     }
   }, sizes);
 
+  var finalContainerWidth = containerWidth !== null && resolution !== null ? containerWidth * resolution : containerWidth;
+  var finalContainerHeight = containerHeight !== null && resolution !== null ? containerHeight * resolution : containerHeight;
+
   var _Object$keys$reduce = Object.keys(finalSizes).reduce(function (acc, key) {
     var currentDiff = acc.diff,
         currentIsLarger = acc.isLarger,
@@ -326,8 +334,8 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
         width = _finalSizes$key$width === void 0 ? null : _finalSizes$key$width,
         _finalSizes$key$heigh = _finalSizes$key.height,
         height = _finalSizes$key$heigh === void 0 ? null : _finalSizes$key$heigh;
-    var diffWidth = width !== null && containerWidth !== null ? width - containerWidth : null;
-    var diffHeight = height !== null && containerHeight !== null ? height - containerHeight : null;
+    var diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
+    var diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
     var isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
     var diff = [diffWidth, diffHeight].reduce(function (total, value) {
       return value !== null ? (total || 0) + Math.abs(value) : total;

package/lib/components.js

@@ -3392,6 +3392,7 @@ var VideoLoop = function VideoLoop(_ref) {
 
 var styles$8 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
+var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 var propTypes$a = {
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
@@ -3448,6 +3449,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
       return {
         width: finalContainerWidth,
         height: finalContainerHeight,
+        scale: _screenScale,
         transform: "scale(".concat(_screenScale, ")")
       };
     }
@@ -3464,6 +3466,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     return {
       width: finalContainerWidth,
       height: finalContainerHeight,
+      scale: screenScale,
       transform: "scale(".concat(screenScale, ") translate(").concat(x, "px, ").concat(y, "px)")
     };
   }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight, hasSize]),
@@ -3471,6 +3474,8 @@ var ScreenSizer = function ScreenSizer(_ref) {
       frameWidth = _useMemo$width === void 0 ? null : _useMemo$width,
       _useMemo$height = _useMemo.height,
       frameHeight = _useMemo$height === void 0 ? null : _useMemo$height,
+      _useMemo$scale = _useMemo.scale,
+      frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
       _useMemo$transform = _useMemo.transform,
       screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
 
@@ -3479,9 +3484,10 @@ var ScreenSizer = function ScreenSizer(_ref) {
       screen: 'mobile',
       screens: ['mobile'],
       width: screenWidth,
-      height: screenHeight
+      height: screenHeight,
+      resolution: frameScale !== null ? frameScale * devicePixelRatio : devicePixelRatio
     };
-  }, [screenWidth, screenHeight]);
+  }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     styles: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)]),

package/lib/contexts.js

@@ -1064,11 +1064,13 @@ var ScreenProvider = function ScreenProvider(_ref6) {
 ScreenProvider.propTypes = propTypes$5;
 ScreenProvider.defaultProps = defaultProps$5;
 
+/* eslint-disable react/jsx-props-no-spreading */
 var ScreenSizeContext = /*#__PURE__*/React__default["default"].createContext({
   screen: null,
   screens: [],
   width: 0,
   height: 0,
+  resolution: 1,
   landscape: false
 });
 var useScreenSize = function useScreenSize() {
@@ -1085,21 +1087,13 @@ var defaultProps$4 = {
 var ScreenSizeProvider = function ScreenSizeProvider(_ref) {
   var size = _ref.size,
       children = _ref.children;
-
-  var _useState = React.useState(size),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentSize = _useState2[0],
-      setSize = _useState2[1];
-
-  var prevWidth = currentSize.width,
-      prevHeight = currentSize.height;
-  var nextWidth = size.width,
-      nextHeight = size.height;
-  React.useEffect(function () {
-    if (prevWidth !== nextWidth || prevHeight !== nextHeight) {
-      setSize(size);
-    }
-  }, [setSize, nextWidth, nextHeight, prevWidth, prevHeight, size]);
+  var nextScreen = size.screen,
+      nextWidth = size.width,
+      nextHeight = size.height,
+      nextResolution = size.resolution;
+  var currentSize = React.useMemo(function () {
+    return size;
+  }, [nextScreen, nextWidth, nextHeight, nextResolution]);
   return /*#__PURE__*/React__default["default"].createElement(ScreenSizeContext.Provider, {
     value: currentSize
   }, children);

package/lib/hooks.js

@@ -1095,6 +1095,7 @@ var useParsedStory = function useParsedStory(story) {
 };
 
 var _excluded = ["width", "height"];
+var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 
 var useScreenSize = function useScreenSize(_ref) {
   var _ref$width = _ref.width,
@@ -1110,7 +1111,9 @@ var useScreenSize = function useScreenSize(_ref) {
       _ref$mediaType = _ref.mediaType,
       mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
       _ref$media = _ref.media,
-      providedMedia = _ref$media === void 0 ? null : _ref$media;
+      providedMedia = _ref$media === void 0 ? null : _ref$media,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? null : _ref$scale;
   var screenSize = react.useMemo(function () {
     var media = providedMedia !== null ? providedMedia : {
       type: mediaType,
@@ -1133,7 +1136,8 @@ var useScreenSize = function useScreenSize(_ref) {
       width: width,
       height: height,
       landscape: landscape,
-      menuOverScreen: menuOverScreen
+      menuOverScreen: menuOverScreen,
+      resolution: scale !== null ? scale * devicePixelRatio : devicePixelRatio
     };
   }, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
   return screenSize;
@@ -1202,17 +1206,19 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
-  var scale = finalWidth / screenWidth;
+  var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
   var screenSize = useScreenSize(_objectSpread__default["default"]({
-    width: withoutScale ? finalWidth : screenWidth,
-    height: withoutScale ? finalHeight : finalHeight / scale,
+    width: withoutScale || scale === null ? finalWidth : screenWidth,
+    height: withoutScale || scale === null ? finalHeight : finalHeight / scale,
     landscape: landscape,
-    menuOverScreen: menuOverScreen
+    menuOverScreen: menuOverScreen,
+    scale: !withoutScale ? scale : null
   }, opts));
   return {
     ref: ref,
     screenSize: screenSize,
-    scale: !withoutScale ? scale : null
+    scale: !withoutScale ? scale : null,
+    resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
   };
 };
 

package/lib/utils.js

@@ -308,18 +308,23 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
   var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var containerHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var maxDiff = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 800;
 
-  var _ref = media || {},
-      _ref$sizes = _ref.sizes,
-      sizes = _ref$sizes === void 0 ? null : _ref$sizes,
-      _ref$url = _ref.url,
-      defaultUrl = _ref$url === void 0 ? null : _ref$url,
-      _ref$metadata = _ref.metadata;
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+      _ref$resolution = _ref.resolution,
+      resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
+      _ref$maxDiff = _ref.maxDiff,
+      maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff;
 
-  _ref$metadata = _ref$metadata === void 0 ? {} : _ref$metadata;
-  var imgWidth = _ref$metadata.width,
-      imgHeight = _ref$metadata.height;
+  var _ref2 = media || {},
+      _ref2$sizes = _ref2.sizes,
+      sizes = _ref2$sizes === void 0 ? null : _ref2$sizes,
+      _ref2$url = _ref2.url,
+      defaultUrl = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$metadata = _ref2.metadata;
+
+  _ref2$metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+  var imgWidth = _ref2$metadata.width,
+      imgHeight = _ref2$metadata.height;
 
   if (sizes === null || containerWidth === null && containerHeight === null) {
     return defaultUrl;
@@ -333,6 +338,9 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
     }
   }, sizes);
 
+  var finalContainerWidth = containerWidth !== null && resolution !== null ? containerWidth * resolution : containerWidth;
+  var finalContainerHeight = containerHeight !== null && resolution !== null ? containerHeight * resolution : containerHeight;
+
   var _Object$keys$reduce = Object.keys(finalSizes).reduce(function (acc, key) {
     var currentDiff = acc.diff,
         currentIsLarger = acc.isLarger,
@@ -343,8 +351,8 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
         width = _finalSizes$key$width === void 0 ? null : _finalSizes$key$width,
         _finalSizes$key$heigh = _finalSizes$key.height,
         height = _finalSizes$key$heigh === void 0 ? null : _finalSizes$key$heigh;
-    var diffWidth = width !== null && containerWidth !== null ? width - containerWidth : null;
-    var diffHeight = height !== null && containerHeight !== null ? height - containerHeight : null;
+    var diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
+    var diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
     var isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
     var diff = [diffWidth, diffHeight].reduce(function (total, value) {
       return value !== null ? (total || 0) + Math.abs(value) : total;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.68",
+    "version": "0.3.69",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3f6e61d8a3340735f345a20d1f0f86e91c820d9a"
+    "gitHead": "c69c85dbe321ddcd2d57f5d972b456ab76b5da3e"
 }