fix: 🐛 Fixed scaling of block preview.

webiny · Sep 30, 2018 · f3cefe5 · f3cefe5
1 parent eeabf8c
commit f3cefe5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;