@jotforminc/dnd-builder 3.7.0 → 3.7.2

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [3.7.2](https://github.com/jotform/dnd-builder/compare/v3.7.1...v3.7.2) (2026-04-24)
+
+
+### Features
+
+* sub section support in left panel ([9e15812](https://github.com/jotform/dnd-builder/commit/9e158126e5a6e4e4e85b63501362b28bdbe64885))
+
+
+### Bug Fixes
+
+* duplicate selector fix ([b72b52d](https://github.com/jotform/dnd-builder/commit/b72b52dcbca61f2258e31640b3ec60639992116c))
+
+## [3.7.1](https://github.com/jotform/dnd-builder/compare/v3.7.0...v3.7.1) (2026-04-20)
+
+
+### Bug Fixes
+
+* **dnd-builder:** zoom actions some updates ([a33afc5](https://github.com/jotform/dnd-builder/commit/a33afc52dacdf5187fe572428c4ed707b36ab3f3))
+* improve zoom behavior and responsiveness in preview mode ([cfbca2b](https://github.com/jotform/dnd-builder/commit/cfbca2b8131159068ccfc81ce0aae8389f596a64))
+* remove comment in css ([6784c70](https://github.com/jotform/dnd-builder/commit/6784c70caf91d7708cbc1d1d09b51e02d05d2799))
+
 ## [3.7.0](https://github.com/jotform/dnd-builder/compare/v3.6.5...v3.7.0) (2026-04-20)
 
 

package/lib/cjs/assets/svg/angles-left.svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAnglesLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M11.707 8.707a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L8.414 12l3.293-3.293zm6 0a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L14.414 12l3.293-3.293z",
+    clipRule: "evenodd"
+  })));
+}
+
+module.exports = SvgAnglesLeft;
+//# sourceMappingURL=angles-left.svg.js.map

package/lib/cjs/assets/svg/angles-left.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angles-left.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/components/Builder/Scene.js

@@ -61,9 +61,6 @@ var Scene = function Scene() {
   var setOutPage = BuilderContext.useBuilderStore(function (state) {
     return state.setOutPage;
   });
-  var shouldShowZoomControls = BuilderContext.useBuilderStore(function (state) {
-    return state.shouldShowZoomControls;
-  });
   var pageStyles = React.useRef({});
   var pageContainerStyles = React.useRef({});
   var viewPortRef = React.useRef({});
@@ -203,7 +200,7 @@ var Scene = function Scene() {
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "bottom-actions-container",
-      children: [functions.isSlidesListType(slidesListType, 'NAVIGATOR') && /*#__PURE__*/jsxRuntime.jsx(SlidesNavigatorToggle, {}), shouldShowZoomControls && /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {})]
+      children: [functions.isSlidesListType(slidesListType, 'NAVIGATOR') && /*#__PURE__*/jsxRuntime.jsx(SlidesNavigatorToggle, {}), /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {})]
     }), contextMenuProps && /*#__PURE__*/jsxRuntime.jsx(ContextMenu, {
       exceptionalClasses: ['contextMenu-button'],
       height: height,

package/lib/cjs/components/Builder/Scene.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable jsx-a11y/mouse-events-have-key-events */\n/* eslint-disable complexity */\nimport {\n  createRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport SelectionBox from './SelectionBox';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n  calculateGuidePositions,\n  findItemById,\n  findItemsOnPage,\n  isSlidesListType,\n} from '../../utils/functions';\nimport DraggableLayer from './DraggableLayer';\nimport useKeyboardActions from '../../utils/useKeyboardActions';\nimport useMarqueeSelection from '../../utils/useMarqueeSelection';\nimport SlidesNavigatorToggle from './SlidesNavigatorToggle';\n\nconst Scene = () => {\n  const pages = usePropStore(state => state.pages);\n  const settings = usePropStore(state => state.settings);\n  const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n  const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n  const setGuides = useBuilderStore(state => state.setGuides);\n  const zoom = useBuilderStore(state => state.zoom);\n  const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n  const slidesListType = useBuilderStore(state => state.slidesListType);\n  const setOverPage = useBuilderStore(state => state.setOverPage);\n  const setOutPage = useBuilderStore(state => state.setOutPage);\n  const shouldShowZoomControls = useBuilderStore(state => state.shouldShowZoomControls);\n\n  const pageStyles = useRef({});\n  const pageContainerStyles = useRef({});\n  const viewPortRef = useRef({});\n  const canvasRef = useRef(null);\n\n  /* Page Refs */\n  const refs = useRef(pages.reduce((acc, curr) => {\n    acc[curr.id] = createRef(null);\n    return acc;\n  }, {}));\n\n  // Custom hooks\n  useKeyboardActions();\n  const { selectionBox, selectionPageId } = useMarqueeSelection(canvasRef);\n\n  // Update refs when new pages are added\n  useEffect(() => {\n    pages.forEach(page => {\n      if (!refs.current[page.id]) {\n        refs.current[page.id] = createRef(null);\n      }\n    });\n  }, [pages]);\n\n  // Calculate guides for snap functionality\n  useEffect(() => {\n    setGuides(pages.reduce((acc, page) => {\n      const _pageGuides = {};\n      const pageRef = refs.current[page.id];\n      if (pageRef && pageRef.current) {\n        const {\n          height, left, top, width,\n        } = pageRef.current.getBoundingClientRect();\n        const boundingBox = {\n          height, left, top, width,\n        };\n        _pageGuides.boundingBox = {\n          x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n          y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n        };\n        page.items.forEach(item => {\n          _pageGuides[item.id] = {\n            x: calculateGuidePositions(item, 'x', zoom),\n            y: calculateGuidePositions(item, 'y', zoom),\n          };\n        });\n      }\n      acc[page.id] = _pageGuides;\n      return acc;\n    }, {}));\n  }, [pages, zoom, setGuides]);\n\n  // Restore scroll position after mode change\n  useEffect(() => {\n    if (viewPortRef.current) {\n      viewPortRef.current.scrollTop = lastScrollPosition;\n    }\n  }, [lastScrollPosition]);\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n  // TODO: Some strange shit is going on here on first render\n  let width = parseInt(reportLayoutWidth, 10);\n  let height = parseInt(reportLayoutHeight, 10);\n  width = Number.isNaN(width) ? 1 : width;\n  height = Number.isNaN(height) ? 1 : height;\n  const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n  pageStyles.current = {\n    height: parseFloat((height * zoomToUse).toFixed(1)),\n    width: parseFloat((width * zoomToUse).toFixed(1)),\n  };\n  pageContainerStyles.current = {\n    height,\n    transform: `scale(${zoomToUse})`,\n    transformOrigin: '0 0',\n    width,\n  };\n\n  const pageOverHandler = useCallback(pageId => {\n    setOverPage(pageId);\n  }, [setOverPage]);\n\n  const pageOutHandler = useCallback(() => {\n    setOutPage(null);\n  }, [setOutPage]);\n\n  return (\n    <main\n      className={classNames.mainWrapper}\n    >\n      <DraggableLayer\n        pageRefs={refs.current}\n      />\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        data-zoom={zoom}\n      >\n        <div\n          ref={canvasRef}\n          className={classNames.canvas}\n        >\n          {pages.map((page, index) => (\n            <div\n              key={page.id}\n              onMouseOut={pageOutHandler}\n              onMouseOver={() => pageOverHandler(page.id)}\n            >\n              <PageActions\n                order={page.order}\n                pageID={page.id}\n              />\n              <div\n                key={`page_${page.id}`}\n                ref={refs.current[page.id]}\n                className={classNames.page}\n                data-id={page.id}\n                data-order={page.order}\n                id={`presentation-page-${page.id.toString()}`}\n                style={{ ...pageStyles.current, position: 'relative' }}\n              >\n                <Page\n                  items={page.items}\n                  page={page}\n                  pageIndex={index}\n                  style={pageContainerStyles.current}\n                />\n                {selectionPageId === page.id && selectionBox && (\n                  <SelectionBox selectionBox={selectionBox} />\n                )}\n              </div>\n            </div>\n          ))}\n          <PageAdder />\n        </div>\n      </div>\n      <div className=\"bottom-actions-container\">\n        {isSlidesListType(slidesListType, 'NAVIGATOR') && <SlidesNavigatorToggle />}\n        {shouldShowZoomControls && <ZoomControls />}\n      </div>\n      {contextMenuProps\n        && (\n          <ContextMenu\n            exceptionalClasses={['contextMenu-button']}\n            height={height}\n            item={findItemById(contextMenuProps.id, pages)}\n            items={findItemsOnPage(contextMenuProps.pageID, pages)}\n            onClickOutside={() => setContextMenuProps(null)}\n            position={contextMenuProps.position}\n            width={width}\n          />\n        )}\n    </main>\n  );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","settings","contextMenuProps","useBuilderStore","setContextMenuProps","setGuides","zoom","lastScrollPosition","slidesListType","setOverPage","setOutPage","shouldShowZoomControls","pageStyles","useRef","pageContainerStyles","viewPortRef","canvasRef","refs","reduce","acc","curr","id","createRef","useKeyboardActions","useMarqueeSelection","selectionBox","selectionPageId","useEffect","forEach","page","current","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","pageOverHandler","useCallback","pageId","pageOutHandler","_jsxs","classNames","_jsx","index","order","toString","position","isSlidesListType","findItemById","findItemsOnPage","pageID"],"mappings":"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"}
+{"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable jsx-a11y/mouse-events-have-key-events */\n/* eslint-disable complexity */\nimport {\n  createRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport SelectionBox from './SelectionBox';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n  calculateGuidePositions,\n  findItemById,\n  findItemsOnPage,\n  isSlidesListType,\n} from '../../utils/functions';\nimport DraggableLayer from './DraggableLayer';\nimport useKeyboardActions from '../../utils/useKeyboardActions';\nimport useMarqueeSelection from '../../utils/useMarqueeSelection';\nimport SlidesNavigatorToggle from './SlidesNavigatorToggle';\n\nconst Scene = () => {\n  const pages = usePropStore(state => state.pages);\n  const settings = usePropStore(state => state.settings);\n  const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n  const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n  const setGuides = useBuilderStore(state => state.setGuides);\n  const zoom = useBuilderStore(state => state.zoom);\n  const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n  const slidesListType = useBuilderStore(state => state.slidesListType);\n  const setOverPage = useBuilderStore(state => state.setOverPage);\n  const setOutPage = useBuilderStore(state => state.setOutPage);\n\n  const pageStyles = useRef({});\n  const pageContainerStyles = useRef({});\n  const viewPortRef = useRef({});\n  const canvasRef = useRef(null);\n\n  /* Page Refs */\n  const refs = useRef(pages.reduce((acc, curr) => {\n    acc[curr.id] = createRef(null);\n    return acc;\n  }, {}));\n\n  // Custom hooks\n  useKeyboardActions();\n  const { selectionBox, selectionPageId } = useMarqueeSelection(canvasRef);\n\n  // Update refs when new pages are added\n  useEffect(() => {\n    pages.forEach(page => {\n      if (!refs.current[page.id]) {\n        refs.current[page.id] = createRef(null);\n      }\n    });\n  }, [pages]);\n\n  // Calculate guides for snap functionality\n  useEffect(() => {\n    setGuides(pages.reduce((acc, page) => {\n      const _pageGuides = {};\n      const pageRef = refs.current[page.id];\n      if (pageRef && pageRef.current) {\n        const {\n          height, left, top, width,\n        } = pageRef.current.getBoundingClientRect();\n        const boundingBox = {\n          height, left, top, width,\n        };\n        _pageGuides.boundingBox = {\n          x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n          y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n        };\n        page.items.forEach(item => {\n          _pageGuides[item.id] = {\n            x: calculateGuidePositions(item, 'x', zoom),\n            y: calculateGuidePositions(item, 'y', zoom),\n          };\n        });\n      }\n      acc[page.id] = _pageGuides;\n      return acc;\n    }, {}));\n  }, [pages, zoom, setGuides]);\n\n  // Restore scroll position after mode change\n  useEffect(() => {\n    if (viewPortRef.current) {\n      viewPortRef.current.scrollTop = lastScrollPosition;\n    }\n  }, [lastScrollPosition]);\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n  // TODO: Some strange shit is going on here on first render\n  let width = parseInt(reportLayoutWidth, 10);\n  let height = parseInt(reportLayoutHeight, 10);\n  width = Number.isNaN(width) ? 1 : width;\n  height = Number.isNaN(height) ? 1 : height;\n  const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n  pageStyles.current = {\n    height: parseFloat((height * zoomToUse).toFixed(1)),\n    width: parseFloat((width * zoomToUse).toFixed(1)),\n  };\n  pageContainerStyles.current = {\n    height,\n    transform: `scale(${zoomToUse})`,\n    transformOrigin: '0 0',\n    width,\n  };\n\n  const pageOverHandler = useCallback(pageId => {\n    setOverPage(pageId);\n  }, [setOverPage]);\n\n  const pageOutHandler = useCallback(() => {\n    setOutPage(null);\n  }, [setOutPage]);\n\n  return (\n    <main\n      className={classNames.mainWrapper}\n    >\n      <DraggableLayer\n        pageRefs={refs.current}\n      />\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        data-zoom={zoom}\n      >\n        <div\n          ref={canvasRef}\n          className={classNames.canvas}\n        >\n          {pages.map((page, index) => (\n            <div\n              key={page.id}\n              onMouseOut={pageOutHandler}\n              onMouseOver={() => pageOverHandler(page.id)}\n            >\n              <PageActions\n                order={page.order}\n                pageID={page.id}\n              />\n              <div\n                key={`page_${page.id}`}\n                ref={refs.current[page.id]}\n                className={classNames.page}\n                data-id={page.id}\n                data-order={page.order}\n                id={`presentation-page-${page.id.toString()}`}\n                style={{ ...pageStyles.current, position: 'relative' }}\n              >\n                <Page\n                  items={page.items}\n                  page={page}\n                  pageIndex={index}\n                  style={pageContainerStyles.current}\n                />\n                {selectionPageId === page.id && selectionBox && (\n                  <SelectionBox selectionBox={selectionBox} />\n                )}\n              </div>\n            </div>\n          ))}\n          <PageAdder />\n        </div>\n      </div>\n      <div className=\"bottom-actions-container\">\n        {isSlidesListType(slidesListType, 'NAVIGATOR') && <SlidesNavigatorToggle />}\n        <ZoomControls />\n      </div>\n      {contextMenuProps\n        && (\n          <ContextMenu\n            exceptionalClasses={['contextMenu-button']}\n            height={height}\n            item={findItemById(contextMenuProps.id, pages)}\n            items={findItemsOnPage(contextMenuProps.pageID, pages)}\n            onClickOutside={() => setContextMenuProps(null)}\n            position={contextMenuProps.position}\n            width={width}\n          />\n        )}\n    </main>\n  );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","settings","contextMenuProps","useBuilderStore","setContextMenuProps","setGuides","zoom","lastScrollPosition","slidesListType","setOverPage","setOutPage","pageStyles","useRef","pageContainerStyles","viewPortRef","canvasRef","refs","reduce","acc","curr","id","createRef","useKeyboardActions","useMarqueeSelection","selectionBox","selectionPageId","useEffect","forEach","page","current","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","pageOverHandler","useCallback","pageId","pageOutHandler","_jsxs","classNames","_jsx","index","order","toString","position","isSlidesListType","findItemById","findItemsOnPage","pageID"],"mappings":"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"}

package/lib/cjs/components/Builder/SlidesNavigatorToggle.js

@@ -3,6 +3,7 @@
 var BuilderContext = require('../../contexts/BuilderContext.js');
 var hooks = require('../../utils/hooks.js');
 var jsxRuntime = require('react/jsx-runtime');
+var anglesLeft = require('../../assets/svg/angles-left.svg.js');
 var slides = require('../../assets/svg/slides.svg.js');
 
 var SlidesNavigatorToggle = function SlidesNavigatorToggle() {
@@ -29,8 +30,10 @@ var SlidesNavigatorToggle = function SlidesNavigatorToggle() {
         onClick: slidesNavigatorToggleHandler,
         title: SLIDES_NAVIGATOR_TOGGLE,
         type: "button",
-        children: /*#__PURE__*/jsxRuntime.jsx(slides, {
-          className: "toolbar-icon"
+        children: isSlidesNavigatorOpen ? /*#__PURE__*/jsxRuntime.jsx(anglesLeft, {
+          className: "toolbar-icon angles-left"
+        }) : /*#__PURE__*/jsxRuntime.jsx(slides, {
+          className: "toolbar-icon slides"
         })
       })
     })

package/lib/cjs/components/Builder/SlidesNavigatorToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidesNavigatorToggle.js","sources":["../../../../src/components/Builder/SlidesNavigatorToggle.js"],"sourcesContent":["import { useBuilderStore } from '../../contexts/BuilderContext';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SlidesNavigatorToggle = () => {\n  const setIsSlidesNavigatorOpen = useBuilderStore(state => state.setIsSlidesNavigatorOpen);\n  const isSlidesNavigatorOpen = useBuilderStore(state => state.isSlidesNavigatorOpen);\n  const { SLIDES_NAVIGATOR_TOGGLE } = useTranslatedTexts();\n\n  const slidesNavigatorToggleHandler = () => {\n    setIsSlidesNavigatorOpen(!isSlidesNavigatorOpen);\n  };\n\n  return (\n    <div className=\"floatingController slides-navigator-toggle\">\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          onClick={slidesNavigatorToggleHandler}\n          title={SLIDES_NAVIGATOR_TOGGLE}\n          type=\"button\"\n        >\n          <icons.slides className=\"toolbar-icon\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default SlidesNavigatorToggle;\n"],"names":["SlidesNavigatorToggle","setIsSlidesNavigatorOpen","useBuilderStore","state","isSlidesNavigatorOpen","useTranslatedTexts","SLIDES_NAVIGATOR_TOGGLE","slidesNavigatorToggleHandler","_jsx","icons.slides"],"mappings":";;;;;;;IAIMA,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,MAAMC,wBAAwB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,wBAAV;AAAA,GAAN,CAAhD;AACA,MAAMG,qBAAqB,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,qBAAV;AAAA,GAAN,CAA7C;;AACA,4BAAoCC,wBAAkB,EAAtD;AAAA,MAAQC,uBAAR,uBAAQA,uBAAR;;AAEA,MAAMC,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AACzCN,IAAAA,wBAAwB,CAAC,CAACG,qBAAF,CAAxB;AACD,GAFD;;AAIA,sBACEI;AAAK,IAAA,SAAS,EAAC,4CAAf;AAAA,2BACEA;AAAK,MAAA,SAAS,EAAC,8BAAf;AAAA,6BACEA;AACE,QAAA,SAAS,EAAC,gBADZ;AAEE,QAAA,OAAO,EAAED,4BAFX;AAGE,QAAA,KAAK,EAAED,uBAHT;AAIE,QAAA,IAAI,EAAC,QAJP;AAAA,+BAMEE,eAACC,MAAD;AAAc,UAAA,SAAS,EAAC;AAAxB;AANF;AADF;AADF,IADF;AAcD;;;;"}
+{"version":3,"file":"SlidesNavigatorToggle.js","sources":["../../../../src/components/Builder/SlidesNavigatorToggle.js"],"sourcesContent":["import { useBuilderStore } from '../../contexts/BuilderContext';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SlidesNavigatorToggle = () => {\n  const setIsSlidesNavigatorOpen = useBuilderStore(state => state.setIsSlidesNavigatorOpen);\n  const isSlidesNavigatorOpen = useBuilderStore(state => state.isSlidesNavigatorOpen);\n  const { SLIDES_NAVIGATOR_TOGGLE } = useTranslatedTexts();\n\n  const slidesNavigatorToggleHandler = () => {\n    setIsSlidesNavigatorOpen(!isSlidesNavigatorOpen);\n  };\n\n  return (\n    <div className=\"floatingController slides-navigator-toggle\">\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          onClick={slidesNavigatorToggleHandler}\n          title={SLIDES_NAVIGATOR_TOGGLE}\n          type=\"button\"\n        >\n          {isSlidesNavigatorOpen ? <icons.anglesLeft className=\"toolbar-icon angles-left\" /> : <icons.slides className=\"toolbar-icon slides\" />}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default SlidesNavigatorToggle;\n"],"names":["SlidesNavigatorToggle","setIsSlidesNavigatorOpen","useBuilderStore","state","isSlidesNavigatorOpen","useTranslatedTexts","SLIDES_NAVIGATOR_TOGGLE","slidesNavigatorToggleHandler","_jsx","icons.anglesLeft","icons.slides"],"mappings":";;;;;;;;IAIMA,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,MAAMC,wBAAwB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,wBAAV;AAAA,GAAN,CAAhD;AACA,MAAMG,qBAAqB,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,qBAAV;AAAA,GAAN,CAA7C;;AACA,4BAAoCC,wBAAkB,EAAtD;AAAA,MAAQC,uBAAR,uBAAQA,uBAAR;;AAEA,MAAMC,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AACzCN,IAAAA,wBAAwB,CAAC,CAACG,qBAAF,CAAxB;AACD,GAFD;;AAIA,sBACEI;AAAK,IAAA,SAAS,EAAC,4CAAf;AAAA,2BACEA;AAAK,MAAA,SAAS,EAAC,8BAAf;AAAA,6BACEA;AACE,QAAA,SAAS,EAAC,gBADZ;AAEE,QAAA,OAAO,EAAED,4BAFX;AAGE,QAAA,KAAK,EAAED,uBAHT;AAIE,QAAA,IAAI,EAAC,QAJP;AAAA,kBAMGF,qBAAqB,gBAAGI,eAACC,UAAD;AAAkB,UAAA,SAAS,EAAC;AAA5B,UAAH,gBAA+DD,eAACE,MAAD;AAAc,UAAA,SAAS,EAAC;AAAxB;AANvF;AADF;AADF,IADF;AAcD;;;;"}

package/lib/cjs/components/Builder/ZoomControls.js

@@ -20,6 +20,9 @@ var ZoomControls = function ZoomControls() {
   var zoom$1 = BuilderContext.useBuilderStore(function (state) {
     return state.zoom;
   });
+  var resizedWidth = hooks.useResizeListener();
+  var minZoom = resizedWidth < 768 ? zoom.ZOOM_MOBILE_MIN : zoom.ZOOM_MIN;
+  var maxZoom = resizedWidth < 768 ? zoom.ZOOM_MOBILE_MAX : zoom.ZOOM_MAX;
   var onAnEventTrigger = PropContext.usePropStore(function (state) {
     return state.onAnEventTrigger;
   });
@@ -34,7 +37,7 @@ var ZoomControls = function ZoomControls() {
   var decreaseZoom = function decreaseZoom() {
     onAnEventTrigger('zoomOut', 'report');
 
-    if (zoom$1 > zoom.ZOOM_STEP + zoom.ZOOM_MIN) {
+    if (zoom$1 > minZoom) {
       setZoom(parseFloat((zoom$1 - zoom.ZOOM_STEP).toFixed(1)), reportLayoutWidth);
     }
   };
@@ -42,7 +45,7 @@ var ZoomControls = function ZoomControls() {
   var increaseZoom = function increaseZoom() {
     onAnEventTrigger('zoomIn', 'report');
 
-    if (zoom$1 < zoom.ZOOM_MAX) {
+    if (zoom$1 < maxZoom) {
       setZoom(parseFloat((zoom$1 + zoom.ZOOM_STEP).toFixed(1)), reportLayoutWidth);
     }
   };
@@ -74,6 +77,7 @@ var ZoomControls = function ZoomControls() {
       className: "floatingController-container",
       children: [/*#__PURE__*/jsxRuntime.jsx("button", {
         className: "controllerItem",
+        disabled: zoom$1 === maxZoom,
         onClick: increaseZoom,
         title: ZOOM_IN,
         type: "button",
@@ -85,6 +89,7 @@ var ZoomControls = function ZoomControls() {
         children: [zoomValue, "%"]
       }), /*#__PURE__*/jsxRuntime.jsx("button", {
         className: "controllerItem",
+        disabled: zoom$1 === minZoom,
         onClick: decreaseZoom,
         title: ZOOM_OUT,
         type: "button",

package/lib/cjs/components/Builder/ZoomControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport * as icons from '../../utils/icons';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport {\n  ZOOM_STEP,\n  ZOOM_MIN,\n  ZOOM_MAX,\n  ZOOM_MULTIPLIER,\n} from '../../constants/zoom';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = () => {\n  const setZoom = useBuilderStore(state => state.setZoom);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const settings = usePropStore(state => state.settings);\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n  const decreaseZoom = () => {\n    onAnEventTrigger('zoomOut', 'report');\n    if (zoom > (ZOOM_STEP + ZOOM_MIN)) {\n      setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), reportLayoutWidth);\n    }\n  };\n  const increaseZoom = () => {\n    onAnEventTrigger('zoomIn', 'report');\n    if (zoom < (ZOOM_MAX)) {\n      setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), reportLayoutWidth);\n    }\n  };\n  const fitZoom = () => {\n    const { innerHeight, innerWidth } = window;\n    const newScale = Math.min(\n      (innerWidth - 400) / reportLayoutWidth,\n      innerHeight / reportLayoutHeight,\n    );\n    let newZoom = Math.floor(newScale * 10) / 10;\n    if (newZoom < 0.5) newZoom = 0.5;\n    if (newZoom > 1) newZoom = 1;\n    onAnEventTrigger('fitZoom', 'report');\n    setZoom(newZoom, reportLayoutWidth);\n  };\n\n  const zoomValue = useMemo(() => {\n    return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n  }, [zoom]);\n\n  const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n  return (\n    <div className=\"floatingController zoom-toolbar\">\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          onClick={increaseZoom}\n          title={ZOOM_IN}\n          type=\"button\"\n        >\n          <icons.plus className=\"toolbar-icon\" />\n        </button>\n        <div className=\"controllerIndicator\">\n          {zoomValue}\n          %\n        </div>\n        <button\n          className=\"controllerItem\"\n          onClick={decreaseZoom}\n          title={ZOOM_OUT}\n          type=\"button\"\n        >\n          <icons.minus className=\"toolbar-icon\" />\n        </button>\n      </div>\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          onClick={fitZoom}\n          title={FIT_TO_SCENE}\n          type=\"button\"\n        >\n          <icons.fit className=\"toolbar-icon\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","setZoom","useBuilderStore","state","zoom","onAnEventTrigger","usePropStore","settings","reportLayoutHeight","reportLayoutWidth","decreaseZoom","ZOOM_STEP","ZOOM_MIN","parseFloat","toFixed","increaseZoom","ZOOM_MAX","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit"],"mappings":"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"}
+{"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport * as icons from '../../utils/icons';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport {\n  ZOOM_STEP,\n  ZOOM_MIN,\n  ZOOM_MAX,\n  ZOOM_MULTIPLIER,\n  ZOOM_MOBILE_MIN,\n  ZOOM_MOBILE_MAX,\n} from '../../constants/zoom';\nimport { useResizeListener, useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = () => {\n  const setZoom = useBuilderStore(state => state.setZoom);\n  const zoom = useBuilderStore(state => state.zoom);\n  const resizedWidth = useResizeListener();\n  const minZoom = resizedWidth < 768 ? ZOOM_MOBILE_MIN : ZOOM_MIN;\n  const maxZoom = resizedWidth < 768 ? ZOOM_MOBILE_MAX : ZOOM_MAX;\n\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const settings = usePropStore(state => state.settings);\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n  const decreaseZoom = () => {\n    onAnEventTrigger('zoomOut', 'report');\n    if (zoom > minZoom) {\n      setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), reportLayoutWidth);\n    }\n  };\n  const increaseZoom = () => {\n    onAnEventTrigger('zoomIn', 'report');\n    if (zoom < maxZoom) {\n      setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), reportLayoutWidth);\n    }\n  };\n  const fitZoom = () => {\n    const { innerHeight, innerWidth } = window;\n    const newScale = Math.min(\n      (innerWidth - 400) / reportLayoutWidth,\n      innerHeight / reportLayoutHeight,\n    );\n    let newZoom = Math.floor(newScale * 10) / 10;\n    if (newZoom < 0.5) newZoom = 0.5;\n    if (newZoom > 1) newZoom = 1;\n    onAnEventTrigger('fitZoom', 'report');\n    setZoom(newZoom, reportLayoutWidth);\n  };\n\n  const zoomValue = useMemo(() => {\n    return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n  }, [zoom]);\n\n  const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n  return (\n    <div className=\"floatingController zoom-toolbar\">\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          disabled={zoom === maxZoom}\n          onClick={increaseZoom}\n          title={ZOOM_IN}\n          type=\"button\"\n        >\n          <icons.plus className=\"toolbar-icon\" />\n        </button>\n        <div className=\"controllerIndicator\">\n          {zoomValue}\n          %\n        </div>\n        <button\n          className=\"controllerItem\"\n          disabled={zoom === minZoom}\n          onClick={decreaseZoom}\n          title={ZOOM_OUT}\n          type=\"button\"\n        >\n          <icons.minus className=\"toolbar-icon\" />\n        </button>\n      </div>\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem\"\n          onClick={fitZoom}\n          title={FIT_TO_SCENE}\n          type=\"button\"\n        >\n          <icons.fit className=\"toolbar-icon\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","setZoom","useBuilderStore","state","zoom","resizedWidth","useResizeListener","minZoom","ZOOM_MOBILE_MIN","ZOOM_MIN","maxZoom","ZOOM_MOBILE_MAX","ZOOM_MAX","onAnEventTrigger","usePropStore","settings","reportLayoutHeight","reportLayoutWidth","decreaseZoom","parseFloat","ZOOM_STEP","toFixed","increaseZoom","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit"],"mappings":";;;;;;;;;;;;;;;IAcMA,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,MAAMC,OAAO,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,OAAV;AAAA,GAAN,CAA/B;AACA,MAAMG,MAAI,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,IAAV;AAAA,GAAN,CAA5B;AACA,MAAMC,YAAY,GAAGC,uBAAiB,EAAtC;AACA,MAAMC,OAAO,GAAGF,YAAY,GAAG,GAAf,GAAqBG,oBAArB,GAAuCC,aAAvD;AACA,MAAMC,OAAO,GAAGL,YAAY,GAAG,GAAf,GAAqBM,oBAArB,GAAuCC,aAAvD;AAEA,MAAMC,gBAAgB,GAAGC,wBAAY,CAAC,UAAAX,KAAK;AAAA,WAAIA,KAAK,CAACU,gBAAV;AAAA,GAAN,CAArC;AACA,MAAME,QAAQ,GAAGD,wBAAY,CAAC,UAAAX,KAAK;AAAA,WAAIA,KAAK,CAACY,QAAV;AAAA,GAAN,CAA7B;AAEA,8BAA+DA,QAA/D,CAAQC,kBAAR;AAAA,MAAQA,kBAAR,sCAA6B,GAA7B;AAAA,+BAA+DD,QAA/D,CAAkCE,iBAAlC;AAAA,MAAkCA,iBAAlC,uCAAsD,IAAtD;;AACA,MAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzBL,IAAAA,gBAAgB,CAAC,SAAD,EAAY,QAAZ,CAAhB;;AACA,QAAIT,MAAI,GAAGG,OAAX,EAAoB;AAClBN,MAAAA,OAAO,CAACkB,UAAU,CAAC,CAACf,MAAI,GAAGgB,cAAR,EAAmBC,OAAnB,CAA2B,CAA3B,CAAD,CAAX,EAA4CJ,iBAA5C,CAAP;AACD;AACF,GALD;;AAMA,MAAMK,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzBT,IAAAA,gBAAgB,CAAC,QAAD,EAAW,QAAX,CAAhB;;AACA,QAAIT,MAAI,GAAGM,OAAX,EAAoB;AAClBT,MAAAA,OAAO,CAACkB,UAAU,CAAC,CAACf,MAAI,GAAGgB,cAAR,EAAmBC,OAAnB,CAA2B,CAA3B,CAAD,CAAX,EAA4CJ,iBAA5C,CAAP;AACD;AACF,GALD;;AAMA,MAAMM,OAAO,GAAG,SAAVA,OAAU,GAAM;AACpB,kBAAoCC,MAApC;AAAA,QAAQC,WAAR,WAAQA,WAAR;AAAA,QAAqBC,UAArB,WAAqBA,UAArB;AACA,QAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAL,CACf,CAACH,UAAU,GAAG,GAAd,IAAqBT,iBADN,EAEfQ,WAAW,GAAGT,kBAFC,CAAjB;AAIA,QAAIc,OAAO,GAAGF,IAAI,CAACG,KAAL,CAAWJ,QAAQ,GAAG,EAAtB,IAA4B,EAA1C;AACA,QAAIG,OAAO,GAAG,GAAd,EAAmBA,OAAO,GAAG,GAAV;AACnB,QAAIA,OAAO,GAAG,CAAd,EAAiBA,OAAO,GAAG,CAAV;AACjBjB,IAAAA,gBAAgB,CAAC,SAAD,EAAY,QAAZ,CAAhB;AACAZ,IAAAA,OAAO,CAAC6B,OAAD,EAAUb,iBAAV,CAAP;AACD,GAXD;;AAaA,MAAMe,SAAS,GAAGC,aAAO,CAAC,YAAM;AAC9B,WAAOC,MAAM,CAACC,KAAP,CAAa/B,MAAb,IAAqB,GAArB,GAA2B,CAACA,MAAI,GAAGgC,oBAAR,EAAyBf,OAAzB,CAAiC,CAAjC,CAAlC;AACD,GAFwB,EAEtB,CAACjB,MAAD,CAFsB,CAAzB;;AAIA,4BAA4CiC,wBAAkB,EAA9D;AAAA,MAAQC,YAAR,uBAAQA,YAAR;AAAA,MAAsBC,OAAtB,uBAAsBA,OAAtB;AAAA,MAA+BC,QAA/B,uBAA+BA,QAA/B;;AAEA,sBACEC;AAAK,IAAA,SAAS,EAAC,iCAAf;AAAA,4BACEA;AAAK,MAAA,SAAS,EAAC,8BAAf;AAAA,8BACEC;AACE,QAAA,SAAS,EAAC,gBADZ;AAEE,QAAA,QAAQ,EAAEtC,MAAI,KAAKM,OAFrB;AAGE,QAAA,OAAO,EAAEY,YAHX;AAIE,QAAA,KAAK,EAAEiB,OAJT;AAKE,QAAA,IAAI,EAAC,QALP;AAAA,+BAOEG,eAACC,IAAD;AAAY,UAAA,SAAS,EAAC;AAAtB;AAPF,QADF,eAUEF;AAAK,QAAA,SAAS,EAAC,qBAAf;AAAA,mBACGT,SADH;AAAA,QAVF,eAcEU;AACE,QAAA,SAAS,EAAC,gBADZ;AAEE,QAAA,QAAQ,EAAEtC,MAAI,KAAKG,OAFrB;AAGE,QAAA,OAAO,EAAEW,YAHX;AAIE,QAAA,KAAK,EAAEsB,QAJT;AAKE,QAAA,IAAI,EAAC,QALP;AAAA,+BAOEE,eAACE,KAAD;AAAa,UAAA,SAAS,EAAC;AAAvB;AAPF,QAdF;AAAA,MADF,eAyBEF;AAAK,MAAA,SAAS,EAAC,8BAAf;AAAA,6BACEA;AACE,QAAA,SAAS,EAAC,gBADZ;AAEE,QAAA,OAAO,EAAEnB,OAFX;AAGE,QAAA,KAAK,EAAEe,YAHT;AAIE,QAAA,IAAI,EAAC,QAJP;AAAA,+BAMEI,eAACG,UAAD;AAAW,UAAA,SAAS,EAAC;AAArB;AANF;AADF,MAzBF;AAAA,IADF;AAsCD;;;;"}

package/lib/cjs/components/Panels/LeftPanel/Elements.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.filter.js');
 require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.array.map.js');
@@ -72,6 +73,15 @@ var Elements = function Elements() {
   var elementWillBeUsed = React.useMemo(function () {
     return Array.isArray(elements) ? elements : [];
   }, [elements]);
+  var flatElements = React.useMemo(function () {
+    return elementWillBeUsed.reduce(function (acc, item) {
+      if (Array.isArray(item.elements)) {
+        return acc.concat(item.elements);
+      }
+
+      return acc.concat(item);
+    }, []);
+  }, [elementWillBeUsed]);
 
   var _useState = React.useState(elementWillBeUsed),
       _useState2 = _slicedToArray(_useState, 2),
@@ -87,11 +97,28 @@ var Elements = function Elements() {
       return;
     }
 
-    var filteredElements = elementWillBeUsed === null || elementWillBeUsed === void 0 ? void 0 : elementWillBeUsed.filter(function (element) {
+    var filteredElements = flatElements.filter(function (element) {
       return element.title.toLowerCase().includes(value.toLowerCase());
     });
     setSearchElements(filteredElements);
-  }, [elementWillBeUsed]);
+  }, [elementWillBeUsed, flatElements]);
+  var renderElements = React.useCallback(function (items) {
+    return items.map(function (item, index) {
+      if (Array.isArray(item.elements)) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "toolItem-subSection",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "toolItem-subSection-title",
+            children: item.title
+          }), item.elements.map(function (el, elIndex) {
+            return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, el), elIndex.toString());
+          })]
+        }, item.section || index);
+      }
+
+      return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, item), index.toString());
+    });
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "toolItemWrapper f-height d-flex dir-col o-auto p-relative",
     children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanelCloser, {}), /*#__PURE__*/jsxRuntime.jsxs(Section, {
@@ -103,9 +130,7 @@ var Elements = function Elements() {
         onSearch: filterElementsBySearch
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "toolItem-tabContent",
-        children: searchElements.length > 0 ? searchElements.map(function (element, index) {
-          return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, element), index.toString());
-        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: searchElements.length > 0 ? renderElements(searchElements) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "no-search-result-text",
           children: NO_RESULT
         })

package/lib/cjs/components/Panels/LeftPanel/Elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n  memo,\n  useState,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n  const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n  const activeTab = useBuilderStore(state => state.activeTab);\n  const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n  // Tabs\n  const tabDetails = getTabsWithElements(leftPanelConfig);\n  const tabs = useMemo(() => {\n    return Object.keys(tabDetails);\n  }, [tabDetails]);\n\n  const {\n    elements = {},\n    hasSearch = false,\n  } = useMemo(() => {\n    return tabDetails[tabs[activeTab.left]] || {};\n  }, [activeTab.left, tabDetails, tabs]);\n\n  const elementWillBeUsed = useMemo(() => {\n    return Array.isArray(elements) ? elements : [];\n  }, [elements]);\n\n  const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n  useEffect(() => {\n    setSearchElements(elementWillBeUsed);\n  }, [elementWillBeUsed]);\n\n  const filterElementsBySearch = useCallback(value => {\n    if (value === '') {\n      setSearchElements(elementWillBeUsed);\n      return;\n    }\n    const filteredElements = elementWillBeUsed?.filter(element => element.title.toLowerCase().includes(value.toLowerCase()));\n    setSearchElements(filteredElements);\n  }, [elementWillBeUsed]);\n\n  return (\n    <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n      <LeftPanelCloser />\n      <Section\n        title={ADD_ELEMENT}\n      >\n        <Tabs\n          panel=\"left\"\n          tabs={tabs}\n        />\n        {hasSearch && (\n          <SearchInput onSearch={filterElementsBySearch} />\n        )}\n        <div className=\"toolItem-tabContent\">\n          {searchElements.length > 0 ? searchElements.map((element, index) => (\n            <Element\n              key={index.toString()}\n              {...element}\n            />\n          )) : (\n            <div className=\"no-search-result-text\">{NO_RESULT}</div>\n          )}\n        </div>\n      </Section>\n    </div>\n  );\n};\n\nElements.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  leftPanelConfig: leftPanelConfigPropType,\n  onAnEventTrigger: PropTypes.func,\n  onItemAdd: PropTypes.func,\n};\n\nexport default memo(Elements);\n"],"names":["Elements","leftPanelConfig","usePropStore","state","activeTab","useBuilderStore","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","useMemo","Object","keys","left","elements","hasSearch","elementWillBeUsed","Array","isArray","useState","searchElements","setSearchElements","useEffect","filterElementsBySearch","useCallback","value","filteredElements","filter","element","title","toLowerCase","includes","_jsxs","_jsx","length","map","index","toString","propTypes","acceptedItems","PropTypes","shape","leftPanelConfigPropType","onAnEventTrigger","func","onItemAdd","memo"],"mappings":"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"}
+{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n  memo,\n  useState,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n  const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n  const activeTab = useBuilderStore(state => state.activeTab);\n  const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n  // Tabs\n  const tabDetails = getTabsWithElements(leftPanelConfig);\n  const tabs = useMemo(() => {\n    return Object.keys(tabDetails);\n  }, [tabDetails]);\n\n  const {\n    elements = {},\n    hasSearch = false,\n  } = useMemo(() => {\n    return tabDetails[tabs[activeTab.left]] || {};\n  }, [activeTab.left, tabDetails, tabs]);\n\n  const elementWillBeUsed = useMemo(() => {\n    return Array.isArray(elements) ? elements : [];\n  }, [elements]);\n\n  const flatElements = useMemo(() => {\n    return elementWillBeUsed.reduce((acc, item) => {\n      if (Array.isArray(item.elements)) {\n        return acc.concat(item.elements);\n      }\n      return acc.concat(item);\n    }, []);\n  }, [elementWillBeUsed]);\n\n  const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n  useEffect(() => {\n    setSearchElements(elementWillBeUsed);\n  }, [elementWillBeUsed]);\n\n  const filterElementsBySearch = useCallback(value => {\n    if (value === '') {\n      setSearchElements(elementWillBeUsed);\n      return;\n    }\n    const filteredElements = flatElements.filter(element => element.title.toLowerCase().includes(value.toLowerCase()));\n    setSearchElements(filteredElements);\n  }, [elementWillBeUsed, flatElements]);\n\n  const renderElements = useCallback(items => {\n    return items.map((item, index) => {\n      if (Array.isArray(item.elements)) {\n        return (\n          <div\n            key={item.section || index}\n            className=\"toolItem-subSection\"\n          >\n            <span className=\"toolItem-subSection-title\">{item.title}</span>\n            {item.elements.map((el, elIndex) => (\n              <Element\n                key={elIndex.toString()}\n                {...el}\n              />\n            ))}\n          </div>\n        );\n      }\n      return (\n        <Element\n          key={index.toString()}\n          {...item}\n        />\n      );\n    });\n  }, []);\n\n  return (\n    <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n      <LeftPanelCloser />\n      <Section\n        title={ADD_ELEMENT}\n      >\n        <Tabs\n          panel=\"left\"\n          tabs={tabs}\n        />\n        {hasSearch && (\n          <SearchInput onSearch={filterElementsBySearch} />\n        )}\n        <div className=\"toolItem-tabContent\">\n          {searchElements.length > 0 ? renderElements(searchElements) : (\n            <div className=\"no-search-result-text\">{NO_RESULT}</div>\n          )}\n        </div>\n      </Section>\n    </div>\n  );\n};\n\nElements.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  leftPanelConfig: leftPanelConfigPropType,\n  onAnEventTrigger: PropTypes.func,\n  onItemAdd: PropTypes.func,\n};\n\nexport default memo(Elements);\n"],"names":["Elements","leftPanelConfig","usePropStore","state","activeTab","useBuilderStore","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","useMemo","Object","keys","left","elements","hasSearch","elementWillBeUsed","Array","isArray","flatElements","reduce","acc","item","concat","useState","searchElements","setSearchElements","useEffect","filterElementsBySearch","useCallback","value","filteredElements","filter","element","title","toLowerCase","includes","renderElements","items","map","index","_jsxs","_jsx","el","elIndex","toString","section","length","propTypes","acceptedItems","PropTypes","shape","leftPanelConfigPropType","onAnEventTrigger","func","onItemAdd","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,GAAM;AACrB,MAAMC,eAAe,GAAGC,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,eAAV;AAAA,GAAN,CAApC;AACA,MAAMG,SAAS,GAAGC,8BAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACC,SAAV;AAAA,GAAN,CAAjC;;AACA,4BAAmCE,wBAAkB,EAArD;AAAA,MAAQC,WAAR,uBAAQA,WAAR;AAAA,MAAqBC,SAArB,uBAAqBA,SAArB,CAHqB;;;AAMrB,MAAMC,UAAU,GAAGC,6BAAmB,CAACT,eAAD,CAAtC;AACA,MAAMU,IAAI,GAAGC,aAAO,CAAC,YAAM;AACzB,WAAOC,MAAM,CAACC,IAAP,CAAYL,UAAZ,CAAP;AACD,GAFmB,EAEjB,CAACA,UAAD,CAFiB,CAApB;;AAIA,iBAGIG,aAAO,CAAC,YAAM;AAChB,WAAOH,UAAU,CAACE,IAAI,CAACP,SAAS,CAACW,IAAX,CAAL,CAAV,IAAoC,EAA3C;AACD,GAFU,EAER,CAACX,SAAS,CAACW,IAAX,EAAiBN,UAAjB,EAA6BE,IAA7B,CAFQ,CAHX;AAAA,mCACEK,QADF;AAAA,MACEA,QADF,kCACa,EADb;AAAA,oCAEEC,SAFF;AAAA,MAEEA,SAFF,mCAEc,KAFd;;AAOA,MAAMC,iBAAiB,GAAGN,aAAO,CAAC,YAAM;AACtC,WAAOO,KAAK,CAACC,OAAN,CAAcJ,QAAd,IAA0BA,QAA1B,GAAqC,EAA5C;AACD,GAFgC,EAE9B,CAACA,QAAD,CAF8B,CAAjC;AAIA,MAAMK,YAAY,GAAGT,aAAO,CAAC,YAAM;AACjC,WAAOM,iBAAiB,CAACI,MAAlB,CAAyB,UAACC,GAAD,EAAMC,IAAN,EAAe;AAC7C,UAAIL,KAAK,CAACC,OAAN,CAAcI,IAAI,CAACR,QAAnB,CAAJ,EAAkC;AAChC,eAAOO,GAAG,CAACE,MAAJ,CAAWD,IAAI,CAACR,QAAhB,CAAP;AACD;;AACD,aAAOO,GAAG,CAACE,MAAJ,CAAWD,IAAX,CAAP;AACD,KALM,EAKJ,EALI,CAAP;AAMD,GAP2B,EAOzB,CAACN,iBAAD,CAPyB,CAA5B;;AASA,kBAA4CQ,cAAQ,CAACR,iBAAD,CAApD;AAAA;AAAA,MAAOS,cAAP;AAAA,MAAuBC,iBAAvB;;AAEAC,EAAAA,eAAS,CAAC,YAAM;AACdD,IAAAA,iBAAiB,CAACV,iBAAD,CAAjB;AACD,GAFQ,EAEN,CAACA,iBAAD,CAFM,CAAT;AAIA,MAAMY,sBAAsB,GAAGC,iBAAW,CAAC,UAAAC,KAAK,EAAI;AAClD,QAAIA,KAAK,KAAK,EAAd,EAAkB;AAChBJ,MAAAA,iBAAiB,CAACV,iBAAD,CAAjB;AACA;AACD;;AACD,QAAMe,gBAAgB,GAAGZ,YAAY,CAACa,MAAb,CAAoB,UAAAC,OAAO;AAAA,aAAIA,OAAO,CAACC,KAAR,CAAcC,WAAd,GAA4BC,QAA5B,CAAqCN,KAAK,CAACK,WAAN,EAArC,CAAJ;AAAA,KAA3B,CAAzB;AACAT,IAAAA,iBAAiB,CAACK,gBAAD,CAAjB;AACD,GAPyC,EAOvC,CAACf,iBAAD,EAAoBG,YAApB,CAPuC,CAA1C;AASA,MAAMkB,cAAc,GAAGR,iBAAW,CAAC,UAAAS,KAAK,EAAI;AAC1C,WAAOA,KAAK,CAACC,GAAN,CAAU,UAACjB,IAAD,EAAOkB,KAAP,EAAiB;AAChC,UAAIvB,KAAK,CAACC,OAAN,CAAcI,IAAI,CAACR,QAAnB,CAAJ,EAAkC;AAChC,4BACE2B;AAEE,UAAA,SAAS,EAAC,qBAFZ;AAAA,kCAIEC;AAAM,YAAA,SAAS,EAAC,2BAAhB;AAAA,sBAA6CpB,IAAI,CAACY;AAAlD,YAJF,EAKGZ,IAAI,CAACR,QAAL,CAAcyB,GAAd,CAAkB,UAACI,EAAD,EAAKC,OAAL;AAAA,gCACjBF,eAAC,OAAD,oBAEMC,EAFN,GACOC,OAAO,CAACC,QAAR,EADP,CADiB;AAAA,WAAlB,CALH;AAAA,WACOvB,IAAI,CAACwB,OAAL,IAAgBN,KADvB,CADF;AAcD;;AACD,0BACEE,eAAC,OAAD,oBAEMpB,IAFN,GACOkB,KAAK,CAACK,QAAN,EADP,CADF;AAMD,KAvBM,CAAP;AAwBD,GAzBiC,EAyB/B,EAzB+B,CAAlC;AA2BA,sBACEJ;AAAK,IAAA,SAAS,EAAC,2DAAf;AAAA,4BACEC,eAAC,eAAD,KADF,eAEED,gBAAC,OAAD;AACE,MAAA,KAAK,EAAEpC,WADT;AAAA,8BAGEqC,eAAC,IAAD;AACE,QAAA,KAAK,EAAC,MADR;AAEE,QAAA,IAAI,EAAEjC;AAFR,QAHF,EAOGM,SAAS,iBACR2B,eAAC,WAAD;AAAa,QAAA,QAAQ,EAAEd;AAAvB,QARJ,eAUEc;AAAK,QAAA,SAAS,EAAC,qBAAf;AAAA,kBACGjB,cAAc,CAACsB,MAAf,GAAwB,CAAxB,GAA4BV,cAAc,CAACZ,cAAD,CAA1C,gBACCiB;AAAK,UAAA,SAAS,EAAC,uBAAf;AAAA,oBAAwCpC;AAAxC;AAFJ,QAVF;AAAA,MAFF;AAAA,IADF;AAqBD,CA9FD;;AAgGAR,QAAQ,CAACkD,SAAT,GAAqB;AACnBC,EAAAA,aAAa,EAAEC,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CADI;AAEnBpD,EAAAA,eAAe,EAAEqD,iCAFE;AAGnBC,EAAAA,gBAAgB,EAAEH,6BAAS,CAACI,IAHT;AAInBC,EAAAA,SAAS,EAAEL,6BAAS,CAACI;AAJF,CAArB;AAOA,8BAAeE,UAAI,CAAC1D,QAAD,CAAnB;;;;"}

package/lib/cjs/components/Preview/StaticScene.js

@@ -3,6 +3,8 @@
 require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.array.slice.js');
+require('core-js/modules/es.number.constructor.js');
+require('core-js/modules/es.number.is-nan.js');
 require('core-js/modules/es.number.to-fixed.js');
 require('core-js/modules/es.object.to-string.js');
 require('core-js/modules/es.regexp.to-string.js');
@@ -70,6 +72,8 @@ var StaticScene = function StaticScene(_ref) {
       reportPageTransition = _settings$reportPageT === void 0 ? 'noAnimation' : _settings$reportPageT;
   var width = parseInt(reportLayoutWidth, 10);
   var height = parseInt(reportLayoutHeight, 10);
+  var zoomToUse = Number.isNaN(zoom) ? 1 : zoom;
+  var isPreviewCssZoom = mode === 'preview';
   React.useEffect(function () {
     transformRefs.current = transformRefs.current.slice(0, pages.length);
   }, [pages.length]);
@@ -89,18 +93,25 @@ var StaticScene = function StaticScene(_ref) {
     }
   }, [setZoom]);
   React.useEffect(function () {
+    if (mode !== 'presentation') {
+      return;
+    }
+
     if (transformRefs.current.length > 0) {
       for (var i = 0; i < pages.length; i++) {
-        transformRefs.current[i].centerView(zoom);
+        var _transformRefs$curren, _transformRefs$curren2;
+
+        (_transformRefs$curren = transformRefs.current[i]) === null || _transformRefs$curren === void 0 ? void 0 : (_transformRefs$curren2 = _transformRefs$curren.centerView) === null || _transformRefs$curren2 === void 0 ? void 0 : _transformRefs$curren2.call(_transformRefs$curren, zoom);
       }
     }
-  }, [pages.length, zoom]);
+  }, [pages.length, zoom, mode]);
   var isEnabledZoomControls = (!isFullscreen || isFullscreen && showControlsInFullScreen) && !hideZoom;
   return /*#__PURE__*/jsxRuntime.jsxs("main", {
     className: classNames.mainWrapper,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
       ref: viewPortRef,
-      className: classNames.viewport
+      className: classNames.viewport,
+      "data-zoom": isPreviewCssZoom ? zoom : undefined
     }, gesture()), {}, {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "".concat(classNames.canvas, " ").concat(reportPageTransition),
@@ -109,15 +120,26 @@ var StaticScene = function StaticScene(_ref) {
           var _cNames;
 
           var backgroundColor = page.backgroundColor;
-
-          var style = _objectSpread(_objectSpread({}, pageContainerStyles), {}, {
-            backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff'
+          var bg = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';
+          var style = isPreviewCssZoom ? {
+            backgroundColor: bg,
+            height: height,
+            transform: "scale(".concat(zoomToUse, ")"),
+            transformOrigin: '0 0',
+            width: width
+          } : _objectSpread(_objectSpread({}, pageContainerStyles), {}, {
+            backgroundColor: bg
           });
-
+          var pageOuterStyle = isPreviewCssZoom ? {
+            height: parseFloat((height * zoomToUse).toFixed(1)),
+            position: 'relative',
+            width: parseFloat((width * zoomToUse).toFixed(1))
+          } : undefined;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
             className: classNames__default['default']((_cNames = {}, _defineProperty(_cNames, classNames.page, true), _defineProperty(_cNames, string.slugify(reportLayout), true), _defineProperty(_cNames, "activePage", index === presentationPage), _cNames)),
             "data-id": page.id,
             id: "presentation-page-".concat(page.id.toString()),
+            style: pageOuterStyle,
             children: /*#__PURE__*/jsxRuntime.jsx(StaticPage.StaticPageWithZoomPanPinch, {
               handleZoom: handleZoom,
               items: page.items,
@@ -130,7 +152,10 @@ var StaticScene = function StaticScene(_ref) {
           }, "page_".concat(index.toString()));
         })
       })
-    })), isEnabledZoomControls && /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {})]
+    })), isEnabledZoomControls && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "bottom-actions-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {})
+    })]
   });
 };
 

package/lib/cjs/components/Preview/StaticScene.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticScene.js","sources":["../../../../src/components/Preview/StaticScene.js"],"sourcesContent":["import {\n  useCallback, useEffect, useMemo, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport cNames from 'classnames';\nimport * as classNames from '../../constants/classNames';\nimport { StaticPageWithZoomPanPinch } from './StaticPage';\nimport { usePropStore } from '../../contexts/PropContext';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { slugify } from '../../utils/string';\nimport { usePageTransition } from '../../utils/hooks';\nimport { usePresentationStore } from '../../contexts/PresentationContext';\nimport ZoomControls from '../Builder/ZoomControls';\n\nconst StaticScene = ({\n  gesture = () => {},\n  hideZoom = false,\n  mode = '',\n  presentationPage = 0,\n}) => {\n  const setZoom = useBuilderStore(state => state.setZoom);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const isFullscreen = usePresentationStore(state => state.isFullscreen);\n  const showControlsInFullScreen = usePresentationStore(state => state.showControlsInFullScreen);\n\n  const settings = usePropStore(state => state.settings);\n  const pages = usePropStore(state => state.pages);\n\n  const viewPortRef = useRef({});\n  const transformRefs = useRef([]);\n\n  const {\n    reportBackgroundColor,\n    reportLayout = 'A4 Landscape',\n    reportLayoutHeight = 794,\n    reportLayoutWidth = 1123,\n    reportPageTransition = 'noAnimation',\n  } = settings;\n  const width = parseInt(reportLayoutWidth, 10);\n  const height = parseInt(reportLayoutHeight, 10);\n\n  useEffect(() => {\n    transformRefs.current = transformRefs.current.slice(0, pages.length);\n  }, [pages.length]);\n\n  const pageContainerStyles = useMemo(() => ({\n    height,\n    width,\n  }), [width, height]);\n\n  const transitionStyle = usePageTransition(reportPageTransition, presentationPage);\n\n  const handleZoom = useCallback(zoomPanPinch => {\n    const fixedValue = parseFloat(zoomPanPinch.state.scale.toFixed(2));\n    const roundValue = parseFloat((Math.round((fixedValue * 100)) / 100).toFixed(1));\n    if (roundValue <= 2 && roundValue >= 0.5) {\n      setZoom(roundValue);\n    }\n  }, [setZoom]);\n\n  useEffect(() => {\n    if (transformRefs.current.length > 0) {\n      for (let i = 0; i < pages.length; i++) {\n        transformRefs.current[i].centerView(zoom);\n      }\n    }\n  }, [pages.length, zoom]);\n\n  const isEnabledZoomControls = (!isFullscreen || (isFullscreen && showControlsInFullScreen)) && !hideZoom;\n\n  return (\n    <main\n      className={classNames.mainWrapper}\n    >\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        {...gesture()}\n      >\n        <div\n          className={`${classNames.canvas} ${reportPageTransition}`}\n          style={transitionStyle}\n        >\n          {pages.map((page, index) => {\n            const { backgroundColor } = page;\n            const style = {\n              ...pageContainerStyles,\n              backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff',\n            };\n            return (\n              <div\n                key={`page_${index.toString()}`}\n                className={cNames({\n                  [classNames.page]: true,\n                  [slugify(reportLayout)]: true,\n                  activePage: index === presentationPage,\n                })}\n                data-id={page.id}\n                id={`presentation-page-${page.id.toString()}`}\n              >\n                <StaticPageWithZoomPanPinch\n                  handleZoom={handleZoom}\n                  items={page.items}\n                  mode={mode}\n                  refSetter={element => { transformRefs.current[index] = element; }}\n                  style={style}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      {isEnabledZoomControls && <ZoomControls />}\n    </main>\n  );\n};\n\nStaticScene.propTypes = {\n  gesture: PropTypes.func,\n  hideZoom: PropTypes.bool,\n  mode: PropTypes.string.isRequired,\n  presentationPage: PropTypes.number,\n};\n\nexport default StaticScene;\n"],"names":["StaticScene","gesture","hideZoom","mode","presentationPage","setZoom","useBuilderStore","state","zoom","isFullscreen","usePresentationStore","showControlsInFullScreen","settings","usePropStore","pages","viewPortRef","useRef","transformRefs","reportBackgroundColor","reportLayout","reportLayoutHeight","reportLayoutWidth","reportPageTransition","width","parseInt","height","useEffect","current","slice","length","pageContainerStyles","useMemo","transitionStyle","usePageTransition","handleZoom","useCallback","zoomPanPinch","fixedValue","parseFloat","scale","toFixed","roundValue","Math","round","i","centerView","isEnabledZoomControls","_jsxs","classNames","_jsx","map","page","index","backgroundColor","style","cNames","slugify","id","toString","StaticPageWithZoomPanPinch","items","element","propTypes","PropTypes","func","bool","string","isRequired","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcMA,WAAW,GAAG,SAAdA,WAAc,OAKd;AAAA,0BAJJC,OAII;AAAA,MAJJA,OAII,6BAJM,YAAM,EAIZ;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,uBAFJC,IAEI;AAAA,MAFJA,IAEI,0BAFG,EAEH;AAAA,mCADJC,gBACI;AAAA,MADJA,gBACI,sCADe,CACf;AACJ,MAAMC,OAAO,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,OAAV;AAAA,GAAN,CAA/B;AACA,MAAMG,IAAI,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,IAAV;AAAA,GAAN,CAA5B;AAEA,MAAMC,YAAY,GAAGC,wCAAoB,CAAC,UAAAH,KAAK;AAAA,WAAIA,KAAK,CAACE,YAAV;AAAA,GAAN,CAAzC;AACA,MAAME,wBAAwB,GAAGD,wCAAoB,CAAC,UAAAH,KAAK;AAAA,WAAIA,KAAK,CAACI,wBAAV;AAAA,GAAN,CAArD;AAEA,MAAMC,QAAQ,GAAGC,wBAAY,CAAC,UAAAN,KAAK;AAAA,WAAIA,KAAK,CAACK,QAAV;AAAA,GAAN,CAA7B;AACA,MAAME,KAAK,GAAGD,wBAAY,CAAC,UAAAN,KAAK;AAAA,WAAIA,KAAK,CAACO,KAAV;AAAA,GAAN,CAA1B;AAEA,MAAMC,WAAW,GAAGC,YAAM,CAAC,EAAD,CAA1B;AACA,MAAMC,aAAa,GAAGD,YAAM,CAAC,EAAD,CAA5B;AAEA,MACEE,qBADF,GAMIN,QANJ,CACEM,qBADF;AAAA,8BAMIN,QANJ,CAEEO,YAFF;AAAA,MAEEA,YAFF,sCAEiB,cAFjB;AAAA,+BAMIP,QANJ,CAGEQ,kBAHF;AAAA,MAGEA,kBAHF,uCAGuB,GAHvB;AAAA,+BAMIR,QANJ,CAIES,iBAJF;AAAA,MAIEA,iBAJF,uCAIsB,IAJtB;AAAA,8BAMIT,QANJ,CAKEU,oBALF;AAAA,MAKEA,oBALF,sCAKyB,aALzB;AAOA,MAAMC,KAAK,GAAGC,QAAQ,CAACH,iBAAD,EAAoB,EAApB,CAAtB;AACA,MAAMI,MAAM,GAAGD,QAAQ,CAACJ,kBAAD,EAAqB,EAArB,CAAvB;AAEAM,EAAAA,eAAS,CAAC,YAAM;AACdT,IAAAA,aAAa,CAACU,OAAd,GAAwBV,aAAa,CAACU,OAAd,CAAsBC,KAAtB,CAA4B,CAA5B,EAA+Bd,KAAK,CAACe,MAArC,CAAxB;AACD,GAFQ,EAEN,CAACf,KAAK,CAACe,MAAP,CAFM,CAAT;AAIA,MAAMC,mBAAmB,GAAGC,aAAO,CAAC;AAAA,WAAO;AACzCN,MAAAA,MAAM,EAANA,MADyC;AAEzCF,MAAAA,KAAK,EAALA;AAFyC,KAAP;AAAA,GAAD,EAG/B,CAACA,KAAD,EAAQE,MAAR,CAH+B,CAAnC;AAKA,MAAMO,eAAe,GAAGC,uBAAiB,CAACX,oBAAD,EAAuBlB,gBAAvB,CAAzC;AAEA,MAAM8B,UAAU,GAAGC,iBAAW,CAAC,UAAAC,YAAY,EAAI;AAC7C,QAAMC,UAAU,GAAGC,UAAU,CAACF,YAAY,CAAC7B,KAAb,CAAmBgC,KAAnB,CAAyBC,OAAzB,CAAiC,CAAjC,CAAD,CAA7B;AACA,QAAMC,UAAU,GAAGH,UAAU,CAAC,CAACI,IAAI,CAACC,KAAL,CAAYN,UAAU,GAAG,GAAzB,IAAiC,GAAlC,EAAuCG,OAAvC,CAA+C,CAA/C,CAAD,CAA7B;;AACA,QAAIC,UAAU,IAAI,CAAd,IAAmBA,UAAU,IAAI,GAArC,EAA0C;AACxCpC,MAAAA,OAAO,CAACoC,UAAD,CAAP;AACD;AACF,GAN6B,EAM3B,CAACpC,OAAD,CAN2B,CAA9B;AAQAqB,EAAAA,eAAS,CAAC,YAAM;AACd,QAAIT,aAAa,CAACU,OAAd,CAAsBE,MAAtB,GAA+B,CAAnC,EAAsC;AACpC,WAAK,IAAIe,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAG9B,KAAK,CAACe,MAA1B,EAAkCe,CAAC,EAAnC,EAAuC;AACrC3B,QAAAA,aAAa,CAACU,OAAd,CAAsBiB,CAAtB,EAAyBC,UAAzB,CAAoCrC,IAApC;AACD;AACF;AACF,GANQ,EAMN,CAACM,KAAK,CAACe,MAAP,EAAerB,IAAf,CANM,CAAT;AAQA,MAAMsC,qBAAqB,GAAG,CAAC,CAACrC,YAAD,IAAkBA,YAAY,IAAIE,wBAAnC,KAAiE,CAACT,QAAhG;AAEA,sBACE6C;AACE,IAAA,SAAS,EAAEC,sBADb;AAAA,4BAGEC;AACE,MAAA,GAAG,EAAElC,WADP;AAEE,MAAA,SAAS,EAAEiC;AAFb,OAGM/C,OAAO,EAHb;AAAA,6BAKEgD;AACE,QAAA,SAAS,YAAKD,iBAAL,cAA0B1B,oBAA1B,CADX;AAEE,QAAA,KAAK,EAAEU,eAFT;AAAA,kBAIGlB,KAAK,CAACoC,GAAN,CAAU,UAACC,IAAD,EAAOC,KAAP,EAAiB;AAAA;;AAC1B,cAAQC,eAAR,GAA4BF,IAA5B,CAAQE,eAAR;;AACA,cAAMC,KAAK,mCACNxB,mBADM;AAETuB,YAAAA,eAAe,EAAEA,eAAe,GAAGA,eAAH,GAAqBnC,qBAAqB,IAAI;AAFrE,YAAX;;AAIA,8BACE+B;AAEE,YAAA,SAAS,EAAEM,8BAAM,yCACdP,eADc,EACI,IADJ,4BAEdQ,cAAO,CAACrC,YAAD,CAFO,EAEU,IAFV,0CAGHiC,KAAK,KAAKhD,gBAHP,YAFnB;AAOE,uBAAS+C,IAAI,CAACM,EAPhB;AAQE,YAAA,EAAE,8BAAuBN,IAAI,CAACM,EAAL,CAAQC,QAAR,EAAvB,CARJ;AAAA,mCAUET,eAACU,qCAAD;AACE,cAAA,UAAU,EAAEzB,UADd;AAEE,cAAA,KAAK,EAAEiB,IAAI,CAACS,KAFd;AAGE,cAAA,IAAI,EAAEzD,IAHR;AAIE,cAAA,SAAS,EAAE,mBAAA0D,OAAO,EAAI;AAAE5C,gBAAAA,aAAa,CAACU,OAAd,CAAsByB,KAAtB,IAA+BS,OAA/B;AAAyC,eAJnE;AAKE,cAAA,KAAK,EAAEP;AALT;AAVF,4BACeF,KAAK,CAACM,QAAN,EADf,EADF;AAoBD,SA1BA;AAJH;AALF,OAHF,EAyCGZ,qBAAqB,iBAAIG,eAAC,YAAD,KAzC5B;AAAA,IADF;AA6CD;;AAEDjD,WAAW,CAAC8D,SAAZ,GAAwB;AACtB7D,EAAAA,OAAO,EAAE8D,6BAAS,CAACC,IADG;AAEtB9D,EAAAA,QAAQ,EAAE6D,6BAAS,CAACE,IAFE;AAGtB9D,EAAAA,IAAI,EAAE4D,6BAAS,CAACG,MAAV,CAAiBC,UAHD;AAItB/D,EAAAA,gBAAgB,EAAE2D,6BAAS,CAACK;AAJN,CAAxB;;;;"}
+{"version":3,"file":"StaticScene.js","sources":["../../../../src/components/Preview/StaticScene.js"],"sourcesContent":["import {\n  useCallback, useEffect, useMemo, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport cNames from 'classnames';\nimport * as classNames from '../../constants/classNames';\nimport { StaticPageWithZoomPanPinch } from './StaticPage';\nimport { usePropStore } from '../../contexts/PropContext';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { slugify } from '../../utils/string';\nimport { usePageTransition } from '../../utils/hooks';\nimport { usePresentationStore } from '../../contexts/PresentationContext';\nimport ZoomControls from '../Builder/ZoomControls';\n\nconst StaticScene = ({\n  gesture = () => {},\n  hideZoom = false,\n  mode = '',\n  presentationPage = 0,\n}) => {\n  const setZoom = useBuilderStore(state => state.setZoom);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const isFullscreen = usePresentationStore(state => state.isFullscreen);\n  const showControlsInFullScreen = usePresentationStore(state => state.showControlsInFullScreen);\n\n  const settings = usePropStore(state => state.settings);\n  const pages = usePropStore(state => state.pages);\n\n  const viewPortRef = useRef({});\n  const transformRefs = useRef([]);\n\n  const {\n    reportBackgroundColor,\n    reportLayout = 'A4 Landscape',\n    reportLayoutHeight = 794,\n    reportLayoutWidth = 1123,\n    reportPageTransition = 'noAnimation',\n  } = settings;\n  const width = parseInt(reportLayoutWidth, 10);\n  const height = parseInt(reportLayoutHeight, 10);\n  const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n  const isPreviewCssZoom = mode === 'preview';\n\n  useEffect(() => {\n    transformRefs.current = transformRefs.current.slice(0, pages.length);\n  }, [pages.length]);\n\n  const pageContainerStyles = useMemo(() => ({\n    height,\n    width,\n  }), [width, height]);\n\n  const transitionStyle = usePageTransition(reportPageTransition, presentationPage);\n\n  const handleZoom = useCallback(zoomPanPinch => {\n    const fixedValue = parseFloat(zoomPanPinch.state.scale.toFixed(2));\n    const roundValue = parseFloat((Math.round((fixedValue * 100)) / 100).toFixed(1));\n    if (roundValue <= 2 && roundValue >= 0.5) {\n      setZoom(roundValue);\n    }\n  }, [setZoom]);\n\n  useEffect(() => {\n    if (mode !== 'presentation') {\n      return;\n    }\n    if (transformRefs.current.length > 0) {\n      for (let i = 0; i < pages.length; i++) {\n        transformRefs.current[i]?.centerView?.(zoom);\n      }\n    }\n  }, [pages.length, zoom, mode]);\n\n  const isEnabledZoomControls = (!isFullscreen || (isFullscreen && showControlsInFullScreen)) && !hideZoom;\n\n  return (\n    <main\n      className={classNames.mainWrapper}\n    >\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        data-zoom={isPreviewCssZoom ? zoom : undefined}\n        {...gesture()}\n      >\n        <div\n          className={`${classNames.canvas} ${reportPageTransition}`}\n          style={transitionStyle}\n        >\n          {pages.map((page, index) => {\n            const { backgroundColor } = page;\n            const bg = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';\n\n            const style = isPreviewCssZoom ? {\n              backgroundColor: bg,\n              height,\n              transform: `scale(${zoomToUse})`,\n              transformOrigin: '0 0',\n              width,\n            } : {\n              ...pageContainerStyles,\n              backgroundColor: bg,\n            };\n\n            const pageOuterStyle = isPreviewCssZoom ? {\n              height: parseFloat((height * zoomToUse).toFixed(1)),\n              position: 'relative',\n              width: parseFloat((width * zoomToUse).toFixed(1)),\n            } : undefined;\n\n            return (\n              <div\n                key={`page_${index.toString()}`}\n                className={cNames({\n                  [classNames.page]: true,\n                  [slugify(reportLayout)]: true,\n                  activePage: index === presentationPage,\n                })}\n                data-id={page.id}\n                id={`presentation-page-${page.id.toString()}`}\n                style={pageOuterStyle}\n              >\n                <StaticPageWithZoomPanPinch\n                  handleZoom={handleZoom}\n                  items={page.items}\n                  mode={mode}\n                  refSetter={element => { transformRefs.current[index] = element; }}\n                  style={style}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      {isEnabledZoomControls && (\n        <div className=\"bottom-actions-container\">\n          <ZoomControls />\n        </div>\n      )}\n    </main>\n  );\n};\n\nStaticScene.propTypes = {\n  gesture: PropTypes.func,\n  hideZoom: PropTypes.bool,\n  mode: PropTypes.string.isRequired,\n  presentationPage: PropTypes.number,\n};\n\nexport default StaticScene;\n"],"names":["StaticScene","gesture","hideZoom","mode","presentationPage","setZoom","useBuilderStore","state","zoom","isFullscreen","usePresentationStore","showControlsInFullScreen","settings","usePropStore","pages","viewPortRef","useRef","transformRefs","reportBackgroundColor","reportLayout","reportLayoutHeight","reportLayoutWidth","reportPageTransition","width","parseInt","height","zoomToUse","Number","isNaN","isPreviewCssZoom","useEffect","current","slice","length","pageContainerStyles","useMemo","transitionStyle","usePageTransition","handleZoom","useCallback","zoomPanPinch","fixedValue","parseFloat","scale","toFixed","roundValue","Math","round","i","centerView","isEnabledZoomControls","_jsxs","classNames","_jsx","undefined","map","page","index","backgroundColor","bg","style","transform","transformOrigin","pageOuterStyle","position","cNames","slugify","id","toString","StaticPageWithZoomPanPinch","items","element","propTypes","PropTypes","func","bool","string","isRequired","number"],"mappings":"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"}

package/lib/cjs/constants/zoom.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var ZOOM_MAX = 2;
-var ZOOM_MIN = 0.4;
+var ZOOM_MOBILE_MAX = 1;
+var ZOOM_MIN = 0.5;
+var ZOOM_MOBILE_MIN = 0.2;
 var ZOOM_STEP = 0.1;
 var ZOOM_MULTIPLIER = 100;
 
 exports.ZOOM_MAX = ZOOM_MAX;
 exports.ZOOM_MIN = ZOOM_MIN;
+exports.ZOOM_MOBILE_MAX = ZOOM_MOBILE_MAX;
+exports.ZOOM_MOBILE_MIN = ZOOM_MOBILE_MIN;
 exports.ZOOM_MULTIPLIER = ZOOM_MULTIPLIER;
 exports.ZOOM_STEP = ZOOM_STEP;
 //# sourceMappingURL=zoom.js.map

package/lib/cjs/constants/zoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"zoom.js","sources":["../../../src/constants/zoom.js"],"sourcesContent":["export const ZOOM_MAX = 2;\nexport const ZOOM_MIN = 0.4;\nexport const ZOOM_STEP = 0.1;\nexport const ZOOM_MULTIPLIER = 100;\n"],"names":["ZOOM_MAX","ZOOM_MIN","ZOOM_STEP","ZOOM_MULTIPLIER"],"mappings":";;;;IAAaA,QAAQ,GAAG;IACXC,QAAQ,GAAG;IACXC,SAAS,GAAG;IACZC,eAAe,GAAG;;;;;;;"}
+{"version":3,"file":"zoom.js","sources":["../../../src/constants/zoom.js"],"sourcesContent":["export const ZOOM_MAX = 2;\nexport const ZOOM_MOBILE_MAX = 1;\nexport const ZOOM_MIN = 0.5;\nexport const ZOOM_MOBILE_MIN = 0.2;\nexport const ZOOM_STEP = 0.1;\nexport const ZOOM_MULTIPLIER = 100;\n"],"names":["ZOOM_MAX","ZOOM_MOBILE_MAX","ZOOM_MIN","ZOOM_MOBILE_MIN","ZOOM_STEP","ZOOM_MULTIPLIER"],"mappings":";;;;IAAaA,QAAQ,GAAG;IACXC,eAAe,GAAG;IAClBC,QAAQ,GAAG;IACXC,eAAe,GAAG;IAClBC,SAAS,GAAG;IACZC,eAAe,GAAG;;;;;;;;;"}

package/lib/cjs/contexts/BuilderContext.js

@@ -39,7 +39,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var builderStore = function builderStore(props) {
   return zustand.createStore(function (set, get) {
-    var _props$shouldShowRigh, _props$shouldShowZoom, _props$defaultZoom;
+    var _props$shouldShowRigh, _props$defaultZoom;
 
     return {
       activeElements: props.activeElement || [],
@@ -269,7 +269,7 @@ var builderStore = function builderStore(props) {
           zoom: zoom
         });
 
-        if (layoutWidth) {
+        if (layoutWidth && get().mode === 'customize') {
           var _document$querySelect = document.querySelector('.jfReport-pane .toolItemWrapper'),
               paneWidth = _document$querySelect.clientWidth;
 
@@ -291,7 +291,6 @@ var builderStore = function builderStore(props) {
       },
       shouldFitZoomInitially: !!props.defaultZoom,
       shouldShowRightPanelInitially: (_props$shouldShowRigh = props.shouldShowRightPanelInitially) !== null && _props$shouldShowRigh !== void 0 ? _props$shouldShowRigh : true,
-      shouldShowZoomControls: (_props$shouldShowZoom = props.shouldShowZoomControls) !== null && _props$shouldShowZoom !== void 0 ? _props$shouldShowZoom : true,
       slidesListType: props.slidesListType || panel.SLIDES_LIST_TYPE_MAP.PANEL,
       visiblePageOrder: 1,
       zoom: (_props$defaultZoom = props.defaultZoom) !== null && _props$defaultZoom !== void 0 ? _props$defaultZoom : 0.8