From 5170c10124711bf25d4f499200c621f19483fed6 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Tue, 26 Sep 2023 19:41:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E7=BA=B2=E6=A0=91=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E8=8A=82=E7=82=B9=E7=9A=84=E6=97=B6=E5=80=99=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=BB=98=E8=AE=A4=E5=B1=95=E7=A4=BA=E5=85=B6?= =?UTF-8?q?=E4=BB=96=E5=B1=9E=E6=80=A7tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/designer/designer.ts | 4 ++-- packages/designer/src/document/selection.ts | 4 ++-- .../settings/settings-primary-pane.tsx | 6 +++++- .../src/views/tree-branches.tsx | 19 +++++++++++-------- .../src/views/tree-node.tsx | 8 ++++++-- .../src/views/tree-title.tsx | 14 +++++++++++--- .../plugin-outline-pane/src/views/tree.tsx | 13 +++++++++++-- packages/shell/src/model/selection.ts | 5 +++-- packages/types/src/shell/model/selection.ts | 5 +++-- 9 files changed, 54 insertions(+), 24 deletions(-) diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 784ebf57b..96f9e3e01 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -285,8 +285,8 @@ export class Designer implements IDesigner { } this.postEvent('selection.change', currentSelection); if (currentSelection) { - this.selectionDispose = currentSelection.onSelectionChange(() => { - this.postEvent('selection.change', currentSelection); + this.selectionDispose = currentSelection.onSelectionChange((ids, tab) => { + this.postEvent('selection.change', currentSelection, tab); }); } }; diff --git a/packages/designer/src/document/selection.ts b/packages/designer/src/document/selection.ts index 6147e188d..a7b2dc197 100644 --- a/packages/designer/src/document/selection.ts +++ b/packages/designer/src/document/selection.ts @@ -26,7 +26,7 @@ export class Selection implements ISelection { /** * 选中 */ - select(id: string) { + select(id: string, tab?: string) { if (this._selected.length === 1 && this._selected.indexOf(id) > -1) { // avoid cause reaction return; @@ -39,7 +39,7 @@ export class Selection implements ISelection { } this._selected = [id]; - this.emitter.emit('selectionchange', this._selected); + this.emitter.emit('selectionchange', this._selected, tab); } /** 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 800719588..c02a4b017 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -34,10 +34,14 @@ export class SettingsPrimaryPane extends Component { + editor.eventBus.on('designer.selection.change', (selection, tab) => { if (!engineConfig.get('stayOnTheSameSettingTab', false)) { this._activeKey = null; } + // 选中指定tab + if (tab) { + this._activeKey = tab; + } }); } diff --git a/packages/plugin-outline-pane/src/views/tree-branches.tsx b/packages/plugin-outline-pane/src/views/tree-branches.tsx index 41bd69481..61412267c 100644 --- a/packages/plugin-outline-pane/src/views/tree-branches.tsx +++ b/packages/plugin-outline-pane/src/views/tree-branches.tsx @@ -1,4 +1,4 @@ -import { PureComponent } from 'react'; +import { MouseEvent as ReactMouseEvent, PureComponent } from 'react'; import classNames from 'classnames'; import TreeNode from '../controllers/tree-node'; import TreeNodeView from './tree-node'; @@ -9,6 +9,7 @@ export default class TreeBranches extends PureComponent<{ isModal?: boolean; expanded: boolean; treeChildren: TreeNode[] | null; + treeNodeClick?: (e: ReactMouseEvent, type?: string) => void; }> { state = { filterWorking: false, @@ -38,7 +39,7 @@ export default class TreeBranches extends PureComponent<{ } render() { - const { treeNode, isModal, expanded } = this.props; + const { treeNode, isModal, expanded, treeNodeClick } = this.props; const { filterWorking, matchChild } = this.state; // 条件过滤生效时，如果命中了子节点，需要将该节点展开 const expandInFilterResult = filterWorking && matchChild; @@ -46,7 +47,6 @@ export default class TreeBranches extends PureComponent<{ if (!expandInFilterResult && !expanded) { return null; } - return (
{ @@ -56,6 +56,7 @@ export default class TreeBranches extends PureComponent<{ treeNode={treeNode} isModal={isModal || false} treeChildren={this.props.treeChildren} + treeNodeClick={treeNodeClick} />
); @@ -72,6 +73,7 @@ class TreeNodeChildren extends PureComponent<{ treeNode: TreeNode; isModal?: boolean; treeChildren: TreeNode[] | null; + treeNodeClick?: (e: ReactMouseEvent, type?: string) => void; }, ITreeNodeChildrenState> { state: ITreeNodeChildrenState = { filterWorking: false, @@ -114,7 +116,7 @@ class TreeNodeChildren extends PureComponent<{ } render() { - const { isModal } = this.props; + const { isModal, treeNodeClick } = this.props; const children: any = []; let groupContents: any[] = []; let currentGrp: IPublicModelExclusiveGroup; @@ -169,12 +171,12 @@ class TreeNodeChildren extends PureComponent<{ children.push(insertion); } } - groupContents.push(); + groupContents.push(); } else { if (index === dropIndex) { children.push(insertion); } - children.push(); + children.push(); } }); endGroup(); @@ -189,9 +191,10 @@ class TreeNodeChildren extends PureComponent<{ class TreeNodeSlots extends PureComponent<{ treeNode: TreeNode; + treeNodeClick?: (e: ReactMouseEvent, type?: string) => void; }> { render() { - const { treeNode } = this.props; + const { treeNode, treeNodeClick } = this.props; if (!treeNode.hasSlots()) { return null; } @@ -208,7 +211,7 @@ class TreeNodeSlots extends PureComponent<{ </div> {treeNode.slots.map(tnode => ( - <TreeNodeView key={tnode.nodeId} treeNode={tnode} /> + <TreeNodeView key={tnode.nodeId} treeNode={tnode} treeNodeClick={treeNodeClick} /> ))} </div> ); diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx index be6e6ae2c..e80ec56da 100644 --- a/packages/plugin-outline-pane/src/views/tree-node.tsx +++ b/packages/plugin-outline-pane/src/views/tree-node.tsx @@ -1,4 +1,4 @@ -import { PureComponent } from 'react'; +import { MouseEvent as ReactMouseEvent, PureComponent } from 'react'; import classNames from 'classnames'; import TreeNode from '../controllers/tree-node'; import TreeTitle from './tree-title'; @@ -11,6 +11,7 @@ class ModalTreeNodeView extends PureComponent<{ treeNode: TreeNode; }, { treeChildren: TreeNode[] | null; + treeNodeClick: () => void; }> { private modalNodesManager: IPublicModelModalNodesManager | undefined | null; readonly pluginContext: IOutlinePanelPluginContext; @@ -85,6 +86,7 @@ export default class TreeNodeView extends PureComponent<{ treeNode: TreeNode; isModal?: boolean; isRootNode?: boolean; + treeNodeClick?: (e: ReactMouseEvent, type?: string) => void; }> { state: { expanded: boolean; @@ -195,7 +197,7 @@ export default class TreeNodeView extends PureComponent<{ } render() { - const { treeNode, isModal, isRootNode } = this.props; + const { treeNode, isModal, isRootNode, treeNodeClick } = this.props; const className = classNames('tree-node', { // 是否展开 expanded: this.state.expanded, @@ -234,6 +236,7 @@ export default class TreeNodeView extends PureComponent<{ hidden={this.state.hidden} locked={this.state.locked} expandable={this.state.expandable} + treeNodeClick={treeNodeClick} /> {shouldShowModalTreeNode && <ModalTreeNodeView @@ -245,6 +248,7 @@ export default class TreeNodeView extends PureComponent<{ isModal={false} expanded={this.state.expanded} treeChildren={this.state.treeChildren} + treeNodeClick={treeNodeClick} /> </div> ); diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index 02ac94ae6..4ac94117d 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -1,4 +1,4 @@ -import { KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react'; +import { MouseEvent as ReactMouseEvent, KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react'; import classNames from 'classnames'; import { createIcon } from '@alilc/lowcode-utils'; import { IPublicApiEvent } from '@alilc/lowcode-types'; @@ -23,6 +23,7 @@ export default class TreeTitle extends PureComponent<{ hidden: boolean; locked: boolean; expandable: boolean; + treeNodeClick?: (e: ReactMouseEvent, type?: string) => void; }> { state: { editing: boolean; @@ -105,6 +106,13 @@ export default class TreeTitle extends PureComponent<{ const { node } = treeNode; treeNode.deleteNode(node); }; + + treeTitleClick = (e: any, type: string) => { + const { treeNodeClick } = this.props; + treeNodeClick(e, type); + e.stopPropagation(); + }; + render() { const { treeNode, isModal } = this.props; const { pluginContext } = treeNode; @@ -199,7 +207,7 @@ export default class TreeTitle extends PureComponent<{ </a> )} {node.hasLoop() && ( - <a className="tree-node-tag loop"> + <a className="tree-node-tag loop" onClick={(e) => { this.treeTitleClick(e, 'loop'); }}> {/* todo: click todo something */} <IconLoop /> {/* @ts-ignore */} @@ -207,7 +215,7 @@ export default class TreeTitle extends PureComponent<{ </a> )} {this.state.condition && ( - <a className="tree-node-tag cond"> + <a className="tree-node-tag cond" onClick={(e) => { this.treeTitleClick(e, 'condition'); }}> {/* todo: click todo something */} <IconCond /> {/* @ts-ignore */} diff --git a/packages/plugin-outline-pane/src/views/tree.tsx b/packages/plugin-outline-pane/src/views/tree.tsx index 675f70c2b..a53101cf8 100644 --- a/packages/plugin-outline-pane/src/views/tree.tsx +++ b/packages/plugin-outline-pane/src/views/tree.tsx @@ -43,7 +43,8 @@ export default class TreeView extends PureComponent<{ detecting?.capture(node as any); } - private onClick = (e: ReactMouseEvent) => { + private onClick = (e: ReactMouseEvent, type?: string) => { + if (this.ignoreUpSelected) { this.boostEvent = undefined; return; @@ -75,7 +76,14 @@ export default class TreeView extends PureComponent<{ selection.remove(id); } } else { - selection?.select(id); + + let tab; + // 点击条件渲染和循环图标，默认选中属性的高级面板 + if (type === 'condition' || type === 'loop') { + tab = '#advanced'; + } + + selection?.select(id, tab); const selectedNode = selection?.getNodes()?.[0]; const npm = selectedNode?.componentMeta?.npm; const selected = @@ -212,6 +220,7 @@ export default class TreeView extends PureComponent<{ <TreeNodeView key={this.state.root?.id} treeNode={this.state.root} + treeNodeClick={this.onClick} isRootNode /> </div> diff --git a/packages/shell/src/model/selection.ts b/packages/shell/src/model/selection.ts index 073083a65..4ae375dde 100644 --- a/packages/shell/src/model/selection.ts +++ b/packages/shell/src/model/selection.ts @@ -32,9 +32,10 @@ export class Selection implements IPublicModelSelection { /** * 选中指定节点（覆盖方式） * @param id + * @param tab */ - select(id: string): void { - this[selectionSymbol].select(id); + select(id: string, tab?: string): void { + this[selectionSymbol].select(id, tab); } /** diff --git a/packages/types/src/shell/model/selection.ts b/packages/types/src/shell/model/selection.ts index 317a49837..89a5c3d62 100644 --- a/packages/types/src/shell/model/selection.ts +++ b/packages/types/src/shell/model/selection.ts @@ -22,8 +22,9 @@ export interface IPublicModelSelection< * 选中指定节点（覆盖方式） * select node with id, this will override current selection * @param id + * @param tab */ - select(id: string): void; + select(id: string, tab?: string): void; /** * 批量选中指定节点们 @@ -81,5 +82,5 @@ export interface IPublicModelSelection< * set callback which will be called when selection is changed * @since v1.1.0 */ - onSelectionChange(fn: (ids: string[]) => void): IPublicTypeDisposable; + onSelectionChange(fn: (ids: string[], tab?: string) => void): IPublicTypeDisposable; }