fix: free layout panel layout (#875)

* fix: free layout panel layout

* style: absolute position

* docs: update demo readme

* refactor(demo-free-layout): remove SidebarContext

* style: sidebar border-box

---------

Co-authored-by: xiamidaxia <xiamidaxia@icloud.com>

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

@@ -19,6 +19,7 @@ export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
           height: '100%',
           borderRadius: 8,
           border: '1px solid rgba(82,100,154, 0.13)',
+          boxSizing: 'border-box',
         }}
       >
         {nodeRender.form?.render()}

apps/demo-free-layout/README.md

@@ -30,6 +30,7 @@ npx @flowgram.ai/create-app@latest free-layout
 - **@flowgram.ai/form-materials**: Form materials
 - **@flowgram.ai/runtime-interface**: Runtime interfaces
 - **@flowgram.ai/runtime-js**: JS runtime module
+- **@flowgram.ai/panel-manager-plugin**:  Sidebar panel management
 
 ## Code Guide
 

apps/demo-free-layout/README.zh_CN.md

@@ -30,6 +30,7 @@ npx @flowgram.ai/create-app@latest free-layout
 - **@flowgram.ai/form-materials**: 表单物料
 - **@flowgram.ai/runtime-interface**: 运行时接口
 - **@flowgram.ai/runtime-js**: js 运行时模块
+- **@flowgram.ai/panel-manager-plugin**:  侧边栏面板管理
 
 ## 代码说明
 

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

@@ -20,6 +20,7 @@ export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
           width: '500px',
           borderRadius: 8,
           border: '1px solid rgba(82,100,154, 0.13)',
+          boxSizing: 'border-box',
         }}
       >
         {nodeRender.form?.render()}

apps/demo-free-layout/src/context/index.ts

@@ -4,4 +4,4 @@
  */
 
 export { NodeRenderContext } from './node-render-context';
-export { SidebarContext, IsSidebarContext } from './sidebar-context';
+export { IsSidebarContext } from './sidebar-context';

apps/demo-free-layout/src/context/sidebar-context.ts

@@ -5,10 +5,4 @@
 
 import React from 'react';
 
-export const SidebarContext = React.createContext<{
-  visible: boolean;
-  nodeId?: string;
-  setNodeId: (node: string | undefined) => void;
-}>({ visible: false, setNodeId: () => {} });
-
 export const IsSidebarContext = React.createContext<boolean>(false);

apps/docs/src/en/examples/free-layout/free-feature-overview.mdx

@@ -41,6 +41,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
 - **@flowgram.ai/form-materials**: Form materials
 - **@flowgram.ai/runtime-interface**: Runtime interfaces
 - **@flowgram.ai/runtime-js**: JS runtime module
+- **@flowgram.ai/panel-manager-plugin**:  Sidebar panel management
 
 ## Code Guide
 

apps/docs/src/zh/examples/free-layout/free-feature-overview.mdx

@@ -41,6 +41,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
 - **@flowgram.ai/form-materials**: 表单物料
 - **@flowgram.ai/runtime-interface**: 运行时接口
 - **@flowgram.ai/runtime-js**: js 运行时模块
+- **@flowgram.ai/panel-manager-plugin**:  侧边栏面板管理
 
 ## 代码说明
 

common/config/rush/pnpm-lock.yaml

@@ -3797,9 +3797,15 @@ importers:
       '@types/react':
         specifier: ^18
         version: 18.3.24
+      '@types/react-dom':
+        specifier: ^18
+        version: 18.3.7(@types/react@18.3.24)
       react:
         specifier: ^18
         version: 18.3.1
+      react-dom:
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
       tsup:
         specifier: ^8.0.1
         version: 8.5.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.19.4)(typescript@5.9.2)(yaml@2.8.1)

packages/plugins/panel-manager-plugin/package.json

@@ -29,14 +29,17 @@
   },
   "devDependencies": {
     "react": "^18",
+    "react-dom": "^18",
     "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@flowgram.ai/eslint-config": "workspace:*",
     "@flowgram.ai/ts-config": "workspace:*",
     "tsup": "^8.0.1",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "peerDependenciesMeta": {
     "react": {

packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts

@@ -33,6 +33,7 @@ export const rightArea: React.CSSProperties = {
   flexGrow: 1,
   flexShrink: 0,
   minWidth: 0,
+  overflowY: 'auto',
 
   display: 'flex',
   columnGap: '4px',

packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx

@@ -15,12 +15,7 @@ export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
   const panel = useRef(panelManager.getPanel(area));
   const render = () =>
     panel.current.elements.map((i) => (
-      <div
-        className="float-panel-wrap"
-        key={i.key}
-        style={floatPanelWrap}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
+      <div className="float-panel-wrap" key={i.key} style={floatPanelWrap}>
         {i.el}
       </div>
     ));

packages/plugins/panel-manager-plugin/src/services/panel-layer.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
+import ReactDOM from 'react-dom';
 import { createElement } from 'react';
 
 import { injectable } from 'inversify';
@@ -13,32 +14,28 @@ import { PanelLayer as PanelLayerComp } from '../components/panel-layer';
 
 @injectable()
 export class PanelLayer extends Layer {
-  node = domUtils.createDivWithClass('gedit-flow-panel-layer');
+  panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');
 
   layout: JSX.Element | null = null;
 
   onReady(): void {
+    this.playgroundNode.parentNode?.appendChild(this.panelRoot);
     const commonStyle = {
       pointerEvents: 'none',
-      zIndex: 11,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 20,
     };
-    domUtils.setStyle(this.node, commonStyle);
-    this.config.onDataChange(() => {
-      const { width, height, scrollX, scrollY } = this.config.config;
-      domUtils.setStyle(this.node, {
-        ...commonStyle,
-        width,
-        height,
-        left: scrollX,
-        top: scrollY,
-      });
-    });
+    domUtils.setStyle(this.panelRoot, commonStyle);
   }
 
   render(): JSX.Element {
     if (!this.layout) {
       this.layout = createElement(PanelLayerComp);
     }
-    return this.layout;
+    return ReactDOM.createPortal(this.layout, this.panelRoot);
   }
 }