Merge pull request #6126 from Armanio/fix/zoom

fix(preview): zoom iframe content instead zoom iframe wrapper
storybookjs · Mar 25, 2019 · 496408c · 496408c
2 parents e13d9fa + 683f931
commit 496408c
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 127 deletions.
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -280,7 +280,7 @@ Array [
       />
     </div>
   </div>,
-  .emotion-2 {
+  .emotion-1 {
   position: absolute;
   overflow: auto;
   left: 0;
@@ -294,7 +294,7 @@ Array [
   background: transparent;
 }
 
-.emotion-1 {
+.emotion-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -305,51 +305,24 @@ Array [
   background: #FFFFFF;
 }
 
-.emotion-0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-  -webkit-transition: -webkit-transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  -webkit-transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  overflow: auto;
-}
-
-.emotion-0 > iframe {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-}
-
 <div
-    class="emotion-2"
+    class="emotion-1"
     offset="40"
   >
     <div>
       <div
-        class="emotion-1"
+        class="emotion-0"
         id="storybook-preview-background"
         value="transparent"
       >
-        <div
-          class="emotion-0"
-          style="width:100%;height:100%;transform:scale(1)"
-        >
-          <iframe
-            allowfullscreen=""
-            id="storybook-preview-iframe"
-            scrolling="yes"
-            src="http://example.com?id=string"
-            title="string"
-          />
-        </div>
+        <iframe
+          allowfullscreen=""
+          id="storybook-preview-iframe"
+          scrolling="yes"
+          src="http://example.com?id=string"
+          style="width:100%;height:100%;position:absolute;top:0;left:0;border:0 none"
+          title="string"
+        />
       </div>
     </div>
   </div>,
@@ -768,7 +741,7 @@ Array [
       />
     </div>
   </div>,
-  .emotion-2 {
+  .emotion-1 {
   position: absolute;
   overflow: auto;
   left: 0;
@@ -782,7 +755,7 @@ Array [
   background: transparent;
 }
 
-.emotion-1 {
+.emotion-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -793,51 +766,24 @@ Array [
   background: #FFFFFF;
 }
 
-.emotion-0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-  -webkit-transition: -webkit-transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  -webkit-transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  overflow: auto;
-}
-
-.emotion-0 > iframe {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-}
-
 <div
-    class="emotion-2"
+    class="emotion-1"
     offset="40"
   >
     <div>
       <div
-        class="emotion-1"
+        class="emotion-0"
         id="storybook-preview-background"
         value="transparent"
       >
-        <div
-          class="emotion-0"
-          style="width:100%;height:100%;transform:scale(1)"
-        >
-          <iframe
-            allowfullscreen=""
-            id="storybook-preview-iframe"
-            scrolling="yes"
-            src="http://example.com?id=string"
-            title="string"
-          />
-        </div>
+        <iframe
+          allowfullscreen=""
+          id="storybook-preview-iframe"
+          scrolling="yes"
+          src="http://example.com?id=string"
+          style="width:100%;height:100%;position:absolute;top:0;left:0;border:0 none"
+          title="string"
+        />
       </div>
     </div>
   </div>,

diff --git a/lib/ui/src/components/preview/components.js b/lib/ui/src/components/preview/components.js
@@ -1,25 +1,6 @@
 import { styled } from '@storybook/theming';
 import { Link } from '@storybook/router';
 
-export const Frame = styled.div({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  border: '0 none',
-  transition: 'transform .2s ease-out, height .2s ease-out, width .2s ease-out',
-  transformOrigin: 'top left',
-  overflow: 'auto',
-
-  '& > iframe': {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    border: '0 none',
-  },
-});
-
 export const FrameWrap = styled.div(({ offset }) => ({
   position: 'absolute',
   overflow: 'auto',

diff --git a/lib/ui/src/components/preview/iframe.js b/lib/ui/src/components/preview/iframe.js
@@ -1,14 +1,39 @@
+import window from 'global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 // this component renders an iframe, which gets updates via post-messages
 export class IFrame extends Component {
-  shouldComponentUpdate() {
-    return false;
+  iframe = null;
+
+  componentDidMount() {
+    const { id } = this.props;
+    this.iframe = window.document.getElementById(id);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { scale } = this.props;
+    return scale !== nextProps.scale;
+  }
+
+  componentDidUpdate(prevProps) {
+    const { scale } = this.props;
+    if (scale !== prevProps.scale) {
+      this.setIframeBodyStyle({
+        width: `${scale * 100}%`,
+        height: `${scale * 100}%`,
+        transform: `scale(${1 / scale})`,
+        transformOrigin: 'top left',
+      });
+    }
+  }
+
+  setIframeBodyStyle(style) {
+    return Object.assign(this.iframe.contentDocument.body.style, style);
   }
 
   render() {
-    const { id, title, src, allowFullScreen, ...rest } = this.props;
+    const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
     return (
       <iframe
         scrolling="yes"
@@ -26,4 +51,5 @@ IFrame.propTypes = {
   title: PropTypes.string.isRequired,
   src: PropTypes.string.isRequired,
   allowFullScreen: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired,
 };
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
@@ -26,22 +26,31 @@ const DesktopOnly = styled.span({
   },
 });
 
-const renderIframe = (storyId, id, baseUrl) => (
+const renderIframe = (storyId, id, baseUrl, scale) => (
   <IFrame
     key="iframe"
     id="storybook-preview-iframe"
     title={id || 'preview'}
     src={`${baseUrl}?id=${storyId}`}
     allowFullScreen
+    scale={scale}
+    style={{
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      border: '0 none',
+    }}
   />
 );
 
 const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.values(getFn(type))));
 
-const ActualPreview = ({ wrappers, id, storyId, active, baseUrl }) =>
+const ActualPreview = ({ wrappers, id, storyId, active, baseUrl, scale }) =>
   wrappers.reduceRight(
     (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
-    renderIframe(storyId, id, baseUrl)
+    renderIframe(storyId, id, baseUrl, scale)
   );
 
 const defaultWrappers = [
@@ -58,23 +67,6 @@ const defaultWrappers = [
       </BackgroundConsumer>
     ),
   },
-  {
-    render: p => (
-      <ZoomConsumer>
-        {({ value }) => (
-          <S.Frame
-            style={{
-              width: `${100 * value}%`,
-              height: `${100 * value}%`,
-              transform: `scale(${1 / value})`,
-            }}
-          >
-            {p.children}
-          </S.Frame>
-        )}
-      </ZoomConsumer>
-    ),
-  },
 ];
 
 const getTools = memoize(10)(
@@ -227,13 +219,18 @@ class Preview extends Component {
         route: p => `/story/${p.storyId}`,
         match: p => p.viewMode === 'story',
         render: p => (
-          <ActualPreview
-            active={p.active}
-            wrappers={wrappers}
-            id={id}
-            storyId={storyId}
-            baseUrl={baseUrl}
-          />
+          <ZoomConsumer>
+            {({ value }) => (
+              <ActualPreview
+                active={p.active}
+                wrappers={wrappers}
+                id={id}
+                storyId={storyId}
+                baseUrl={baseUrl}
+                scale={value}
+              />
+            )}
+          </ZoomConsumer>
         ),
         title: 'Canvas',
         id: 'canvas',