From 9baba75ca1c56171c4140c17a24d39d087c65644 Mon Sep 17 00:00:00 2001 From: "wanying.jwy" Date: Mon, 17 Aug 2020 21:15:56 +0800 Subject: [PATCH] fix: modify layout props --- .../src/builtin-simulator/bem-tools/index.tsx | 2 -- .../designer/src/builtin-simulator/host.ts | 3 ++- packages/designer/src/designer/designer.ts | 14 +++++++--- packages/editor-preset-vision/src/pages.ts | 16 ++++++++++++ .../src/rax-use-router.js | 2 +- .../src/renderer-view.tsx | 18 +++++++++++-- .../rax-simulator-renderer/src/renderer.ts | 26 +++++++++++++++---- .../react-simulator-renderer/src/renderer.ts | 8 +++++- 8 files changed, 74 insertions(+), 15 deletions(-) diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index e719b1917..7e0044398 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/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; diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 514866077..4bbef62ad 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -278,7 +278,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost 0) { + currentSelection.select(rootNodeChildrens[0].id); + } + } + this.postEvent('selection.change', currentSelection); + if (currentSelection) { selectionDispose = currentSelection.onSelectionChange(() => { this.postEvent('selection.change', currentSelection); }); diff --git a/packages/editor-preset-vision/src/pages.ts b/packages/editor-preset-vision/src/pages.ts index de23cbb2b..2490b1ef1 100644 --- a/packages/editor-preset-vision/src/pages.ts +++ b/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" + } + ] + } }, }, }, diff --git a/packages/rax-simulator-renderer/src/rax-use-router.js b/packages/rax-simulator-renderer/src/rax-use-router.js index 4c9361886..7da483551 100644 --- a/packages/rax-simulator-renderer/src/rax-use-router.js +++ b/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; diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx index fdc0ac0fa..ff3941a52 100644 --- a/packages/rax-simulator-renderer/src/renderer-view.tsx +++ b/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 {children}; } if (componentName) { - return createElement(rendererContainer.getComponent(componentName), {}, [children]); + return createElement( + rendererContainer.getComponent(componentName), + { + ...props, + rendererContainer, + }, + [children], + ); } } diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts index d246c579f..5ca1c4011 100644 --- a/packages/rax-simulator-renderer/src/renderer.ts +++ b/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(); 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); }; } diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index e3da7fe92..9dbe86b75 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/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 } = {};