feat(demo-fixed-layout): update initialData (#341)

* feat(demo-fixed-layout): update initialData

* fix(fixed-layout-demo): clipboard plugin

apps/demo-fixed-layout/src/initial-data.ts

@@ -88,113 +88,112 @@ export const initialData: FlowDocumentJSON = {
       },
     },
     {
-      id: 'if_0',
-      type: 'if',
+      id: 'switch_0',
+      type: 'switch',
       data: {
-        title: 'If',
-        inputsValues: {
-          condition: { type: 'constant', content: true },
+        title: 'Switch',
+      },
+      blocks: [
+        {
+          id: 'case_0',
+          type: 'case',
+          data: {
+            title: 'Case_0',
+            inputsValues: {
+              condition: { type: 'constant', content: true },
+            },
+            inputs: {
+              type: 'object',
+              required: ['condition'],
+              properties: {
+                condition: {
+                  type: 'boolean',
+                },
+              },
+            },
+          },
+          blocks: [],
         },
-        inputs: {
-          type: 'object',
-          required: ['condition'],
-          properties: {
-            condition: {
-              type: 'boolean',
+        {
+          id: 'case_1',
+          type: 'case',
+          data: {
+            title: 'Case_1',
+            inputsValues: {
+              condition: { type: 'constant', content: true },
+            },
+            inputs: {
+              type: 'object',
+              required: ['condition'],
+              properties: {
+                condition: {
+                  type: 'boolean',
+                },
+              },
             },
           },
         },
-      },
-      blocks: [
         {
-          id: 'if_true',
-          type: 'ifBlock',
+          id: 'case_default_1',
+          type: 'caseDefault',
           data: {
-            title: 'true',
+            title: 'Default',
           },
           blocks: [],
         },
+      ],
+    },
+    {
+      id: 'loop_0',
+      type: 'loop',
+      data: {
+        title: 'Loop',
+        batchFor: {
+          type: 'ref',
+          content: ['start_0', 'array_obj'],
+        },
+      },
+      blocks: [
         {
-          id: 'if_false',
-          type: 'ifBlock',
+          id: 'if_0',
+          type: 'if',
           data: {
-            title: 'false',
+            title: 'If',
+            inputsValues: {
+              condition: { type: 'constant', content: true },
+            },
+            inputs: {
+              type: 'object',
+              required: ['condition'],
+              properties: {
+                condition: {
+                  type: 'boolean',
+                },
+              },
+            },
           },
           blocks: [
             {
-              id: 'loop_0',
-              type: 'loop',
+              id: 'if_true',
+              type: 'ifBlock',
               data: {
-                title: 'Loop',
-                batchFor: {
-                  type: 'ref',
-                  content: ['start_0', 'array_obj'],
-                },
+                title: 'true',
+              },
+              blocks: [],
+            },
+            {
+              id: 'if_false',
+              type: 'ifBlock',
+              data: {
+                title: 'false',
               },
               blocks: [
                 {
-                  id: 'switch_0',
-                  type: 'switch',
+                  id: 'break_0',
+                  type: 'breakLoop',
                   data: {
-                    title: 'Switch',
+                    title: 'BreakLoop',
                   },
-                  blocks: [
-                    {
-                      id: 'case_0',
-                      type: 'case',
-                      data: {
-                        title: 'Case_0',
-                        inputsValues: {
-                          condition: { type: 'constant', content: true },
-                        },
-                        inputs: {
-                          type: 'object',
-                          required: ['condition'],
-                          properties: {
-                            condition: {
-                              type: 'boolean',
-                            },
-                          },
-                        },
-                      },
-                      blocks: [],
-                    },
-                    {
-                      id: 'case_1',
-                      type: 'case',
-                      data: {
-                        title: 'Case_1',
-                        inputsValues: {
-                          condition: { type: 'constant', content: true },
-                        },
-                        inputs: {
-                          type: 'object',
-                          required: ['condition'],
-                          properties: {
-                            condition: {
-                              type: 'boolean',
-                            },
-                          },
-                        },
-                      },
-                    },
-                    {
-                      id: 'case_default_1',
-                      type: 'caseDefault',
-                      data: {
-                        title: 'Default',
-                      },
-                      blocks: [
-                        {
-                          id: 'break_0',
-                          type: 'breakLoop',
-                          data: {
-                            title: 'BreakLoop',
-                          },
-                        },
-                      ],
-                    },
-                  ],
                 },
               ],
             },

apps/demo-fixed-layout/src/plugins/clipboard-plugin/create-clipboard-plugin.ts

@@ -1,14 +1,11 @@
 import {
   definePluginCreator,
-  Disposable,
   FixedLayoutPluginContext,
   PluginCreator,
 } from '@flowgram.ai/fixed-layout-editor';
 
 import { readData } from '../../shortcuts/utils';
 
-let disposable: any;
-
 export const createClipboardPlugin: PluginCreator<void> = definePluginCreator<
   void,
   FixedLayoutPluginContext
@@ -20,13 +17,8 @@ export const createClipboardPlugin: PluginCreator<void> = definePluginCreator<
       clipboard.writeText(e.value);
     };
     navigator.clipboard.addEventListener('onchange', clipboardListener);
-
-    disposable = Disposable.create(() => {
+    ctx.playground.toDispose.onDispose(() => {
       navigator.clipboard.removeEventListener('onchange', clipboardListener);
     });
   },
-  onDispose() {
-    disposable?.dispose?.();
-    disposable = undefined;
-  },
 });

e2e/fixed-layout/tests/node.spec.ts

@@ -23,7 +23,7 @@ test.describe('node operations', () => {
     const prevCount = await editorPage.getNodeCount();
     await editorPage.insert('switch', {
       from: 'llm_0',
-      to: 'if_0',
+      to: 'switch_0',
     });
     const defaultNodeCount = await editorPage.getNodeCount();
     expect(defaultNodeCount).toEqual(prevCount + 4);