@flowgram-vue/core 0.2.0

package/src/core/utils/use-gesture/vanilla/Recognizer.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { GestureKey, InternalHandlers, NativeHandlers, UserGestureConfig } from '../core/types';
+import { Controller } from '../core';
+
+export class Recognizer<GK extends GestureKey | undefined = undefined> {
+  private _gestureKey?: GK;
+
+  private _ctrl: Controller;
+
+  private _target: EventTarget;
+
+  constructor(
+    target: EventTarget,
+    handlers: InternalHandlers,
+    config: GK extends keyof UserGestureConfig ? UserGestureConfig[GK] : UserGestureConfig,
+    gestureKey?: GK,
+    nativeHandlers?: NativeHandlers,
+  ) {
+    this._target = target;
+    this._gestureKey = gestureKey;
+    this._ctrl = new Controller(handlers);
+    this._ctrl.applyHandlers(handlers, nativeHandlers);
+    this._ctrl.applyConfig({ ...config, target }, gestureKey);
+
+    this._ctrl.effect();
+  }
+
+  destroy() {
+    this._ctrl.clean();
+  }
+
+  setConfig(
+    config: GK extends keyof UserGestureConfig ? UserGestureConfig[GK] : UserGestureConfig,
+  ) {
+    this._ctrl.clean();
+    this._ctrl.applyConfig({ ...config, target: this._target }, this._gestureKey);
+    this._ctrl.effect();
+  }
+}

package/src/core/utils/use-gesture/vanilla/ScrollGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { UserScrollConfig, Handler, EventTypes } from '../core/types';
+import { registerAction, scrollAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface ScrollGestureConstructor {
+  new <EventType = EventTypes['scroll']>(
+    target: EventTarget,
+    handler: Handler<'scroll', EventType>,
+    config?: UserScrollConfig,
+  ): ScrollGesture;
+}
+
+export interface ScrollGesture extends Recognizer<'scroll'> {}
+
+export const ScrollGesture: ScrollGestureConstructor = function <EventType = EventTypes['scroll']>(
+  target: EventTarget,
+  handler: Handler<'scroll', EventType>,
+  config?: UserScrollConfig,
+) {
+  registerAction(scrollAction);
+  return new Recognizer(target, { scroll: handler }, config || {}, 'scroll');
+} as any;

package/src/core/utils/use-gesture/vanilla/WheelGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { UserWheelConfig, Handler, EventTypes } from '../core/types';
+import { registerAction, wheelAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface WheelGestureConstructor {
+  new <EventType = EventTypes['wheel']>(
+    target: EventTarget,
+    handler: Handler<'wheel', EventType>,
+    config?: UserWheelConfig,
+  ): WheelGesture;
+}
+
+export interface WheelGesture extends Recognizer<'wheel'> {}
+
+export const WheelGesture: WheelGestureConstructor = function <EventType = EventTypes['wheel']>(
+  target: EventTarget,
+  handler: Handler<'wheel', EventType>,
+  config?: UserWheelConfig,
+) {
+  registerAction(wheelAction);
+  return new Recognizer(target, { wheel: handler }, config || {}, 'wheel');
+} as any;

package/src/core/utils/use-gesture/vanilla/createGesture.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Action, GestureHandlers, UserGestureConfig } from '../core/types';
+import { registerAction } from '../core/actions';
+import { parseMergedHandlers } from '../core';
+import { Recognizer } from './Recognizer';
+
+export function createGesture(actions: Action[]) {
+  actions.forEach(registerAction);
+
+  return function (target: EventTarget, _handlers: GestureHandlers, _config?: UserGestureConfig) {
+    const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config || {});
+    return new Recognizer(target, handlers, config, undefined, nativeHandlers);
+  };
+}

package/src/core/utils/use-gesture/vanilla/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { DragGesture } from './DragGesture';
+export { PinchGesture } from './PinchGesture';
+export { WheelGesture } from './WheelGesture';
+export { ScrollGesture } from './ScrollGesture';
+export { MoveGesture } from './MoveGesture';
+export { HoverGesture } from './HoverGesture';
+export { Gesture } from './Gesture';
+
+export { createGesture } from './createGesture';
+
+export * from '../core/utils';
+export * from '../core/types';
+export * from '../core/actions';

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './common';
+export * from './core';
+export * from './vue';
+export * from './composables';
+export * from './services';
+export * from './plugin';
+export * from './playground';
+export * from './playground-config';
+export * from './playground-contribution';
+export * from './playground-container';
+export * from './playground-mock-tools';
+export { CommandService, CommandRegistry, Command } from '@flowgram-vue/command';

package/src/playground-config.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// import {
+//   PlaygroundConfigEntity,
+//   SelectorBoxConfigEntity,
+//   SnaplineConfigEntity,
+//   EditorStateConfigEntity,
+// } from './core/layer/config';
+import {
+  // AlignLayer,
+  type EditorState,
+  type LayerRegistry,
+  // SelectorBoxLayer,
+  // SelectorLayer,
+  // SnaplineLayer,
+} from './core/layer';
+// import { SelectableEntity } from './core/entity';
+// import { Selectable } from './core/able/selectable';
+// import { Dragable, Resizable } from './core/able';
+import { type ConfigEntity, type EntityRegistry } from './common';
+
+export const PlaygroundConfig = Symbol('PlaygroundConfig');
+
+/**
+ * 画布配置
+ */
+export interface PlaygroundConfig {
+  layers?: LayerRegistry[]; // 渲染分层
+  // ables?: AbleRegistry[]; // 能力
+  // entities?: EntityRegistry[]; // 数据实体
+  editorStates?: EditorState[]; // 编辑态切换
+  width?: number; // 画布的初始宽度
+  height?: number; // 画布的初始高度
+  node?: HTMLElement; // 画布的容器节点
+  autoFocus?: boolean; // 自动 focus 及 blur，默认 true
+  autoResize?: boolean; // 监听变化
+  zoomEnable?: boolean; // 是否支持缩放，默认 true
+  contextMenuPath?: string[]; // 右键菜单路径
+  entityConfigs?: Map<EntityRegistry<ConfigEntity>, any>;
+  context?: any; // 注入到 layer 中的上下文数据
+}
+
+/**
+ * 默认配置
+ */
+export function createDefaultPlaygroundConfig(): PlaygroundConfig {
+  return {
+    autoFocus: true,
+    autoResize: true,
+    zoomEnable: true,
+    layers: [
+      // PlaygroundLayer, // 基础配置
+      // SelectorLayer, // 节点选择器
+      // SelectorBoxLayer, // 选择框
+      // SnaplineLayer, // 参考线
+      // AlignLayer, // 对齐线
+    ],
+    // ables: [Dragable, Selectable, Resizable],
+    // entities: [
+    //   SelectableEntity,
+    //   SnaplineConfigEntity,
+    //   PlaygroundConfigEntity,
+    //   SelectorBoxConfigEntity,
+    //   EditorStateConfigEntity,
+    // ],
+  };
+}

package/src/playground-container.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Container, ContainerModule, type interfaces } from 'inversify';
+import { CommandService, CommandContainerModule } from '@flowgram-vue/command';
+
+import { ContextMenuService } from './services/context-menu-service';
+import {
+  ClipboardService,
+  DefaultClipboardService,
+  LocalStorageService,
+  SelectionService,
+  StorageService,
+  LoggerService,
+} from './services';
+import { PluginContext } from './plugin';
+import { PlaygroundContribution, PlaygroundRegistry } from './playground-contribution';
+import { createDefaultPlaygroundConfig, PlaygroundConfig } from './playground-config';
+import { Playground } from './playground';
+import {
+  type LayerRegistry,
+  LayerOptions,
+  // PipelineDispatcher,
+  PipelineEntitiesSelector,
+  PipelineLayerFactory,
+  PipelineRegistry,
+  PipelineRenderer,
+  PlaygroundConfigEntity,
+  LazyInjectContext,
+} from './core';
+import {
+  // AbleManager,
+  bindConfigEntity,
+  bindContributionProvider,
+  bindPlaygroundContextProvider,
+  EntityManager,
+  PlaygroundContainerFactory,
+  PlaygroundContext,
+  removeInjectedProperties,
+} from './common';
+
+export function createPluginContextDefault(container: interfaces.Container): PluginContext {
+  return {
+    container,
+    playground: container.get(Playground),
+    get<T>(identifier: interfaces.ServiceIdentifier): T {
+      return container.get(identifier) as T;
+    },
+    getAll<T>(identifier: interfaces.ServiceIdentifier): T[] {
+      return container.getAll(identifier) as T[];
+    },
+  };
+}
+
+export function createPlaygroundLayerDefault(
+  container: interfaces.Container,
+  layerRegistry: LayerRegistry,
+  options: any = {},
+) {
+  const layerContainer = container.createChild();
+  layerContainer.bind(layerRegistry).toSelf().inSingletonScope();
+  layerContainer.bind(LayerOptions).toConstantValue(options);
+  const layerInstance = layerContainer.get(layerRegistry);
+  removeInjectedProperties(layerInstance);
+  return layerInstance;
+}
+
+export const PlaygroundContainerModule = new ContainerModule(bind => {
+  // bind(AbleManager).toSelf().inSingletonScope();
+  bind(EntityManager).toSelf().inSingletonScope();
+  bind(PipelineRenderer).toSelf().inSingletonScope();
+  bind(PlaygroundRegistry).toSelf().inSingletonScope();
+  bind(Playground).toSelf().inSingletonScope();
+  bind(PipelineEntitiesSelector).toSelf().inSingletonScope();
+  bind(PipelineLayerFactory)
+    .toDynamicValue(
+      (context: interfaces.Context) => (layerRegistry: LayerRegistry, options?: any) =>
+        createPlaygroundLayerDefault(context.container, layerRegistry, options),
+    )
+    .inSingletonScope();
+  // bind(PipelineDispatcher).toSelf().inSingletonScope();
+  bind(PipelineRegistry).toSelf().inSingletonScope();
+  bind(PlaygroundContainerFactory)
+    .toDynamicValue(ctx => ctx.container)
+    .inSingletonScope();
+  bind(PlaygroundConfig).toConstantValue(createDefaultPlaygroundConfig());
+  bind(PlaygroundContext).toConstantValue({});
+  bindPlaygroundContextProvider(bind);
+
+  bind(LoggerService).toSelf().inSingletonScope();
+
+  bind(ContextMenuService).toSelf().inSingletonScope();
+  bind(SelectionService).toSelf().inSingletonScope();
+
+  // 默认采用 LocalStorageService
+  bind(StorageService).to(LocalStorageService).inSingletonScope();
+  bind(ClipboardService).to(DefaultClipboardService).inSingletonScope();
+  bindConfigEntity(bind, PlaygroundConfigEntity);
+  bindContributionProvider(bind, PlaygroundContribution);
+  bind(PluginContext)
+    .toDynamicValue(ctx => createPluginContextDefault(ctx.container))
+    .inSingletonScope();
+
+  bind(LazyInjectContext).toService(PluginContext);
+});
+
+export function createPlaygroundContainer(
+  config?: PlaygroundConfig,
+  parent?: interfaces.Container,
+  container?: interfaces.Container,
+): interfaces.Container {
+  const child = container || new Container({ defaultScope: 'Singleton' });
+  if (parent) {
+    child.parent = parent;
+  }
+  child.load(PlaygroundContainerModule);
+  if (!child.isBound(CommandService)) {
+    child.load(CommandContainerModule);
+  }
+  if (config) {
+    child.rebind(PlaygroundConfig).toConstantValue(config);
+    if (config.context) {
+      child.rebind(PlaygroundContext).toConstantValue(config.context);
+    }
+  }
+  return child;
+}

package/src/playground-contribution.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+
+import { PlaygroundConfig } from './playground-config';
+import { type Playground } from './playground';
+import {
+  PipelineRegistry,
+  type EditorState,
+  EditorStateConfigEntity,
+  type LayerRegistry,
+} from './core';
+import { EntityManager, type EntityRegistry } from './common';
+
+export const PlaygroundContribution = Symbol('PlaygroundContribution');
+
+export interface PlaygroundContribution {
+  /**
+   * 注册 Layer/Entity/Able 相关
+   * @param registry
+   * @deprecated
+   */
+  registerPlayground?(registry: PlaygroundRegistry): void;
+  /**
+   * 初始化画布 (onReady 之前)
+   * @param playground
+   */
+  onInit?(playground: Playground): void;
+  /**
+   * 初始化 entity 完毕后触发
+   * @param playground
+   */
+  onReady?(playground: Playground): void;
+  /**
+   * 销毁
+   * @param playground
+   */
+  onDispose?(playground: Playground): void;
+
+  /**
+   * 所有 Layer 第一次渲染完毕后触发
+   * @param playground
+   */
+  onAllLayersRendered?(playground: Playground): void;
+}
+
+@injectable()
+export class PlaygroundRegistry {
+  @inject(PipelineRegistry) protected readonly pipeline: PipelineRegistry;
+
+  // @inject(AbleManager) readonly ableManager: AbleManager;
+
+  @inject(EntityManager) readonly entityManager: EntityManager;
+
+  @inject(PlaygroundConfig) readonly playgroundConfig: PlaygroundConfig;
+
+  config(config: Partial<PlaygroundConfig>): void {
+    Object.assign(this.playgroundConfig, config);
+  }
+
+  registerLayer(layerRegistry: LayerRegistry): void {
+    this.pipeline.registerLayer(layerRegistry);
+  }
+
+  registerEntity(entityRegistry: EntityRegistry): void {
+    this.entityManager.registerEntity(entityRegistry);
+  }
+
+  // registerAble(ableRegistry: AbleRegistry): void {
+  //   this.ableManager.registerAble(ableRegistry);
+  // }
+
+  registerEditorState(state: EditorState): void {
+    const stateConfig =
+      this.entityManager.getEntity<EditorStateConfigEntity>(EditorStateConfigEntity);
+    stateConfig?.registerState(state);
+  }
+}

package/src/playground-mock-tools.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { interfaces } from 'inversify';
+
+import { createPlaygroundContainer, createPlaygroundLayerDefault } from './playground-container';
+import { Playground } from './playground';
+import { LayerRegistry, Layer, PipelineLayerFactory } from './core';
+
+/**
+ * 画布测试工具
+ *
+ * @example
+ *
+ *  监听 layer 的执行
+ *     const layerState = PlaygroundMockTools.createLayerTestState(PlaygroundLayer)
+ *     layerState.playground.ready()
+ *     expect(layerState.onReady.mock.calls.length).toEqual(1)
+ *     expect(layerState.autorun.mock.calls.length).toEqual(1)
+ *     layerState.playground.config.updateConfig({
+ *       scrollX: 100
+ *     })
+ *     expect(layerState.onReady.mock.calls.length).toEqual(1)
+ *     expect(layerState.autorun.mock.calls.length).toEqual(2)
+ */
+export namespace PlaygroundMockTools {
+  const LayerStateProvider = Symbol('LayerStateProvider');
+  type LayerStateProvider = WeakMap<LayerRegistry, LayerTestState>;
+
+  interface SpyInstance {
+    mock: {
+      calls: any[][];
+      instances: any[];
+      invocationCallOrder: any;
+      results: { type: string; value: any }[];
+      lastCall: any[];
+    };
+  }
+  export class LayerTestState<T extends Layer = Layer> {
+    autorun: SpyInstance;
+
+    render: SpyInstance;
+
+    onReady: SpyInstance;
+
+    onResize: SpyInstance;
+
+    onFocus: SpyInstance;
+
+    onBlur: SpyInstance;
+
+    onZoom: SpyInstance;
+
+    onScroll: SpyInstance;
+
+    onViewportChange: SpyInstance;
+
+    onReadonlyOrDisabledChange: SpyInstance;
+
+    constructor(
+      readonly instance: T,
+      readonly playground: Playground,
+      readonly container: interfaces.Container
+    ) {
+      this.hijackMethod(instance, 'autorun');
+      this.hijackMethod(instance, 'render');
+      this.hijackMethod(instance, 'onReady');
+      this.hijackMethod(instance, 'onResize');
+      this.hijackMethod(instance, 'onFocus');
+      this.hijackMethod(instance, 'onBlur');
+      this.hijackMethod(instance, 'onZoom');
+      this.hijackMethod(instance, 'onScroll');
+      this.hijackMethod(instance, 'onViewportChange');
+      this.hijackMethod(instance, 'onReadonlyOrDisabledChange');
+    }
+
+    private hijackMethod(layer: Layer, layerMethod: keyof Layer & keyof LayerTestState): void {
+      if (typeof layer[layerMethod] === 'function') {
+        // vi should be global
+        // @ts-ignore
+        (this as any)[layerMethod] = vi.spyOn(layer as any, layerMethod);
+      }
+    }
+  }
+
+  export function createContainer(modules?: interfaces.ContainerModule[]): interfaces.Container {
+    const container = createPlaygroundContainer();
+    container.bind(LayerStateProvider).toConstantValue(new WeakMap());
+    container
+      .rebind(PipelineLayerFactory)
+      .toDynamicValue((context) => (layerRegistry: LayerRegistry, options?: any) => {
+        const layerInstance = createPlaygroundLayerDefault(
+          context.container,
+          layerRegistry,
+          options
+        );
+        context.container
+          .get<LayerStateProvider>(LayerStateProvider)
+          .set(
+            layerRegistry,
+            new LayerTestState(layerInstance, container.get<Playground>(Playground), container)
+          );
+        return layerInstance;
+      });
+    if (modules) {
+      modules.forEach((module) => container.load(module));
+    }
+    return container;
+  }
+
+  export function createPlayground(modules?: interfaces.ContainerModule[]): Playground {
+    return createContainer(modules).get(Playground);
+  }
+
+  export function getLayerTestState<T extends Layer = Layer>(
+    container: interfaces.Container,
+    layerRegistry: LayerRegistry<T>
+  ): LayerTestState<T> {
+    return container
+      .get<LayerStateProvider>(LayerStateProvider)
+      .get(layerRegistry) as LayerTestState<T>;
+  }
+
+  /**
+   * 创建layer, 并记录layer的回调数据
+   * @param Layer
+   * @param opts
+   */
+  export function createLayerTestState<T extends Layer = Layer>(
+    layerRegistry: LayerRegistry<T>,
+    opts?: any,
+    modules?: interfaces.ContainerModule[]
+  ): LayerTestState<T> {
+    const container = createContainer(modules);
+    const playground = container.get<Playground>(Playground);
+    playground.registerLayer(layerRegistry, opts);
+    playground.init();
+    playground.ready();
+    return getLayerTestState(container, layerRegistry);
+  }
+}