From 3a5424171e705590faeb4489926843926e876188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 20 Aug 2020 16:57:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=A8=A1=E6=8B=9F=E5=99=A8=E7=9A=84=20viewpo?=
 =?UTF-8?q?rt=20=E7=9A=84=E5=AE=BD=E9=AB=98=E5=92=8C=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E7=BA=A7=E5=88=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/builtin-simulator/host-view.tsx       | 21 ++++----
 .../src/builtin-simulator/viewport.ts         | 49 ++++++++++++++-----
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/host-view.tsx b/packages/designer/src/builtin-simulator/host-view.tsx
index 8a5def39c..4b418ead0 100644
--- a/packages/designer/src/builtin-simulator/host-view.tsx
+++ b/packages/designer/src/builtin-simulator/host-view.tsx
@@ -60,7 +60,7 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
 
     return (
       <div className={className}>
-        <div ref={elmt => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport">
+        <div ref={(elmt) => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport">
           <BemTools host={sim} />
           <Content host={sim} />
         </div>
@@ -74,18 +74,19 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
   render() {
     const sim = this.props.host;
     const viewport = sim.viewport;
-    let frameStyle = {};
-    if (viewport.scale < 1) {
-      frameStyle = {
-        transform: `scale(${viewport.scale})`,
-        height: viewport.contentHeight,
-        width: viewport.contentWidth,
-      };
-    }
+    const frameStyle = {
+      transform: `scale(${viewport.scale})`,
+      height: viewport.contentHeight,
+      width: viewport.contentWidth,
+    };
 
     return (
       <div className="lc-simulator-content">
-        <iframe className="lc-simulator-content-frame" style={frameStyle} ref={frame => sim.mountContentFrame(frame)} />
+        <iframe
+          className="lc-simulator-content-frame"
+          style={frameStyle}
+          ref={(frame) => sim.mountContentFrame(frame)}
+        />
       </div>
     );
   }
diff --git a/packages/designer/src/builtin-simulator/viewport.ts b/packages/designer/src/builtin-simulator/viewport.ts
index bbc6c043d..900620377 100644
--- a/packages/designer/src/builtin-simulator/viewport.ts
+++ b/packages/designer/src/builtin-simulator/viewport.ts
@@ -22,8 +22,8 @@ export default class Viewport implements IViewport {
     return new DOMRect(0, 0, bounds.width / scale, bounds.height / scale);
   }
 
-  private viewportElement?: Element;
-  mount(viewportElement: Element | null) {
+  private viewportElement?: HTMLElement;
+  mount(viewportElement: HTMLElement | null) {
     if (!viewportElement || this.viewportElement === viewportElement) {
       return;
     }
@@ -43,6 +43,15 @@ export default class Viewport implements IViewport {
     }
     return this.rect.height;
   }
+
+  set height(newHeight: number) {
+    this._contentHeight = newHeight / this.scale;
+    if (this.viewportElement) {
+      this.viewportElement.style.height = `${newHeight}px`;
+      this.touch();
+    }
+  }
+
   @computed get width(): number {
     if (!this.rect) {
       return 1000;
@@ -50,29 +59,45 @@ export default class Viewport implements IViewport {
     return this.rect.width;
   }
 
+  set width(newWidth: number) {
+    this._contentWidth = newWidth / this.scale;
+    if (this.viewportElement) {
+      this.viewportElement.style.width = `${newWidth}px`;
+      this.touch();
+    }
+  }
+
+  @obx.ref private _scale: number = 1;
+
   /**
    * 缩放比例
    */
   @computed get scale(): number {
-    if (!this.rect || this.contentWidth === AutoFit) {
-      return 1;
+    return this._scale;
+  }
+
+  set scale(newScale: number) {
+    if (isNaN(newScale) || newScale <= 0) {
+      throw new Error(`invalid new scale "${newScale}"`);
     }
-    return this.width / this.contentWidth;
+
+    this._scale = newScale;
+    this._contentWidth = this.width / this.scale;
+    this._contentHeight = this.height / this.scale;
   }
 
   @obx.ref private _contentWidth: number | AutoFit = AutoFit;
+  @obx.ref private _contentHeight: number | AutoFit = AutoFit;
 
   @computed get contentHeight(): number | AutoFit {
-    if (!this.rect || this.scale === 1) {
-      return AutoFit;
-    }
-    return this.height / this.scale;
+    return this._contentHeight;
+  }
+
+  set contentHeight(newContentHeight: number | AutoFit) {
+    this._contentHeight = newContentHeight;
   }
 
   @computed get contentWidth(): number | AutoFit {
-    if (!this.rect || (this._contentWidth !== AutoFit && this._contentWidth <= this.width)) {
-      return AutoFit;
-    }
     return this._contentWidth;
   }
 

From 7ab7defc004145e501f269073d8074eeb9ffa3ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 20 Aug 2020 17:17:03 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=B8=BA=E4=BA=86?=
 =?UTF-8?q?=E8=83=BD=E6=9B=B4=E5=A5=BD=E5=9C=B0=E5=9C=A8=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=80=81=E6=A8=A1=E6=8B=9F,=20=E5=B0=86=20device=20=E9=80=8F?=
 =?UTF-8?q?=E4=BC=A0=E5=88=B0=E7=BB=84=E4=BB=B6=E6=A0=91=E6=A0=B9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-simulator-renderer/src/renderer-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index 248589170..230b4c187 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -100,6 +100,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
         appHelper={renderer.context}
         // context={renderer.context}
         designMode={designMode}
+        device={device}
         suspended={renderer.suspended}
         self={renderer.scope}
         customCreateElement={(Component: any, props: any, children: any) => {

From 2a253fbf820532544b77123124173d6f3b8c517f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 20 Aug 2020 17:18:00 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=B8=BA=E4=BA=86?=
 =?UTF-8?q?=E8=83=BD=E6=9B=B4=E5=A5=BD=E5=9C=B0=E5=9C=A8=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=80=81=E6=A8=A1=E6=8B=9F,=20=E5=B0=86=20device=20=E9=80=8F?=
 =?UTF-8?q?=E4=BC=A0=E5=88=B0=E7=BB=84=E4=BB=B6=E6=A0=91=E6=A0=B9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/rax-simulator-renderer/src/renderer-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx
index 1612f265b..37658532e 100644
--- a/packages/rax-simulator-renderer/src/renderer-view.tsx
+++ b/packages/rax-simulator-renderer/src/renderer-view.tsx
@@ -106,6 +106,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
         schema={renderer.schema}
         components={renderer.components}
         context={renderer.context}
+        device={device}
         designMode={renderer.designMode}
         suspended={renderer.suspended}
         self={renderer.scope}