Added PreviewDesign functionality - for perfect pixel test.

layouts/scripts/dist/index.min.js

@@ -11480,12 +11480,206 @@ const SidebarDataOptionsStyle = qe.div`
   }
 `;
 
-function DesignPreview(props = {}) {
-  return /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: '#999'
+const PreviewButtonStyle = qe.button`
+  --size: 1.5rem;
+  cursor: pointer;
+  border: 0;
+  background-image: url("/scripts/dist/toolbar/images/icon-preview.svg");
+  background-repeat: no-repeat;
+  background-size: calc(var(--size) - 0.15rem);
+  background-position: center center;
+  background-color: initial;
+  font-size: 1px;
+  color: rgba(0, 0, 0, 0);
+  line-height: 1;
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 0.25rem;
+  outline: none;
+
+  &.active {
+    background-image: url("/scripts/dist/toolbar/images/icon-preview-disabled.svg");
+  }
+
+  &.disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+`;
+const PreviewStyle = qe.div`
+  position: fixed;
+  top: 3rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  background-color: rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  align-items: baseline;
+
+  img {
+    width: auto;
+    height: auto;
+    display: block;
+    cursor: move;
+    position: absolute;
+  }
+`;
+qe.div`
+  height: 100%;
+  width: 100%;
+
+  background-repeat: no-repeat;
+  background-position: top;
+  cursor: move;
+`;
+
+let startDragPosition = {
+  x: 0,
+  y: 0
+};
+function DesignPreview({
+  previewOption = {
+    widthDimension: 0
+  }
+}) {
+  const reference = /*#__PURE__*/react.exports.createRef();
+  const [active, setActive] = react.exports.useState(false);
+  const [position, setPosition] = react.exports.useState({
+    x: getInitialXPosition(previewOption),
+    y: 0
+  });
+  const [opacity, setOpacity] = react.exports.useState(100);
+  const keyDownHandler = react.exports.useCallback(function (e) {
+    const step = e.shiftKey ? 10 : 1;
+
+    if (e.key === 'ArrowUp') {
+      updatePosition({
+        y: step * -1
+      }, true);
+    } else if (e.key === 'ArrowDown') {
+      updatePosition({
+        y: step
+      }, true);
+    } else if (e.key === 'ArrowLeft') {
+      updatePosition({
+        x: step * -1
+      }, true);
+    } else if (e.key === 'ArrowRight') {
+      updatePosition({
+        x: step
+      }, true);
     }
-  }, "Preview");
+  }, [position]);
+  react.exports.useEffect(() => {
+    document.addEventListener('keydown', keyDownHandler);
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [keyDownHandler]);
+
+  if (!previewOption) {
+    return;
+  }
+
+  const disabled = !previewOption.url;
+  const classNames = [];
+
+  if (active) {
+    classNames.push('active');
+  }
+
+  if (disabled) {
+    classNames.push('disabled');
+  }
+
+  const handleOpacityChange = e => {
+    setOpacity(e.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PreviewButtonStyle, {
+    onClick: () => toggle(),
+    className: classNames.join(' '),
+    disabled: disabled
+  }), active && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    value: opacity,
+    min: "0",
+    max: "100",
+    onChange: handleOpacityChange
+  }), /*#__PURE__*/React.createElement(PreviewStyle, {
+    onMouseUp: e => stop(),
+    style: {
+      opacity: opacity / 100
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: previewOption.url,
+    alt: "",
+    ref: reference,
+    onMouseDown: e => start(e),
+    draggable: false,
+    style: {
+      top: position.y + 'px',
+      left: position.x + 'px'
+    }
+  }))));
+
+  function start(e) {
+    startDragPosition.x = e.clientX;
+    startDragPosition.y = e.clientY;
+    document.body.addEventListener('mousemove', handler);
+  }
+
+  function stop(e) {
+    const target = reference.current;
+    updatePosition({
+      x: target.offsetLeft,
+      y: target.offsetTop
+    });
+    document.body.removeEventListener('mousemove', handler);
+  }
+
+  function handler(e) {
+    const target = reference.current;
+
+    if (target) {
+      const updatedPosition = {
+        x: target.offsetLeft - (startDragPosition.x - e.clientX),
+        y: target.offsetTop - (startDragPosition.y - e.clientY)
+      };
+      target.style.left = updatedPosition.x + 'px';
+      target.style.top = updatedPosition.y + 'px';
+      startDragPosition.x = e.clientX;
+      startDragPosition.y = e.clientY;
+    }
+  }
+
+  function toggle() {
+    setActive(!active);
+  }
+
+  function updatePosition({
+    x,
+    y
+  }, relative = false) {
+    x = typeof x === 'undefined' ? position.x : relative ? position.x + x : x;
+    y = typeof y === 'undefined' ? position.y : relative ? position.y + y : y;
+    setPosition({
+      x,
+      y
+    });
+  }
+
+  function getInitialXPosition(previewOption) {
+    if (!previewOption) {
+      return 0;
+    }
+
+    return window.innerWidth / 2 - previewOption.widthDimension / 2;
+  }
 }
 
 function DataOptions(props = {}) {
@@ -11493,7 +11687,8 @@ function DataOptions(props = {}) {
   const initialState = {
     dataName: 'default',
     data: {},
-    dataOptions: []
+    dataOptions: [],
+    designPreview: []
   };
   const [state, setState] = react.exports.useState(initialState);
 
@@ -11521,6 +11716,7 @@ function DataOptions(props = {}) {
 
   const handleBlur = async e => (await isClickOutside(e)) ? closeSidebar() : null;
 
+  const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -11530,7 +11726,9 @@ function DataOptions(props = {}) {
   }, /*#__PURE__*/React.createElement(SidebarButtonToggleStyle, {
     onClick: () => openSidebar(),
     title: "Open a Sidebar with Data Options"
-  }), /*#__PURE__*/React.createElement(DesignPreview, null), /*#__PURE__*/React.createElement(SidebarStyle, {
+  }), /*#__PURE__*/React.createElement(DesignPreview, {
+    previewOption: previewOption
+  }), /*#__PURE__*/React.createElement(SidebarStyle, {
     className: sidebarOpen ? 'active sidebar-active' : '',
     tabIndex: "0",
     onBlur: handleBlur
@@ -11577,6 +11775,16 @@ function DataOptions(props = {}) {
     const response = await fetch(`/data?${queryParameters}`);
     return await response.json();
   }
+
+  function getDesignPreviewImage(currentDataName, designPreviewOptions = []) {
+    const dataOptions = designPreviewOptions.filter(item => {
+      return item.dataSource === currentDataName;
+    });
+    dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
+    return dataOptions.find(item => {
+      return item.widthDimension === 414;
+    });
+  }
 }
 
 function setupDataOptions(rootAttributes) {