fix(demo-fixed-layout): base-node add PlaygroundEntityContext to identify which node currently (#1020)

apps/demo-fixed-layout/src/components/base-node/index.tsx

@@ -6,7 +6,11 @@
 import { useCallback } from 'react';
 
 import { usePanelManager } from '@flowgram.ai/panel-manager-plugin';
-import { FlowNodeEntity, useNodeRender } from '@flowgram.ai/fixed-layout-editor';
+import {
+  FlowNodeEntity,
+  useNodeRender,
+  PlaygroundEntityContext,
+} from '@flowgram.ai/fixed-layout-editor';
 import { ConfigProvider } from '@douyinfe/semi-ui';
 
 import { NodeRenderContext } from '../../context';
@@ -67,7 +71,15 @@ export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
           outline: form?.state.invalid ? '1px solid red' : 'none',
         }}
       >
-        <NodeRenderContext.Provider value={nodeRender}>{form?.render()}</NodeRenderContext.Provider>
+        {/**
+         * PlaygroundEntityContext is used to allow forms and variables to correctly identify which node they currently belong to
+         * PlaygroundEntityContext 用于让表单和变量能正确识别当前属于哪个节点
+         */}
+        <PlaygroundEntityContext.Provider value={nodeRender.node}>
+          <NodeRenderContext.Provider value={nodeRender}>
+            {form?.render()}
+          </NodeRenderContext.Provider>
+        </PlaygroundEntityContext.Provider>
       </BaseNodeStyle>
     </ConfigProvider>
   );

apps/demo-fixed-layout/src/components/sidebar/sidebar-node-renderer.tsx

@@ -3,7 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useNodeRender, FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
+import {
+  useNodeRender,
+  FlowNodeEntity,
+  PlaygroundEntityContext,
+} from '@flowgram.ai/fixed-layout-editor';
 
 import { NodeRenderContext } from '../../context';
 
@@ -12,18 +16,20 @@ export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
   const nodeRender = useNodeRender(node);
 
   return (
-    <NodeRenderContext.Provider value={nodeRender}>
-      <div
-        style={{
-          background: 'rgb(251, 251, 251)',
-          height: '100%',
-          borderRadius: 8,
-          border: '1px solid rgba(82,100,154, 0.13)',
-          boxSizing: 'border-box',
-        }}
-      >
-        {nodeRender.form?.render()}
-      </div>
-    </NodeRenderContext.Provider>
+    <PlaygroundEntityContext.Provider value={nodeRender.node}>
+      <NodeRenderContext.Provider value={nodeRender}>
+        <div
+          style={{
+            background: 'rgb(251, 251, 251)',
+            height: '100%',
+            borderRadius: 8,
+            border: '1px solid rgba(82,100,154, 0.13)',
+            boxSizing: 'border-box',
+          }}
+        >
+          {nodeRender.form?.render()}
+        </div>
+      </NodeRenderContext.Provider>
+    </PlaygroundEntityContext.Provider>
   );
 }

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

@@ -204,6 +204,12 @@ export const initialData: FlowDocumentJSON = {
       type: 'switch',
       data: {
         title: 'Switch',
+        outputs: {
+          type: 'object',
+          properties: {
+            result: { type: 'string' },
+          },
+        },
       },
       blocks: [
         {