@flowgram.ai/playground-react 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,224 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+import "reflect-metadata";
+import { useRefresh, Emitter, Event, Disposable } from "@flowgram.ai/utils";
+export * from "@flowgram.ai/core";
+
+// src/hooks/use-playground-tools.ts
+import { useCallback, useEffect, useState } from "react";
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  useConfigEntity,
+  usePlayground
+} from "@flowgram.ai/core";
+import { DisposableCollection } from "@flowgram.ai/utils";
+function usePlaygroundTools(props) {
+  const { maxZoom = 2, minZoom = 0.25 } = props || {};
+  const playground = usePlayground();
+  const editorState = useConfigEntity(EditorStateConfigEntity, true);
+  const [zoom, setZoom] = useState(1);
+  const handleZoomOut = useCallback(
+    (easing) => {
+      if (zoom < minZoom) {
+        return;
+      }
+      playground.config.zoomout(easing);
+    },
+    [zoom, playground, minZoom]
+  );
+  const handleZoomIn = useCallback(
+    (easing) => {
+      if (zoom > maxZoom) {
+        return;
+      }
+      playground.config.zoomin(easing);
+    },
+    [zoom, playground, maxZoom]
+  );
+  const handleUpdateZoom = useCallback(
+    (value, easing, easingDuration) => {
+      playground.config.updateZoom(value, easing, easingDuration);
+    },
+    [playground]
+  );
+  const handleToggleIneractiveType = useCallback(() => {
+    if (editorState.isMouseFriendlyMode()) {
+      editorState.changeState(EditorState.STATE_SELECT.id);
+    } else {
+      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);
+    }
+  }, [editorState]);
+  useEffect(() => {
+    const dispose = new DisposableCollection();
+    dispose.push(playground.onZoom((z) => setZoom(z)));
+    return () => dispose.dispose();
+  }, [playground]);
+  return {
+    zoomin: handleZoomIn,
+    zoomout: handleZoomOut,
+    updateZoom: handleUpdateZoom,
+    zoom,
+    interactiveType: editorState.isMouseFriendlyMode() ? "MOUSE" : "PAD",
+    toggleIneractiveType: handleToggleIneractiveType
+  };
+}
+
+// src/components/playground-react.tsx
+import React2, { useMemo, forwardRef } from "react";
+import {
+  createPlaygroundPlugin as createPlaygroundPlugin2,
+  PlaygroundReactProvider,
+  PlaygroundReactRenderer
+} from "@flowgram.ai/core";
+
+// src/preset/playground-react-preset.ts
+import { createShortcutsPlugin } from "@flowgram.ai/shortcuts-plugin";
+import {
+  createPlaygroundPlugin,
+  PlaygroundConfig,
+  PlaygroundLayer
+} from "@flowgram.ai/core";
+import { createBackgroundPlugin } from "@flowgram.ai/background-plugin";
+function createPlaygroundReactPreset(opts, plugins = []) {
+  return (ctx) => {
+    plugins = plugins.slice();
+    if (opts.shortcuts) {
+      plugins.push(
+        createShortcutsPlugin({
+          registerShortcuts: (registry) => opts.shortcuts(registry, ctx)
+        })
+      );
+    }
+    if (opts.plugins) {
+      plugins.push(...opts.plugins(ctx));
+    }
+    plugins.push(
+      createPlaygroundPlugin({
+        onBind: (bindConfig) => {
+          opts.onBind?.(bindConfig);
+        },
+        onInit: (ctx2) => {
+          const playgroundConfig = ctx2.get(PlaygroundConfig);
+          if (opts.playground) {
+            if (opts.playground.autoFocus !== void 0) {
+              playgroundConfig.autoFocus = opts.playground.autoFocus;
+            }
+            if (opts.playground.autoResize !== void 0) {
+              playgroundConfig.autoResize = opts.playground.autoResize;
+            }
+          }
+          playgroundConfig.autoFocus = false;
+          ctx2.playground.registerLayer(PlaygroundLayer, opts.playground);
+          if (opts.layers) {
+            ctx2.playground.registerLayers(...opts.layers);
+          }
+          if (opts.onInit) opts.onInit(ctx2);
+        },
+        onReady(ctx2) {
+          if (opts.onReady) opts.onReady(ctx2);
+        },
+        onAllLayersRendered() {
+          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);
+        },
+        onDispose() {
+          if (opts.onDispose) opts.onDispose(ctx);
+        },
+        containerModules: opts.containerModules || []
+      })
+    );
+    if (opts.background || opts.background === void 0) {
+      plugins.push(createBackgroundPlugin(opts.background || {}));
+    }
+    return plugins;
+  };
+}
+
+// src/layers/playground-content-layer.tsx
+import React from "react";
+import { injectable } from "inversify";
+import { Layer } from "@flowgram.ai/core";
+import { domUtils } from "@flowgram.ai/utils";
+var PlaygroundContentLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass(
+      "gedit-playground-layer gedit-playground-content-layer"
+    );
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.node.style.left = "0px";
+    this.node.style.top = "0px";
+  }
+  updateOptions(opts) {
+    this.options = opts;
+    this.render();
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: this.options.className,
+        style: { position: "absolute", ...this.options.style }
+      },
+      this.options.children
+    );
+  }
+};
+PlaygroundContentLayer.type = "PlaygroundContentLayer";
+PlaygroundContentLayer = __decorateClass([
+  injectable()
+], PlaygroundContentLayer);
+
+// src/components/playground-react.tsx
+var PlaygroundReact = forwardRef(
+  function PlaygroundReact2(props, ref) {
+    const { parentContainer, children, ...others } = props;
+    const contentLoadPlugin = useMemo(
+      () => createPlaygroundPlugin2({
+        onInit(ctx) {
+          ctx.playground.registerLayer(PlaygroundContentLayer);
+        }
+      }),
+      []
+    );
+    const preset = useMemo(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);
+    return /* @__PURE__ */ React2.createElement(PlaygroundReactProvider, { ref, plugins: preset, parentContainer }, /* @__PURE__ */ React2.createElement(PlaygroundReactRenderer, null, children));
+  }
+);
+
+// src/components/playground-react-content.tsx
+import React3, { useMemo as useMemo2 } from "react";
+import { usePlayground as usePlayground2 } from "@flowgram.ai/core";
+var PlaygroundReactContent = (props) => {
+  const playground = usePlayground2();
+  useMemo2(() => {
+    const layer = playground.getLayer(PlaygroundContentLayer);
+    layer.updateOptions(props);
+  }, [props]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+};
+export {
+  Disposable,
+  Emitter,
+  Event,
+  PlaygroundReact,
+  PlaygroundReactContent,
+  createPlaygroundReactPreset,
+  usePlaygroundTools,
+  useRefresh
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/hooks/use-playground-tools.ts","../../src/components/playground-react.tsx","../../src/preset/playground-react-preset.ts","../../src/layers/playground-content-layer.tsx","../../src/components/playground-react-content.tsx"],"sourcesContent":["import 'reflect-metadata';\n\n/* 核心 模块导出 */\nexport { useRefresh, Emitter, Event, Disposable } from '@flowgram.ai/utils';\nexport * from '@flowgram.ai/core';\n\nexport { usePlaygroundTools } from './hooks';\nexport {\n  PlaygroundReact,\n  PlaygroundReactContent,\n  PlaygroundReactContentProps,\n  PlaygroundRef,\n} from './components';\nexport { PlaygroundReactProps, createPlaygroundReactPreset } from './preset';\n","import { useCallback, useEffect, useState } from 'react';\n\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram.ai/core';\nimport { DisposableCollection } from '@flowgram.ai/utils';\n\nexport interface PlaygroundToolsPropsType {\n  /**\n   * 最大缩放比，默认 2\n   */\n  maxZoom?: number;\n  /**\n   * 最小缩放比，默认 0.25\n   */\n  minZoom?: number;\n}\n\nexport interface PlaygroundTools {\n  /**\n   * 缩放 zoom 大小比例\n   */\n  zoom: number;\n  /**\n   * 放大\n   */\n  zoomin: (easing?: boolean) => void;\n  /**\n   * 缩小\n   */\n  zoomout: (easing?: boolean) => void;\n  /**\n   * 设置缩放比例\n   * @param zoom\n   */\n  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;\n  /**\n   * 当前的交互模式, 鼠标友好模式 和 触摸板模式\n   */\n  interactiveType: PlaygroundInteractiveType;\n  /**\n   * 切换交互模式\n   */\n  toggleIneractiveType: () => void;\n}\n\nexport function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {\n  const { maxZoom = 2, minZoom = 0.25 } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const [zoom, setZoom] = useState(1);\n\n  const handleZoomOut = useCallback(\n    (easing?: boolean) => {\n      if (zoom < minZoom) {\n        return;\n      }\n      playground.config.zoomout(easing);\n    },\n    [zoom, playground, minZoom],\n  );\n\n  const handleZoomIn = useCallback(\n    (easing?: boolean) => {\n      if (zoom > maxZoom) {\n        return;\n      }\n      playground.config.zoomin(easing);\n    },\n    [zoom, playground, maxZoom],\n  );\n\n  const handleUpdateZoom = useCallback(\n    (value: number, easing?: boolean, easingDuration?: number) => {\n      playground.config.updateZoom(value, easing, easingDuration);\n    },\n    [playground],\n  );\n\n  const handleToggleIneractiveType = useCallback(() => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  }, [editorState]);\n\n  useEffect(() => {\n    const dispose = new DisposableCollection();\n    dispose.push(playground.onZoom(z => setZoom(z)));\n    return () => dispose.dispose();\n  }, [playground]);\n\n  return {\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType: editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD',\n    toggleIneractiveType: handleToggleIneractiveType,\n  };\n}\n","import React, { useMemo, forwardRef } from 'react';\n\nimport {\n  createPlaygroundPlugin,\n  PlaygroundReactProvider,\n  PlaygroundReactRenderer,\n  PluginContext,\n} from '@flowgram.ai/core';\n\nimport { PlaygroundReactProps, createPlaygroundReactPreset } from '../preset';\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport type PlaygroundRef = PluginContext;\n\nexport const PlaygroundReact = forwardRef<PlaygroundRef, PlaygroundReactProps>(\n  function PlaygroundReact(props, ref) {\n    const { parentContainer, children, ...others } = props;\n    const contentLoadPlugin = useMemo(\n      () =>\n        createPlaygroundPlugin({\n          onInit(ctx) {\n            ctx.playground.registerLayer(PlaygroundContentLayer);\n          },\n        }),\n      [],\n    );\n    const preset = useMemo(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);\n    return (\n      <PlaygroundReactProvider ref={ref} plugins={preset} parentContainer={parentContainer}>\n        <PlaygroundReactRenderer>{children}</PlaygroundReactRenderer>\n      </PlaygroundReactProvider>\n    );\n  },\n);\n","import { createShortcutsPlugin } from '@flowgram.ai/shortcuts-plugin';\nimport {\n  PluginContext,\n  PluginsProvider,\n  Plugin,\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n} from '@flowgram.ai/core';\nimport { createBackgroundPlugin } from '@flowgram.ai/background-plugin';\n\nimport { PlaygroundReactProps } from './playground-react-props';\n\nexport function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundReactProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts) {\n      plugins.push(\n        createShortcutsPlugin({\n          registerShortcuts: (registry) => opts.shortcuts!(registry, ctx),\n        })\n      );\n    }\n    /**\n     * 注册三方插件\n     */\n    if (opts.plugins) {\n      plugins.push(...opts.plugins(ctx));\n    }\n    /**\n     * 画布生命周期注册\n     */\n    plugins.push(\n      createPlaygroundPlugin<CTX>({\n        onBind: (bindConfig) => {\n          opts.onBind?.(bindConfig);\n        },\n        onInit: (ctx) => {\n          const playgroundConfig = ctx.get<PlaygroundConfig>(PlaygroundConfig);\n          if (opts.playground) {\n            if (opts.playground.autoFocus !== undefined) {\n              playgroundConfig.autoFocus = opts.playground.autoFocus;\n            }\n            if (opts.playground.autoResize !== undefined) {\n              playgroundConfig.autoResize = opts.playground.autoResize;\n            }\n          }\n          playgroundConfig.autoFocus = false;\n          ctx.playground.registerLayer(PlaygroundLayer, opts.playground);\n          if (opts.layers) {\n            ctx.playground.registerLayers(...opts.layers);\n          }\n          if (opts.onInit) opts.onInit(ctx);\n        },\n        onReady(ctx) {\n          if (opts.onReady) opts.onReady(ctx);\n        },\n        onAllLayersRendered() {\n          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);\n        },\n        onDispose() {\n          if (opts.onDispose) opts.onDispose(ctx);\n        },\n        containerModules: opts.containerModules || [],\n      })\n    );\n\n    /**\n     * 注册背景 (放最后插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      plugins.push(createBackgroundPlugin(opts.background || {}));\n    }\n    return plugins;\n  };\n}\n","import React from 'react';\n\nimport { injectable } from 'inversify';\nimport { Layer } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nexport interface PlaygroundReactContentProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundReactContentProps> {\n  static type = 'PlaygroundContentLayer';\n\n  readonly node = domUtils.createDivWithClass(\n    'gedit-playground-layer gedit-playground-content-layer',\n  );\n\n  onZoom(scale: number): void {\n    this.node.style.transform = `scale(${scale})`;\n  }\n\n  onReady() {\n    this.node.style.left = '0px';\n    this.node.style.top = '0px';\n  }\n\n  updateOptions(opts: PlaygroundReactContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render(): JSX.Element {\n    return (\n      <div\n        className={this.options.className}\n        style={{ position: 'absolute', ...this.options.style }}\n      >\n        {this.options.children}\n      </div>\n    );\n  }\n}\n","import React, { useMemo } from 'react';\n\nimport { usePlayground } from '@flowgram.ai/core';\n\nimport {\n  PlaygroundContentLayer,\n  PlaygroundReactContentProps,\n} from '../layers/playground-content-layer';\n\nexport { PlaygroundReactContentProps };\n\nexport const PlaygroundReactContent: React.FC<PlaygroundReactContentProps> = props => {\n  const playground = usePlayground();\n  useMemo(() => {\n    const layer = playground.getLayer(PlaygroundContentLayer)!;\n    layer.updateOptions(props);\n  }, [props]);\n  return <></>;\n};\n"],"mappings":"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","names":["React","createPlaygroundPlugin","ctx","PlaygroundReact","createPlaygroundPlugin","React","React","useMemo","usePlayground","usePlayground","useMemo","React"]}

package/dist/index.d.mts

@@ -0,0 +1,120 @@
+export { Disposable, Emitter, Event, useRefresh } from '@flowgram.ai/utils';
+import { PlaygroundInteractiveType, PluginContext, PlaygroundLayerOptions, PluginBindConfig, Plugin, LayerRegistry, PluginsProvider } from '@flowgram.ai/core';
+export * from '@flowgram.ai/core';
+import React from 'react';
+import { interfaces } from 'inversify';
+import { ShortcutsRegistry } from '@flowgram.ai/shortcuts-plugin';
+import { BackgroundLayerOptions } from '@flowgram.ai/background-plugin';
+
+interface PlaygroundToolsPropsType {
+    /**
+     * 最大缩放比，默认 2
+     */
+    maxZoom?: number;
+    /**
+     * 最小缩放比，默认 0.25
+     */
+    minZoom?: number;
+}
+interface PlaygroundTools {
+    /**
+     * 缩放 zoom 大小比例
+     */
+    zoom: number;
+    /**
+     * 放大
+     */
+    zoomin: (easing?: boolean) => void;
+    /**
+     * 缩小
+     */
+    zoomout: (easing?: boolean) => void;
+    /**
+     * 设置缩放比例
+     * @param zoom
+     */
+    updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;
+    /**
+     * 当前的交互模式, 鼠标友好模式 和 触摸板模式
+     */
+    interactiveType: PlaygroundInteractiveType;
+    /**
+     * 切换交互模式
+     */
+    toggleIneractiveType: () => void;
+}
+declare function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools;
+
+/**
+ * 画布配置配置
+ */
+interface PlaygroundReactProps<CTX extends PluginContext = PluginContext> {
+    /**
+     * 背景开关，默认打开
+     */
+    background?: BackgroundLayerOptions | boolean;
+    /**
+     * 画布相关配置
+     */
+    playground?: PlaygroundLayerOptions & {
+        autoFocus?: boolean;
+        autoResize?: boolean;
+    };
+    /**
+     * 注册快捷键
+     */
+    shortcuts?: (shortcutsRegistry: ShortcutsRegistry, ctx: CTX) => void;
+    /**
+     * 插件 IOC 注册，等价于 containerModule
+     */
+    onBind?: (bindConfig: PluginBindConfig) => void;
+    /**
+     * 画布模块注册阶段
+     */
+    onInit?: (ctx: CTX) => void;
+    /**
+     * 画布事件注册阶段 (一般用于注册 dom 事件)
+     */
+    onReady?: (ctx: CTX) => void;
+    /**
+     * 画布所有 layer 第一次渲染完成后触发
+     */
+    onAllLayersRendered?: (ctx: CTX) => void;
+    /**
+     * 画布销毁阶段
+     */
+    onDispose?: (ctx: CTX) => void;
+    /**
+     * 插件扩展
+     * @param ctx
+     */
+    plugins?: (ctx: CTX) => Plugin[];
+    /**
+     * 注册 layer
+     */
+    layers?: LayerRegistry[];
+    /**
+     * IOC 模块，用于更底层的插件扩展
+     */
+    containerModules?: interfaces.ContainerModule[];
+    children?: React.ReactNode;
+    /**
+     * 父 IOC 容器
+     */
+    parentContainer?: interfaces.Container;
+}
+
+declare function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(opts: PlaygroundReactProps<CTX>, plugins?: Plugin[]): PluginsProvider<CTX>;
+
+type PlaygroundRef = PluginContext;
+declare const PlaygroundReact: React.ForwardRefExoticComponent<PlaygroundReactProps<PluginContext> & React.RefAttributes<PluginContext>>;
+
+interface PlaygroundReactContentProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const PlaygroundReactContent: React.FC<PlaygroundReactContentProps>;
+
+export { PlaygroundReact, PlaygroundReactContent, type PlaygroundReactContentProps, type PlaygroundReactProps, type PlaygroundRef, createPlaygroundReactPreset, usePlaygroundTools };

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+export { Disposable, Emitter, Event, useRefresh } from '@flowgram.ai/utils';
+import { PlaygroundInteractiveType, PluginContext, PlaygroundLayerOptions, PluginBindConfig, Plugin, LayerRegistry, PluginsProvider } from '@flowgram.ai/core';
+export * from '@flowgram.ai/core';
+import React from 'react';
+import { interfaces } from 'inversify';
+import { ShortcutsRegistry } from '@flowgram.ai/shortcuts-plugin';
+import { BackgroundLayerOptions } from '@flowgram.ai/background-plugin';
+
+interface PlaygroundToolsPropsType {
+    /**
+     * 最大缩放比，默认 2
+     */
+    maxZoom?: number;
+    /**
+     * 最小缩放比，默认 0.25
+     */
+    minZoom?: number;
+}
+interface PlaygroundTools {
+    /**
+     * 缩放 zoom 大小比例
+     */
+    zoom: number;
+    /**
+     * 放大
+     */
+    zoomin: (easing?: boolean) => void;
+    /**
+     * 缩小
+     */
+    zoomout: (easing?: boolean) => void;
+    /**
+     * 设置缩放比例
+     * @param zoom
+     */
+    updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;
+    /**
+     * 当前的交互模式, 鼠标友好模式 和 触摸板模式
+     */
+    interactiveType: PlaygroundInteractiveType;
+    /**
+     * 切换交互模式
+     */
+    toggleIneractiveType: () => void;
+}
+declare function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools;
+
+/**
+ * 画布配置配置
+ */
+interface PlaygroundReactProps<CTX extends PluginContext = PluginContext> {
+    /**
+     * 背景开关，默认打开
+     */
+    background?: BackgroundLayerOptions | boolean;
+    /**
+     * 画布相关配置
+     */
+    playground?: PlaygroundLayerOptions & {
+        autoFocus?: boolean;
+        autoResize?: boolean;
+    };
+    /**
+     * 注册快捷键
+     */
+    shortcuts?: (shortcutsRegistry: ShortcutsRegistry, ctx: CTX) => void;
+    /**
+     * 插件 IOC 注册，等价于 containerModule
+     */
+    onBind?: (bindConfig: PluginBindConfig) => void;
+    /**
+     * 画布模块注册阶段
+     */
+    onInit?: (ctx: CTX) => void;
+    /**
+     * 画布事件注册阶段 (一般用于注册 dom 事件)
+     */
+    onReady?: (ctx: CTX) => void;
+    /**
+     * 画布所有 layer 第一次渲染完成后触发
+     */
+    onAllLayersRendered?: (ctx: CTX) => void;
+    /**
+     * 画布销毁阶段
+     */
+    onDispose?: (ctx: CTX) => void;
+    /**
+     * 插件扩展
+     * @param ctx
+     */
+    plugins?: (ctx: CTX) => Plugin[];
+    /**
+     * 注册 layer
+     */
+    layers?: LayerRegistry[];
+    /**
+     * IOC 模块，用于更底层的插件扩展
+     */
+    containerModules?: interfaces.ContainerModule[];
+    children?: React.ReactNode;
+    /**
+     * 父 IOC 容器
+     */
+    parentContainer?: interfaces.Container;
+}
+
+declare function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(opts: PlaygroundReactProps<CTX>, plugins?: Plugin[]): PluginsProvider<CTX>;
+
+type PlaygroundRef = PluginContext;
+declare const PlaygroundReact: React.ForwardRefExoticComponent<PlaygroundReactProps<PluginContext> & React.RefAttributes<PluginContext>>;
+
+interface PlaygroundReactContentProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const PlaygroundReactContent: React.FC<PlaygroundReactContentProps>;
+
+export { PlaygroundReact, PlaygroundReactContent, type PlaygroundReactContentProps, type PlaygroundReactProps, type PlaygroundRef, createPlaygroundReactPreset, usePlaygroundTools };

package/dist/index.js

@@ -0,0 +1,252 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Disposable: () => import_utils3.Disposable,
+  Emitter: () => import_utils3.Emitter,
+  Event: () => import_utils3.Event,
+  PlaygroundReact: () => PlaygroundReact,
+  PlaygroundReactContent: () => PlaygroundReactContent,
+  createPlaygroundReactPreset: () => createPlaygroundReactPreset,
+  usePlaygroundTools: () => usePlaygroundTools,
+  useRefresh: () => import_utils3.useRefresh
+});
+module.exports = __toCommonJS(src_exports);
+var import_reflect_metadata = require("reflect-metadata");
+var import_utils3 = require("@flowgram.ai/utils");
+__reExport(src_exports, require("@flowgram.ai/core"), module.exports);
+
+// src/hooks/use-playground-tools.ts
+var import_react = require("react");
+var import_core = require("@flowgram.ai/core");
+var import_utils = require("@flowgram.ai/utils");
+function usePlaygroundTools(props) {
+  const { maxZoom = 2, minZoom = 0.25 } = props || {};
+  const playground = (0, import_core.usePlayground)();
+  const editorState = (0, import_core.useConfigEntity)(import_core.EditorStateConfigEntity, true);
+  const [zoom, setZoom] = (0, import_react.useState)(1);
+  const handleZoomOut = (0, import_react.useCallback)(
+    (easing) => {
+      if (zoom < minZoom) {
+        return;
+      }
+      playground.config.zoomout(easing);
+    },
+    [zoom, playground, minZoom]
+  );
+  const handleZoomIn = (0, import_react.useCallback)(
+    (easing) => {
+      if (zoom > maxZoom) {
+        return;
+      }
+      playground.config.zoomin(easing);
+    },
+    [zoom, playground, maxZoom]
+  );
+  const handleUpdateZoom = (0, import_react.useCallback)(
+    (value, easing, easingDuration) => {
+      playground.config.updateZoom(value, easing, easingDuration);
+    },
+    [playground]
+  );
+  const handleToggleIneractiveType = (0, import_react.useCallback)(() => {
+    if (editorState.isMouseFriendlyMode()) {
+      editorState.changeState(import_core.EditorState.STATE_SELECT.id);
+    } else {
+      editorState.changeState(import_core.EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);
+    }
+  }, [editorState]);
+  (0, import_react.useEffect)(() => {
+    const dispose = new import_utils.DisposableCollection();
+    dispose.push(playground.onZoom((z) => setZoom(z)));
+    return () => dispose.dispose();
+  }, [playground]);
+  return {
+    zoomin: handleZoomIn,
+    zoomout: handleZoomOut,
+    updateZoom: handleUpdateZoom,
+    zoom,
+    interactiveType: editorState.isMouseFriendlyMode() ? "MOUSE" : "PAD",
+    toggleIneractiveType: handleToggleIneractiveType
+  };
+}
+
+// src/components/playground-react.tsx
+var import_react3 = __toESM(require("react"));
+var import_core4 = require("@flowgram.ai/core");
+
+// src/preset/playground-react-preset.ts
+var import_shortcuts_plugin = require("@flowgram.ai/shortcuts-plugin");
+var import_core2 = require("@flowgram.ai/core");
+var import_background_plugin = require("@flowgram.ai/background-plugin");
+function createPlaygroundReactPreset(opts, plugins = []) {
+  return (ctx) => {
+    plugins = plugins.slice();
+    if (opts.shortcuts) {
+      plugins.push(
+        (0, import_shortcuts_plugin.createShortcutsPlugin)({
+          registerShortcuts: (registry) => opts.shortcuts(registry, ctx)
+        })
+      );
+    }
+    if (opts.plugins) {
+      plugins.push(...opts.plugins(ctx));
+    }
+    plugins.push(
+      (0, import_core2.createPlaygroundPlugin)({
+        onBind: (bindConfig) => {
+          opts.onBind?.(bindConfig);
+        },
+        onInit: (ctx2) => {
+          const playgroundConfig = ctx2.get(import_core2.PlaygroundConfig);
+          if (opts.playground) {
+            if (opts.playground.autoFocus !== void 0) {
+              playgroundConfig.autoFocus = opts.playground.autoFocus;
+            }
+            if (opts.playground.autoResize !== void 0) {
+              playgroundConfig.autoResize = opts.playground.autoResize;
+            }
+          }
+          playgroundConfig.autoFocus = false;
+          ctx2.playground.registerLayer(import_core2.PlaygroundLayer, opts.playground);
+          if (opts.layers) {
+            ctx2.playground.registerLayers(...opts.layers);
+          }
+          if (opts.onInit) opts.onInit(ctx2);
+        },
+        onReady(ctx2) {
+          if (opts.onReady) opts.onReady(ctx2);
+        },
+        onAllLayersRendered() {
+          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);
+        },
+        onDispose() {
+          if (opts.onDispose) opts.onDispose(ctx);
+        },
+        containerModules: opts.containerModules || []
+      })
+    );
+    if (opts.background || opts.background === void 0) {
+      plugins.push((0, import_background_plugin.createBackgroundPlugin)(opts.background || {}));
+    }
+    return plugins;
+  };
+}
+
+// src/layers/playground-content-layer.tsx
+var import_react2 = __toESM(require("react"));
+var import_inversify = require("inversify");
+var import_core3 = require("@flowgram.ai/core");
+var import_utils2 = require("@flowgram.ai/utils");
+var PlaygroundContentLayer = class extends import_core3.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils2.domUtils.createDivWithClass(
+      "gedit-playground-layer gedit-playground-content-layer"
+    );
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.node.style.left = "0px";
+    this.node.style.top = "0px";
+  }
+  updateOptions(opts) {
+    this.options = opts;
+    this.render();
+  }
+  render() {
+    return /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        className: this.options.className,
+        style: { position: "absolute", ...this.options.style }
+      },
+      this.options.children
+    );
+  }
+};
+PlaygroundContentLayer.type = "PlaygroundContentLayer";
+PlaygroundContentLayer = __decorateClass([
+  (0, import_inversify.injectable)()
+], PlaygroundContentLayer);
+
+// src/components/playground-react.tsx
+var PlaygroundReact = (0, import_react3.forwardRef)(
+  function PlaygroundReact2(props, ref) {
+    const { parentContainer, children, ...others } = props;
+    const contentLoadPlugin = (0, import_react3.useMemo)(
+      () => (0, import_core4.createPlaygroundPlugin)({
+        onInit(ctx) {
+          ctx.playground.registerLayer(PlaygroundContentLayer);
+        }
+      }),
+      []
+    );
+    const preset = (0, import_react3.useMemo)(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);
+    return /* @__PURE__ */ import_react3.default.createElement(import_core4.PlaygroundReactProvider, { ref, plugins: preset, parentContainer }, /* @__PURE__ */ import_react3.default.createElement(import_core4.PlaygroundReactRenderer, null, children));
+  }
+);
+
+// src/components/playground-react-content.tsx
+var import_react4 = __toESM(require("react"));
+var import_core5 = require("@flowgram.ai/core");
+var PlaygroundReactContent = (props) => {
+  const playground = (0, import_core5.usePlayground)();
+  (0, import_react4.useMemo)(() => {
+    const layer = playground.getLayer(PlaygroundContentLayer);
+    layer.updateOptions(props);
+  }, [props]);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Disposable,
+  Emitter,
+  Event,
+  PlaygroundReact,
+  PlaygroundReactContent,
+  createPlaygroundReactPreset,
+  usePlaygroundTools,
+  useRefresh,
+  ...require("@flowgram.ai/core")
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-playground-tools.ts","../src/components/playground-react.tsx","../src/preset/playground-react-preset.ts","../src/layers/playground-content-layer.tsx","../src/components/playground-react-content.tsx"],"sourcesContent":["import 'reflect-metadata';\n\n/* 核心 模块导出 */\nexport { useRefresh, Emitter, Event, Disposable } from '@flowgram.ai/utils';\nexport * from '@flowgram.ai/core';\n\nexport { usePlaygroundTools } from './hooks';\nexport {\n  PlaygroundReact,\n  PlaygroundReactContent,\n  PlaygroundReactContentProps,\n  PlaygroundRef,\n} from './components';\nexport { PlaygroundReactProps, createPlaygroundReactPreset } from './preset';\n","import { useCallback, useEffect, useState } from 'react';\n\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram.ai/core';\nimport { DisposableCollection } from '@flowgram.ai/utils';\n\nexport interface PlaygroundToolsPropsType {\n  /**\n   * 最大缩放比，默认 2\n   */\n  maxZoom?: number;\n  /**\n   * 最小缩放比，默认 0.25\n   */\n  minZoom?: number;\n}\n\nexport interface PlaygroundTools {\n  /**\n   * 缩放 zoom 大小比例\n   */\n  zoom: number;\n  /**\n   * 放大\n   */\n  zoomin: (easing?: boolean) => void;\n  /**\n   * 缩小\n   */\n  zoomout: (easing?: boolean) => void;\n  /**\n   * 设置缩放比例\n   * @param zoom\n   */\n  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;\n  /**\n   * 当前的交互模式, 鼠标友好模式 和 触摸板模式\n   */\n  interactiveType: PlaygroundInteractiveType;\n  /**\n   * 切换交互模式\n   */\n  toggleIneractiveType: () => void;\n}\n\nexport function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {\n  const { maxZoom = 2, minZoom = 0.25 } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const [zoom, setZoom] = useState(1);\n\n  const handleZoomOut = useCallback(\n    (easing?: boolean) => {\n      if (zoom < minZoom) {\n        return;\n      }\n      playground.config.zoomout(easing);\n    },\n    [zoom, playground, minZoom],\n  );\n\n  const handleZoomIn = useCallback(\n    (easing?: boolean) => {\n      if (zoom > maxZoom) {\n        return;\n      }\n      playground.config.zoomin(easing);\n    },\n    [zoom, playground, maxZoom],\n  );\n\n  const handleUpdateZoom = useCallback(\n    (value: number, easing?: boolean, easingDuration?: number) => {\n      playground.config.updateZoom(value, easing, easingDuration);\n    },\n    [playground],\n  );\n\n  const handleToggleIneractiveType = useCallback(() => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  }, [editorState]);\n\n  useEffect(() => {\n    const dispose = new DisposableCollection();\n    dispose.push(playground.onZoom(z => setZoom(z)));\n    return () => dispose.dispose();\n  }, [playground]);\n\n  return {\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType: editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD',\n    toggleIneractiveType: handleToggleIneractiveType,\n  };\n}\n","import React, { useMemo, forwardRef } from 'react';\n\nimport {\n  createPlaygroundPlugin,\n  PlaygroundReactProvider,\n  PlaygroundReactRenderer,\n  PluginContext,\n} from '@flowgram.ai/core';\n\nimport { PlaygroundReactProps, createPlaygroundReactPreset } from '../preset';\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport type PlaygroundRef = PluginContext;\n\nexport const PlaygroundReact = forwardRef<PlaygroundRef, PlaygroundReactProps>(\n  function PlaygroundReact(props, ref) {\n    const { parentContainer, children, ...others } = props;\n    const contentLoadPlugin = useMemo(\n      () =>\n        createPlaygroundPlugin({\n          onInit(ctx) {\n            ctx.playground.registerLayer(PlaygroundContentLayer);\n          },\n        }),\n      [],\n    );\n    const preset = useMemo(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);\n    return (\n      <PlaygroundReactProvider ref={ref} plugins={preset} parentContainer={parentContainer}>\n        <PlaygroundReactRenderer>{children}</PlaygroundReactRenderer>\n      </PlaygroundReactProvider>\n    );\n  },\n);\n","import { createShortcutsPlugin } from '@flowgram.ai/shortcuts-plugin';\nimport {\n  PluginContext,\n  PluginsProvider,\n  Plugin,\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n} from '@flowgram.ai/core';\nimport { createBackgroundPlugin } from '@flowgram.ai/background-plugin';\n\nimport { PlaygroundReactProps } from './playground-react-props';\n\nexport function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundReactProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts) {\n      plugins.push(\n        createShortcutsPlugin({\n          registerShortcuts: (registry) => opts.shortcuts!(registry, ctx),\n        })\n      );\n    }\n    /**\n     * 注册三方插件\n     */\n    if (opts.plugins) {\n      plugins.push(...opts.plugins(ctx));\n    }\n    /**\n     * 画布生命周期注册\n     */\n    plugins.push(\n      createPlaygroundPlugin<CTX>({\n        onBind: (bindConfig) => {\n          opts.onBind?.(bindConfig);\n        },\n        onInit: (ctx) => {\n          const playgroundConfig = ctx.get<PlaygroundConfig>(PlaygroundConfig);\n          if (opts.playground) {\n            if (opts.playground.autoFocus !== undefined) {\n              playgroundConfig.autoFocus = opts.playground.autoFocus;\n            }\n            if (opts.playground.autoResize !== undefined) {\n              playgroundConfig.autoResize = opts.playground.autoResize;\n            }\n          }\n          playgroundConfig.autoFocus = false;\n          ctx.playground.registerLayer(PlaygroundLayer, opts.playground);\n          if (opts.layers) {\n            ctx.playground.registerLayers(...opts.layers);\n          }\n          if (opts.onInit) opts.onInit(ctx);\n        },\n        onReady(ctx) {\n          if (opts.onReady) opts.onReady(ctx);\n        },\n        onAllLayersRendered() {\n          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);\n        },\n        onDispose() {\n          if (opts.onDispose) opts.onDispose(ctx);\n        },\n        containerModules: opts.containerModules || [],\n      })\n    );\n\n    /**\n     * 注册背景 (放最后插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      plugins.push(createBackgroundPlugin(opts.background || {}));\n    }\n    return plugins;\n  };\n}\n","import React from 'react';\n\nimport { injectable } from 'inversify';\nimport { Layer } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nexport interface PlaygroundReactContentProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundReactContentProps> {\n  static type = 'PlaygroundContentLayer';\n\n  readonly node = domUtils.createDivWithClass(\n    'gedit-playground-layer gedit-playground-content-layer',\n  );\n\n  onZoom(scale: number): void {\n    this.node.style.transform = `scale(${scale})`;\n  }\n\n  onReady() {\n    this.node.style.left = '0px';\n    this.node.style.top = '0px';\n  }\n\n  updateOptions(opts: PlaygroundReactContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render(): JSX.Element {\n    return (\n      <div\n        className={this.options.className}\n        style={{ position: 'absolute', ...this.options.style }}\n      >\n        {this.options.children}\n      </div>\n    );\n  }\n}\n","import React, { useMemo } from 'react';\n\nimport { usePlayground } from '@flowgram.ai/core';\n\nimport {\n  PlaygroundContentLayer,\n  PlaygroundReactContentProps,\n} from '../layers/playground-content-layer';\n\nexport { PlaygroundReactContentProps };\n\nexport const PlaygroundReactContent: React.FC<PlaygroundReactContentProps> = props => {\n  const playground = usePlayground();\n  useMemo(() => {\n    const layer = playground.getLayer(PlaygroundContentLayer)!;\n    layer.updateOptions(props);\n  }, [props]);\n  return <></>;\n};\n"],"mappings":"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","names":["import_utils","import_react","import_core","import_core","ctx","import_react","import_core","import_utils","React","PlaygroundReact","React","import_react","import_core","React"]}

package/index.css

@@ -0,0 +1,163 @@
+:root {
+  --g-selection-background: #4d53e8;
+  --g-editor-background: #f2f3f5;
+  --g-playground-select: var(--g-selection-background);
+  --g-playground-hover: var(--g-selection-background);
+  --g-playground-line: var(--g-selection-background);
+  --g-playground-blur: #999;
+  --g-playground-selectBox-outline: var(--g-selection-background);
+  --g-playground-selectBox-background: rgba(141, 144, 231, 0.1);
+  --g-playground-select-hover-background: rgba(77, 83, 232, 0.1);
+  --g-playground-select-control-size: 12px;
+}
+
+.gedit-playground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  overflow: hidden;
+  user-select: none;
+  outline: none;
+  box-sizing: border-box;
+  background-color: var(--g-editor-background);
+}
+
+.gedit-playground-scroll-right {
+  position: absolute;
+  right: 2px;
+  height: 100vh;
+  width: 7px;
+  z-index: 10;
+}
+
+.gedit-playground-scroll-bottom {
+  position: absolute;
+  bottom: 2px;
+  width: 100vw;
+  height: 7px;
+  z-index: 10;
+}
+
+.gedit-playground-scroll-right-block {
+  position: absolute;
+  opacity: 0.3;
+  border-radius: 3.5px;
+}
+
+.gedit-playground-scroll-right-block:hover {
+  opacity: 0.6;
+}
+
+.gedit-playground-scroll-bottom-block {
+  position: absolute;
+  opacity: 0.3;
+  border-radius: 3.5px;
+}
+
+.gedit-playground-scroll-bottom-block:hover {
+  opacity: 0.6;
+}
+
+.gedit-playground-scroll-hidden {
+  opacity: 0;
+}
+
+.gedit-playground * {
+  box-sizing: border-box;
+}
+
+.gedit-playground-loading {
+  position: absolute;
+  color: white;
+  left: 50%;
+  top: 50%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.8s;
+  flex-direction: column;
+  text-align: center;
+  opacity: 0.8;
+}
+
+.gedit-hidden {
+  display: none;
+}
+
+.gedit-playground-pipeline {
+  position: absolute;
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.gedit-playground-pipeline::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.gedit-playground-layer {
+  position: absolute;
+  overflow: visible;
+}
+
+.gedit-selector-box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: 33;
+  outline: 1px solid var(--g-playground-selectBox-outline);
+  background-color: var(--g-playground-selectBox-background);
+}
+
+.gedit-selector-box-block {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: 9999;
+  display: none;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.gedit-selector-bounds-background {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  outline: 1px solid var(--g-playground-selectBox-outline);
+  background-color: #f0f4ff;
+}
+
+.gedit-selector-bounds-foreground {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: 33;
+  background: rgba(255, 255, 255, 0);
+}
+
+.gedit-grid-svg {
+  display: block;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  width: 0;
+  height: 0;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@flowgram.ai/playground-react",
+  "version": "0.1.0",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/esm/index.js"
+    },
+    "./index.css": {
+      "import": "./index.css",
+      "require": "./index.css"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "index.css"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram.ai/background-plugin": "0.1.0",
+    "@flowgram.ai/core": "0.1.0",
+    "@flowgram.ai/utils": "0.1.0",
+    "@flowgram.ai/shortcuts-plugin": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/bezier-js": "4.1.3",
+    "@types/lodash": "^4.14.137",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/coverage-v8": "^0.32.0",
+    "eslint": "^8.54.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "tsup": "^8.0.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.34.6",
+    "@flowgram.ai/eslint-config": "0.1.0",
+    "@flowgram.ai/ts-config": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "npm run build:fast -- --dts-resolve",
+    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
+    "build:watch": "npm run build:fast -- --dts-resolve",
+    "clean": "rimraf dist",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "ts-check": "tsc --noEmit",
+    "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
+  }
+}