feat(core): remove usePlaygroundLatest() and Playground.getLatest() (#814)

* feat(core): remove usePlaygroundLatest() and Playground.getLatest()

* fix(materials): remove Playground.getLatest()

packages/canvas-engine/core/__tests__/react-hooks.spec.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 
+import { expect } from 'vitest';
 import { describe, it } from 'vitest';
 import { ContainerModule, injectable, interfaces } from 'inversify';
 import { renderHook } from '@testing-library/react-hooks';
@@ -17,7 +18,6 @@ import {
   useEntityFromContext,
   useListenEvents,
   usePlaygroundContext,
-  usePlaygroundLatest,
   useRefresh,
   useService,
 } from '../src/react-hooks';
@@ -133,16 +133,6 @@ describe('react-hooks', () => {
     });
   });
 
-  it('use-playground-latest', () => {
-    const { result } = renderHook(() => usePlaygroundLatest(), { wrapper });
-    // 首次渲染有内容
-    expect(result.current).not.toBeUndefined();
-    const prevLen = Playground.getAllInstances()?.length;
-    // 再次渲染，newPlayground !== playground。
-    renderHook(() => usePlaygroundLatest(), { wrapper });
-    expect(Playground.getAllInstances()?.length).toEqual(prevLen + 1);
-  });
-
   it('use-playground-context', () => {
     const { result } = renderHook(() => usePlaygroundContext(), {
       wrapper,

packages/canvas-engine/core/src/playground.ts

@@ -7,13 +7,7 @@ import React from 'react';
 
 import { nanoid } from 'nanoid';
 import { inject, injectable, optional, named } from 'inversify';
-import {
-  Disposable,
-  DisposableCollection,
-  domUtils,
-  Emitter,
-  type Event,
-} from '@flowgram.ai/utils';
+import { Disposable, DisposableCollection, domUtils, type Event } from '@flowgram.ai/utils';
 import { CommandService } from '@flowgram.ai/command';
 
 import { SelectionService } from './services';
@@ -44,11 +38,6 @@ import {
 } from './common';
 // import { PlaygroundCommandRegistry, PlaygroundId, toContextMenuPath } from './playground-registries';
 
-const playgroundInstances: Set<Playground> = new Set();
-
-const playgroundInstanceCreateEmitter = new Emitter<Playground>();
-const playgroundInstanceDisposeEmitter = new Emitter<Playground>();
-
 @injectable()
 export class Playground<CONTEXT = PlaygroundContext> implements Disposable {
   readonly toDispose = new DisposableCollection();
@@ -74,35 +63,6 @@ export class Playground<CONTEXT = PlaygroundContext> implements Disposable {
 
   private _resizePolling = new ResizePolling();
 
-  static getLatest(): Playground | undefined {
-    const instances = Playground.getAllInstances();
-    return instances[instances.length - 1];
-  }
-
-  // static getSelection(selectionService: SelectionService): Entity[] {
-  //   const selection = selectionService.selection;
-  //   if (!selection || !Array.isArray(selection)) return [];
-  //   if (selection.find(s => !(s instanceof Entity) || !s.hasAble(Selectable))) return [];
-  //   return selection;
-  // }
-  static getAllInstances(): Playground[] {
-    const result: Playground[] = [];
-    for (const p of playgroundInstances.values()) {
-      result.push(p);
-    }
-    return result;
-  }
-
-  /**
-   * 有实例创建
-   */
-  static onInstanceCreate = playgroundInstanceCreateEmitter.event;
-
-  /**
-   * 有实例销毁
-   */
-  static onInstanceDispose = playgroundInstanceDisposeEmitter.event;
-
   constructor(
     // @inject(PlaygroundId) readonly id: PlaygroundId,
     @inject(EntityManager) readonly entityManager: EntityManager,
@@ -141,9 +101,7 @@ export class Playground<CONTEXT = PlaygroundContext> implements Disposable {
       this.selectionService,
       this._resizePolling,
       Disposable.create(() => {
-        playgroundInstances.delete(this);
         this.node.remove();
-        playgroundInstanceDisposeEmitter.fire(this);
       }),
       pipelineRenderer.onAllLayersRendered(() => {
         this.contributions.forEach((contrib) => contrib.onAllLayersRendered?.(this));
@@ -196,7 +154,6 @@ export class Playground<CONTEXT = PlaygroundContext> implements Disposable {
     this.onFocus = this.pipelineRegistry.onFocusEmitter.event;
     this.onZoom = this.pipelineRegistry.onZoomEmitter.event;
     this.onScroll = this.pipelineRegistry.onScrollEmitter.event;
-    playgroundInstances.add(this);
   }
 
   get context(): CONTEXT {
@@ -215,7 +172,6 @@ export class Playground<CONTEXT = PlaygroundContext> implements Disposable {
     for (const contrib of contributions) {
       if (contrib.onInit) contrib.onInit(this);
     }
-    playgroundInstanceCreateEmitter.fire(this);
   }
 
   get pipelineNode(): HTMLDivElement {

packages/canvas-engine/core/src/react-hooks/index.ts

@@ -10,7 +10,6 @@ export * from './use-listen-events';
 export * from './use-playground';
 export * from './use-playground-container';
 export * from './use-playground-context';
-export * from './use-playground-latest';
 export * from './use-service';
 export * from './use-refresh';
 export * from './use-config-entity';

packages/canvas-engine/core/src/react-hooks/use-playground-latest.ts

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { useEffect, useState } from 'react';
-
-import { Playground } from '../playground';
-
-/**
- * 从外部动态获取最新的 playground
- */
-export function usePlaygroundLatest(): Playground | undefined {
-  const [playground, updatePlayground] = useState<Playground | undefined>(() =>
-    Playground.getLatest(),
-  );
-  useEffect(() => {
-    const newPlayground = Playground.getLatest();
-    if (newPlayground !== playground) {
-      updatePlayground(newPlayground);
-    }
-    const dispose = Playground.onInstanceCreate(p => {
-      updatePlayground(p);
-    });
-    const dispose2 = Playground.onInstanceDispose(playgroundDisposed => {
-      if (playground === playgroundDisposed) {
-        updatePlayground(undefined);
-      }
-    });
-    return () => {
-      dispose.dispose();
-      dispose2.dispose();
-    };
-  }, [playground]);
-  return playground;
-}

packages/canvas-engine/free-layout-core/src/hooks/index.ts

@@ -14,7 +14,6 @@ export {
   useEntityFromContext,
   useEntityDataFromContext,
   useRefresh,
-  usePlaygroundLatest,
 } from '@flowgram.ai/core';
 export * from './typings';
 export * from './use-node-render';

packages/materials/fixed-semi-materials/src/components/collapse/index.tsx

@@ -6,9 +6,9 @@
 import React from 'react';
 
 import {
-  Playground,
   FlowNodeRenderData,
   FlowNodeTransformData,
+  usePlayground,
   type CollapseProps,
 } from '@flowgram.ai/fixed-layout-editor';
 
@@ -17,6 +17,7 @@ import { Container } from './styles';
 
 function Collapse(props: CollapseProps): JSX.Element {
   const { collapseNode, activateNode, hoverActivated, style } = props;
+  const playground = usePlayground();
 
   const activateData = activateNode?.getData(FlowNodeRenderData);
   const transform = collapseNode.getData(FlowNodeTransformData)!;
@@ -27,7 +28,7 @@ function Collapse(props: CollapseProps): JSX.Element {
 
   const scrollToActivateNode = () => {
     setTimeout(() => {
-      Playground.getLatest()?.scrollToView({
+      playground.config.scrollToView({
         position: activateNode?.getData(FlowNodeTransformData)?.outputPoint,
         scrollToCenter: true,
       });

packages/materials/fixed-semi-materials/src/components/try-catch-collapse.tsx

@@ -9,9 +9,9 @@ import {
   FlowNodeRenderData,
   FlowNodeTransformData,
   type CustomLabelProps,
-  Playground,
   useBaseColor,
   FlowTextKey,
+  usePlayground,
   FlowRendererRegistry,
 } from '@flowgram.ai/fixed-layout-editor';
 import { IconChevronLeft } from '@douyinfe/semi-icons';
@@ -19,6 +19,7 @@ import { IconChevronLeft } from '@douyinfe/semi-icons';
 function TryCatchCollapse(props: CustomLabelProps): JSX.Element {
   const { node } = props;
   const { baseColor, baseActivatedColor } = useBaseColor();
+  const playground = usePlayground();
 
   const activateData = node.getData(FlowNodeRenderData)!;
   const transform = node.getData(FlowNodeTransformData)!;
@@ -35,7 +36,7 @@ function TryCatchCollapse(props: CustomLabelProps): JSX.Element {
 
   const scrollToActivateNode = () => {
     setTimeout(() => {
-      Playground.getLatest()?.scrollToView({
+      playground.config.scrollToView({
         position: node?.getData(FlowNodeTransformData)?.inputPoint,
         scrollToCenter: true,
       });