@flowgram-vue/core 0.2.0

package/src/common/utils/bounds.spec.ts

@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// nolint: cyclo_complexity,method_line
+import { expect, describe, beforeEach, it } from 'vitest';
+import { Container } from 'inversify';
+import { Matrix, Rectangle } from '@flowgram-vue/utils';
+
+import { Entity, EntityManager, PlaygroundContext, TransformData } from '..';
+import { Bounds } from './bounds';
+
+function createContainer(): Container {
+  const child = new Container({ defaultScope: 'Singleton' });
+  // child.bind(AbleManager).toSelf();
+  child.bind(PlaygroundContext).toConstantValue({});
+  child.bind(EntityManager).toSelf();
+  return child;
+}
+
+const container = createContainer();
+
+function createEntity(): Entity {
+  return container.get<EntityManager>(EntityManager).createEntity<Entity>(Entity);
+}
+
+function expectRectangle(target: Rectangle, arr: number[]): void {
+  expect(target.x).toBeCloseTo(arr[0]);
+  expect(target.y).toBeCloseTo(arr[1]);
+  expect(target.width).toBeCloseTo(arr[2]);
+  expect(target.height).toBeCloseTo(arr[3]);
+}
+
+describe('bounds', () => {
+  let target: TransformData;
+  beforeEach(() => {
+    target = new TransformData(createEntity());
+    target.size.width = 100;
+    target.size.height = 100;
+  });
+
+  it('get points and bounds', () => {
+    target.origin.x = 0;
+    target.origin.y = 0;
+    expect(Bounds.getCenter(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: 50,
+    });
+    expect(Bounds.getTopLeft(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: 0,
+    });
+    expect(Bounds.getTopCenter(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: 0,
+    });
+    expect(Bounds.getTopRight(target, target.worldTransform)).toEqual({
+      x: 100,
+      y: 0,
+    });
+    expect(Bounds.getLeftCenter(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: 50,
+    });
+    expect(Bounds.getRightCenter(target, target.worldTransform)).toEqual({
+      x: 100,
+      y: 50,
+    });
+    expect(Bounds.getBottomLeft(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: 100,
+    });
+    expect(Bounds.getBottomCenter(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: 100,
+    });
+    expect(Bounds.getBottomRight(target, target.worldTransform)).toEqual({
+      x: 100,
+      y: 100,
+    });
+    expect(Bounds.getBounds(target, target.worldTransform)).toEqual(new Rectangle(0, 0, 100, 100));
+
+    target.origin.x = 0.5;
+    target.origin.y = 0.5;
+    expect(Bounds.getCenter(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: 0,
+    });
+    expect(Bounds.getTopLeft(target, target.worldTransform)).toEqual({
+      x: -50,
+      y: -50,
+    });
+    expect(Bounds.getTopCenter(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: -50,
+    });
+    expect(Bounds.getTopRight(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: -50,
+    });
+    expect(Bounds.getLeftCenter(target, target.worldTransform)).toEqual({
+      x: -50,
+      y: 0,
+    });
+    expect(Bounds.getRightCenter(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: 0,
+    });
+    expect(Bounds.getBottomLeft(target, target.worldTransform)).toEqual({
+      x: -50,
+      y: 50,
+    });
+    expect(Bounds.getBottomCenter(target, target.worldTransform)).toEqual({
+      x: 0,
+      y: 50,
+    });
+    expect(Bounds.getBottomRight(target, target.worldTransform)).toEqual({
+      x: 50,
+      y: 50,
+    });
+    expect(Bounds.getBounds(target, target.worldTransform)).toEqual(
+      new Rectangle(-50, -50, 100, 100),
+    );
+  });
+
+  it('transform position', () => {
+    target.position.x = 10;
+    target.position.y = 10;
+    expect(Bounds.getTopLeft(target)).toEqual({ x: -50, y: -50 });
+    expect(Bounds.getTopLeft(target, target.localTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+    expect(Bounds.getTopLeft(target, target.worldTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+  });
+
+  it('transform position with parent', () => {
+    const parent = new TransformData(createEntity());
+    parent.position.x = 10;
+    parent.position.y = 10;
+    target.setParent(parent);
+    expect(Bounds.getTopLeft(target)).toEqual({
+      x: -50,
+      y: -50,
+    });
+    expect(Bounds.getTopLeft(target, target.localTransform)).toEqual({
+      x: -50,
+      y: -50,
+    });
+    expect(Bounds.getTopLeft(target, target.worldTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+    expect(Bounds.getLeftPointFromBounds(target, target.worldTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+    expect(Bounds.getTopPointFromBounds(target, target.worldTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+    expect(Bounds.getLeftPointFromBounds(parent, parent.worldTransform)).toEqual({
+      x: 10,
+      y: 10,
+    });
+    expect(Bounds.getTopPointFromBounds(parent, parent.worldTransform)).toEqual({
+      x: 10,
+      y: 10,
+    });
+
+    target.position.x = 10;
+    target.position.y = 10;
+    expect(Bounds.getTopLeft(target)).toEqual({
+      x: -50,
+      y: -50,
+    });
+    expect(Bounds.getTopLeft(target, target.localTransform)).toEqual({
+      x: -40,
+      y: -40,
+    });
+    expect(Bounds.getTopLeft(target, target.worldTransform)).toEqual({
+      x: -30,
+      y: -30,
+    });
+  });
+
+  it('transform rotation', () => {
+    // 中心点旋转 45 度
+    target.rotation = Math.PI / 4;
+    expectRectangle(
+      Bounds.getBounds(target, target.worldTransform),
+      [-70.71, -70.71, 141.42, 141.42],
+    );
+  });
+
+  it('trasnform scale', () => {
+    target.scale.x = 2;
+    const bounds = Bounds.getBounds(target, target.worldTransform);
+    expect(bounds.width).toEqual(200);
+    expect(bounds.height).toEqual(100);
+  });
+
+  it('applyMatrix - without rotation', () => {
+    target.position.x = 50;
+    target.position.y = 50;
+    expect(target.worldTransform).toEqual(new Matrix(1, 0, 0, 1, 50, 50));
+    expectRectangle(Bounds.getBounds(target, target.worldTransform), [0, 0, 100, 100]);
+    expectRectangle(
+      Bounds.applyMatrix(new Rectangle(-50, -50, 100, 100), target.worldTransform),
+      [0, 0, 100, 100],
+    );
+  });
+
+  it('applyMatrix - with rotation', () => {
+    target.position.x = 50;
+    target.position.y = 50;
+    target.scale.x = 4;
+    expect(target.worldTransform).toEqual(new Matrix(4, 0, 0, 1, 50, 50));
+    expectRectangle(Bounds.getBounds(target, target.worldTransform), [-150, 0, 400, 100]);
+    expectRectangle(
+      Bounds.applyMatrix(new Rectangle(-50, -50, 100, 100), target.worldTransform),
+      [-150, 0, 400, 100],
+    );
+  });
+});

package/src/common/utils/bounds.ts

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type Matrix, Point, Rectangle } from '@flowgram-vue/utils';
+
+import type { PositionSchema, TransformSchema } from '../schema';
+
+type TransformOriginAndSize = Pick<TransformSchema, 'origin'> & Pick<TransformSchema, 'size'>;
+
+const { fixZero } = Point;
+
+export namespace Bounds {
+  /**
+   * 位置做矩阵偏移
+   */
+  export function getPointWithMatrix(output: PositionSchema, matrix?: Matrix): PositionSchema {
+    // if (target.rotation !== 0) {
+    // rotateAround(output, target.position.x, target.position.y, target.rotation);
+    // }
+    if (matrix) {
+      matrix.apply(output, output);
+    }
+    // fix: -0
+    fixZero(output);
+    return output;
+  }
+  /**
+   * 获取外围边界矩形
+   */
+  export function getBounds(target: TransformOriginAndSize, matrix?: Matrix): Rectangle {
+    const output = new Rectangle();
+    if (!matrix || matrix.isSimple()) {
+      const { size, origin } = target;
+      output.x = -(size.width * origin.x) + (matrix?.tx || 0);
+      output.y = -(size.height * origin.y) + (matrix?.ty || 0);
+      output.width = size.width;
+      output.height = size.height;
+      // fix: -0
+      fixZero(output);
+    } else {
+      const topLeft = getTopLeft(target, matrix);
+      const topRight = getTopRight(target, matrix);
+      const bottomLeft = getBottomLeft(target, matrix);
+      const bottomRight = getBottomRight(target, matrix);
+      output.x = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+      output.y = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
+      output.width = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x) - output.x;
+      output.height = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y) - output.y;
+    }
+    return output;
+  }
+  export function applyMatrix(bounds: Rectangle, matrix: Matrix): Rectangle {
+    const output = new Rectangle();
+    if (matrix.isSimple()) {
+      output.x = bounds.x + matrix.tx;
+      output.y = bounds.y + matrix.ty;
+      output.width = bounds.width;
+      output.height = bounds.height;
+      // fix: -0
+      fixZero(output);
+    } else {
+      const topLeft = getPointWithMatrix(bounds.leftTop, matrix);
+      const topRight = getPointWithMatrix(bounds.rightTop, matrix);
+      const bottomLeft = getPointWithMatrix(bounds.leftBottom, matrix);
+      const bottomRight = getPointWithMatrix(bounds.rightBottom, matrix);
+      output.x = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+      output.y = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
+      output.width = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x) - output.x;
+      output.height = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y) - output.y;
+    }
+    return output;
+  }
+
+  /**
+   * 找到边框中最左边的点
+   */
+  export function getLeftPointFromBounds(
+    target: TransformOriginAndSize,
+    matrix?: Matrix,
+  ): PositionSchema {
+    const topLeft = getTopLeft(target, matrix);
+    const topRight = getTopRight(target, matrix);
+    const bottomLeft = getBottomLeft(target, matrix);
+    const bottomRight = getBottomRight(target, matrix);
+    const items = [topLeft, topRight, bottomLeft, bottomRight].sort((p1, p2) => p1.x - p2.x);
+    return items[0];
+  }
+  /**
+   * 找到边框中最上边的点
+   */
+  export function getTopPointFromBounds(
+    target: TransformOriginAndSize,
+    matrix?: Matrix,
+  ): PositionSchema {
+    const topLeft = getTopLeft(target, matrix);
+    const topRight = getTopRight(target, matrix);
+    const bottomLeft = getBottomLeft(target, matrix);
+    const bottomRight = getBottomRight(target, matrix);
+    const items = [topLeft, topRight, bottomLeft, bottomRight].sort((p1, p2) => p1.y - p2.y);
+    return items[0];
+  }
+  export function getCenter(target: TransformSchema, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width / 2,
+      y: -(size.height * origin.y) + size.height / 2,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getTopLeft(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x),
+      y: -(size.height * origin.y),
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getTopCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width / 2,
+      y: -(size.height * origin.y),
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getTopRight(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width,
+      y: -(size.height * origin.y),
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getLeftCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x),
+      y: -(size.height * origin.y) + size.height / 2,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getRightCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width,
+      y: -(size.height * origin.y) + size.height / 2,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getBottomLeft(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x),
+      y: -(size.height * origin.y) + size.height,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getBottomCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width / 2,
+      y: -(size.height * origin.y) + size.height,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+  export function getBottomRight(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema {
+    const { size, origin } = target;
+    const output = {
+      x: -(size.width * origin.x) + size.width,
+      y: -(size.height * origin.y) + size.height,
+    };
+    return getPointWithMatrix(output, matrix);
+  }
+}

package/src/common/utils/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './bounds';

package/src/composables/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './use-entities';
+export * from './use-entity-data-from-context';
+export * from './use-entity-from-context';
+export * from './use-listen-events';
+export * from './use-playground';
+export * from './use-playground-container';
+export * from './use-playground-context';
+export * from './use-service';
+export * from './use-refresh';
+export * from './use-config-entity';
+export * from './use-playground-drag';

package/src/composables/use-config-entity.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount } from 'vue';
+
+import { Disposable } from '@flowgram-vue/utils';
+
+import { ConfigEntity, EntityManager, EntityRegistry } from '../common';
+import { useRefresh } from './use-refresh';
+import { usePlaygroundContainer } from './use-playground-container';
+
+/**
+ * 获取 config entity
+ */
+export function useConfigEntity<T extends ConfigEntity>(
+  entityRegistry: EntityRegistry<T>,
+  listenChange = false
+): T {
+  const entityManager = usePlaygroundContainer().get(EntityManager);
+  const entity = entityManager.getEntity<T>(entityRegistry, true) as T;
+  const refresh = useRefresh(entity.version);
+  const dispose = listenChange
+    ? entity.onEntityChange(() => {
+        refresh(entity.version);
+      })
+    : Disposable.NULL;
+  onBeforeUnmount(() => dispose.dispose());
+  return entity;
+}

package/src/composables/use-entities.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount } from 'vue';
+
+import { Entity, EntityManager, EntityRegistry } from '../common';
+import { useRefresh } from './use-refresh';
+import { usePlaygroundContainer } from './use-playground-container';
+
+/**
+ * 获取 entities 并监听变化
+ * @deprecated
+ */
+export function useEntities<T extends Entity>(entityRegistry: EntityRegistry): T[] {
+  const entityManager = usePlaygroundContainer().get(EntityManager);
+  const refresh = useRefresh();
+  const dispose = entityManager.onEntityChange((entityKey) => {
+    if (entityKey === entityRegistry.type) {
+      refresh();
+    }
+  });
+  onBeforeUnmount(() => dispose.dispose());
+  return entityManager.getEntities<T>(entityRegistry);
+}

package/src/composables/use-entity-data-from-context.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount } from 'vue';
+
+import { EntityData, type EntityDataRegistry, EntityManager } from '../common';
+import { useRefresh } from './use-refresh';
+import { usePlaygroundContainer } from './use-playground-container';
+import { useEntityFromContext } from './use-entity-from-context';
+
+/**
+ * 从上下 PlaygroundEntityContext 获取 entity data 并监听变化 (默认不监听)
+ */
+export function useEntityDataFromContext<T extends EntityData>(
+  dataRegistry: EntityDataRegistry<any>,
+  listenChange = false
+): T {
+  const entityManager = usePlaygroundContainer().get(EntityManager);
+  const entityData = useEntityFromContext().getData<T>(dataRegistry)!;
+  if (!entityData) {
+    throw new Error(
+      `[useEntityDataFromContext] Unknown entity Data ${dataRegistry.name} from "PlaygroundEntityContext".`
+    );
+  }
+  const refresh = useRefresh(entityData.version);
+  const dispose = entityData.onDataChange(() => {
+    if (listenChange) refresh(entityData.version);
+  });
+  onBeforeUnmount(() => dispose.dispose());
+  void entityManager;
+  return entityData;
+}

package/src/composables/use-entity-from-context.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, onBeforeUnmount } from 'vue';
+
+import { Disposable } from '@flowgram-vue/utils';
+
+import { PlaygroundEntityContextKey } from '../vue';
+import { Entity, EntityManager } from '../common';
+import { useRefresh } from './use-refresh';
+import { usePlaygroundContainer } from './use-playground-container';
+
+/**
+ * 从上下 PlaygroundEntityContext 获取 entity 并监听变化(默认不监听)
+ */
+export function useEntityFromContext<T extends Entity>(listenChange = false): T {
+  const entityManager = usePlaygroundContainer().get(EntityManager);
+  const entity = inject(PlaygroundEntityContextKey) as T;
+  if (!entity) {
+    throw new Error('[useEntityFromContext] Unknown entity from "PlaygroundEntityContext"');
+  }
+  const refresh = useRefresh(entity.version);
+  const dispose = listenChange
+    ? entity.onEntityChange(() => refresh(entity.version))
+    : Disposable.NULL;
+  onBeforeUnmount(() => dispose.dispose());
+  void entityManager;
+  return entity;
+}

package/src/composables/use-listen-events.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount } from 'vue';
+
+import { DisposableCollection, type Event } from '@flowgram-vue/utils';
+
+import { useRefresh } from './use-refresh';
+
+/**
+ * 监听 event 事件变化
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useListenEvents(...events: Event<any>[]): void {
+  const refresh = useRefresh();
+  const collection = new DisposableCollection();
+  collection.pushAll(events.map((e) => e(() => refresh())));
+  onBeforeUnmount(() => collection.dispose());
+}

package/src/composables/use-playground-container.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type interfaces } from 'inversify';
+import { inject } from 'vue';
+
+import { PlaygroundVueContainerKey } from '../vue/playground-vue-context';
+
+/**
+ * 获取 playground inversify container
+ */
+export function usePlaygroundContainer(): interfaces.Container {
+  return inject(PlaygroundVueContainerKey) as interfaces.Container;
+}

package/src/composables/use-playground-context.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject } from 'vue';
+
+import { PlaygroundVueContextKey } from '../vue/playground-vue-context';
+
+/**
+ * 获取 playground context 数据
+ */
+export function usePlaygroundContext<T>(): T {
+  return inject(PlaygroundVueContextKey) as T;
+}

package/src/composables/use-playground-drag.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Disposable } from '@flowgram-vue/utils';
+
+import { PlaygroundDragOptions, PlaygroundDrag } from '../core';
+import { usePlayground } from './use-playground';
+
+interface UsePlaygroundDragReturn {
+  start<T = undefined>(
+    e: { clientX: number; clientY: number },
+    opts: PlaygroundDragOptions<T> & { context?: T }
+  ): Disposable;
+}
+
+export function usePlaygroundDrag(): UsePlaygroundDragReturn {
+  const playground = usePlayground();
+  return {
+    start<T>(
+      e: { clientX: number; clientY: number },
+      opts: PlaygroundDragOptions<T> & { context?: T }
+    ): Disposable {
+      return PlaygroundDrag.startDrag(e.clientX, e.clientY, {
+        ...opts,
+        config: playground.config,
+      });
+    },
+  };
+}

package/src/composables/use-playground.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject } from 'vue';
+
+import { PlaygroundVueRefKey } from '../vue/playground-vue-context';
+import { Playground } from '../playground';
+
+/**
+ * 获取 playground
+ */
+export function usePlayground(): Playground {
+  return inject(PlaygroundVueRefKey) as Playground;
+}

package/src/composables/use-refresh.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useRefresh } from '@flowgram-vue/utils';

package/src/composables/use-service.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type interfaces } from 'inversify';
+
+import { usePlaygroundContainer } from './use-playground-container';
+
+/**
+ * 获取画布的 IOC 模块
+ * @param identifier
+ */
+export function useService<T>(identifier: interfaces.ServiceIdentifier<T>): T {
+  const container = usePlaygroundContainer();
+  return container.get?.(identifier) as T;
+}