@micromag/viewer 0.3.33 → 0.3.36

package/es/index.js

@@ -743,7 +743,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 4,
+  thumbsPerLine: 3,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -1492,7 +1492,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
-      screenSize = _useScreenSizeFromEle.screenSize;
+      screenSize = _useScreenSizeFromEle.screenSize,
+      screenScale = _useScreenSizeFromEle.scale;
 
   var _ref5 = screenSize || {},
       _ref5$width = _ref5.width,
@@ -1504,6 +1505,8 @@ var Viewer = function Viewer(_ref) {
       _ref5$menuOverScreen = _ref5.menuOverScreen,
       menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
 
+  var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
+  var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
   var ready = hasSize; // && fontsLoaded;
 
@@ -1719,14 +1722,14 @@ var Viewer = function Viewer(_ref) {
     closeable: closeable,
     shareBasePath: basePath,
     screenSize: screenSize,
-    menuWidth: screenWidth,
+    menuWidth: screenContainerWidth,
     trackingEnabled: trackingEnabled,
     onClickItem: onClickMenuItem,
     onClickMenu: onClickMenu,
     onClickCloseViewer: onCloseViewer,
     onRequestOpen: onMenuRequestOpen,
     onRequestClose: onMenuRequestClose,
-    withDotItemClick: screenWidth > 400,
+    withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", {
@@ -1756,7 +1759,7 @@ var Viewer = function Viewer(_ref) {
     var screenTransform = null;
 
     if (landscape) {
-      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
+      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenContainerWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
     } else {
       screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
     }
@@ -1777,8 +1780,10 @@ var Viewer = function Viewer(_ref) {
     })) : null, /*#__PURE__*/React.createElement("div", {
       ref: current ? currentScreenRef : null,
       style: {
-        width: landscape ? screenWidth : null,
-        height: landscape ? screenHeight : null,
+        // width: landscape ? screenWidth : null,
+        // height: landscape ? screenHeight : null,
+        width: screenContainerWidth,
+        height: screenContainerHeight,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
       className: classNames([styles$7.screen, (_ref13 = {}, _defineProperty(_ref13, styles$7.current, current), _defineProperty(_ref13, styles$7.visible, current || withLandscapeSiblingsScreens), _ref13)]),
@@ -1806,7 +1811,15 @@ var Viewer = function Viewer(_ref) {
       onClick: function onClick(e) {
         return onScreenClick(e, i);
       }
-    }, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$7.scaler,
+      style: {
+        width: screenWidth,
+        height: screenHeight,
+        transform: screenScale !== null ? "scale(".concat(screenScale, ")") : null,
+        transformOrigin: screenScale !== null ? '0 0' : null
+      }
+    }, viewerScreen)), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "sr-only",
       onClick: gotoNextScreen,

package/lib/index.js

@@ -761,7 +761,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 4,
+  thumbsPerLine: 3,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -1510,7 +1510,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
-      screenSize = _useScreenSizeFromEle.screenSize;
+      screenSize = _useScreenSizeFromEle.screenSize,
+      screenScale = _useScreenSizeFromEle.scale;
 
   var _ref5 = screenSize || {},
       _ref5$width = _ref5.width,
@@ -1522,6 +1523,8 @@ var Viewer = function Viewer(_ref) {
       _ref5$menuOverScreen = _ref5.menuOverScreen,
       menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
 
+  var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
+  var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
   var ready = hasSize; // && fontsLoaded;
 
@@ -1737,14 +1740,14 @@ var Viewer = function Viewer(_ref) {
     closeable: closeable,
     shareBasePath: basePath,
     screenSize: screenSize,
-    menuWidth: screenWidth,
+    menuWidth: screenContainerWidth,
     trackingEnabled: trackingEnabled,
     onClickItem: onClickMenuItem,
     onClickMenu: onClickMenu,
     onClickCloseViewer: onCloseViewer,
     onRequestOpen: onMenuRequestOpen,
     onRequestClose: onMenuRequestClose,
-    withDotItemClick: screenWidth > 400,
+    withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1774,7 +1777,7 @@ var Viewer = function Viewer(_ref) {
     var screenTransform = null;
 
     if (landscape) {
-      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
+      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenContainerWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
     } else {
       screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
     }
@@ -1795,8 +1798,10 @@ var Viewer = function Viewer(_ref) {
     })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       ref: current ? currentScreenRef : null,
       style: {
-        width: landscape ? screenWidth : null,
-        height: landscape ? screenHeight : null,
+        // width: landscape ? screenWidth : null,
+        // height: landscape ? screenHeight : null,
+        width: screenContainerWidth,
+        height: screenContainerHeight,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
       className: classNames__default["default"]([styles$7.screen, (_ref13 = {}, _defineProperty__default["default"](_ref13, styles$7.current, current), _defineProperty__default["default"](_ref13, styles$7.visible, current || withLandscapeSiblingsScreens), _ref13)]),
@@ -1824,7 +1829,15 @@ var Viewer = function Viewer(_ref) {
       onClick: function onClick(e) {
         return onScreenClick(e, i);
       }
-    }, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React__default["default"].createElement("button", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$7.scaler,
+      style: {
+        width: screenWidth,
+        height: screenHeight,
+        transform: screenScale !== null ? "scale(".concat(screenScale, ")") : null,
+        transformOrigin: screenScale !== null ? '0 0' : null
+      }
+    }, viewerScreen)), current && screenIndex < screens.length ? /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: "sr-only",
       onClick: gotoNextScreen,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.33",
+    "version": "0.3.36",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,12 +59,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.33",
-        "@micromag/element-scroll": "^0.3.33",
-        "@micromag/elements": "^0.3.33",
-        "@micromag/fields": "^0.3.33",
-        "@micromag/intl": "^0.3.33",
-        "@micromag/screens": "^0.3.33",
+        "@micromag/core": "^0.3.36",
+        "@micromag/element-scroll": "^0.3.36",
+        "@micromag/elements": "^0.3.36",
+        "@micromag/fields": "^0.3.36",
+        "@micromag/intl": "^0.3.36",
+        "@micromag/screens": "^0.3.36",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "78b145a4e40bf65a48494f3dae58b3ce42534684"
+    "gitHead": "3a430d587a82acb0bf94fe7f842c7f96707a98f4"
 }