@flowgram.ai/panel-manager-plugin 0.4.15 → 0.4.17

package/.rush/temp/chunked-rush-logs/panel-manager-plugin.build.chunks.jsonl

@@ -9,13 +9,13 @@
 {"kind":"O","text":"\u001b[34mCLI\u001b[39m Target: es2020\n"}
 {"kind":"O","text":"\u001b[34mCJS\u001b[39m Build start\n"}
 {"kind":"O","text":"\u001b[34mESM\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m8.43 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m13.65 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 99ms\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m6.94 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m13.19 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 103ms\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m8.51 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m13.80 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 88ms\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m7.03 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m13.34 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 89ms\n"}
 {"kind":"O","text":"\u001b[34mDTS\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3112ms\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3123ms\n"}
 {"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m1.87 KB\u001b[39m\n"}
 {"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m1.87 KB\u001b[39m\n"}

package/.rush/temp/package-deps_build.json

@@ -4,7 +4,7 @@
     "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "06e72e3927d9f66744d850a17a67751df476a6fa",
     "packages/plugins/panel-manager-plugin/package.json": "f2a7d6e60647063bbbddc3e1fdbdd5db033f59b7",
     "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "5e1bd9a4c51bd72169422f33b40835baf5c9fe02",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx": "62cfac6d14863d534aa902494ace2974e4c53ffd",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx": "621fe5d092d463e21cbb019069fe05b722246ca5",
     "packages/plugins/panel-manager-plugin/src/components/panel-layer/index.ts": "40d07a944137146a8beb8e6842e421617e0b4f3c",
     "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "a297c4d59d0fce0a482dd641d386a77929cbeb35",
     "packages/plugins/panel-manager-plugin/src/create-panel-manager-plugin.ts": "63149b3c2df8ef693d8e55cb91925ea2de4297fe",

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@flowgram.ai/panel-manager-plugin",
   "entries": [
     {
-      "version": "0.4.15",
-      "tag": "@flowgram.ai/panel-manager-plugin_v0.4.15",
-      "date": "Mon, 15 Sep 2025 03:29:40 GMT",
+      "version": "0.4.17",
+      "tag": "@flowgram.ai/panel-manager-plugin_v0.4.17",
+      "date": "Thu, 18 Sep 2025 07:23:22 GMT",
       "comments": {}
     }
   ]

package/CHANGELOG.md

@@ -1,9 +1,9 @@
 # Change Log - @flowgram.ai/panel-manager-plugin
 
-This log was last generated on Mon, 15 Sep 2025 03:29:40 GMT and should not be manually modified.
+This log was last generated on Thu, 18 Sep 2025 07:23:22 GMT and should not be manually modified.
 
-## 0.4.15
-Mon, 15 Sep 2025 03:29:40 GMT
+## 0.4.17
+Thu, 18 Sep 2025 07:23:22 GMT
 
 _Initial release_
 

package/dist/esm/index.js

@@ -178,7 +178,16 @@ var FloatPanel2 = ({ area }) => {
   const [, setVersion] = useState(0);
   const panelManager = usePanelManager();
   const panel = useRef(panelManager.getPanel(area));
-  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ jsx("div", { className: "float-panel-wrap", style: floatPanelWrap, children: i.el }, i.key));
+  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "float-panel-wrap",
+      style: floatPanelWrap,
+      onMouseDown: (e) => e.stopPropagation(),
+      children: i.el
+    },
+    i.key
+  ));
   const node = useRef(render());
   useEffect(() => {
     const dispose = panel.current.onUpdate(() => {

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-config.ts","../../src/services/panel-manager.ts","../../src/services/float-panel.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/float-panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig({}));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const config = defineConfig(opt);\n    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key: string, area: Area = 'right') {\n    const panel = this.getPanel(area);\n    panel.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  el: React.ReactNode;\n}\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key };\n    } else {\n      this.elements.push({ el, key: factory.key });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createElement } from 'react';\n\nimport { injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  node = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    const commonStyle = {\n      pointerEvents: 'none',\n      zIndex: 11,\n    };\n    domUtils.setStyle(this.node, commonStyle);\n    this.config.onDataChange(() => {\n      const { width, height, scrollX, scrollY } = this.config.config;\n      domUtils.setStyle(this.node, {\n        ...commonStyle,\n        width,\n        height,\n        left: scrollX,\n        top: scrollY,\n      });\n    });\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return this.layout;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div className=\"float-panel-wrap\" key={i.key} style={floatPanelWrap}>\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n\n  return <>{node.current}</>;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"panel-layer\" style={panelLayer}>\n    <div className=\"left-area\" style={leftArea}>\n      <div className=\"main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["injectable","FloatPanel","jsx","FloatPanel","PanelLayer","injectable","PanelLayer"]}
+{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-config.ts","../../src/services/panel-manager.ts","../../src/services/float-panel.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/float-panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig({}));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const config = defineConfig(opt);\n    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key: string, area: Area = 'right') {\n    const panel = this.getPanel(area);\n    panel.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  el: React.ReactNode;\n}\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key };\n    } else {\n      this.elements.push({ el, key: factory.key });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createElement } from 'react';\n\nimport { injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  node = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    const commonStyle = {\n      pointerEvents: 'none',\n      zIndex: 11,\n    };\n    domUtils.setStyle(this.node, commonStyle);\n    this.config.onDataChange(() => {\n      const { width, height, scrollX, scrollY } = this.config.config;\n      domUtils.setStyle(this.node, {\n        ...commonStyle,\n        width,\n        height,\n        left: scrollX,\n        top: scrollY,\n      });\n    });\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return this.layout;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div\n        className=\"float-panel-wrap\"\n        key={i.key}\n        style={floatPanelWrap}\n        onMouseDown={(e) => e.stopPropagation()}\n      >\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n\n  return <>{node.current}</>;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"panel-layer\" style={panelLayer}>\n    <div className=\"left-area\" style={leftArea}>\n      <div className=\"main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["injectable","FloatPanel","jsx","FloatPanel","PanelLayer","injectable","PanelLayer"]}

package/dist/index.js

@@ -203,7 +203,16 @@ var FloatPanel2 = ({ area }) => {
   const [, setVersion] = (0, import_react.useState)(0);
   const panelManager = usePanelManager();
   const panel = (0, import_react.useRef)(panelManager.getPanel(area));
-  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "float-panel-wrap", style: floatPanelWrap, children: i.el }, i.key));
+  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "float-panel-wrap",
+      style: floatPanelWrap,
+      onMouseDown: (e) => e.stopPropagation(),
+      children: i.el
+    },
+    i.key
+  ));
   const node = (0, import_react.useRef)(render());
   (0, import_react.useEffect)(() => {
     const dispose = panel.current.onUpdate(() => {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-config.ts","../src/services/panel-manager.ts","../src/services/float-panel.ts","../src/services/panel-layer.ts","../src/components/panel-layer/float-panel.tsx","../src/hooks/use-panel-manager.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig({}));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const config = defineConfig(opt);\n    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key: string, area: Area = 'right') {\n    const panel = this.getPanel(area);\n    panel.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  el: React.ReactNode;\n}\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key };\n    } else {\n      this.elements.push({ el, key: factory.key });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createElement } from 'react';\n\nimport { injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  node = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    const commonStyle = {\n      pointerEvents: 'none',\n      zIndex: 11,\n    };\n    domUtils.setStyle(this.node, commonStyle);\n    this.config.onDataChange(() => {\n      const { width, height, scrollX, scrollY } = this.config.config;\n      domUtils.setStyle(this.node, {\n        ...commonStyle,\n        width,\n        height,\n        left: scrollX,\n        top: scrollY,\n      });\n    });\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return this.layout;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div className=\"float-panel-wrap\" key={i.key} style={floatPanelWrap}>\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n\n  return <>{node.current}</>;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"panel-layer\" style={panelLayer}>\n    <div className=\"left-area\" style={leftArea}>\n      <div className=\"main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["import_core","import_react","import_inversify","import_utils","import_core","FloatPanel","import_jsx_runtime","FloatPanel","PanelLayer","PanelLayer"]}
+{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-config.ts","../src/services/panel-manager.ts","../src/services/float-panel.ts","../src/services/panel-layer.ts","../src/components/panel-layer/float-panel.tsx","../src/hooks/use-panel-manager.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig({}));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const config = defineConfig(opt);\n    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key: string, area: Area = 'right') {\n    const panel = this.getPanel(area);\n    panel.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  el: React.ReactNode;\n}\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key };\n    } else {\n      this.elements.push({ el, key: factory.key });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createElement } from 'react';\n\nimport { injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  node = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    const commonStyle = {\n      pointerEvents: 'none',\n      zIndex: 11,\n    };\n    domUtils.setStyle(this.node, commonStyle);\n    this.config.onDataChange(() => {\n      const { width, height, scrollX, scrollY } = this.config.config;\n      domUtils.setStyle(this.node, {\n        ...commonStyle,\n        width,\n        height,\n        left: scrollX,\n        top: scrollY,\n      });\n    });\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return this.layout;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div\n        className=\"float-panel-wrap\"\n        key={i.key}\n        style={floatPanelWrap}\n        onMouseDown={(e) => e.stopPropagation()}\n      >\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n\n  return <>{node.current}</>;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"panel-layer\" style={panelLayer}>\n    <div className=\"left-area\" style={leftArea}>\n      <div className=\"main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["import_core","import_react","import_inversify","import_utils","import_core","FloatPanel","import_jsx_runtime","FloatPanel","PanelLayer","PanelLayer"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/panel-manager-plugin",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -14,16 +14,16 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "inversify": "^6.0.1",
-    "@flowgram.ai/core": "0.4.15",
-    "@flowgram.ai/utils": "0.4.15"
+    "@flowgram.ai/core": "0.4.17",
+    "@flowgram.ai/utils": "0.4.17"
   },
   "devDependencies": {
     "react": "^18",
     "@types/react": "^18",
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
-    "@flowgram.ai/eslint-config": "0.4.15",
-    "@flowgram.ai/ts-config": "0.4.15"
+    "@flowgram.ai/ts-config": "0.4.17",
+    "@flowgram.ai/eslint-config": "0.4.17"
   },
   "peerDependencies": {
     "react": ">=16.8"

package/rush-logs/panel-manager-plugin.build.log

@@ -9,13 +9,13 @@ CLI tsup v8.5.0
 CLI Target: es2020
 CJS Build start
 ESM Build start
-CJS dist/index.js     8.43 KB
-CJS dist/index.js.map 13.65 KB
-CJS ⚡️ Build success in 99ms
-ESM dist/esm/index.js     6.94 KB
-ESM dist/esm/index.js.map 13.19 KB
-ESM ⚡️ Build success in 103ms
+CJS dist/index.js     8.51 KB
+CJS dist/index.js.map 13.80 KB
+CJS ⚡️ Build success in 88ms
+ESM dist/esm/index.js     7.03 KB
+ESM dist/esm/index.js.map 13.34 KB
+ESM ⚡️ Build success in 89ms
 DTS Build start
-DTS ⚡️ Build success in 3112ms
+DTS ⚡️ Build success in 3123ms
 DTS dist/index.d.ts  1.87 KB
 DTS dist/index.d.mts 1.87 KB

package/src/components/panel-layer/float-panel.tsx

@@ -15,7 +15,12 @@ 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}>
+      <div
+        className="float-panel-wrap"
+        key={i.key}
+        style={floatPanelWrap}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
         {i.el}
       </div>
     ));