Merge branch 'feat/canvas-size' into 'release/1.0.0'

支持切换画布宽高及显示类型的API的方案

Aone需求：<https://aone.alibaba-inc.com/req/29913392>
技术方案： <https://yuque.antfin-inc.com/docs/share/38d36583-057a-40e0-a07e-8e94e5d538e2>

See merge request !952655

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 = {};
+    const frameStyle = {
-    if (viewport.scale < 1) {
-      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>
     );
   }

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;
+  private viewportElement?: HTMLElement;
-  mount(viewportElement: Element | null) {
+  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 this._scale;
-      return 1;
   }
-    return this.width / this.contentWidth;
+
+  set scale(newScale: number) {
+    if (isNaN(newScale) || newScale <= 0) {
+      throw new Error(`invalid new scale "${newScale}"`);
+    }
+
+    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 this._contentHeight;
-      return AutoFit;
   }
-    return this.height / this.scale;
+
+  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;
   }
 

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}

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) => {