From 890ec7617f88ca028165410d03bb696cb2e2f21a Mon Sep 17 00:00:00 2001 From: "wanying.jwy" Date: Thu, 17 Sep 2020 14:32:20 +0800 Subject: [PATCH] =?UTF-8?q?fix:=201.=E4=BF=AE=E5=A4=8D=20rax=20=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E9=97=AE=E9=A2=98=202.=E5=88=87=E6=8D=A2=20designMode?= =?UTF-8?q?=20=E9=87=8D=E6=96=B0=20setupSelection=203.settingpane=20add=20?= =?UTF-8?q?state=20shouldIgnoreRoot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/designer/designer.ts | 51 ++++++++++--------- .../settings/settings-primary-pane.tsx | 19 ++++++- .../src/rax-use-router.js | 18 ++++++- .../rax-simulator-renderer/src/renderer.ts | 5 +- 4 files changed, 66 insertions(+), 27 deletions(-) diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 7fa78693d..9e0825b2c 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -171,27 +171,6 @@ export class Designer { node.document.simulator?.scrollToNode(node, detail); }); - let selectionDispose: undefined | (() => void); - const setupSelection = () => { - if (selectionDispose) { - selectionDispose(); - selectionDispose = undefined; - } - const currentSelection = this.currentSelection; - // TODO: 避免选中 Page 组件，默认选中第一个子节点；新增规则 或 判断 Live 模式 - if (currentSelection && currentSelection.selected.length === 0 && this.simulatorProps?.designMode === 'live') { - 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); - }); - } - }; let historyDispose: undefined | (() => void); const setupHistory = () => { if (historyDispose) { @@ -210,17 +189,39 @@ export class Designer { this.postEvent('current-document.change', this.currentDocument); this.postEvent('selection.change', this.currentSelection); this.postEvent('history.change', this.currentHistory); - setupSelection(); + this.setupSelection(); setupHistory(); }); this.postEvent('designer.init', this); - setupSelection(); + this.setupSelection(); setupHistory(); // TODO: 先简单实现，后期通过焦点赋值 focusing.focusDesigner = this; } + setupSelection = () => { + let selectionDispose: undefined | (() => void); + if (selectionDispose) { + selectionDispose(); + selectionDispose = undefined; + } + const currentSelection = this.currentSelection; + // TODO: 避免选中 Page 组件，默认选中第一个子节点；新增规则 或 判断 Live 模式 + if (currentSelection && currentSelection.selected.length === 0 && this.simulatorProps?.designMode === 'live') { + 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); + }); + } + }; + postEvent(event: string, ...args: any[]) { this.editor.emit(`designer.${event}`, ...args); } @@ -329,6 +330,10 @@ export class Designer { } if (props.simulatorProps !== this.props.simulatorProps) { this._simulatorProps = props.simulatorProps; + // 重新 setupSelection + if (props.simulatorProps?.designMode !== this.props.simulatorProps?.designMode) { + this.setupSelection(); + } } if (props.suspensed !== this.props.suspensed && props.suspensed != null) { this.suspensed = props.suspensed; diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx index c1cc79763..69ba92a2f 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -9,7 +9,10 @@ import { SkeletonContext } from '../../context'; import { createIcon } from '@ali/lowcode-utils'; @observer -export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any }> { +export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any }, { shouldIgnoreRoot: boolean }> { + state = { + shouldIgnoreRoot: false, + }; private main = new SettingsMain(this.props.editor); @obx.ref private _activeKey?: any; @@ -18,6 +21,17 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any return false; } + componentDidMount() { + this.setShouldIgnoreRoot(); + } + + async setShouldIgnoreRoot() { + let designMode = await this.props.editor.get('designMode'); + this.setState({ + shouldIgnoreRoot: designMode === 'live', + }) + } + componentWillUnmount() { this.main.purge(); } @@ -25,7 +39,8 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any renderBreadcrumb() { const { settings } = this.main; const { config } = this.props; - const shouldIgnoreRoot = config.props?.ignoreRoot; + // const shouldIgnoreRoot = config.props?.ignoreRoot; + const { shouldIgnoreRoot } = this.state; if (!settings) { return null; } diff --git a/packages/rax-simulator-renderer/src/rax-use-router.js b/packages/rax-simulator-renderer/src/rax-use-router.js index 2bd395315..4c1a6a0fc 100644 --- a/packages/rax-simulator-renderer/src/rax-use-router.js +++ b/packages/rax-simulator-renderer/src/rax-use-router.js @@ -209,15 +209,28 @@ function getInitialComponent(routerConfig) { let unlisten = null; let handleId = null; +let pathes = ''; export function useRouter(routerConfig) { const [component, setComponent] = useState(getInitialComponent(routerConfig)); + let newPathes = ''; if (routerConfig) { _routerConfig = routerConfig; const routes = _routerConfig.routes; router.root = Array.isArray(routes) ? { routes } : routes; + if (Array.isArray(routes)) { + newPathes = routes.map(it => it.path).join(','); + } else { + newPathes = routes.path; + } } - + if (_initialized && _routerConfig.history) { + if (newPathes !== pathes) { + matchLocation(_routerConfig.history.location); + pathes = newPathes; + } + } + useLayoutEffect(() => { if (unlisten) { unlisten(); @@ -241,15 +254,18 @@ export function useRouter(routerConfig) { // Init path match if (_initialized || !_routerConfig.InitialComponent) { matchLocation(history.location); + pathes = newPathes; } unlisten = history.listen(({ location }) => { matchLocation(location); + pathes = newPathes; }); _initialized = true; return () => { + pathes = ''; router.removeHandle(handleId); handleId = null; unlisten(); diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts index c909882b7..9dbaebf0b 100644 --- a/packages/rax-simulator-renderer/src/renderer.ts +++ b/packages/rax-simulator-renderer/src/renderer.ts @@ -273,7 +273,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { return inst; }); - this.emitter.emit('layoutChange'); const path = host.project.currentDocument ? documentInstanceMap.get(host.project.currentDocument.id)!.path : '/'; if (firstRun) { initialEntry = path; @@ -281,6 +280,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { if (this.history.location.pathname !== path) { this.history.replace(path); } + this.emitter.emit('layoutChange'); } }); const history = createMemoryHistory({ @@ -305,6 +305,9 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { replace(path: string, params?: object) { history.replace(withQueryParams(path, params)); }, + back() { + history.back(); + } }, legaoBuiltins: { getUrlParams() {