fix(demo): shortcuts should be disabled while readonly (#547)

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

@@ -5,6 +5,7 @@
 
 import {
   FreeLayoutPluginContext,
+  PlaygroundConfigEntity,
   Rectangle,
   ShortcutsHandler,
   TransformData,
@@ -33,11 +34,14 @@ export class CopyShortcut implements ShortcutsHandler {
 
   public shortcuts = ['meta c', 'ctrl c'];
 
+  private playgroundConfig: PlaygroundConfigEntity;
+
   private document: WorkflowDocument;
 
   private selectService: WorkflowSelectService;
 
   constructor(context: FreeLayoutPluginContext) {
+    this.playgroundConfig = context.playground.config;
     this.document = context.get(WorkflowDocument);
     this.selectService = context.get(WorkflowSelectService);
     this.execute = this.execute.bind(this);
@@ -47,7 +51,7 @@ export class CopyShortcut implements ShortcutsHandler {
    * execute copy operation - 执行复制操作
    */
   public async execute(): Promise<void> {
-    if (await this.hasSelectedText()) {
+    if (this.readonly || (await this.hasSelectedText())) {
       return;
     }
     if (!this.isValid(this.selectedNodes)) {
@@ -74,7 +78,14 @@ export class CopyShortcut implements ShortcutsHandler {
   }
 
   /**
-   *  has selected text - 是否有文字被选中
+   * readonly - 是否只读
+   */
+  private get readonly(): boolean {
+    return this.playgroundConfig.readonly;
+  }
+
+  /**
+   * has selected text - 是否有文字被选中
    */
   private async hasSelectedText(): Promise<boolean> {
     if (!window.getSelection()?.toString()) {

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

@@ -12,6 +12,7 @@ import {
   WorkflowNodeMeta,
   WorkflowSelectService,
   HistoryService,
+  PlaygroundConfigEntity,
 } from '@flowgram.ai/free-layout-editor';
 import { Toast } from '@douyinfe/semi-ui';
 
@@ -23,6 +24,8 @@ export class DeleteShortcut implements ShortcutsHandler {
 
   public shortcuts = ['backspace', 'delete'];
 
+  private playgroundConfig: PlaygroundConfigEntity;
+
   private document: WorkflowDocument;
 
   private selectService: WorkflowSelectService;
@@ -33,6 +36,7 @@ export class DeleteShortcut implements ShortcutsHandler {
    * initialize delete shortcut - 初始化删除快捷键
    */
   constructor(context: FreeLayoutPluginContext) {
+    this.playgroundConfig = context.playground.config;
     this.document = context.get(WorkflowDocument);
     this.selectService = context.get(WorkflowSelectService);
     this.historyService = context.get(HistoryService);
@@ -43,6 +47,9 @@ export class DeleteShortcut implements ShortcutsHandler {
    * execute delete operation - 执行删除操作
    */
   public async execute(nodes?: WorkflowNodeEntity[]): Promise<void> {
+    if (this.readonly) {
+      return;
+    }
     const selection = Array.isArray(nodes) ? nodes : this.selectService.selection;
     if (
       !this.isValid(
@@ -68,6 +75,13 @@ export class DeleteShortcut implements ShortcutsHandler {
     this.historyService.endTransaction();
   }
 
+  /**
+   * readonly - 是否只读
+   */
+  private get readonly(): boolean {
+    return this.playgroundConfig.readonly;
+  }
+
   /**
    * validate if nodes can be deleted - 验证节点是否可以删除
    */

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

@@ -9,6 +9,7 @@ import {
   FlowNodeTransformData,
   FreeLayoutPluginContext,
   IPoint,
+  PlaygroundConfigEntity,
   Rectangle,
   ShortcutsHandler,
   WorkflowDocument,
@@ -30,6 +31,8 @@ export class PasteShortcut implements ShortcutsHandler {
 
   public shortcuts = ['meta v', 'ctrl v'];
 
+  private playgroundConfig: PlaygroundConfigEntity;
+
   private document: WorkflowDocument;
 
   private selectService: WorkflowSelectService;
@@ -44,6 +47,7 @@ export class PasteShortcut implements ShortcutsHandler {
    * initialize paste shortcut handler - 初始化粘贴快捷键处理器
    */
   constructor(context: FreeLayoutPluginContext) {
+    this.playgroundConfig = context.playground.config;
     this.document = context.get(WorkflowDocument);
     this.selectService = context.get(WorkflowSelectService);
     this.entityManager = context.get(EntityManager);
@@ -56,6 +60,9 @@ export class PasteShortcut implements ShortcutsHandler {
    * execute paste action - 执行粘贴操作
    */
   public async execute(): Promise<WorkflowNodeEntity[] | undefined> {
+    if (this.readonly) {
+      return;
+    }
     const data = await this.tryReadClipboard();
     if (!data) {
       return;
@@ -96,6 +103,13 @@ export class PasteShortcut implements ShortcutsHandler {
     return nodes;
   }
 
+  /**
+   * readonly - 是否只读
+   */
+  private get readonly(): boolean {
+    return this.playgroundConfig.readonly;
+  }
+
   private isValidData(data?: WorkflowClipboardData): boolean {
     if (data?.type !== WorkflowClipboardDataID) {
       Toast.error({