From e7e2c7b721d97dec1bd6cb891b7e4f48318d1a2b Mon Sep 17 00:00:00 2001 From: ccloli <8115912+ccloli@users.noreply.github.com> Date: Mon, 20 May 2024 11:30:21 +0800 Subject: [PATCH 1/3] feat: add select parent node of selected node --- packages/core/src/models/interfaces.ts | 1 + packages/core/src/models/workspace.ts | 14 ++++++++++++++ packages/designer/src/dnd/use-dnd.ts | 3 +++ packages/designer/src/selection-menu/index.ts | 1 + .../src/selection-menu/parent-node.tsx | 19 +++++++++++++++++++ packages/designer/src/simulator/selection.tsx | 4 +++- packages/designer/src/widgets.ts | 8 +++++++- 7 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 packages/designer/src/selection-menu/parent-node.tsx diff --git a/packages/core/src/models/interfaces.ts b/packages/core/src/models/interfaces.ts index 29230721..c5477812 100644 --- a/packages/core/src/models/interfaces.ts +++ b/packages/core/src/models/interfaces.ts @@ -200,6 +200,7 @@ export interface IWorkspace { // ----------------- 节点操作 ----------------- + selectParentNode: () => void; removeSelectedNode: () => void; cloneSelectedNode: () => void; copySelectedNode: () => void; diff --git a/packages/core/src/models/workspace.ts b/packages/core/src/models/workspace.ts index 058bfbc0..ec216c31 100644 --- a/packages/core/src/models/workspace.ts +++ b/packages/core/src/models/workspace.ts @@ -865,6 +865,20 @@ export class Workspace extends EventTarget implements IWorkspace { }); } + /** + * 选中当前选中节点的父节点 + */ + selectParentNode() { + const parents = this.selectSource?.first?.parents || []; + if (parents.length) { + const [parent, ...rest] = parents; + this.selectSource.select({ + ...parent, + parents: rest, + }); + } + } + /** * 删除选中节点 */ diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts index 0a7ee674..43f1cfcb 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.selectParentNode(); + }, '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 20953235..1409f8b5 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 './parent-node'; export * from './view-source'; diff --git a/packages/designer/src/selection-menu/parent-node.tsx b/packages/designer/src/selection-menu/parent-node.tsx new file mode 100644 index 00000000..5c8f049d --- /dev/null +++ b/packages/designer/src/selection-menu/parent-node.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { useWorkspace, observer } from '@music163/tango-context'; +import { SelectAction } from '@music163/tango-ui'; +import { EnterOutlined } from '@ant-design/icons'; + +export const ParentNodeAction = observer(() => { + const workspace = useWorkspace(); + + return ( + { + workspace.selectParentNode(); + }} + > + + + ); +}); diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx index 7dbd0ecf..85722ca6 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 = ['viewSource', 'copyNode', 'deleteNode', 'parentNode'], + }: 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 4dbb7202..50012265 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, + ParentNodeAction, +} from './selection-menu'; const widgets = {}; @@ -48,4 +53,5 @@ registerWidget('sidebar.dataSource', DataSourcePanel); registerWidget('selectionMenu.copyNode', CopyNodeAction); registerWidget('selectionMenu.deleteNode', DeleteNodeAction); +registerWidget('selectionMenu.parentNode', ParentNodeAction); registerWidget('selectionMenu.viewSource', ViewSourceAction); From 625eaee512f11e0a10d19a47951a8e365c00b508 Mon Sep 17 00:00:00 2001 From: ccloli <8115912+ccloli@users.noreply.github.com> Date: Mon, 20 May 2024 16:46:59 +0800 Subject: [PATCH 2/3] feat: move select parent node to SelectSource --- packages/core/src/models/interfaces.ts | 1 - packages/core/src/models/select-source.ts | 14 ++++++++++++++ packages/core/src/models/workspace.ts | 14 -------------- packages/designer/src/dnd/use-dnd.ts | 2 +- packages/designer/src/selection-menu/index.ts | 2 +- .../{parent-node.tsx => select-parent-node.tsx} | 4 ++-- packages/designer/src/simulator/selection.tsx | 2 +- packages/designer/src/widgets.ts | 4 ++-- 8 files changed, 21 insertions(+), 22 deletions(-) rename packages/designer/src/selection-menu/{parent-node.tsx => select-parent-node.tsx} (79%) diff --git a/packages/core/src/models/interfaces.ts b/packages/core/src/models/interfaces.ts index c5477812..29230721 100644 --- a/packages/core/src/models/interfaces.ts +++ b/packages/core/src/models/interfaces.ts @@ -200,7 +200,6 @@ export interface IWorkspace { // ----------------- 节点操作 ----------------- - selectParentNode: () => void; removeSelectedNode: () => void; cloneSelectedNode: () => void; copySelectedNode: () => void; diff --git a/packages/core/src/models/select-source.ts b/packages/core/src/models/select-source.ts index 66e0d9b3..b1542bd4 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/core/src/models/workspace.ts b/packages/core/src/models/workspace.ts index ec216c31..058bfbc0 100644 --- a/packages/core/src/models/workspace.ts +++ b/packages/core/src/models/workspace.ts @@ -865,20 +865,6 @@ export class Workspace extends EventTarget implements IWorkspace { }); } - /** - * 选中当前选中节点的父节点 - */ - selectParentNode() { - const parents = this.selectSource?.first?.parents || []; - if (parents.length) { - const [parent, ...rest] = parents; - this.selectSource.select({ - ...parent, - parents: rest, - }); - } - } - /** * 删除选中节点 */ diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts index 43f1cfcb..889c1e2a 100644 --- a/packages/designer/src/dnd/use-dnd.ts +++ b/packages/designer/src/dnd/use-dnd.ts @@ -59,7 +59,7 @@ export function useDnd({ workspace.pasteSelectedNode(); }, 'command+arrowup,ctrl+arrowup': () => { - workspace.selectParentNode(); + 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 1409f8b5..5ce53881 100644 --- a/packages/designer/src/selection-menu/index.ts +++ b/packages/designer/src/selection-menu/index.ts @@ -1,4 +1,4 @@ export * from './copy-node'; export * from './delete-node'; -export * from './parent-node'; +export * from './select-parent-node'; export * from './view-source'; diff --git a/packages/designer/src/selection-menu/parent-node.tsx b/packages/designer/src/selection-menu/select-parent-node.tsx similarity index 79% rename from packages/designer/src/selection-menu/parent-node.tsx rename to packages/designer/src/selection-menu/select-parent-node.tsx index 5c8f049d..c30c8936 100644 --- a/packages/designer/src/selection-menu/parent-node.tsx +++ b/packages/designer/src/selection-menu/select-parent-node.tsx @@ -3,14 +3,14 @@ import { useWorkspace, observer } from '@music163/tango-context'; import { SelectAction } from '@music163/tango-ui'; import { EnterOutlined } from '@ant-design/icons'; -export const ParentNodeAction = observer(() => { +export const SelectParentNodeAction = observer(() => { const workspace = useWorkspace(); return ( { - workspace.selectParentNode(); + workspace.selectSource.selectParent(); }} > diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx index 85722ca6..113611a2 100644 --- a/packages/designer/src/simulator/selection.tsx +++ b/packages/designer/src/simulator/selection.tsx @@ -25,7 +25,7 @@ export interface SelectionToolsProps { export const SelectionTools = observer( ({ - actions: actionsProp = ['viewSource', 'copyNode', 'deleteNode', 'parentNode'], + actions: actionsProp = ['viewSource', 'copyNode', 'deleteNode', 'selectParentNode'], }: SelectionToolsProps) => { const workspace = useWorkspace(); const selectSource = workspace.selectSource; diff --git a/packages/designer/src/widgets.ts b/packages/designer/src/widgets.ts index 50012265..7bd545b0 100644 --- a/packages/designer/src/widgets.ts +++ b/packages/designer/src/widgets.ts @@ -17,7 +17,7 @@ import { CopyNodeAction, DeleteNodeAction, ViewSourceAction, - ParentNodeAction, + SelectParentNodeAction, } from './selection-menu'; const widgets = {}; @@ -53,5 +53,5 @@ registerWidget('sidebar.dataSource', DataSourcePanel); registerWidget('selectionMenu.copyNode', CopyNodeAction); registerWidget('selectionMenu.deleteNode', DeleteNodeAction); -registerWidget('selectionMenu.parentNode', ParentNodeAction); +registerWidget('selectionMenu.selectParentNode', SelectParentNodeAction); registerWidget('selectionMenu.viewSource', ViewSourceAction); From 06002eb77980c5925a8196ea167784aa7a65b74d Mon Sep 17 00:00:00 2001 From: ccloli <8115912+ccloli@users.noreply.github.com> Date: Mon, 20 May 2024 18:21:37 +0800 Subject: [PATCH 3/3] fix: change icon & order --- apps/playground/src/pages/index.tsx | 2 +- apps/playground/src/pages/mail.tsx | 2 +- apps/storybook/src/setting-form.stories.tsx | 2 +- packages/designer/src/selection-menu/select-parent-node.tsx | 5 ++--- packages/designer/src/simulator/selection.tsx | 2 +- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx index 179c1ad3..7eea67cd 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 6c4dc185..f4a7863f 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 da4e1186..fffca850 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/designer/src/selection-menu/select-parent-node.tsx b/packages/designer/src/selection-menu/select-parent-node.tsx index c30c8936..5ea30d40 100644 --- a/packages/designer/src/selection-menu/select-parent-node.tsx +++ b/packages/designer/src/selection-menu/select-parent-node.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { useWorkspace, observer } from '@music163/tango-context'; -import { SelectAction } from '@music163/tango-ui'; -import { EnterOutlined } from '@ant-design/icons'; +import { IconFont, SelectAction } from '@music163/tango-ui'; export const SelectParentNodeAction = observer(() => { const workspace = useWorkspace(); @@ -13,7 +12,7 @@ export const SelectParentNodeAction = observer(() => { workspace.selectSource.selectParent(); }} > - + ); }); diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx index 113611a2..0475d572 100644 --- a/packages/designer/src/simulator/selection.tsx +++ b/packages/designer/src/simulator/selection.tsx @@ -25,7 +25,7 @@ export interface SelectionToolsProps { export const SelectionTools = observer( ({ - actions: actionsProp = ['viewSource', 'copyNode', 'deleteNode', 'selectParentNode'], + actions: actionsProp = ['selectParentNode', 'viewSource', 'copyNode', 'deleteNode'], }: SelectionToolsProps) => { const workspace = useWorkspace(); const selectSource = workspace.selectSource;