From f3cefe5f97f379607e6d1c7bc0ea13f7b17e5119 Mon Sep 17 00:00:00 2001
From: sven <sven@webiny.com>
Date: Sun, 30 Sep 2018 16:37:59 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=20Fixed=20scaling=20of?=
 =?UTF-8?q?=20block=20preview.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/plugins/blockEditing/AutoScale.js  | 54 ++++++++++++++-----
 .../plugins/blockEditing/SearchBlocks.js      |  2 +-
 .../plugins/blockEditing/StyledComponents.js  |  3 +-
 .../editor/plugins/elements/image/Image.js    |  2 +-
 4 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/packages/webiny-app-cms/src/editor/plugins/blockEditing/AutoScale.js b/packages/webiny-app-cms/src/editor/plugins/blockEditing/AutoScale.js
index f30a1f26185..0011cbe4e22 100644
--- a/packages/webiny-app-cms/src/editor/plugins/blockEditing/AutoScale.js
+++ b/packages/webiny-app-cms/src/editor/plugins/blockEditing/AutoScale.js
@@ -4,38 +4,64 @@ export default class AutoScale extends React.Component {
     content = React.createRef();
 
     state = {
-        wrapperSize: { width: 0, height: 0 },
+        width: null,
+        height: null,
         contentSize: { width: 0, height: 0 },
         scale: 1
     };
 
     componentDidMount() {
+        /**
+         * Because there is a transition animation showing the block content,
+         * getting dimensions of the block before the transition ends can lead to wrong dimensions.
+         * The setTimeout offsets that problem.
+         */
+        setTimeout(()=> {
+            this.updateState();
+        }, 200);
+    }
+
+    updateState() {
         const actualContent = this.content.current.children[0];
+        const contentSize = { width: actualContent.offsetWidth, height: actualContent.offsetHeight }
 
-        this.updateState({
-            ...this.state,
-            contentSize: { width: actualContent.offsetWidth, height: actualContent.offsetHeight }
-        });
-    }
+        const { maxWidth, maxHeight } = this.props;
+
+        let scaleWidth = maxWidth / contentSize.width;
+        let scaleHeight = maxHeight / contentSize.height;
 
-    updateState(newState) {
-        const { maxWidth } = this.props;
-        const { contentSize } = newState;
+        console.log(contentSize.width+" "+contentSize.height);
 
-        let scale = maxWidth / contentSize.width;
+        let scale = scaleWidth;
+        let height = maxHeight/scaleWidth;
+        let width = maxWidth/scaleWidth;
+        if(scaleHeight<scaleWidth){
+            scale = scaleHeight;
+            height = maxHeight/scaleHeight;
+            width = maxHeight/scaleHeight;
+        }
+
+        if((width/scale)>(maxWidth/scale)){
+            width = (maxWidth/scale);
+        }
+
+        if((height/scale)>(maxHeight/scale)){
+            height = (maxHeight/scale);
+        }
 
         if (scale > 1) {
             scale = 1;
         }
 
         this.setState({
-            ...newState,
+            width: width,
+            height: height,
             scale
         });
     }
 
     render() {
-        const { scale } = this.state;
+        const { scale, width, height } = this.state;
         const { children } = this.props;
 
         return (
@@ -45,7 +71,9 @@ export default class AutoScale extends React.Component {
                     transform: "scale(" + scale + ")",
                     transformOrigin: "top",
                     position: "absolute",
-                    top: 0
+                    top: 0,
+                    width: (width ? width+"px" : 'auto'),
+                    height: (height ? height+"px" : 'auto'),
                 }}
             >
                 {React.Children.only(children)}
diff --git a/packages/webiny-app-cms/src/editor/plugins/blockEditing/SearchBlocks.js b/packages/webiny-app-cms/src/editor/plugins/blockEditing/SearchBlocks.js
index 06bd3a42265..22a3c973bce 100644
--- a/packages/webiny-app-cms/src/editor/plugins/blockEditing/SearchBlocks.js
+++ b/packages/webiny-app-cms/src/editor/plugins/blockEditing/SearchBlocks.js
@@ -93,7 +93,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
                         </Styled.AddBlock>
                     </Styled.Overlay>
                     <Styled.BlockPreview>
-                        <AutoScale maxWidth={310}>
+                        <AutoScale maxWidth={310} maxHeight={150}>
                             <Element element={block} />
                         </AutoScale>
                     </Styled.BlockPreview>
diff --git a/packages/webiny-app-cms/src/editor/plugins/blockEditing/StyledComponents.js b/packages/webiny-app-cms/src/editor/plugins/blockEditing/StyledComponents.js
index 58283d9c3ce..f027b0e08c5 100644
--- a/packages/webiny-app-cms/src/editor/plugins/blockEditing/StyledComponents.js
+++ b/packages/webiny-app-cms/src/editor/plugins/blockEditing/StyledComponents.js
@@ -60,7 +60,8 @@ export const BlockPreview = styled("div")({
     width: "100%",
     height: "100%",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    position: "relative"
 });
 
 export const Block = styled("div")({
diff --git a/packages/webiny-app-cms/src/editor/plugins/elements/image/Image.js b/packages/webiny-app-cms/src/editor/plugins/elements/image/Image.js
index 3a590aceead..634e3455441 100644
--- a/packages/webiny-app-cms/src/editor/plugins/elements/image/Image.js
+++ b/packages/webiny-app-cms/src/editor/plugins/elements/image/Image.js
@@ -2,7 +2,7 @@ import React from "react";
 import image from "webiny-app-cms/editor/assets/icons/image-icon.svg";
 
 const Image = () => {
-    return <img src={image} alt={"Webiny"} width={"100%"} />;
+    return <img src={image} alt={"Webiny"} width={"100"} />;
 };
 
 export default Image;