@flowgram.ai/panel-manager-plugin 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.rush/temp/chunked-rush-logs/panel-manager-plugin.build.chunks.jsonl +7 -7
  2. package/.rush/temp/package-deps_build.json +3 -3
  3. package/CHANGELOG.json +3 -3
  4. package/CHANGELOG.md +3 -3
  5. package/dist/esm/index.js +35 -29
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/index.js +35 -29
  8. package/dist/index.js.map +1 -1
  9. package/{.eslintrc.cjs → eslint.config.js} +2 -2
  10. package/package.json +5 -5
  11. package/rush-logs/panel-manager-plugin.build.log +7 -7
  12. package/src/components/panel-layer/panel.tsx +12 -11
  13. package/src/services/panel-manager.ts +27 -22
package/.rush/temp/chunked-rush-logs/panel-manager-plugin.build.chunks.jsonl CHANGED
@@ -9,13 +9,13 @@
9
9
  {"kind":"O","text":"\u001b[34mCLI\u001b[39m Target: es2020\n"}
10
10
  {"kind":"O","text":"\u001b[34mCJS\u001b[39m Build start\n"}
11
11
  {"kind":"O","text":"\u001b[34mESM\u001b[39m Build start\n"}
12
- {"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js \u001b[22m\u001b[32m21.19 KB\u001b[39m\n"}
13
- {"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m35.84 KB\u001b[39m\n"}
14
- {"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 99ms\n"}
15
- {"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js \u001b[22m\u001b[32m18.42 KB\u001b[39m\n"}
16
- {"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m35.27 KB\u001b[39m\n"}
17
- {"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 101ms\n"}
12
+ {"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js \u001b[22m\u001b[32m21.17 KB\u001b[39m\n"}
13
+ {"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m35.97 KB\u001b[39m\n"}
14
+ {"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 108ms\n"}
15
+ {"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js \u001b[22m\u001b[32m18.44 KB\u001b[39m\n"}
16
+ {"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m35.39 KB\u001b[39m\n"}
17
+ {"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 112ms\n"}
18
18
  {"kind":"O","text":"\u001b[34mDTS\u001b[39m Build start\n"}
19
- {"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3839ms\n"}
19
+ {"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3610ms\n"}
20
20
  {"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts \u001b[22m\u001b[32m5.10 KB\u001b[39m\n"}
21
21
  {"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m5.10 KB\u001b[39m\n"}
package/.rush/temp/package-deps_build.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "files": {
3
- "packages/plugins/panel-manager-plugin/.eslintrc.cjs": "6b30cfc55136d429873e780785bf8d775edaaa74",
4
3
  "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "75dbadf340a3fdaa60befb137b12769e13b91282",
4
+ "packages/plugins/panel-manager-plugin/eslint.config.js": "fc090051ebd4baacf22d6966ed4de1f236b9a73a",
5
5
  "packages/plugins/panel-manager-plugin/package.json": "cb0835394b1db5cfb167091ca40438cdbc571dbd",
6
6
  "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "2cae7373567f0f293c9c802ea67515f1d9047d89",
7
7
  "packages/plugins/panel-manager-plugin/src/components/panel-layer/docked-panel-layer.tsx": "232cd8edbac3a8d8b17b2a5a07c463e57ee8f5c8",
8
8
  "packages/plugins/panel-manager-plugin/src/components/panel-layer/index.ts": "4c78ec72d6acde8f2192ac956436a870cccc583f",
9
9
  "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "d5a9464fa66a9819fa1b0055071990532fd819d9",
10
- "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel.tsx": "6b40286ea0ff18e8897caf7abfa4d76d5df1c52d",
10
+ "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel.tsx": "b3d3567c664b32ef578620e6d60a97a44ea91bdc",
11
11
  "packages/plugins/panel-manager-plugin/src/components/resize-bar/index.tsx": "7712eb70c08b0826ac8940be64582287d279d564",
12
12
  "packages/plugins/panel-manager-plugin/src/contexts.ts": "21e828a3c16a060f92c62c52dd978224f2ab7436",
13
13
  "packages/plugins/panel-manager-plugin/src/create-panel-manager-plugin.ts": "660998495abbabc247370c3525e0009415e6f752",
@@ -19,7 +19,7 @@
19
19
  "packages/plugins/panel-manager-plugin/src/services/panel-config.ts": "b5b96aa95acf3dd188894a739d534e599a1cd755",
20
20
  "packages/plugins/panel-manager-plugin/src/services/panel-factory.ts": "acb81a6e73eec2a11dbdd4899700bbdf31814e60",
21
21
  "packages/plugins/panel-manager-plugin/src/services/panel-layer.ts": "e456afb5e28d3c93846521fa29ed352aca282bec",
22
- "packages/plugins/panel-manager-plugin/src/services/panel-manager.ts": "f415ec138102dfe1c67be6eaefdcdaa49bee7c19",
22
+ "packages/plugins/panel-manager-plugin/src/services/panel-manager.ts": "43c9db43bd8e76ee0ed5bcceef256de2dbd34b15",
23
23
  "packages/plugins/panel-manager-plugin/src/services/panel-restore.ts": "c3151b5281cc35efb262654f8500556a23811829",
24
24
  "packages/plugins/panel-manager-plugin/src/types.ts": "938145cc6b7205d01cfb6a26c0be7da21127eaca",
25
25
  "packages/plugins/panel-manager-plugin/src/utils.ts": "4ceb7654f72dad582be35d0c48297bdc3a54b0e3",
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@flowgram.ai/panel-manager-plugin",
3
3
  "entries": [
4
4
  {
5
- "version": "1.0.6",
6
- "tag": "@flowgram.ai/panel-manager-plugin_v1.0.6",
7
- "date": "Wed, 10 Dec 2025 04:47:02 GMT",
5
+ "version": "1.0.7",
6
+ "tag": "@flowgram.ai/panel-manager-plugin_v1.0.7",
7
+ "date": "Tue, 20 Jan 2026 02:58:00 GMT",
8
8
  "comments": {}
9
9
  }
10
10
  ]
package/CHANGELOG.md CHANGED
@@ -1,9 +1,9 @@
1
1
  # Change Log - @flowgram.ai/panel-manager-plugin
2
2
 
3
- This log was last generated on Wed, 10 Dec 2025 04:47:02 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Jan 2026 02:58:00 GMT and should not be manually modified.
4
4
 
5
- ## 1.0.6
6
- Wed, 10 Dec 2025 04:47:02 GMT
5
+ ## 1.0.7
6
+ Tue, 20 Jan 2026 02:58:00 GMT
7
7
 
8
8
  _Initial release_
9
9
 
package/dist/esm/index.js CHANGED
@@ -269,21 +269,24 @@ var PanelManager = class {
269
269
  return;
270
270
  }
271
271
  const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
272
- if (!factory.allowDuplicates && sameKeyPanels.length) {
273
- !factory.keepDOM && sameKeyPanels.forEach((p) => this.remove(p.id));
274
- }
275
272
  if (factory.keepDOM && sameKeyPanels.length) {
276
- sameKeyPanels[0].visible = true;
277
- return;
278
- }
279
- const panel = this.createPanel({
280
- factory,
281
- config: {
282
- area,
283
- ...options
273
+ const [panel] = sameKeyPanels;
274
+ this.panels.delete(panel.id);
275
+ this.panels.set(panel.id, panel);
276
+ panel.visible = true;
277
+ } else {
278
+ if (!factory.allowDuplicates && sameKeyPanels.length) {
279
+ sameKeyPanels.forEach((p) => this.remove(p.id));
284
280
  }
285
- });
286
- this.panels.set(panel.id, panel);
281
+ const panel = this.createPanel({
282
+ factory,
283
+ config: {
284
+ area,
285
+ ...options
286
+ }
287
+ });
288
+ this.panels.set(panel.id, panel);
289
+ }
287
290
  this.trim(area);
288
291
  this.onPanelsChangeEvent.fire();
289
292
  }
@@ -292,16 +295,12 @@ var PanelManager = class {
292
295
  const panels = this.getPanels();
293
296
  const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
294
297
  closedPanels.forEach((panel) => {
295
- if (panel.keepDOM) {
296
- panel.visible = false;
297
- return;
298
- }
299
298
  this.remove(panel.id);
300
299
  });
301
300
  this.onPanelsChangeEvent.fire();
302
301
  }
303
302
  trim(area) {
304
- const panels = this.getPanels(area).filter((p) => !p.keepDOM);
303
+ const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
305
304
  const areaConfig = this.getAreaConfig(area);
306
305
  while (panels.length > areaConfig.max) {
307
306
  const removed = panels.shift();
@@ -312,7 +311,12 @@ var PanelManager = class {
312
311
  }
313
312
  remove(id) {
314
313
  const panel = this.panels.get(id);
315
- if (panel) {
314
+ if (!panel) {
315
+ return;
316
+ }
317
+ if (panel.keepDOM) {
318
+ panel.visible = false;
319
+ } else {
316
320
  panel.dispose();
317
321
  this.panels.delete(id);
318
322
  }
@@ -406,13 +410,15 @@ var usePanelStore = (selector) => {
406
410
 
407
411
  // src/components/panel-layer/panel.tsx
408
412
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
409
- var PanelItem = ({ panel }) => {
413
+ var PanelItem = ({ panel, hidden }) => {
410
414
  const panelManager = usePanelManager();
411
415
  const ref = useRef2(null);
412
416
  const isHorizontal = ["right", "docked-right"].includes(panel.area);
413
- const { size, fullscreen, visible } = usePanelStore((s) => ({ size: s.size, fullscreen: s.fullscreen, visible: s.visible }));
417
+ const { size, fullscreen } = usePanelStore((s) => ({
418
+ size: s.size,
419
+ fullscreen: s.fullscreen
420
+ }));
414
421
  const [layerSize, setLayerSize] = useState2(size);
415
- const [displayStyle, setDisplayStyle] = useState2({});
416
422
  const currentSize = fullscreen ? layerSize : size;
417
423
  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };
418
424
  const handleResize = (next) => {
@@ -446,11 +452,6 @@ var PanelItem = ({ panel }) => {
446
452
  observer.observe(layer);
447
453
  return () => observer.disconnect();
448
454
  }, [fullscreen]);
449
- useEffect2(() => {
450
- if (panel.keepDOM) {
451
- setDisplayStyle({ display: visible ? "block" : "none" });
452
- }
453
- }, [visible]);
454
455
  return /* @__PURE__ */ jsxs(
455
456
  "div",
456
457
  {
@@ -459,7 +460,12 @@ var PanelItem = ({ panel }) => {
459
460
  isHorizontal ? "panel-horizontal" : "panel-vertical"
460
461
  ),
461
462
  ref,
462
- style: { ...displayStyle, ...panel.factory.style, ...panel.config.style, ...sizeStyle },
463
+ style: {
464
+ display: hidden ? "none" : "block",
465
+ ...panel.factory.style,
466
+ ...panel.config.style,
467
+ ...sizeStyle
468
+ },
463
469
  children: [
464
470
  panel.resizable && panelManager.config.resizeBarRender({
465
471
  size,
@@ -483,7 +489,7 @@ var PanelArea = ({ area }) => {
483
489
  });
484
490
  return () => dispose.dispose();
485
491
  }, []);
486
- return /* @__PURE__ */ jsx2(Fragment, { children: panels.map((panel) => /* @__PURE__ */ jsx2(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ jsx2(PanelItem, { panel }) }, panel.id)) });
492
+ return /* @__PURE__ */ jsx2(Fragment, { children: panels.map((panel) => /* @__PURE__ */ jsx2(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ jsx2(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }) }, panel.id)) });
487
493
  };
488
494
 
489
495
  // src/components/panel-layer/css.ts
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-factory.ts","../../src/services/panel-restore.ts","../../src/components/resize-bar/index.tsx","../../src/services/panel-config.ts","../../src/utils.ts","../../src/services/panel-manager.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/hooks/use-panel.ts","../../src/contexts.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/docked-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 {\n PanelEntityFactory,\n PanelEntity,\n PanelEntityFactoryConstant,\n PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n PanelManager,\n PanelManagerConfig,\n PanelLayer,\n PanelRestore,\n PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n onBind: ({ bind }, opt) => {\n bind(PanelManager).to(PanelManager).inSingletonScope();\n bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n bind(PanelEntityFactory).toFactory(\n (context) =>\n ({\n factory,\n config,\n }: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n }) => {\n const container = context.container.createChild();\n container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n container.bind(PanelEntityConfigConstant).toConstantValue(config);\n const panel = container.resolve(PanelEntity);\n panel.init();\n return panel;\n }\n );\n },\n onInit(ctx) {\n ctx.playground.registerLayer(PanelLayer);\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 { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n size: number;\n fullscreen: boolean;\n visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n @inject(PanelRestore) restore: PanelRestore;\n\n /** 面板工厂 */\n @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n private initialized = false;\n\n /** 实例唯一标识 */\n id: string = nanoid();\n\n /** 渲染缓存 */\n node: React.ReactNode = null;\n\n store: StoreApi<PanelEntityState>;\n\n get area() {\n return this.config.area;\n }\n\n get mode() {\n return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n }\n\n get key() {\n return this.factory.key;\n }\n\n get renderer() {\n if (!this.node) {\n this.node = this.factory.render(this.config.props);\n }\n return this.node;\n }\n\n get fullscreen() {\n return this.store.getState().fullscreen;\n }\n\n set fullscreen(next: boolean) {\n this.store.setState({ fullscreen: next });\n }\n\n get resizable() {\n if (this.fullscreen) {\n return false;\n }\n return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n }\n\n get keepDOM() {\n return this.factory.keepDOM;\n }\n\n get visible() {\n return this.store.getState().visible;\n }\n\n set visible(next: boolean) {\n this.store.setState({ visible: next });\n }\n\n get layer() {\n return document.querySelector(\n this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n );\n }\n\n init() {\n if (this.initialized) {\n return;\n }\n this.initialized = true;\n const cache = this.restore.restore<PanelEntityState>(this.key);\n\n const initialState = merge<PanelEntityState>(\n {\n size: this.config.defaultSize,\n fullscreen: this.config.fullscreen,\n },\n cache ? cache : {},\n {\n size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n fullscreen: this.factory.fullscreen || false,\n ...(this.factory.keepDOM ? { visible: true } : {}),\n }\n );\n\n this.store = createStore<PanelEntityState>(() => initialState);\n }\n\n mergeState() {}\n\n dispose() {\n this.restore.store(this.key, this.store.getState());\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n store: (k: string, v: any) => void;\n restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n map = new Map<string, any>();\n\n store(k: string, v: any) {\n this.map.set(k, v);\n }\n\n restore<T>(k: string): T | undefined {\n return this.map.get(k) as T;\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n const currentPoint = useRef<null | number>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isVertical = direction === 'vertical';\n\n return (\n <div\n onMouseDown={(e) => {\n currentPoint.current = isVertical ? e.clientX : e.clientY;\n e.stopPropagation();\n e.preventDefault();\n setIsDragging(true);\n const mouseUp = () => {\n currentPoint.current = null;\n document.body.removeEventListener('mouseup', mouseUp);\n document.body.removeEventListener('mousemove', mouseMove);\n setIsDragging(false);\n };\n const mouseMove = (e: MouseEvent) => {\n const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n onResize(size + delta);\n };\n document.body.addEventListener('mouseup', mouseUp);\n document.body.addEventListener('mousemove', mouseMove);\n }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'auto',\n ...(isVertical\n ? {\n cursor: 'ew-resize',\n height: '100%',\n marginLeft: -5,\n width: 10,\n }\n : {\n cursor: 'ns-resize',\n width: '100%',\n marginTop: -5,\n height: 10,\n }),\n }}\n >\n <div\n style={{\n ...(isVertical\n ? {\n width: 3,\n height: '100%',\n }\n : {\n height: 3,\n width: '100%',\n }),\n backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n }}\n />\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n factories: PanelFactory<any>[];\n right: PanelConfig;\n bottom: PanelConfig;\n dockedRight: PanelConfig;\n dockedBottom: PanelConfig;\n /** Resizable, and multi-panel options mutually exclusive */\n autoResize: boolean;\n layerProps: PanelLayerProps;\n resizeBarRender: ({\n size,\n }: {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (size: number) => void;\n }) => React.ReactNode;\n getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\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 dockedRight: {\n max: 1,\n },\n dockedBottom: {\n max: 1,\n },\n factories: [],\n autoResize: true,\n layerProps: {},\n resizeBarRender: ResizeBar,\n getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\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\nexport const merge = <T>(...objs: Partial<T>[]) => {\n const result: any = {};\n\n for (const obj of objs) {\n if (!obj || typeof obj !== 'object') continue;\n\n for (const key of Object.keys(obj)) {\n const value = (obj as any)[key];\n\n if (result[key] === undefined) {\n result[key] = value;\n }\n }\n }\n\n return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n private panels = new Map<string, PanelEntity>();\n\n private onPanelsChangeEvent = new Emitter<void>();\n\n public onPanelsChange = this.onPanelsChangeEvent.event;\n\n init() {\n this.config.factories.forEach((factory) => this.register(factory));\n }\n\n /** registry panel factory */\n register<T extends any>(factory: PanelFactory<T>) {\n this.panelRegistry.set(factory.key, factory);\n }\n\n /** open panel */\n public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n const factory = this.panelRegistry.get(key);\n if (!factory) {\n return;\n }\n\n const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n if (!factory.allowDuplicates && sameKeyPanels.length) {\n !factory.keepDOM && sameKeyPanels.forEach((p) => this.remove(p.id));\n }\n\n if (factory.keepDOM && sameKeyPanels.length) {\n sameKeyPanels[0].visible = true;\n return;\n }\n\n const panel = this.createPanel({\n factory,\n config: {\n area,\n ...options,\n },\n });\n\n this.panels.set(panel.id, panel);\n this.trim(area);\n this.onPanelsChangeEvent.fire();\n }\n\n /** close panel */\n public close(key?: string) {\n const panels = this.getPanels();\n const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n closedPanels.forEach((panel) => {\n if (panel.keepDOM) {\n panel.visible = false;\n return;\n }\n\n this.remove(panel.id)\n });\n this.onPanelsChangeEvent.fire();\n }\n\n private trim(area: Area) {\n const panels = this.getPanels(area).filter((p) => !p.keepDOM);\n const areaConfig = this.getAreaConfig(area);\n while (panels.length > areaConfig.max) {\n const removed = panels.shift();\n if (removed) {\n this.remove(removed.id);\n }\n }\n }\n\n private remove(id: string) {\n const panel = this.panels.get(id);\n if (panel) {\n panel.dispose();\n this.panels.delete(id);\n }\n }\n\n getPanels(area?: Area) {\n const panels: PanelEntity[] = [];\n this.panels.forEach((panel) => {\n if (!area || panel.area === area) {\n panels.push(panel);\n }\n });\n return panels;\n }\n\n getAreaConfig(area: Area) {\n switch (area) {\n case 'docked-bottom':\n return this.config.dockedBottom;\n case 'docked-right':\n return this.config.dockedRight;\n case 'bottom':\n return this.config.bottom;\n case 'right':\n default:\n return this.config.right;\n }\n }\n\n dispose() {\n this.onPanelsChangeEvent.dispose();\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n layout: JSX.Element | null = null;\n\n onReady(): void {\n this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n this.toDispose.push(\n Disposable.create(() => {\n // Remove from PopupContainer\n this.panelRoot.remove();\n })\n );\n const commonStyle = {\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 100,\n };\n domUtils.setStyle(this.panelRoot, commonStyle);\n }\n\n render(): JSX.Element {\n if (!this.layout) {\n const { children, ...layoutProps } = this.panelConfig.layerProps;\n this.layout = createElement(PanelLayerComp, layoutProps, children);\n }\n return ReactDOM.createPortal(this.layout, this.panelRoot);\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n /** 模式：悬浮｜挤压 */\n mode?: 'floating' | 'docked';\n className?: string;\n style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n mode = 'floating',\n className,\n style,\n children,\n}) => {\n useGlobalCSS({\n cssText: globalCSS,\n id: 'flow-panel-layer-css',\n });\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-layer-wrap',\n mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n className\n )}\n style={style}\n >\n <div className=\"gedit-flow-panel-left-area\">\n <div className=\"gedit-flow-panel-main-area\">{children}</div>\n <div className=\"gedit-flow-panel-bottom-area\">\n <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n </div>\n </div>\n <div className=\"gedit-flow-panel-right-area\">\n <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n </div>\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n cssText: string;\n id: string;\n cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n useEffect(() => {\n /** SSR safe */\n if (typeof document === 'undefined') return;\n\n if (document.getElementById(id)) return;\n\n const style = document.createElement('style');\n style.id = id;\n style.textContent = cssText;\n document.head.appendChild(style);\n\n return () => {\n const existing = document.getElementById(id);\n if (existing && cleanup) existing.remove();\n };\n }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity }> = ({ panel }) => {\n const panelManager = usePanelManager();\n const ref = useRef<HTMLDivElement>(null);\n\n const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n const { size, fullscreen, visible } = usePanelStore((s) => ({ size: s.size, fullscreen: s.fullscreen, visible: s.visible }));\n\n const [layerSize, setLayerSize] = useState(size);\n const [displayStyle, setDisplayStyle] = useState({});\n\n const currentSize = fullscreen ? layerSize : size;\n\n const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n const handleResize = (next: number) => {\n let nextSize = next;\n if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n nextSize = panel.factory.maxSize;\n } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n nextSize = panel.factory.minSize;\n }\n panel.store.setState({ size: nextSize });\n };\n\n useEffect(() => {\n /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n if (ref.current && !fullscreen) {\n const { width, height } = ref.current.getBoundingClientRect();\n const realSize = isHorizontal ? width : height;\n panel.store.setState({ size: realSize });\n }\n }, [fullscreen]);\n\n useEffect(() => {\n if (!fullscreen) {\n return;\n }\n const layer = panel.layer;\n if (!layer) {\n return;\n }\n const observer = new ResizeObserver(([entry]) => {\n const { width, height } = entry.contentRect;\n setLayerSize(isHorizontal ? width : height);\n });\n observer.observe(layer);\n return () => observer.disconnect();\n }, [fullscreen]);\n\n useEffect(() => {\n if (panel.keepDOM) {\n setDisplayStyle({ display: visible ? 'block' : 'none' });\n }\n }, [visible]);\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-wrap',\n isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n )}\n key={panel.id}\n ref={ref}\n style={{ ...displayStyle, ...panel.factory.style, ...panel.config.style, ...sizeStyle }}\n >\n {panel.resizable &&\n panelManager.config.resizeBarRender({\n size,\n direction: isHorizontal ? 'vertical' : 'horizontal',\n onResize: handleResize,\n })}\n {panel.renderer}\n </div>\n );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n const panelManager = usePanelManager();\n const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n useEffect(() => {\n const dispose = panelManager.onPanelsChange(() => {\n startTransition(() => {\n setPanels(panelManager.getPanels(area));\n });\n });\n return () => dispose.dispose();\n }, []);\n\n return (\n <>\n {panels.map((panel) => (\n <PanelContext.Provider value={panel} key={panel.id}>\n <PanelItem panel={panel} />\n </PanelContext.Provider>\n ))}\n </>\n );\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\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n const panel = usePanel();\n return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n .gedit-flow-panel-layer-wrap * {\n box-sizing: border-box;\n }\n .gedit-flow-panel-layer-wrap {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n .gedit-flow-panel-layer-wrap-docked {\n\n }\n .gedit-flow-panel-layer-wrap-floating {\n pointer-events: none;\n }\n\n .gedit-flow-panel-left-area {\n width: 100%;\n min-width: 0;\n flex-grow: 0;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n }\n .gedit-flow-panel-right-area {\n height: 100%;\n flex-grow: 1;\n flex-shrink: 0;\n min-width: 0;\n display: flex;\n max-width: 100%;\n }\n\n .gedit-flow-panel-main-area {\n position: relative;\n overflow: hidden;\n flex-grow: 0;\n flex-shrink: 1;\n width: 100%;\n height: 100%;\n }\n .gedit-flow-panel-bottom-area {\n flex-grow: 1;\n flex-shrink: 0;\n width: 100%;\n min-height: 0;\n }\n .gedit-flow-panel-wrap {\n pointer-events: auto;\n overflow: auto;\n position: relative;\n }\n .gedit-flow-panel-wrap.panel-horizontal {\n height: 100%;\n }\n .gedit-flow-panel-wrap.panel-vertical {\n width: 100%;\n }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["injectable","e","injectable","injectable","inject","inject","injectable","injectable","inject","clsx","useEffect","useState","useRef","jsx","useRef","useState","useEffect","jsx","jsxs","clsx","jsx","PanelLayer","inject","injectable","PanelLayer"]}
1
+ {"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-factory.ts","../../src/services/panel-restore.ts","../../src/components/resize-bar/index.tsx","../../src/services/panel-config.ts","../../src/utils.ts","../../src/services/panel-manager.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/hooks/use-panel.ts","../../src/contexts.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/docked-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 {\n PanelEntityFactory,\n PanelEntity,\n PanelEntityFactoryConstant,\n PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n PanelManager,\n PanelManagerConfig,\n PanelLayer,\n PanelRestore,\n PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n onBind: ({ bind }, opt) => {\n bind(PanelManager).to(PanelManager).inSingletonScope();\n bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n bind(PanelEntityFactory).toFactory(\n (context) =>\n ({\n factory,\n config,\n }: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n }) => {\n const container = context.container.createChild();\n container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n container.bind(PanelEntityConfigConstant).toConstantValue(config);\n const panel = container.resolve(PanelEntity);\n panel.init();\n return panel;\n }\n );\n },\n onInit(ctx) {\n ctx.playground.registerLayer(PanelLayer);\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 { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n size: number;\n fullscreen: boolean;\n visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n @inject(PanelRestore) restore: PanelRestore;\n\n /** 面板工厂 */\n @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n private initialized = false;\n\n /** 实例唯一标识 */\n id: string = nanoid();\n\n /** 渲染缓存 */\n node: React.ReactNode = null;\n\n store: StoreApi<PanelEntityState>;\n\n get area() {\n return this.config.area;\n }\n\n get mode() {\n return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n }\n\n get key() {\n return this.factory.key;\n }\n\n get renderer() {\n if (!this.node) {\n this.node = this.factory.render(this.config.props);\n }\n return this.node;\n }\n\n get fullscreen() {\n return this.store.getState().fullscreen;\n }\n\n set fullscreen(next: boolean) {\n this.store.setState({ fullscreen: next });\n }\n\n get resizable() {\n if (this.fullscreen) {\n return false;\n }\n return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n }\n\n get keepDOM() {\n return this.factory.keepDOM;\n }\n\n get visible() {\n return this.store.getState().visible;\n }\n\n set visible(next: boolean) {\n this.store.setState({ visible: next });\n }\n\n get layer() {\n return document.querySelector(\n this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n );\n }\n\n init() {\n if (this.initialized) {\n return;\n }\n this.initialized = true;\n const cache = this.restore.restore<PanelEntityState>(this.key);\n\n const initialState = merge<PanelEntityState>(\n {\n size: this.config.defaultSize,\n fullscreen: this.config.fullscreen,\n },\n cache ? cache : {},\n {\n size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n fullscreen: this.factory.fullscreen || false,\n ...(this.factory.keepDOM ? { visible: true } : {}),\n }\n );\n\n this.store = createStore<PanelEntityState>(() => initialState);\n }\n\n mergeState() {}\n\n dispose() {\n this.restore.store(this.key, this.store.getState());\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n store: (k: string, v: any) => void;\n restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n map = new Map<string, any>();\n\n store(k: string, v: any) {\n this.map.set(k, v);\n }\n\n restore<T>(k: string): T | undefined {\n return this.map.get(k) as T;\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n const currentPoint = useRef<null | number>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isVertical = direction === 'vertical';\n\n return (\n <div\n onMouseDown={(e) => {\n currentPoint.current = isVertical ? e.clientX : e.clientY;\n e.stopPropagation();\n e.preventDefault();\n setIsDragging(true);\n const mouseUp = () => {\n currentPoint.current = null;\n document.body.removeEventListener('mouseup', mouseUp);\n document.body.removeEventListener('mousemove', mouseMove);\n setIsDragging(false);\n };\n const mouseMove = (e: MouseEvent) => {\n const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n onResize(size + delta);\n };\n document.body.addEventListener('mouseup', mouseUp);\n document.body.addEventListener('mousemove', mouseMove);\n }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'auto',\n ...(isVertical\n ? {\n cursor: 'ew-resize',\n height: '100%',\n marginLeft: -5,\n width: 10,\n }\n : {\n cursor: 'ns-resize',\n width: '100%',\n marginTop: -5,\n height: 10,\n }),\n }}\n >\n <div\n style={{\n ...(isVertical\n ? {\n width: 3,\n height: '100%',\n }\n : {\n height: 3,\n width: '100%',\n }),\n backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n }}\n />\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n factories: PanelFactory<any>[];\n right: PanelConfig;\n bottom: PanelConfig;\n dockedRight: PanelConfig;\n dockedBottom: PanelConfig;\n /** Resizable, and multi-panel options mutually exclusive */\n autoResize: boolean;\n layerProps: PanelLayerProps;\n resizeBarRender: ({\n size,\n }: {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (size: number) => void;\n }) => React.ReactNode;\n getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\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 dockedRight: {\n max: 1,\n },\n dockedBottom: {\n max: 1,\n },\n factories: [],\n autoResize: true,\n layerProps: {},\n resizeBarRender: ResizeBar,\n getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\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\nexport const merge = <T>(...objs: Partial<T>[]) => {\n const result: any = {};\n\n for (const obj of objs) {\n if (!obj || typeof obj !== 'object') continue;\n\n for (const key of Object.keys(obj)) {\n const value = (obj as any)[key];\n\n if (result[key] === undefined) {\n result[key] = value;\n }\n }\n }\n\n return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n private panels = new Map<string, PanelEntity>();\n\n private onPanelsChangeEvent = new Emitter<void>();\n\n public onPanelsChange = this.onPanelsChangeEvent.event;\n\n init() {\n this.config.factories.forEach((factory) => this.register(factory));\n }\n\n /** registry panel factory */\n register<T extends any>(factory: PanelFactory<T>) {\n this.panelRegistry.set(factory.key, factory);\n }\n\n /** open panel */\n public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n const factory = this.panelRegistry.get(key);\n if (!factory) {\n return;\n }\n\n const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n if (factory.keepDOM && sameKeyPanels.length) {\n const [panel] = sameKeyPanels;\n // move to last\n this.panels.delete(panel.id);\n this.panels.set(panel.id, panel);\n panel.visible = true;\n } else {\n if (!factory.allowDuplicates && sameKeyPanels.length) {\n sameKeyPanels.forEach((p) => this.remove(p.id));\n }\n const panel = this.createPanel({\n factory,\n config: {\n area,\n ...options,\n },\n });\n\n this.panels.set(panel.id, panel);\n }\n\n this.trim(area);\n this.onPanelsChangeEvent.fire();\n }\n\n /** close panel */\n public close(key?: string) {\n const panels = this.getPanels();\n const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n closedPanels.forEach((panel) => {\n this.remove(panel.id);\n });\n this.onPanelsChangeEvent.fire();\n }\n\n private trim(area: Area) {\n /** 1. general panel; 2. keepDOM visible panel */\n const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n const areaConfig = this.getAreaConfig(area);\n while (panels.length > areaConfig.max) {\n const removed = panels.shift();\n if (removed) {\n this.remove(removed.id);\n }\n }\n }\n\n private remove(id: string) {\n const panel = this.panels.get(id);\n if (!panel) {\n return;\n }\n if (panel.keepDOM) {\n panel.visible = false;\n } else {\n panel.dispose();\n this.panels.delete(id);\n }\n }\n\n getPanels(area?: Area) {\n const panels: PanelEntity[] = [];\n this.panels.forEach((panel) => {\n if (!area || panel.area === area) {\n panels.push(panel);\n }\n });\n return panels;\n }\n\n getAreaConfig(area: Area) {\n switch (area) {\n case 'docked-bottom':\n return this.config.dockedBottom;\n case 'docked-right':\n return this.config.dockedRight;\n case 'bottom':\n return this.config.bottom;\n case 'right':\n default:\n return this.config.right;\n }\n }\n\n dispose() {\n this.onPanelsChangeEvent.dispose();\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n layout: JSX.Element | null = null;\n\n onReady(): void {\n this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n this.toDispose.push(\n Disposable.create(() => {\n // Remove from PopupContainer\n this.panelRoot.remove();\n })\n );\n const commonStyle = {\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 100,\n };\n domUtils.setStyle(this.panelRoot, commonStyle);\n }\n\n render(): JSX.Element {\n if (!this.layout) {\n const { children, ...layoutProps } = this.panelConfig.layerProps;\n this.layout = createElement(PanelLayerComp, layoutProps, children);\n }\n return ReactDOM.createPortal(this.layout, this.panelRoot);\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n /** 模式：悬浮｜挤压 */\n mode?: 'floating' | 'docked';\n className?: string;\n style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n mode = 'floating',\n className,\n style,\n children,\n}) => {\n useGlobalCSS({\n cssText: globalCSS,\n id: 'flow-panel-layer-css',\n });\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-layer-wrap',\n mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n className\n )}\n style={style}\n >\n <div className=\"gedit-flow-panel-left-area\">\n <div className=\"gedit-flow-panel-main-area\">{children}</div>\n <div className=\"gedit-flow-panel-bottom-area\">\n <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n </div>\n </div>\n <div className=\"gedit-flow-panel-right-area\">\n <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n </div>\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n cssText: string;\n id: string;\n cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n useEffect(() => {\n /** SSR safe */\n if (typeof document === 'undefined') return;\n\n if (document.getElementById(id)) return;\n\n const style = document.createElement('style');\n style.id = id;\n style.textContent = cssText;\n document.head.appendChild(style);\n\n return () => {\n const existing = document.getElementById(id);\n if (existing && cleanup) existing.remove();\n };\n }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n const panelManager = usePanelManager();\n const ref = useRef<HTMLDivElement>(null);\n\n const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n const { size, fullscreen } = usePanelStore((s) => ({\n size: s.size,\n fullscreen: s.fullscreen,\n }));\n\n const [layerSize, setLayerSize] = useState(size);\n\n const currentSize = fullscreen ? layerSize : size;\n\n const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n const handleResize = (next: number) => {\n let nextSize = next;\n if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n nextSize = panel.factory.maxSize;\n } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n nextSize = panel.factory.minSize;\n }\n panel.store.setState({ size: nextSize });\n };\n\n useEffect(() => {\n /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n if (ref.current && !fullscreen) {\n const { width, height } = ref.current.getBoundingClientRect();\n const realSize = isHorizontal ? width : height;\n panel.store.setState({ size: realSize });\n }\n }, [fullscreen]);\n\n useEffect(() => {\n if (!fullscreen) {\n return;\n }\n const layer = panel.layer;\n if (!layer) {\n return;\n }\n const observer = new ResizeObserver(([entry]) => {\n const { width, height } = entry.contentRect;\n setLayerSize(isHorizontal ? width : height);\n });\n observer.observe(layer);\n return () => observer.disconnect();\n }, [fullscreen]);\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-wrap',\n isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n )}\n key={panel.id}\n ref={ref}\n style={{\n display: hidden ? 'none' : 'block',\n ...panel.factory.style,\n ...panel.config.style,\n ...sizeStyle,\n }}\n >\n {panel.resizable &&\n panelManager.config.resizeBarRender({\n size,\n direction: isHorizontal ? 'vertical' : 'horizontal',\n onResize: handleResize,\n })}\n {panel.renderer}\n </div>\n );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n const panelManager = usePanelManager();\n const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n useEffect(() => {\n const dispose = panelManager.onPanelsChange(() => {\n startTransition(() => {\n setPanels(panelManager.getPanels(area));\n });\n });\n return () => dispose.dispose();\n }, []);\n\n return (\n <>\n {panels.map((panel) => (\n <PanelContext.Provider value={panel} key={panel.id}>\n <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n </PanelContext.Provider>\n ))}\n </>\n );\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\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n const panel = usePanel();\n return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n .gedit-flow-panel-layer-wrap * {\n box-sizing: border-box;\n }\n .gedit-flow-panel-layer-wrap {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n .gedit-flow-panel-layer-wrap-docked {\n\n }\n .gedit-flow-panel-layer-wrap-floating {\n pointer-events: none;\n }\n\n .gedit-flow-panel-left-area {\n width: 100%;\n min-width: 0;\n flex-grow: 0;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n }\n .gedit-flow-panel-right-area {\n height: 100%;\n flex-grow: 1;\n flex-shrink: 0;\n min-width: 0;\n display: flex;\n max-width: 100%;\n }\n\n .gedit-flow-panel-main-area {\n position: relative;\n overflow: hidden;\n flex-grow: 0;\n flex-shrink: 1;\n width: 100%;\n height: 100%;\n }\n .gedit-flow-panel-bottom-area {\n flex-grow: 1;\n flex-shrink: 0;\n width: 100%;\n min-height: 0;\n }\n .gedit-flow-panel-wrap {\n pointer-events: auto;\n overflow: auto;\n position: relative;\n }\n .gedit-flow-panel-wrap.panel-horizontal {\n height: 100%;\n }\n .gedit-flow-panel-wrap.panel-vertical {\n width: 100%;\n }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["injectable","e","injectable","injectable","inject","inject","injectable","injectable","inject","clsx","useEffect","useState","useRef","jsx","useRef","useState","useEffect","jsx","jsxs","clsx","jsx","PanelLayer","inject","injectable","PanelLayer"]}
package/dist/index.js CHANGED
@@ -308,21 +308,24 @@ var PanelManager = class {
308
308
  return;
309
309
  }
310
310
  const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
311
- if (!factory.allowDuplicates && sameKeyPanels.length) {
312
- !factory.keepDOM && sameKeyPanels.forEach((p) => this.remove(p.id));
313
- }
314
311
  if (factory.keepDOM && sameKeyPanels.length) {
315
- sameKeyPanels[0].visible = true;
316
- return;
317
- }
318
- const panel = this.createPanel({
319
- factory,
320
- config: {
321
- area,
322
- ...options
312
+ const [panel] = sameKeyPanels;
313
+ this.panels.delete(panel.id);
314
+ this.panels.set(panel.id, panel);
315
+ panel.visible = true;
316
+ } else {
317
+ if (!factory.allowDuplicates && sameKeyPanels.length) {
318
+ sameKeyPanels.forEach((p) => this.remove(p.id));
323
319
  }
324
- });
325
- this.panels.set(panel.id, panel);
320
+ const panel = this.createPanel({
321
+ factory,
322
+ config: {
323
+ area,
324
+ ...options
325
+ }
326
+ });
327
+ this.panels.set(panel.id, panel);
328
+ }
326
329
  this.trim(area);
327
330
  this.onPanelsChangeEvent.fire();
328
331
  }
@@ -331,16 +334,12 @@ var PanelManager = class {
331
334
  const panels = this.getPanels();
332
335
  const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
333
336
  closedPanels.forEach((panel) => {
334
- if (panel.keepDOM) {
335
- panel.visible = false;
336
- return;
337
- }
338
337
  this.remove(panel.id);
339
338
  });
340
339
  this.onPanelsChangeEvent.fire();
341
340
  }
342
341
  trim(area) {
343
- const panels = this.getPanels(area).filter((p) => !p.keepDOM);
342
+ const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
344
343
  const areaConfig = this.getAreaConfig(area);
345
344
  while (panels.length > areaConfig.max) {
346
345
  const removed = panels.shift();
@@ -351,7 +350,12 @@ var PanelManager = class {
351
350
  }
352
351
  remove(id) {
353
352
  const panel = this.panels.get(id);
354
- if (panel) {
353
+ if (!panel) {
354
+ return;
355
+ }
356
+ if (panel.keepDOM) {
357
+ panel.visible = false;
358
+ } else {
355
359
  panel.dispose();
356
360
  this.panels.delete(id);
357
361
  }
@@ -445,13 +449,15 @@ var usePanelStore = (selector) => {
445
449
 
446
450
  // src/components/panel-layer/panel.tsx
447
451
  var import_jsx_runtime2 = require("react/jsx-runtime");
448
- var PanelItem = ({ panel }) => {
452
+ var PanelItem = ({ panel, hidden }) => {
449
453
  const panelManager = usePanelManager();
450
454
  const ref = (0, import_react5.useRef)(null);
451
455
  const isHorizontal = ["right", "docked-right"].includes(panel.area);
452
- const { size, fullscreen, visible } = usePanelStore((s) => ({ size: s.size, fullscreen: s.fullscreen, visible: s.visible }));
456
+ const { size, fullscreen } = usePanelStore((s) => ({
457
+ size: s.size,
458
+ fullscreen: s.fullscreen
459
+ }));
453
460
  const [layerSize, setLayerSize] = (0, import_react5.useState)(size);
454
- const [displayStyle, setDisplayStyle] = (0, import_react5.useState)({});
455
461
  const currentSize = fullscreen ? layerSize : size;
456
462
  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };
457
463
  const handleResize = (next) => {
@@ -485,11 +491,6 @@ var PanelItem = ({ panel }) => {
485
491
  observer.observe(layer);
486
492
  return () => observer.disconnect();
487
493
  }, [fullscreen]);
488
- (0, import_react5.useEffect)(() => {
489
- if (panel.keepDOM) {
490
- setDisplayStyle({ display: visible ? "block" : "none" });
491
- }
492
- }, [visible]);
493
494
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
494
495
  "div",
495
496
  {
@@ -498,7 +499,12 @@ var PanelItem = ({ panel }) => {
498
499
  isHorizontal ? "panel-horizontal" : "panel-vertical"
499
500
  ),
500
501
  ref,
501
- style: { ...displayStyle, ...panel.factory.style, ...panel.config.style, ...sizeStyle },
502
+ style: {
503
+ display: hidden ? "none" : "block",
504
+ ...panel.factory.style,
505
+ ...panel.config.style,
506
+ ...sizeStyle
507
+ },
502
508
  children: [
503
509
  panel.resizable && panelManager.config.resizeBarRender({
504
510
  size,
@@ -522,7 +528,7 @@ var PanelArea = ({ area }) => {
522
528
  });
523
529
  return () => dispose.dispose();
524
530
  }, []);
525
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelItem, { panel }) }, panel.id)) });
531
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }) }, panel.id)) });
526
532
  };
527
533
 
528
534
  // src/components/panel-layer/css.ts
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-factory.ts","../src/services/panel-restore.ts","../src/components/resize-bar/index.tsx","../src/services/panel-config.ts","../src/utils.ts","../src/services/panel-manager.ts","../src/services/panel-layer.ts","../src/components/panel-layer/panel-layer.tsx","../src/hooks/use-global-css.ts","../src/components/panel-layer/panel.tsx","../src/hooks/use-panel-manager.ts","../src/hooks/use-panel.ts","../src/contexts.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/docked-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, PanelRestore, type PanelManagerConfig } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\nexport { usePanel } from './hooks/use-panel';\n\nexport { DockedPanelLayer, type DockedPanelLayerProps } from './components/panel-layer';\nexport { ResizeBar } from './components/resize-bar';\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 {\n PanelEntityFactory,\n PanelEntity,\n PanelEntityFactoryConstant,\n PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n PanelManager,\n PanelManagerConfig,\n PanelLayer,\n PanelRestore,\n PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n onBind: ({ bind }, opt) => {\n bind(PanelManager).to(PanelManager).inSingletonScope();\n bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n bind(PanelEntityFactory).toFactory(\n (context) =>\n ({\n factory,\n config,\n }: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n }) => {\n const container = context.container.createChild();\n container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n container.bind(PanelEntityConfigConstant).toConstantValue(config);\n const panel = container.resolve(PanelEntity);\n panel.init();\n return panel;\n }\n );\n },\n onInit(ctx) {\n ctx.playground.registerLayer(PanelLayer);\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 { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n size: number;\n fullscreen: boolean;\n visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n @inject(PanelRestore) restore: PanelRestore;\n\n /** 面板工厂 */\n @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n private initialized = false;\n\n /** 实例唯一标识 */\n id: string = nanoid();\n\n /** 渲染缓存 */\n node: React.ReactNode = null;\n\n store: StoreApi<PanelEntityState>;\n\n get area() {\n return this.config.area;\n }\n\n get mode() {\n return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n }\n\n get key() {\n return this.factory.key;\n }\n\n get renderer() {\n if (!this.node) {\n this.node = this.factory.render(this.config.props);\n }\n return this.node;\n }\n\n get fullscreen() {\n return this.store.getState().fullscreen;\n }\n\n set fullscreen(next: boolean) {\n this.store.setState({ fullscreen: next });\n }\n\n get resizable() {\n if (this.fullscreen) {\n return false;\n }\n return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n }\n\n get keepDOM() {\n return this.factory.keepDOM;\n }\n\n get visible() {\n return this.store.getState().visible;\n }\n\n set visible(next: boolean) {\n this.store.setState({ visible: next });\n }\n\n get layer() {\n return document.querySelector(\n this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n );\n }\n\n init() {\n if (this.initialized) {\n return;\n }\n this.initialized = true;\n const cache = this.restore.restore<PanelEntityState>(this.key);\n\n const initialState = merge<PanelEntityState>(\n {\n size: this.config.defaultSize,\n fullscreen: this.config.fullscreen,\n },\n cache ? cache : {},\n {\n size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n fullscreen: this.factory.fullscreen || false,\n ...(this.factory.keepDOM ? { visible: true } : {}),\n }\n );\n\n this.store = createStore<PanelEntityState>(() => initialState);\n }\n\n mergeState() {}\n\n dispose() {\n this.restore.store(this.key, this.store.getState());\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n store: (k: string, v: any) => void;\n restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n map = new Map<string, any>();\n\n store(k: string, v: any) {\n this.map.set(k, v);\n }\n\n restore<T>(k: string): T | undefined {\n return this.map.get(k) as T;\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n const currentPoint = useRef<null | number>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isVertical = direction === 'vertical';\n\n return (\n <div\n onMouseDown={(e) => {\n currentPoint.current = isVertical ? e.clientX : e.clientY;\n e.stopPropagation();\n e.preventDefault();\n setIsDragging(true);\n const mouseUp = () => {\n currentPoint.current = null;\n document.body.removeEventListener('mouseup', mouseUp);\n document.body.removeEventListener('mousemove', mouseMove);\n setIsDragging(false);\n };\n const mouseMove = (e: MouseEvent) => {\n const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n onResize(size + delta);\n };\n document.body.addEventListener('mouseup', mouseUp);\n document.body.addEventListener('mousemove', mouseMove);\n }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'auto',\n ...(isVertical\n ? {\n cursor: 'ew-resize',\n height: '100%',\n marginLeft: -5,\n width: 10,\n }\n : {\n cursor: 'ns-resize',\n width: '100%',\n marginTop: -5,\n height: 10,\n }),\n }}\n >\n <div\n style={{\n ...(isVertical\n ? {\n width: 3,\n height: '100%',\n }\n : {\n height: 3,\n width: '100%',\n }),\n backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n }}\n />\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n factories: PanelFactory<any>[];\n right: PanelConfig;\n bottom: PanelConfig;\n dockedRight: PanelConfig;\n dockedBottom: PanelConfig;\n /** Resizable, and multi-panel options mutually exclusive */\n autoResize: boolean;\n layerProps: PanelLayerProps;\n resizeBarRender: ({\n size,\n }: {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (size: number) => void;\n }) => React.ReactNode;\n getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\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 dockedRight: {\n max: 1,\n },\n dockedBottom: {\n max: 1,\n },\n factories: [],\n autoResize: true,\n layerProps: {},\n resizeBarRender: ResizeBar,\n getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\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\nexport const merge = <T>(...objs: Partial<T>[]) => {\n const result: any = {};\n\n for (const obj of objs) {\n if (!obj || typeof obj !== 'object') continue;\n\n for (const key of Object.keys(obj)) {\n const value = (obj as any)[key];\n\n if (result[key] === undefined) {\n result[key] = value;\n }\n }\n }\n\n return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n private panels = new Map<string, PanelEntity>();\n\n private onPanelsChangeEvent = new Emitter<void>();\n\n public onPanelsChange = this.onPanelsChangeEvent.event;\n\n init() {\n this.config.factories.forEach((factory) => this.register(factory));\n }\n\n /** registry panel factory */\n register<T extends any>(factory: PanelFactory<T>) {\n this.panelRegistry.set(factory.key, factory);\n }\n\n /** open panel */\n public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n const factory = this.panelRegistry.get(key);\n if (!factory) {\n return;\n }\n\n const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n if (!factory.allowDuplicates && sameKeyPanels.length) {\n !factory.keepDOM && sameKeyPanels.forEach((p) => this.remove(p.id));\n }\n\n if (factory.keepDOM && sameKeyPanels.length) {\n sameKeyPanels[0].visible = true;\n return;\n }\n\n const panel = this.createPanel({\n factory,\n config: {\n area,\n ...options,\n },\n });\n\n this.panels.set(panel.id, panel);\n this.trim(area);\n this.onPanelsChangeEvent.fire();\n }\n\n /** close panel */\n public close(key?: string) {\n const panels = this.getPanels();\n const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n closedPanels.forEach((panel) => {\n if (panel.keepDOM) {\n panel.visible = false;\n return;\n }\n\n this.remove(panel.id)\n });\n this.onPanelsChangeEvent.fire();\n }\n\n private trim(area: Area) {\n const panels = this.getPanels(area).filter((p) => !p.keepDOM);\n const areaConfig = this.getAreaConfig(area);\n while (panels.length > areaConfig.max) {\n const removed = panels.shift();\n if (removed) {\n this.remove(removed.id);\n }\n }\n }\n\n private remove(id: string) {\n const panel = this.panels.get(id);\n if (panel) {\n panel.dispose();\n this.panels.delete(id);\n }\n }\n\n getPanels(area?: Area) {\n const panels: PanelEntity[] = [];\n this.panels.forEach((panel) => {\n if (!area || panel.area === area) {\n panels.push(panel);\n }\n });\n return panels;\n }\n\n getAreaConfig(area: Area) {\n switch (area) {\n case 'docked-bottom':\n return this.config.dockedBottom;\n case 'docked-right':\n return this.config.dockedRight;\n case 'bottom':\n return this.config.bottom;\n case 'right':\n default:\n return this.config.right;\n }\n }\n\n dispose() {\n this.onPanelsChangeEvent.dispose();\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n layout: JSX.Element | null = null;\n\n onReady(): void {\n this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n this.toDispose.push(\n Disposable.create(() => {\n // Remove from PopupContainer\n this.panelRoot.remove();\n })\n );\n const commonStyle = {\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 100,\n };\n domUtils.setStyle(this.panelRoot, commonStyle);\n }\n\n render(): JSX.Element {\n if (!this.layout) {\n const { children, ...layoutProps } = this.panelConfig.layerProps;\n this.layout = createElement(PanelLayerComp, layoutProps, children);\n }\n return ReactDOM.createPortal(this.layout, this.panelRoot);\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n /** 模式：悬浮｜挤压 */\n mode?: 'floating' | 'docked';\n className?: string;\n style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n mode = 'floating',\n className,\n style,\n children,\n}) => {\n useGlobalCSS({\n cssText: globalCSS,\n id: 'flow-panel-layer-css',\n });\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-layer-wrap',\n mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n className\n )}\n style={style}\n >\n <div className=\"gedit-flow-panel-left-area\">\n <div className=\"gedit-flow-panel-main-area\">{children}</div>\n <div className=\"gedit-flow-panel-bottom-area\">\n <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n </div>\n </div>\n <div className=\"gedit-flow-panel-right-area\">\n <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n </div>\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n cssText: string;\n id: string;\n cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n useEffect(() => {\n /** SSR safe */\n if (typeof document === 'undefined') return;\n\n if (document.getElementById(id)) return;\n\n const style = document.createElement('style');\n style.id = id;\n style.textContent = cssText;\n document.head.appendChild(style);\n\n return () => {\n const existing = document.getElementById(id);\n if (existing && cleanup) existing.remove();\n };\n }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity }> = ({ panel }) => {\n const panelManager = usePanelManager();\n const ref = useRef<HTMLDivElement>(null);\n\n const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n const { size, fullscreen, visible } = usePanelStore((s) => ({ size: s.size, fullscreen: s.fullscreen, visible: s.visible }));\n\n const [layerSize, setLayerSize] = useState(size);\n const [displayStyle, setDisplayStyle] = useState({});\n\n const currentSize = fullscreen ? layerSize : size;\n\n const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n const handleResize = (next: number) => {\n let nextSize = next;\n if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n nextSize = panel.factory.maxSize;\n } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n nextSize = panel.factory.minSize;\n }\n panel.store.setState({ size: nextSize });\n };\n\n useEffect(() => {\n /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n if (ref.current && !fullscreen) {\n const { width, height } = ref.current.getBoundingClientRect();\n const realSize = isHorizontal ? width : height;\n panel.store.setState({ size: realSize });\n }\n }, [fullscreen]);\n\n useEffect(() => {\n if (!fullscreen) {\n return;\n }\n const layer = panel.layer;\n if (!layer) {\n return;\n }\n const observer = new ResizeObserver(([entry]) => {\n const { width, height } = entry.contentRect;\n setLayerSize(isHorizontal ? width : height);\n });\n observer.observe(layer);\n return () => observer.disconnect();\n }, [fullscreen]);\n\n useEffect(() => {\n if (panel.keepDOM) {\n setDisplayStyle({ display: visible ? 'block' : 'none' });\n }\n }, [visible]);\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-wrap',\n isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n )}\n key={panel.id}\n ref={ref}\n style={{ ...displayStyle, ...panel.factory.style, ...panel.config.style, ...sizeStyle }}\n >\n {panel.resizable &&\n panelManager.config.resizeBarRender({\n size,\n direction: isHorizontal ? 'vertical' : 'horizontal',\n onResize: handleResize,\n })}\n {panel.renderer}\n </div>\n );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n const panelManager = usePanelManager();\n const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n useEffect(() => {\n const dispose = panelManager.onPanelsChange(() => {\n startTransition(() => {\n setPanels(panelManager.getPanels(area));\n });\n });\n return () => dispose.dispose();\n }, []);\n\n return (\n <>\n {panels.map((panel) => (\n <PanelContext.Provider value={panel} key={panel.id}>\n <PanelItem panel={panel} />\n </PanelContext.Provider>\n ))}\n </>\n );\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\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n const panel = usePanel();\n return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n .gedit-flow-panel-layer-wrap * {\n box-sizing: border-box;\n }\n .gedit-flow-panel-layer-wrap {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n .gedit-flow-panel-layer-wrap-docked {\n\n }\n .gedit-flow-panel-layer-wrap-floating {\n pointer-events: none;\n }\n\n .gedit-flow-panel-left-area {\n width: 100%;\n min-width: 0;\n flex-grow: 0;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n }\n .gedit-flow-panel-right-area {\n height: 100%;\n flex-grow: 1;\n flex-shrink: 0;\n min-width: 0;\n display: flex;\n max-width: 100%;\n }\n\n .gedit-flow-panel-main-area {\n position: relative;\n overflow: hidden;\n flex-grow: 0;\n flex-shrink: 1;\n width: 100%;\n height: 100%;\n }\n .gedit-flow-panel-bottom-area {\n flex-grow: 1;\n flex-shrink: 0;\n width: 100%;\n min-height: 0;\n }\n .gedit-flow-panel-wrap {\n pointer-events: auto;\n overflow: auto;\n position: relative;\n }\n .gedit-flow-panel-wrap.panel-horizontal {\n height: 100%;\n }\n .gedit-flow-panel-wrap.panel-vertical {\n width: 100%;\n }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["import_core","import_inversify","e","import_inversify","import_utils","import_react","import_inversify","import_utils","import_core","import_clsx","import_react","import_react","import_react","import_react","import_jsx_runtime","import_jsx_runtime","clsx","import_jsx_runtime","PanelLayer","ReactDOM","PanelLayer"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-factory.ts","../src/services/panel-restore.ts","../src/components/resize-bar/index.tsx","../src/services/panel-config.ts","../src/utils.ts","../src/services/panel-manager.ts","../src/services/panel-layer.ts","../src/components/panel-layer/panel-layer.tsx","../src/hooks/use-global-css.ts","../src/components/panel-layer/panel.tsx","../src/hooks/use-panel-manager.ts","../src/hooks/use-panel.ts","../src/contexts.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/docked-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, PanelRestore, type PanelManagerConfig } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\nexport { usePanel } from './hooks/use-panel';\n\nexport { DockedPanelLayer, type DockedPanelLayerProps } from './components/panel-layer';\nexport { ResizeBar } from './components/resize-bar';\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 {\n PanelEntityFactory,\n PanelEntity,\n PanelEntityFactoryConstant,\n PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n PanelManager,\n PanelManagerConfig,\n PanelLayer,\n PanelRestore,\n PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n onBind: ({ bind }, opt) => {\n bind(PanelManager).to(PanelManager).inSingletonScope();\n bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n bind(PanelEntityFactory).toFactory(\n (context) =>\n ({\n factory,\n config,\n }: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n }) => {\n const container = context.container.createChild();\n container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n container.bind(PanelEntityConfigConstant).toConstantValue(config);\n const panel = container.resolve(PanelEntity);\n panel.init();\n return panel;\n }\n );\n },\n onInit(ctx) {\n ctx.playground.registerLayer(PanelLayer);\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 { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n factory: PanelEntityFactoryConstant;\n config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n size: number;\n fullscreen: boolean;\n visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n @inject(PanelRestore) restore: PanelRestore;\n\n /** 面板工厂 */\n @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n private initialized = false;\n\n /** 实例唯一标识 */\n id: string = nanoid();\n\n /** 渲染缓存 */\n node: React.ReactNode = null;\n\n store: StoreApi<PanelEntityState>;\n\n get area() {\n return this.config.area;\n }\n\n get mode() {\n return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n }\n\n get key() {\n return this.factory.key;\n }\n\n get renderer() {\n if (!this.node) {\n this.node = this.factory.render(this.config.props);\n }\n return this.node;\n }\n\n get fullscreen() {\n return this.store.getState().fullscreen;\n }\n\n set fullscreen(next: boolean) {\n this.store.setState({ fullscreen: next });\n }\n\n get resizable() {\n if (this.fullscreen) {\n return false;\n }\n return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n }\n\n get keepDOM() {\n return this.factory.keepDOM;\n }\n\n get visible() {\n return this.store.getState().visible;\n }\n\n set visible(next: boolean) {\n this.store.setState({ visible: next });\n }\n\n get layer() {\n return document.querySelector(\n this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n );\n }\n\n init() {\n if (this.initialized) {\n return;\n }\n this.initialized = true;\n const cache = this.restore.restore<PanelEntityState>(this.key);\n\n const initialState = merge<PanelEntityState>(\n {\n size: this.config.defaultSize,\n fullscreen: this.config.fullscreen,\n },\n cache ? cache : {},\n {\n size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n fullscreen: this.factory.fullscreen || false,\n ...(this.factory.keepDOM ? { visible: true } : {}),\n }\n );\n\n this.store = createStore<PanelEntityState>(() => initialState);\n }\n\n mergeState() {}\n\n dispose() {\n this.restore.store(this.key, this.store.getState());\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n store: (k: string, v: any) => void;\n restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n map = new Map<string, any>();\n\n store(k: string, v: any) {\n this.map.set(k, v);\n }\n\n restore<T>(k: string): T | undefined {\n return this.map.get(k) as T;\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n const currentPoint = useRef<null | number>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isVertical = direction === 'vertical';\n\n return (\n <div\n onMouseDown={(e) => {\n currentPoint.current = isVertical ? e.clientX : e.clientY;\n e.stopPropagation();\n e.preventDefault();\n setIsDragging(true);\n const mouseUp = () => {\n currentPoint.current = null;\n document.body.removeEventListener('mouseup', mouseUp);\n document.body.removeEventListener('mousemove', mouseMove);\n setIsDragging(false);\n };\n const mouseMove = (e: MouseEvent) => {\n const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n onResize(size + delta);\n };\n document.body.addEventListener('mouseup', mouseUp);\n document.body.addEventListener('mousemove', mouseMove);\n }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'auto',\n ...(isVertical\n ? {\n cursor: 'ew-resize',\n height: '100%',\n marginLeft: -5,\n width: 10,\n }\n : {\n cursor: 'ns-resize',\n width: '100%',\n marginTop: -5,\n height: 10,\n }),\n }}\n >\n <div\n style={{\n ...(isVertical\n ? {\n width: 3,\n height: '100%',\n }\n : {\n height: 3,\n width: '100%',\n }),\n backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n }}\n />\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n factories: PanelFactory<any>[];\n right: PanelConfig;\n bottom: PanelConfig;\n dockedRight: PanelConfig;\n dockedBottom: PanelConfig;\n /** Resizable, and multi-panel options mutually exclusive */\n autoResize: boolean;\n layerProps: PanelLayerProps;\n resizeBarRender: ({\n size,\n }: {\n size: number;\n direction?: 'vertical' | 'horizontal';\n onResize: (size: number) => void;\n }) => React.ReactNode;\n getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\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 dockedRight: {\n max: 1,\n },\n dockedBottom: {\n max: 1,\n },\n factories: [],\n autoResize: true,\n layerProps: {},\n resizeBarRender: ResizeBar,\n getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\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\nexport const merge = <T>(...objs: Partial<T>[]) => {\n const result: any = {};\n\n for (const obj of objs) {\n if (!obj || typeof obj !== 'object') continue;\n\n for (const key of Object.keys(obj)) {\n const value = (obj as any)[key];\n\n if (result[key] === undefined) {\n result[key] = value;\n }\n }\n }\n\n return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n private panels = new Map<string, PanelEntity>();\n\n private onPanelsChangeEvent = new Emitter<void>();\n\n public onPanelsChange = this.onPanelsChangeEvent.event;\n\n init() {\n this.config.factories.forEach((factory) => this.register(factory));\n }\n\n /** registry panel factory */\n register<T extends any>(factory: PanelFactory<T>) {\n this.panelRegistry.set(factory.key, factory);\n }\n\n /** open panel */\n public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n const factory = this.panelRegistry.get(key);\n if (!factory) {\n return;\n }\n\n const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n if (factory.keepDOM && sameKeyPanels.length) {\n const [panel] = sameKeyPanels;\n // move to last\n this.panels.delete(panel.id);\n this.panels.set(panel.id, panel);\n panel.visible = true;\n } else {\n if (!factory.allowDuplicates && sameKeyPanels.length) {\n sameKeyPanels.forEach((p) => this.remove(p.id));\n }\n const panel = this.createPanel({\n factory,\n config: {\n area,\n ...options,\n },\n });\n\n this.panels.set(panel.id, panel);\n }\n\n this.trim(area);\n this.onPanelsChangeEvent.fire();\n }\n\n /** close panel */\n public close(key?: string) {\n const panels = this.getPanels();\n const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n closedPanels.forEach((panel) => {\n this.remove(panel.id);\n });\n this.onPanelsChangeEvent.fire();\n }\n\n private trim(area: Area) {\n /** 1. general panel; 2. keepDOM visible panel */\n const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n const areaConfig = this.getAreaConfig(area);\n while (panels.length > areaConfig.max) {\n const removed = panels.shift();\n if (removed) {\n this.remove(removed.id);\n }\n }\n }\n\n private remove(id: string) {\n const panel = this.panels.get(id);\n if (!panel) {\n return;\n }\n if (panel.keepDOM) {\n panel.visible = false;\n } else {\n panel.dispose();\n this.panels.delete(id);\n }\n }\n\n getPanels(area?: Area) {\n const panels: PanelEntity[] = [];\n this.panels.forEach((panel) => {\n if (!area || panel.area === area) {\n panels.push(panel);\n }\n });\n return panels;\n }\n\n getAreaConfig(area: Area) {\n switch (area) {\n case 'docked-bottom':\n return this.config.dockedBottom;\n case 'docked-right':\n return this.config.dockedRight;\n case 'bottom':\n return this.config.bottom;\n case 'right':\n default:\n return this.config.right;\n }\n }\n\n dispose() {\n this.onPanelsChangeEvent.dispose();\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n layout: JSX.Element | null = null;\n\n onReady(): void {\n this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n this.toDispose.push(\n Disposable.create(() => {\n // Remove from PopupContainer\n this.panelRoot.remove();\n })\n );\n const commonStyle = {\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 100,\n };\n domUtils.setStyle(this.panelRoot, commonStyle);\n }\n\n render(): JSX.Element {\n if (!this.layout) {\n const { children, ...layoutProps } = this.panelConfig.layerProps;\n this.layout = createElement(PanelLayerComp, layoutProps, children);\n }\n return ReactDOM.createPortal(this.layout, this.panelRoot);\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n /** 模式：悬浮｜挤压 */\n mode?: 'floating' | 'docked';\n className?: string;\n style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n mode = 'floating',\n className,\n style,\n children,\n}) => {\n useGlobalCSS({\n cssText: globalCSS,\n id: 'flow-panel-layer-css',\n });\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-layer-wrap',\n mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n className\n )}\n style={style}\n >\n <div className=\"gedit-flow-panel-left-area\">\n <div className=\"gedit-flow-panel-main-area\">{children}</div>\n <div className=\"gedit-flow-panel-bottom-area\">\n <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n </div>\n </div>\n <div className=\"gedit-flow-panel-right-area\">\n <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n </div>\n </div>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n cssText: string;\n id: string;\n cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n useEffect(() => {\n /** SSR safe */\n if (typeof document === 'undefined') return;\n\n if (document.getElementById(id)) return;\n\n const style = document.createElement('style');\n style.id = id;\n style.textContent = cssText;\n document.head.appendChild(style);\n\n return () => {\n const existing = document.getElementById(id);\n if (existing && cleanup) existing.remove();\n };\n }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n const panelManager = usePanelManager();\n const ref = useRef<HTMLDivElement>(null);\n\n const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n const { size, fullscreen } = usePanelStore((s) => ({\n size: s.size,\n fullscreen: s.fullscreen,\n }));\n\n const [layerSize, setLayerSize] = useState(size);\n\n const currentSize = fullscreen ? layerSize : size;\n\n const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n const handleResize = (next: number) => {\n let nextSize = next;\n if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n nextSize = panel.factory.maxSize;\n } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n nextSize = panel.factory.minSize;\n }\n panel.store.setState({ size: nextSize });\n };\n\n useEffect(() => {\n /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n if (ref.current && !fullscreen) {\n const { width, height } = ref.current.getBoundingClientRect();\n const realSize = isHorizontal ? width : height;\n panel.store.setState({ size: realSize });\n }\n }, [fullscreen]);\n\n useEffect(() => {\n if (!fullscreen) {\n return;\n }\n const layer = panel.layer;\n if (!layer) {\n return;\n }\n const observer = new ResizeObserver(([entry]) => {\n const { width, height } = entry.contentRect;\n setLayerSize(isHorizontal ? width : height);\n });\n observer.observe(layer);\n return () => observer.disconnect();\n }, [fullscreen]);\n\n return (\n <div\n className={clsx(\n 'gedit-flow-panel-wrap',\n isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n )}\n key={panel.id}\n ref={ref}\n style={{\n display: hidden ? 'none' : 'block',\n ...panel.factory.style,\n ...panel.config.style,\n ...sizeStyle,\n }}\n >\n {panel.resizable &&\n panelManager.config.resizeBarRender({\n size,\n direction: isHorizontal ? 'vertical' : 'horizontal',\n onResize: handleResize,\n })}\n {panel.renderer}\n </div>\n );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n const panelManager = usePanelManager();\n const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n useEffect(() => {\n const dispose = panelManager.onPanelsChange(() => {\n startTransition(() => {\n setPanels(panelManager.getPanels(area));\n });\n });\n return () => dispose.dispose();\n }, []);\n\n return (\n <>\n {panels.map((panel) => (\n <PanelContext.Provider value={panel} key={panel.id}>\n <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n </PanelContext.Provider>\n ))}\n </>\n );\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\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n const panel = usePanel();\n return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n .gedit-flow-panel-layer-wrap * {\n box-sizing: border-box;\n }\n .gedit-flow-panel-layer-wrap {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n .gedit-flow-panel-layer-wrap-docked {\n\n }\n .gedit-flow-panel-layer-wrap-floating {\n pointer-events: none;\n }\n\n .gedit-flow-panel-left-area {\n width: 100%;\n min-width: 0;\n flex-grow: 0;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n }\n .gedit-flow-panel-right-area {\n height: 100%;\n flex-grow: 1;\n flex-shrink: 0;\n min-width: 0;\n display: flex;\n max-width: 100%;\n }\n\n .gedit-flow-panel-main-area {\n position: relative;\n overflow: hidden;\n flex-grow: 0;\n flex-shrink: 1;\n width: 100%;\n height: 100%;\n }\n .gedit-flow-panel-bottom-area {\n flex-grow: 1;\n flex-shrink: 0;\n width: 100%;\n min-height: 0;\n }\n .gedit-flow-panel-wrap {\n pointer-events: auto;\n overflow: auto;\n position: relative;\n }\n .gedit-flow-panel-wrap.panel-horizontal {\n height: 100%;\n }\n .gedit-flow-panel-wrap.panel-vertical {\n width: 100%;\n }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["import_core","import_inversify","e","import_inversify","import_utils","import_react","import_inversify","import_utils","import_core","import_clsx","import_react","import_react","import_react","import_react","import_jsx_runtime","import_jsx_runtime","clsx","import_jsx_runtime","PanelLayer","ReactDOM","PanelLayer"]}
package/{.eslintrc.cjs → eslint.config.js} RENAMED
@@ -3,9 +3,9 @@
3
3
  * SPDX-License-Identifier: MIT
4
4
  */
5
5
 
6
- const { defineConfig } = require('@flowgram.ai/eslint-config');
6
+ const { defineFlatConfig } = require('@flowgram.ai/eslint-config');
7
7
 
8
- module.exports = defineConfig({
8
+ module.exports = defineFlatConfig({
9
9
  preset: 'web',
10
10
  packageRoot: __dirname,
11
11
  rules: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowgram.ai/panel-manager-plugin",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
@@ -18,8 +18,8 @@
18
18
  "nanoid": "^5.0.9",
19
19
  "zustand": "^5.0.8",
20
20
  "use-sync-external-store": "^1.6.0",
21
- "@flowgram.ai/utils": "1.0.6",
22
- "@flowgram.ai/core": "1.0.6"
21
+ "@flowgram.ai/core": "1.0.7",
22
+ "@flowgram.ai/utils": "1.0.7"
23
23
  },
24
24
  "devDependencies": {
25
25
  "react": "^18",
@@ -28,8 +28,8 @@
28
28
  "@types/react-dom": "^18",
29
29
  "tsup": "^8.0.1",
30
30
  "typescript": "^5.8.3",
31
- "@flowgram.ai/eslint-config": "1.0.6",
32
- "@flowgram.ai/ts-config": "1.0.6"
31
+ "@flowgram.ai/eslint-config": "1.0.7",
32
+ "@flowgram.ai/ts-config": "1.0.7"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=16.8",
package/rush-logs/panel-manager-plugin.build.log CHANGED
@@ -9,13 +9,13 @@ CLI tsup v8.5.0
9
9
  CLI Target: es2020
10
10
  CJS Build start
11
11
  ESM Build start
12
- CJS dist/index.js 21.19 KB
13
- CJS dist/index.js.map 35.84 KB
14
- CJS ⚡️ Build success in 99ms
15
- ESM dist/esm/index.js 18.42 KB
16
- ESM dist/esm/index.js.map 35.27 KB
17
- ESM ⚡️ Build success in 101ms
12
+ CJS dist/index.js 21.17 KB
13
+ CJS dist/index.js.map 35.97 KB
14
+ CJS ⚡️ Build success in 108ms
15
+ ESM dist/esm/index.js 18.44 KB
16
+ ESM dist/esm/index.js.map 35.39 KB
17
+ ESM ⚡️ Build success in 112ms
18
18
  DTS Build start
19
- DTS ⚡️ Build success in 3839ms
19
+ DTS ⚡️ Build success in 3610ms
20
20
  DTS dist/index.d.ts 5.10 KB
21
21
  DTS dist/index.d.mts 5.10 KB
package/src/components/panel-layer/panel.tsx CHANGED
@@ -13,16 +13,18 @@ import { usePanelManager } from '../../hooks/use-panel-manager';
13
13
  import { usePanelStore } from '../../hooks/use-panel';
14
14
  import { PanelContext } from '../../contexts';
15
15
 
16
- const PanelItem: React.FC<{ panel: PanelEntity }> = ({ panel }) => {
16
+ const PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {
17
17
  const panelManager = usePanelManager();
18
18
  const ref = useRef<HTMLDivElement>(null);
19
19
 
20
20
  const isHorizontal = ['right', 'docked-right'].includes(panel.area);
21
21
 
22
- const { size, fullscreen, visible } = usePanelStore((s) => ({ size: s.size, fullscreen: s.fullscreen, visible: s.visible }));
22
+ const { size, fullscreen } = usePanelStore((s) => ({
23
+ size: s.size,
24
+ fullscreen: s.fullscreen,
25
+ }));
23
26
 
24
27
  const [layerSize, setLayerSize] = useState(size);
25
- const [displayStyle, setDisplayStyle] = useState({});
26
28
 
27
29
  const currentSize = fullscreen ? layerSize : size;
28
30
 
@@ -62,12 +64,6 @@ const PanelItem: React.FC<{ panel: PanelEntity }> = ({ panel }) => {
62
64
  return () => observer.disconnect();
63
65
  }, [fullscreen]);
64
66
 
65
- useEffect(() => {
66
- if (panel.keepDOM) {
67
- setDisplayStyle({ display: visible ? 'block' : 'none' });
68
- }
69
- }, [visible]);
70
-
71
67
  return (
72
68
  <div
73
69
  className={clsx(
@@ -76,7 +72,12 @@ const PanelItem: React.FC<{ panel: PanelEntity }> = ({ panel }) => {
76
72
  )}
77
73
  key={panel.id}
78
74
  ref={ref}
79
- style={{ ...displayStyle, ...panel.factory.style, ...panel.config.style, ...sizeStyle }}
75
+ style={{
76
+ display: hidden ? 'none' : 'block',
77
+ ...panel.factory.style,
78
+ ...panel.config.style,
79
+ ...sizeStyle,
80
+ }}
80
81
  >
81
82
  {panel.resizable &&
82
83
  panelManager.config.resizeBarRender({
@@ -106,7 +107,7 @@ export const PanelArea: React.FC<{ area: Area }> = ({ area }) => {
106
107
  <>
107
108
  {panels.map((panel) => (
108
109
  <PanelContext.Provider value={panel} key={panel.id}>
109
- <PanelItem panel={panel} />
110
+ <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />
110
111
  </PanelContext.Provider>
111
112
  ))}
112
113
  </>
package/src/services/panel-manager.ts CHANGED
@@ -41,24 +41,28 @@ export class PanelManager {
41
41
  }
42
42
 
43
43
  const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
44
- if (!factory.allowDuplicates && sameKeyPanels.length) {
45
- !factory.keepDOM && sameKeyPanels.forEach((p) => this.remove(p.id));
46
- }
47
44
 
48
45
  if (factory.keepDOM && sameKeyPanels.length) {
49
- sameKeyPanels[0].visible = true;
50
- return;
46
+ const [panel] = sameKeyPanels;
47
+ // move to last
48
+ this.panels.delete(panel.id);
49
+ this.panels.set(panel.id, panel);
50
+ panel.visible = true;
51
+ } else {
52
+ if (!factory.allowDuplicates && sameKeyPanels.length) {
53
+ sameKeyPanels.forEach((p) => this.remove(p.id));
54
+ }
55
+ const panel = this.createPanel({
56
+ factory,
57
+ config: {
58
+ area,
59
+ ...options,
60
+ },
61
+ });
62
+
63
+ this.panels.set(panel.id, panel);
51
64
  }
52
65
 
53
- const panel = this.createPanel({
54
- factory,
55
- config: {
56
- area,
57
- ...options,
58
- },
59
- });
60
-
61
- this.panels.set(panel.id, panel);
62
66
  this.trim(area);
63
67
  this.onPanelsChangeEvent.fire();
64
68
  }
@@ -68,18 +72,14 @@ export class PanelManager {
68
72
  const panels = this.getPanels();
69
73
  const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
70
74
  closedPanels.forEach((panel) => {
71
- if (panel.keepDOM) {
72
- panel.visible = false;
73
- return;
74
- }
75
-
76
- this.remove(panel.id)
75
+ this.remove(panel.id);
77
76
  });
78
77
  this.onPanelsChangeEvent.fire();
79
78
  }
80
79
 
81
80
  private trim(area: Area) {
82
- const panels = this.getPanels(area).filter((p) => !p.keepDOM);
81
+ /** 1. general panel; 2. keepDOM visible panel */
82
+ const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
83
83
  const areaConfig = this.getAreaConfig(area);
84
84
  while (panels.length > areaConfig.max) {
85
85
  const removed = panels.shift();
@@ -91,7 +91,12 @@ export class PanelManager {
91
91
 
92
92
  private remove(id: string) {
93
93
  const panel = this.panels.get(id);
94
- if (panel) {
94
+ if (!panel) {
95
+ return;
96
+ }
97
+ if (panel.keepDOM) {
98
+ panel.visible = false;
99
+ } else {
95
100
  panel.dispose();
96
101
  this.panels.delete(id);
97
102
  }