@micromag/viewer 0.3.34 → 0.3.37

package/es/index.js

@@ -71,7 +71,7 @@ function useKeyboardShortcuts() {
         window.removeEventListener('keydown', onKey);
       }
     };
-  }, [disabled]);
+  }, [disabled, shortcuts]);
 }
 
 function checkClickable(el) {
@@ -181,6 +181,7 @@ function useScreenInteraction() {
         contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
 
     var tapX = e.clientX;
+    console.log(e.clientX, contentX, screenWidth);
     var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - nextScreenWidthPercent) : screenIndex > index;
 
     if (hasTappedLeft) {
@@ -743,7 +744,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 4,
+  thumbsPerLine: 3,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -1492,7 +1493,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 +1506,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;
 
@@ -1571,7 +1575,7 @@ var Viewer = function Viewer(_ref) {
   var _useScreenInteraction = useScreenInteraction({
     screens: screens,
     screenIndex: screenIndex,
-    screenWidth: screenWidth,
+    screenWidth: screenContainerWidth,
     isView: isView,
     clickOnSiblings: landscape && withLandscapeSiblingsScreens,
     nextScreenWidthPercent: tapNextScreenWidthPercent,
@@ -1719,14 +1723,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 +1760,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 +1781,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 +1812,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

@@ -89,7 +89,7 @@ function useKeyboardShortcuts() {
         window.removeEventListener('keydown', onKey);
       }
     };
-  }, [disabled]);
+  }, [disabled, shortcuts]);
 }
 
 function checkClickable(el) {
@@ -199,6 +199,7 @@ function useScreenInteraction() {
         contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
 
     var tapX = e.clientX;
+    console.log(e.clientX, contentX, screenWidth);
     var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - nextScreenWidthPercent) : screenIndex > index;
 
     if (hasTappedLeft) {
@@ -761,7 +762,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 4,
+  thumbsPerLine: 3,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -1510,7 +1511,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 +1524,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;
 
@@ -1589,7 +1593,7 @@ var Viewer = function Viewer(_ref) {
   var _useScreenInteraction = useScreenInteraction({
     screens: screens,
     screenIndex: screenIndex,
-    screenWidth: screenWidth,
+    screenWidth: screenContainerWidth,
     isView: isView,
     clickOnSiblings: landscape && withLandscapeSiblingsScreens,
     nextScreenWidthPercent: tapNextScreenWidthPercent,
@@ -1737,14 +1741,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 +1778,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 +1799,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 +1830,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.34",
+    "version": "0.3.37",
     "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.34",
-        "@micromag/element-scroll": "^0.3.34",
-        "@micromag/elements": "^0.3.34",
-        "@micromag/fields": "^0.3.34",
-        "@micromag/intl": "^0.3.34",
-        "@micromag/screens": "^0.3.34",
+        "@micromag/core": "^0.3.36",
+        "@micromag/element-scroll": "^0.3.36",
+        "@micromag/elements": "^0.3.37",
+        "@micromag/fields": "^0.3.36",
+        "@micromag/intl": "^0.3.36",
+        "@micromag/screens": "^0.3.37",
         "@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": "f8332cb20e6c8cf2cbdba28fc965877684174b2f"
+    "gitHead": "81633b181d0ca4b962255ddeaed955346d29b2e9"
 }