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 <[email protected]>

Author: ccloli

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',
 });
 
 /**

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',
 });
 
 /**

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 {

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;
   }

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();
       },

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';

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 (
+    <SelectAction
+      tooltip="选中父节点"
+      onClick={() => {
+        workspace.selectSource.selectParent();
+      }}
+    >
+      <IconFont type="icon-huiche1" rotate={90} />
+    </SelectAction>
+  );
+});

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) => {

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);