fix(demo): freeLayout delete shortcuts fixed (#251)

apps/demo-free-layout/src/form-components/form-header/index.tsx

@@ -1,8 +1,10 @@
 import { Field, FieldRenderProps } from '@flowgram.ai/free-layout-editor';
+import { useClientContext, CommandService } from '@flowgram.ai/free-layout-editor';
 import { Typography, Button } from '@douyinfe/semi-ui';
 import { IconSmallTriangleDown, IconSmallTriangleLeft } from '@douyinfe/semi-icons';
 
 import { Feedback } from '../feedback';
+import { FlowCommandId } from '../../shortcuts';
 import { useIsSidebar, useNodeRenderContext } from '../../hooks';
 import { NodeMenu } from '../../components/node-menu';
 import { getIcon } from './utils';
@@ -11,12 +13,16 @@ import { Header, Operators, Title } from './styles';
 const { Text } = Typography;
 
 export function FormHeader() {
-  const { node, expanded, toggleExpand, readonly, deleteNode } = useNodeRenderContext();
+  const { node, expanded, toggleExpand, readonly } = useNodeRenderContext();
+  const ctx = useClientContext();
   const isSidebar = useIsSidebar();
   const handleExpand = (e: React.MouseEvent) => {
     toggleExpand();
     e.stopPropagation(); // Disable clicking prevents the sidebar from opening
   };
+  const handleDelete = () => {
+    ctx.get<CommandService>(CommandService).executeCommand(FlowCommandId.DELETE, [node]);
+  };
 
   return (
     <Header>
@@ -42,7 +48,7 @@ export function FormHeader() {
       )}
       {readonly ? undefined : (
         <Operators>
-          <NodeMenu node={node} deleteNode={deleteNode} />
+          <NodeMenu node={node} deleteNode={handleDelete} />
         </Operators>
       )}
     </Header>

apps/demo-free-layout/src/shortcuts/delete/index.ts

@@ -6,6 +6,7 @@ import {
   WorkflowNodeEntity,
   WorkflowNodeMeta,
   WorkflowSelectService,
+  HistoryService,
 } from '@flowgram.ai/free-layout-editor';
 import { Toast } from '@douyinfe/semi-ui';
 
@@ -21,24 +22,34 @@ export class DeleteShortcut implements ShortcutsHandler {
 
   private selectService: WorkflowSelectService;
 
+  private historyService: HistoryService;
+
   /**
    * initialize delete shortcut - 初始化删除快捷键
    */
   constructor(context: FreeLayoutPluginContext) {
     this.document = context.get(WorkflowDocument);
     this.selectService = context.get(WorkflowSelectService);
+    this.historyService = context.get(HistoryService);
     this.execute = this.execute.bind(this);
   }
 
   /**
    * execute delete operation - 执行删除操作
    */
-  public async execute(): Promise<void> {
-    if (!this.isValid(this.selectService.selectedNodes)) {
+  public async execute(nodes?: WorkflowNodeEntity[]): Promise<void> {
+    const selection = Array.isArray(nodes) ? nodes : this.selectService.selection;
+    if (
+      !this.isValid(
+        selection.filter((n) => n instanceof WorkflowNodeEntity) as WorkflowNodeEntity[]
+      )
+    ) {
       return;
     }
+    // Merge actions to redo/undo
+    this.historyService.startTransaction();
     // delete selected entities - 删除选中实体
-    this.selectService.selection.forEach((entity) => {
+    selection.forEach((entity) => {
       if (entity instanceof WorkflowNodeEntity) {
         this.removeNode(entity);
       } else if (entity instanceof WorkflowLineEntity) {
@@ -49,6 +60,7 @@ export class DeleteShortcut implements ShortcutsHandler {
     });
     // filter out disposed entities - 过滤掉已删除的实体
     this.selectService.selection = this.selectService.selection.filter((s) => !s.disposed);
+    this.historyService.endTransaction();
   }
 
   /**