@flowgram-vue/core 0.2.0

package/src/services/logger-service.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import { type Disposable, Emitter, type Event } from '@flowgram-vue/utils';
+
+export interface LoggerProps {
+  event: LoggerEvent;
+  props?: Record<string, any>;
+}
+
+export enum LoggerEvent {
+  CANVAS_TTI, // Time To Interactive，画布可交互时间
+  CANVAS_FPS, // Frame Per Second，画布渲染帧率
+}
+
+/**
+ * 画布全局的选择器，可以放任何东西
+ */
+@injectable()
+export class LoggerService implements Disposable {
+  protected readonly onLoggerEmitter = new Emitter<LoggerProps>();
+
+  // plugin 内注册：loggerService.onLogger(() => {})
+  readonly onLogger: Event<any> = this.onLoggerEmitter.event;
+
+  onAllLayersRendered() {
+    this.onLoggerEmitter.fire({
+      event: LoggerEvent.CANVAS_TTI,
+    });
+  }
+
+  onFlushRequest(renderFrameInterval: number) {
+    if (renderFrameInterval <= 0) {
+      return;
+    }
+    const fps = 1000 / renderFrameInterval;
+    this.onLoggerEmitter.fire({
+      event: LoggerEvent.CANVAS_FPS,
+      props: { rfi: renderFrameInterval, fps },
+    });
+  }
+
+  dispose() {
+    this.onLoggerEmitter.dispose();
+  }
+}

package/src/services/selection-service.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import { Compare, type Disposable, Emitter, type Event } from '@flowgram-vue/utils';
+
+import { type Entity } from '../common';
+
+/**
+ * 画布全局的选择器，可以放任何东西
+ */
+@injectable()
+export class SelectionService implements Disposable {
+  protected readonly onSelectionChangedEmitter = new Emitter<Entity[]>();
+
+  readonly onSelectionChanged: Event<any> = this.onSelectionChangedEmitter.event;
+
+  private currentSelection: Entity[] = [];
+
+  private disposers: Disposable[] = [];
+
+  get selection(): Entity[] {
+    return this.currentSelection;
+  }
+
+  isEmpty(): boolean {
+    return this.currentSelection.length === 0;
+  }
+
+  set selection(selection: Entity<any>[]) {
+    if (!Compare.isArrayShallowChanged(this.currentSelection, selection)) {
+      return;
+    }
+    this.disposers.forEach((disposer) => disposer.dispose());
+    this.changeSelection(selection);
+    this.disposers = this.currentSelection.map((selection) =>
+      selection.onDispose(() => {
+        const newSelection = this.currentSelection.filter((n) => n !== selection);
+        this.changeSelection(newSelection);
+      })
+    );
+  }
+
+  private changeSelection(selection: Entity<any>[]) {
+    this.currentSelection = selection;
+    this.onSelectionChangedEmitter.fire(this.currentSelection);
+  }
+
+  dispose() {
+    this.onSelectionChangedEmitter.dispose();
+  }
+}

package/src/services/storage-service.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable, postConstruct } from 'inversify';
+
+export const StorageService = Symbol('StorageService');
+
+/**
+ * 存储数据到缓存
+ */
+export interface StorageService {
+  /**
+   * Stores the given data under the given key.
+   */
+  setData<T>(key: string, data: T): void;
+
+  /**
+   * Returns the data stored for the given key or the provided default value if nothing is stored for the given key.
+   */
+  getData<T>(key: string, defaultValue: T): T;
+
+  getData<T>(key: string): T | undefined;
+}
+
+interface LocalStorage {
+  [key: string]: any;
+}
+
+@injectable()
+export class LocalStorageService implements StorageService {
+  private storage: LocalStorage;
+
+  private _prefix = '__gedit:';
+
+  setData<T>(key: string, data: T): void {
+    this.storage[this.prefix(key)] = JSON.stringify(data);
+  }
+
+  getData<T>(key: string, defaultValue?: T): T {
+    const result = this.storage[this.prefix(key)];
+    if (result === undefined) {
+      return defaultValue as any;
+    }
+    return JSON.parse(result);
+  }
+
+  prefix(key: string) {
+    return `${this._prefix}${key}`;
+  }
+
+  setPrefix(prefix: string) {
+    this._prefix = prefix;
+  }
+
+  @postConstruct()
+  protected init(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      this.storage = window.localStorage;
+    } else {
+      this.storage = {};
+    }
+  }
+}

package/src/vue/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './playground-vue-context';
+export * from './playground-vue-provider';
+export { default as PlaygroundVueRenderer } from './playground-vue-renderer.vue';

package/src/vue/playground-vue-context.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { interfaces } from 'inversify';
+import type { InjectionKey } from 'vue';
+
+import type { Playground } from '../playground';
+
+export const PlaygroundVueContextKey: InjectionKey<any> = Symbol('PlaygroundVueContext');
+
+export const PlaygroundVueContainerKey: InjectionKey<interfaces.Container> = Symbol(
+  'PlaygroundVueContainer'
+);
+
+export const PlaygroundVueRefKey: InjectionKey<Playground> = Symbol('PlaygroundVueRef');
+
+/**
+ * 当前 entity
+ */
+export const PlaygroundEntityContextKey: InjectionKey<any> = Symbol('PlaygroundEntityContext');

package/src/vue/playground-vue-provider.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type interfaces } from 'inversify';
+import { defineComponent, onBeforeUnmount, onMounted, provide, type PropType } from 'vue';
+
+import { PluginContext, loadPlugins, type PluginsProvider } from '../plugin';
+import { createPlaygroundContainer } from '../playground-container';
+import { Playground } from '../playground';
+import { PlaygroundContext } from '../common';
+import {
+  PlaygroundVueContainerKey,
+  PlaygroundVueContextKey,
+  PlaygroundVueRefKey,
+} from './playground-vue-context';
+
+export interface PlaygroundVueProviderProps {
+  containerModules?: interfaces.ContainerModule[];
+  parentContainer?: interfaces.Container;
+  playgroundContainer?: interfaces.Container;
+  playgroundContext?: any;
+  autoFocus?: boolean;
+  autoResize?: boolean;
+  zoomEnable?: boolean;
+  plugins?: PluginsProvider<any>;
+  customPluginContext?: (container: interfaces.Container) => PluginContext;
+}
+
+/**
+ * Playground Vue 容器：创建 inversify 容器并 provide 给子组件
+ */
+export const PlaygroundVueProvider = defineComponent({
+  name: 'PlaygroundVueProvider',
+  props: {
+    containerModules: Array as PropType<interfaces.ContainerModule[]>,
+    parentContainer: Object as PropType<interfaces.Container>,
+    playgroundContainer: Object as PropType<interfaces.Container>,
+    playgroundContext: { type: null as unknown as PropType<any>, default: undefined },
+    autoFocus: { type: Boolean, default: true },
+    autoResize: { type: Boolean, default: true },
+    zoomEnable: { type: Boolean, default: true },
+    plugins: Function as PropType<PluginsProvider<any>>,
+    customPluginContext: Function as PropType<(container: interfaces.Container) => PluginContext>,
+  },
+  setup(props, { slots, expose }) {
+    const container = (() => {
+      let flowContainer: interfaces.Container;
+      if (props.playgroundContainer) {
+        flowContainer = props.playgroundContainer;
+      } else {
+        flowContainer = createPlaygroundContainer(
+          {
+            autoFocus: props.autoFocus,
+            autoResize: props.autoResize,
+            zoomEnable: props.zoomEnable,
+          },
+          props.parentContainer
+        );
+        if (props.playgroundContext) {
+          flowContainer.rebind(PlaygroundContext).toConstantValue(props.playgroundContext);
+        }
+        if (props.containerModules) {
+          props.containerModules.forEach((module) => flowContainer.load(module));
+        }
+      }
+      return flowContainer;
+    })();
+
+    const playground = (() => {
+      const instance = container.get(Playground);
+      let ctx: PluginContext;
+      if (props.customPluginContext) {
+        ctx = props.customPluginContext(container);
+        container.rebind(PluginContext).toConstantValue(ctx);
+      } else {
+        ctx = container.get<PluginContext>(PluginContext);
+      }
+      if (props.plugins) {
+        loadPlugins(props.plugins(ctx), container);
+      }
+      instance.init();
+      return instance;
+    })();
+
+    provide(PlaygroundVueContainerKey, container);
+    provide(PlaygroundVueRefKey, playground);
+    provide(PlaygroundVueContextKey, props.playgroundContext);
+
+    const pluginContext = container.get<PluginContext>(PluginContext);
+    expose(pluginContext);
+
+    let effectSignal = 0;
+    onMounted(() => {
+      effectSignal += 1;
+    });
+    onBeforeUnmount(() => {
+      // 开发环境下延迟处理 dispose，防止 HMR / Strict 双调用卸载
+      if (process.env.NODE_ENV === 'development') {
+        const FRAME = 16;
+        setTimeout(() => {
+          effectSignal -= 1;
+          if (effectSignal === 0) {
+            playground.dispose();
+          }
+        }, FRAME);
+        return;
+      }
+      playground.dispose();
+    });
+
+    return () => slots.default?.();
+  },
+});

package/src/vue/playground-vue-renderer.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { onMounted, ref, type CSSProperties } from 'vue';
+
+import { usePlayground } from '../composables/use-playground';
+import { useService } from '../composables/use-service';
+import { PlaygroundConfig } from '../playground-config';
+
+defineOptions({ name: 'PlaygroundVueRenderer' });
+
+const props = defineProps<{
+  className?: string;
+  style?: CSSProperties;
+}>();
+
+const playground = usePlayground();
+const playgroundConfig = useService<PlaygroundConfig>(PlaygroundConfig);
+const containerRef = ref<HTMLElement>();
+
+onMounted(() => {
+  if (!containerRef.value) {
+    return;
+  }
+  playground.setParent(containerRef.value);
+  playground.ready();
+  if (playgroundConfig.autoFocus) {
+    playground.node.focus();
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="['gedit-playground-container', props.className]"
+    :style="props.style"
+  />
+  <Teleport v-if="$slots.default" :to="playground.node">
+    <slot />
+  </Teleport>
+</template>