From fe3124648325e72abfc58da8b2f8ff83301d40b8 Mon Sep 17 00:00:00 2001 From: 864907600cc Date: Mon, 20 May 2024 20:15:28 +0800 Subject: [PATCH] feat: add select parent node of selected node (#158) * feat: add select parent node of selected node * feat: move select parent node to SelectSource * fix: change icon & order --------- Co-authored-by: ccloli <8115912+ccloli@users.noreply.github.com> --- apps/playground/src/pages/index.tsx | 2 +- apps/playground/src/pages/mail.tsx | 2 +- apps/storybook/src/setting-form.stories.tsx | 2 +- packages/core/src/models/select-source.ts | 14 ++++++++++++++ packages/designer/src/dnd/use-dnd.ts | 3 +++ packages/designer/src/selection-menu/index.ts | 1 + .../src/selection-menu/select-parent-node.tsx | 18 ++++++++++++++++++ packages/designer/src/simulator/selection.tsx | 4 +++- packages/designer/src/widgets.ts | 8 +++++++- 9 files changed, 49 insertions(+), 5 deletions(-) create mode 100644 packages/designer/src/selection-menu/select-parent-node.tsx diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx index 179c1ad..7eea67c 100644 --- a/apps/playground/src/pages/index.tsx +++ b/apps/playground/src/pages/index.tsx @@ -89,7 +89,7 @@ const sandboxQuery = new DndQuery({ // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标） createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js', + scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js', }); /** diff --git a/apps/playground/src/pages/mail.tsx b/apps/playground/src/pages/mail.tsx index 6c4dc18..f4a7863 100644 --- a/apps/playground/src/pages/mail.tsx +++ b/apps/playground/src/pages/mail.tsx @@ -45,7 +45,7 @@ const sandboxQuery = new DndQuery({ // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标） createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js', + scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js', }); /** diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx index da4e118..fffca85 100644 --- a/apps/storybook/src/setting-form.stories.tsx +++ b/apps/storybook/src/setting-form.stories.tsx @@ -14,7 +14,7 @@ const BLACK_LIST = ['codeSetter', 'eventSetter', 'modelSetter', 'routerSetter']; BUILT_IN_SETTERS.filter((setter) => !BLACK_LIST.includes(setter.name)).forEach(register); createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js', + scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js', }); export default { diff --git a/packages/core/src/models/select-source.ts b/packages/core/src/models/select-source.ts index 66e0d9b..b1542bd 100644 --- a/packages/core/src/models/select-source.ts +++ b/packages/core/src/models/select-source.ts @@ -109,6 +109,20 @@ export class SelectSource { this._start = null; } + /** + * 选中当前选中节点的父节点 + */ + selectParent() { + const parents = this.first?.parents || []; + if (parents.length) { + const [parent, ...rest] = parents; + this.select({ + ...parent, + parents: rest, + }); + } + } + setStart(data: StartDataType) { this._start = data; } diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts index 0a7ee67..889c1e2 100644 --- a/packages/designer/src/dnd/use-dnd.ts +++ b/packages/designer/src/dnd/use-dnd.ts @@ -58,6 +58,9 @@ export function useDnd({ 'command+v,ctrl+v': () => { workspace.pasteSelectedNode(); }, + 'command+arrowup,ctrl+arrowup': () => { + workspace.selectSource.selectParent(); + }, 'command+z,ctrl+z': () => { workspace.history.back(); }, diff --git a/packages/designer/src/selection-menu/index.ts b/packages/designer/src/selection-menu/index.ts index 2095323..5ce5388 100644 --- a/packages/designer/src/selection-menu/index.ts +++ b/packages/designer/src/selection-menu/index.ts @@ -1,3 +1,4 @@ export * from './copy-node'; export * from './delete-node'; +export * from './select-parent-node'; export * from './view-source'; diff --git a/packages/designer/src/selection-menu/select-parent-node.tsx b/packages/designer/src/selection-menu/select-parent-node.tsx new file mode 100644 index 0000000..5ea30d4 --- /dev/null +++ b/packages/designer/src/selection-menu/select-parent-node.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { useWorkspace, observer } from '@music163/tango-context'; +import { IconFont, SelectAction } from '@music163/tango-ui'; + +export const SelectParentNodeAction = observer(() => { + const workspace = useWorkspace(); + + return ( + { + workspace.selectSource.selectParent(); + }} + > + + + ); +}); diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx index 7dbd0ec..0475d57 100644 --- a/packages/designer/src/simulator/selection.tsx +++ b/packages/designer/src/simulator/selection.tsx @@ -24,7 +24,9 @@ export interface SelectionToolsProps { } export const SelectionTools = observer( - ({ actions: actionsProp = ['viewSource', 'copyNode', 'deleteNode'] }: SelectionToolsProps) => { + ({ + actions: actionsProp = ['selectParentNode', 'viewSource', 'copyNode', 'deleteNode'], + }: SelectionToolsProps) => { const workspace = useWorkspace(); const selectSource = workspace.selectSource; const actions = actionsProp.map((item) => { diff --git a/packages/designer/src/widgets.ts b/packages/designer/src/widgets.ts index 4dbb720..7bd545b 100644 --- a/packages/designer/src/widgets.ts +++ b/packages/designer/src/widgets.ts @@ -13,7 +13,12 @@ import { OutlinePanel, VariablePanel, } from './sidebar'; -import { CopyNodeAction, DeleteNodeAction, ViewSourceAction } from './selection-menu'; +import { + CopyNodeAction, + DeleteNodeAction, + ViewSourceAction, + SelectParentNodeAction, +} from './selection-menu'; const widgets = {}; @@ -48,4 +53,5 @@ registerWidget('sidebar.dataSource', DataSourcePanel); registerWidget('selectionMenu.copyNode', CopyNodeAction); registerWidget('selectionMenu.deleteNode', DeleteNodeAction); +registerWidget('selectionMenu.selectParentNode', SelectParentNodeAction); registerWidget('selectionMenu.viewSource', ViewSourceAction);