fix: modify layout props

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -15,8 +15,6 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> {
   }
 
   render() {
-    // yiyi
-    // live 模式选中，画布会不会有相关交互
     const { host } = this.props;
     const { designMode } = host;
     const { scrollX, scrollY, scale } = host.viewport;

packages/designer/src/builtin-simulator/host.ts

@@ -278,7 +278,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
   }
 
   setupEvents() {
-    debugger;
     // TODO: Thinkof move events control to simulator renderer
     //       just listen special callback
     // because iframe maybe reload
@@ -333,6 +332,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
             if (isMulti && !isRootNode(node) && selection.has(id)) {
               selection.remove(id);
             } else {
+              // TODO: 加个开关控制（yiyi）
+              // 如果选中的为 Page 节点，则默认选中第一个子节点
               if (node.isPage() && node.getChildren()?.notEmpty()) {
                 const firstChildId = node
                   .getChildren()

packages/designer/src/designer/designer.ts

@@ -166,9 +166,17 @@ export class Designer {
         selectionDispose();
         selectionDispose = undefined;
       }
-      this.postEvent('selection.change', this.currentSelection);
-      if (this.currentSelection) {
-        const currentSelection = this.currentSelection;
+      // TODO: 加开关控制(yiyi)
+      // 避免选中 Page 组件，默认选中第一个子节点
+      const currentSelection = this.currentSelection;
+      if (currentSelection && currentSelection.selected.length === 0) {
+        const rootNodeChildrens = this.currentDocument.getRoot().getChildren().children;
+        if (rootNodeChildrens.length > 0) {
+          currentSelection.select(rootNodeChildrens[0].id);
+        }
+      }
+      this.postEvent('selection.change', currentSelection);
+      if (currentSelection) {
         selectionDispose = currentSelection.onSelectionChange(() => {
           this.postEvent('selection.change', currentSelection);
         });

packages/editor-preset-vision/src/pages.ts

@@ -58,6 +58,22 @@ const pages = Object.assign(project, {
           props: {
             logo: '',
             name: '测试网站',
+            tabBars: {
+              items: [
+                {
+                  name: "页面1", 
+                  pagePath: "home1", 
+                  icon: "https://pre-go.alibaba-inc.com/filehandle?fileName…8e9-ff58-4e7a-bd24-9e5c32244e14.png&type=download", 
+                  activeIcon: ""
+                },
+                {
+                  activeIcon: "", 
+                  name: "页面2", 
+                  icon: "", 
+                  pagePath: "home2"
+                }
+              ]
+            } 
           },
         },
       },

packages/rax-simulator-renderer/src/rax-use-router.js

@@ -218,7 +218,7 @@ export function useRouter(routerConfig) {
   }
 
   useLayoutEffect(() => {
-    if (_initialized) throw new Error('Error: useRouter can only be called once.');
+    if (_initialized) return;
     _initialized = true;
     const history = _routerConfig.history;
     const routes = _routerConfig.routes;

packages/rax-simulator-renderer/src/renderer-view.tsx

@@ -41,7 +41,7 @@ export default class SimulatorRendererView extends Component<{ rendererContainer
 
   componentDidMount() {
     const { rendererContainer } = this.props;
-    this.unlisten = rendererContainer.onDocumentChange(() => {
+    this.unlisten = rendererContainer.onLayoutChange(() => {
       this.forceUpdate();
     });
   }
@@ -104,6 +104,13 @@ function getDeviceView(view: any, device: string, mode: string) {
 }
 
 class Layout extends Component<{ rendererContainer: SimulatorRendererContainer }> {
+  constructor(props: any) {
+    super(props);
+    this.props.rendererContainer.onReRender(() => {
+      this.forceUpdate();
+    });
+  }
+
   render() {
     const { rendererContainer, children } = this.props;
     const layout = rendererContainer.layout;
@@ -114,7 +121,14 @@ class Layout extends Component<{ rendererContainer: SimulatorRendererContainer }
         return <Component props={props}>{children}</Component>;
       }
       if (componentName) {
-        return createElement(rendererContainer.getComponent(componentName), {}, [children]);
+        return createElement(
+          rendererContainer.getComponent(componentName),
+          {
+            ...props,
+            rendererContainer,
+          },
+          [children],
+        );
       }
     }
 

packages/rax-simulator-renderer/src/renderer.ts

@@ -237,6 +237,9 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
   constructor() {
     this.dispose = host.connect(this, () => {
       // sync layout config
+      debugger;
+      this._layout = host.project.get('config').layout;
+
       // todo: split with others, not all should recompute
       if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
         this._libraryMap = host.libraryMap || {};
@@ -249,6 +252,8 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
 
       // sync device
       this._device = host.device;
+
+      this.emitter.emit('layoutChange');
     });
     const documentInstanceMap = new Map<string, DocumentInstance>();
     let initialEntry = '/';
@@ -261,7 +266,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
         }
         return inst;
       });
-      this.emitter.emit('documentChange');
+      this.emitter.emit('layoutChange');
       const path = host.project.currentDocument ? documentInstanceMap.get(host.project.currentDocument.id)!.path : '/';
       if (firstRun) {
         initialEntry = path;
@@ -308,9 +313,13 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     });
   }
 
+  @obx private _layout: any = null;
   @computed get layout(): any {
     // TODO: parse layout Component
-    return null;
+    return this._layout;
+  }
+  set layout(value: any) {
+    this._layout = value;
   }
 
   private _libraryMap: { [key: string]: string } = {};
@@ -439,10 +448,17 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     cursor.release();
   }
 
-  onDocumentChange(cb: () => void) {
-    this.emitter.on('documentChange', cb);
+  onLayoutChange(cb: () => void) {
+    this.emitter.on('layoutChange', cb);
     return () => {
-      this.emitter.removeListener('documentChange', cb);
+      this.emitter.removeListener('layoutChange', cb);
+    };
+  }
+
+  onReRender(fn: () => void) {
+    this.emitter.on('rerender', fn);
+    return () => {
+      this.emitter.removeListener('renderer', fn);
     };
   }
 

packages/react-simulator-renderer/src/renderer.ts

@@ -141,6 +141,8 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
   constructor() {
     this.dispose = host.connect(this, () => {
       // sync layout config
+      this._layout = host.project.get('config').layout;
+
       // todo: split with others, not all should recompute
       if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
         this._libraryMap = host.libraryMap || {};
@@ -213,9 +215,13 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     });
   }
 
+  @obx private _layout: any = null;
   @computed get layout(): any {
     // TODO: parse layout Component
-    return null;
+    return this._layout;
+  }
+  set layout(value: any) {
+    this._layout = value;
   }
 
   private _libraryMap: { [key: string]: string } = {};