@flowgram-vue/playground-vue 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+Copyright (c) 2026 Crayon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/composables/use-playground-tools.ts","../src/layers/playground-content-layer.ts","../src/preset/playground-vue-preset.ts","../src/components/playground-vue.vue","../src/components/playground-vue-content.ts"],"names":["usePlayground","useConfigEntity","EditorStateConfigEntity","ref","EditorState","DisposableCollection","onBeforeUnmount","watch","computed","reactive","Layer","domUtils","h","injectable","backgroundPlugin","shortcutsPlugin","createPlaygroundPlugin","ctx","PlaygroundConfig","PlaygroundLayer","_createBlock","_createVNode","_withCtx","_renderSlot","defineComponent"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  type PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram-vue/core';\nimport { DisposableCollection } from '@flowgram-vue/utils';\nimport { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';\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   */\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, minZoom } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const zoom = ref(1);\n\n  const handleZoomOut = (easing?: boolean) => {\n    playground.config.zoomout(easing);\n  };\n\n  const handleZoomIn = (easing?: boolean) => {\n    playground.config.zoomin(easing);\n  };\n\n  const handleUpdateZoom = (value: number, easing?: boolean, easingDuration?: number) => {\n    playground.config.updateZoom(value, easing, easingDuration);\n  };\n\n  const handleToggleIneractiveType = () => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  };\n\n  const dispose = new DisposableCollection();\n  dispose.push(playground.onZoom((z) => (zoom.value = z)));\n  onBeforeUnmount(() => dispose.dispose());\n\n  watch(\n    () => [maxZoom, minZoom],\n    () => {\n      const config = playground.config.config;\n      playground.config.updateConfig({\n        maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,\n        minZoom: minZoom !== undefined ? minZoom : config.minZoom,\n      });\n    },\n    { immediate: true }\n  );\n\n  const interactiveType = computed<PlaygroundInteractiveType>(() =>\n    editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD'\n  );\n\n  return reactive({\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType,\n    toggleIneractiveType: handleToggleIneractiveType,\n  }) as PlaygroundTools;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Layer } from '@flowgram-vue/core';\nimport { domUtils } from '@flowgram-vue/utils';\nimport { injectable } from 'inversify';\nimport { h, type CSSProperties, type VNode } from 'vue';\n\nexport interface PlaygroundVueContentProps {\n  className?: string;\n  style?: CSSProperties;\n  children?: VNode | VNode[];\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundVueContentProps> {\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: PlaygroundVueContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render() {\n    return h(\n      'div',\n      {\n        class: this.options.className,\n        style: { position: 'absolute', ...this.options.style },\n      },\n      this.options.children\n    );\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as backgroundPlugin from '@flowgram-vue/background-plugin';\nimport {\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n  type Plugin,\n  type PluginContext,\n  type PluginsProvider,\n} from '@flowgram-vue/core';\nimport * as shortcutsPlugin from '@flowgram-vue/shortcuts-plugin';\n\nimport type {\n  BackgroundLayerOptions,\n  PlaygroundVueProps,\n  ShortcutsRegistry,\n} from './playground-vue-props';\n\ntype BackgroundPluginExports = {\n  createBackgroundPlugin?: (options: BackgroundLayerOptions) => Plugin;\n};\n\ntype ShortcutsPluginExports = {\n  createShortcutsPlugin?: (options: {\n    registerShortcuts: (registry: ShortcutsRegistry) => void;\n  }) => Plugin;\n};\n\nexport function createPlaygroundVuePreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundVueProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    const { createBackgroundPlugin } = backgroundPlugin as BackgroundPluginExports;\n    const { createShortcutsPlugin } = shortcutsPlugin as ShortcutsPluginExports;\n    /**\n     * 注册背景 (放前面插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n      if (typeof createBackgroundPlugin === 'function') {\n        plugins.push(createBackgroundPlugin(backgroundOptions));\n      }\n    }\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts && typeof createShortcutsPlugin === 'function') {\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    return plugins;\n  };\n}\n","<script setup lang=\"ts\">\n/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\nimport {\n  createPlaygroundPlugin,\n  PlaygroundVueProvider,\n  PlaygroundVueRenderer,\n  type PluginContext,\n} from '@flowgram-vue/core';\nimport { ref } from 'vue';\n\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\nimport { createPlaygroundVuePreset, type PlaygroundVueProps } from '../preset';\n\ndefineOptions({ name: 'PlaygroundVue' });\n\nconst props = defineProps<PlaygroundVueProps>();\n\nconst providerRef = ref<PluginContext | null>(null);\n\nconst contentLoadPlugin = createPlaygroundPlugin({\n  onInit(ctx) {\n    ctx.playground.registerLayer(PlaygroundContentLayer);\n  },\n});\n\nconst preset = createPlaygroundVuePreset(props, [contentLoadPlugin]);\n\ndefineExpose({\n  get playground() {\n    return providerRef.value?.playground as PluginContext['playground'];\n  },\n  get container() {\n    return providerRef.value?.container as PluginContext['container'];\n  },\n  get: ((identifier) => providerRef.value?.get(identifier)) as PluginContext['get'],\n  getAll: ((identifier) => providerRef.value?.getAll(identifier) ?? []) as PluginContext['getAll'],\n});\n</script>\n\n<template>\n  <PlaygroundVueProvider\n    ref=\"providerRef\"\n    :plugins=\"preset\"\n    :parent-container=\"props.parentContainer\"\n  >\n    <PlaygroundVueRenderer>\n      <slot />\n    </PlaygroundVueRenderer>\n  </PlaygroundVueProvider>\n</template>\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { usePlayground } from '@flowgram-vue/core';\nimport { defineComponent, type CSSProperties, type PropType } from 'vue';\n\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport const PlaygroundVueContent = defineComponent({\n  name: 'PlaygroundVueContent',\n  props: {\n    className: String,\n    style: Object as PropType<CSSProperties>,\n  },\n  setup(props, { slots }) {\n    const playground = usePlayground();\n    return () => {\n      const layer = playground.getLayer(PlaygroundContentLayer);\n      layer?.updateOptions({\n        className: props.className,\n        style: props.style,\n        children: slots.default?.(),\n      });\n      return null;\n    };\n  },\n});\n"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from '../src/index';

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/composables/use-playground-tools.ts","../src/layers/playground-content-layer.ts","../src/preset/playground-vue-preset.ts","../src/components/playground-vue.vue","../src/components/playground-vue-content.ts"],"names":["ctx","ref","createPlaygroundPlugin","_createBlock","_createVNode","_withCtx","_renderSlot","usePlayground"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  type PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram-vue/core';\nimport { DisposableCollection } from '@flowgram-vue/utils';\nimport { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';\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   */\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, minZoom } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const zoom = ref(1);\n\n  const handleZoomOut = (easing?: boolean) => {\n    playground.config.zoomout(easing);\n  };\n\n  const handleZoomIn = (easing?: boolean) => {\n    playground.config.zoomin(easing);\n  };\n\n  const handleUpdateZoom = (value: number, easing?: boolean, easingDuration?: number) => {\n    playground.config.updateZoom(value, easing, easingDuration);\n  };\n\n  const handleToggleIneractiveType = () => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  };\n\n  const dispose = new DisposableCollection();\n  dispose.push(playground.onZoom((z) => (zoom.value = z)));\n  onBeforeUnmount(() => dispose.dispose());\n\n  watch(\n    () => [maxZoom, minZoom],\n    () => {\n      const config = playground.config.config;\n      playground.config.updateConfig({\n        maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,\n        minZoom: minZoom !== undefined ? minZoom : config.minZoom,\n      });\n    },\n    { immediate: true }\n  );\n\n  const interactiveType = computed<PlaygroundInteractiveType>(() =>\n    editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD'\n  );\n\n  return reactive({\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType,\n    toggleIneractiveType: handleToggleIneractiveType,\n  }) as PlaygroundTools;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Layer } from '@flowgram-vue/core';\nimport { domUtils } from '@flowgram-vue/utils';\nimport { injectable } from 'inversify';\nimport { h, type CSSProperties, type VNode } from 'vue';\n\nexport interface PlaygroundVueContentProps {\n  className?: string;\n  style?: CSSProperties;\n  children?: VNode | VNode[];\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundVueContentProps> {\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: PlaygroundVueContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render() {\n    return h(\n      'div',\n      {\n        class: this.options.className,\n        style: { position: 'absolute', ...this.options.style },\n      },\n      this.options.children\n    );\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as backgroundPlugin from '@flowgram-vue/background-plugin';\nimport {\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n  type Plugin,\n  type PluginContext,\n  type PluginsProvider,\n} from '@flowgram-vue/core';\nimport * as shortcutsPlugin from '@flowgram-vue/shortcuts-plugin';\n\nimport type {\n  BackgroundLayerOptions,\n  PlaygroundVueProps,\n  ShortcutsRegistry,\n} from './playground-vue-props';\n\ntype BackgroundPluginExports = {\n  createBackgroundPlugin?: (options: BackgroundLayerOptions) => Plugin;\n};\n\ntype ShortcutsPluginExports = {\n  createShortcutsPlugin?: (options: {\n    registerShortcuts: (registry: ShortcutsRegistry) => void;\n  }) => Plugin;\n};\n\nexport function createPlaygroundVuePreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundVueProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    const { createBackgroundPlugin } = backgroundPlugin as BackgroundPluginExports;\n    const { createShortcutsPlugin } = shortcutsPlugin as ShortcutsPluginExports;\n    /**\n     * 注册背景 (放前面插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n      if (typeof createBackgroundPlugin === 'function') {\n        plugins.push(createBackgroundPlugin(backgroundOptions));\n      }\n    }\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts && typeof createShortcutsPlugin === 'function') {\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    return plugins;\n  };\n}\n","<script setup lang=\"ts\">\n/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\nimport {\n  createPlaygroundPlugin,\n  PlaygroundVueProvider,\n  PlaygroundVueRenderer,\n  type PluginContext,\n} from '@flowgram-vue/core';\nimport { ref } from 'vue';\n\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\nimport { createPlaygroundVuePreset, type PlaygroundVueProps } from '../preset';\n\ndefineOptions({ name: 'PlaygroundVue' });\n\nconst props = defineProps<PlaygroundVueProps>();\n\nconst providerRef = ref<PluginContext | null>(null);\n\nconst contentLoadPlugin = createPlaygroundPlugin({\n  onInit(ctx) {\n    ctx.playground.registerLayer(PlaygroundContentLayer);\n  },\n});\n\nconst preset = createPlaygroundVuePreset(props, [contentLoadPlugin]);\n\ndefineExpose({\n  get playground() {\n    return providerRef.value?.playground as PluginContext['playground'];\n  },\n  get container() {\n    return providerRef.value?.container as PluginContext['container'];\n  },\n  get: ((identifier) => providerRef.value?.get(identifier)) as PluginContext['get'],\n  getAll: ((identifier) => providerRef.value?.getAll(identifier) ?? []) as PluginContext['getAll'],\n});\n</script>\n\n<template>\n  <PlaygroundVueProvider\n    ref=\"providerRef\"\n    :plugins=\"preset\"\n    :parent-container=\"props.parentContainer\"\n  >\n    <PlaygroundVueRenderer>\n      <slot />\n    </PlaygroundVueRenderer>\n  </PlaygroundVueProvider>\n</template>\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { usePlayground } from '@flowgram-vue/core';\nimport { defineComponent, type CSSProperties, type PropType } from 'vue';\n\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport const PlaygroundVueContent = defineComponent({\n  name: 'PlaygroundVueContent',\n  props: {\n    className: String,\n    style: Object as PropType<CSSProperties>,\n  },\n  setup(props, { slots }) {\n    const playground = usePlayground();\n    return () => {\n      const layer = playground.getLayer(PlaygroundContentLayer);\n      layer?.updateOptions({\n        className: props.className,\n        style: props.style,\n        children: slots.default?.(),\n      });\n      return null;\n    };\n  },\n});\n"]}

package/index.css

@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+: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,63 @@
+{
+  "name": "@flowgram-vue/playground-vue",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "description": "Vue Playground mount for FlowGram (port of playground-react).",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./index.css": "./index.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "index.css"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/background-plugin": "0.2.0",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0",
+    "@flowgram-vue/shortcuts-plugin": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { PluginContext } from '@flowgram-vue/core';
+
+export { default as PlaygroundVue } from './playground-vue.vue';
+export { PlaygroundVueContent } from './playground-vue-content';
+export type { PlaygroundVueContentProps } from '../layers/playground-content-layer';
+
+export type PlaygroundRef = PluginContext;

package/src/components/playground-vue-content.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { usePlayground } from '@flowgram-vue/core';
+import { defineComponent, type CSSProperties, type PropType } from 'vue';
+
+import { PlaygroundContentLayer } from '../layers/playground-content-layer';
+
+export const PlaygroundVueContent = defineComponent({
+  name: 'PlaygroundVueContent',
+  props: {
+    className: String,
+    style: Object as PropType<CSSProperties>,
+  },
+  setup(props, { slots }) {
+    const playground = usePlayground();
+    return () => {
+      const layer = playground.getLayer(PlaygroundContentLayer);
+      layer?.updateOptions({
+        className: props.className,
+        style: props.style,
+        children: slots.default?.(),
+      });
+      return null;
+    };
+  },
+});

package/src/components/playground-vue.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  createPlaygroundPlugin,
+  PlaygroundVueProvider,
+  PlaygroundVueRenderer,
+  type PluginContext,
+} from '@flowgram-vue/core';
+import { ref } from 'vue';
+
+import { PlaygroundContentLayer } from '../layers/playground-content-layer';
+import { createPlaygroundVuePreset, type PlaygroundVueProps } from '../preset';
+
+defineOptions({ name: 'PlaygroundVue' });
+
+const props = defineProps<PlaygroundVueProps>();
+
+const providerRef = ref<PluginContext | null>(null);
+
+const contentLoadPlugin = createPlaygroundPlugin({
+  onInit(ctx) {
+    ctx.playground.registerLayer(PlaygroundContentLayer);
+  },
+});
+
+const preset = createPlaygroundVuePreset(props, [contentLoadPlugin]);
+
+defineExpose({
+  get playground() {
+    return providerRef.value?.playground as PluginContext['playground'];
+  },
+  get container() {
+    return providerRef.value?.container as PluginContext['container'];
+  },
+  get: ((identifier) => providerRef.value?.get(identifier)) as PluginContext['get'],
+  getAll: ((identifier) => providerRef.value?.getAll(identifier) ?? []) as PluginContext['getAll'],
+});
+</script>
+
+<template>
+  <PlaygroundVueProvider
+    ref="providerRef"
+    :plugins="preset"
+    :parent-container="props.parentContainer"
+  >
+    <PlaygroundVueRenderer>
+      <slot />
+    </PlaygroundVueRenderer>
+  </PlaygroundVueProvider>
+</template>

package/src/composables/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { usePlaygroundTools } from './use-playground-tools';
+export type { PlaygroundTools, PlaygroundToolsPropsType } from './use-playground-tools';

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  type PlaygroundInteractiveType,
+  useConfigEntity,
+  usePlayground,
+} from '@flowgram-vue/core';
+import { DisposableCollection } from '@flowgram-vue/utils';
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
+
+export interface PlaygroundToolsPropsType {
+  /**
+   * 最大缩放比，默认 2
+   */
+  maxZoom?: number;
+  /**
+   * 最小缩放比，默认 0.25
+   */
+  minZoom?: number;
+}
+
+export interface PlaygroundTools {
+  /**
+   * 缩放 zoom 大小比例
+   */
+  zoom: number;
+  /**
+   * 放大
+   */
+  zoomin: (easing?: boolean) => void;
+  /**
+   * 缩小
+   */
+  zoomout: (easing?: boolean) => void;
+  /**
+   * 设置缩放比例
+   */
+  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;
+  /**
+   * 当前的交互模式, 鼠标友好模式 和 触摸板模式
+   */
+  interactiveType: PlaygroundInteractiveType;
+  /**
+   * 切换交互模式
+   */
+  toggleIneractiveType: () => void;
+}
+
+export function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {
+  const { maxZoom, minZoom } = props || {};
+  const playground = usePlayground();
+  const editorState = useConfigEntity(EditorStateConfigEntity, true);
+
+  const zoom = ref(1);
+
+  const handleZoomOut = (easing?: boolean) => {
+    playground.config.zoomout(easing);
+  };
+
+  const handleZoomIn = (easing?: boolean) => {
+    playground.config.zoomin(easing);
+  };
+
+  const handleUpdateZoom = (value: number, easing?: boolean, easingDuration?: number) => {
+    playground.config.updateZoom(value, easing, easingDuration);
+  };
+
+  const handleToggleIneractiveType = () => {
+    if (editorState.isMouseFriendlyMode()) {
+      editorState.changeState(EditorState.STATE_SELECT.id);
+    } else {
+      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);
+    }
+  };
+
+  const dispose = new DisposableCollection();
+  dispose.push(playground.onZoom((z) => (zoom.value = z)));
+  onBeforeUnmount(() => dispose.dispose());
+
+  watch(
+    () => [maxZoom, minZoom],
+    () => {
+      const config = playground.config.config;
+      playground.config.updateConfig({
+        maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,
+        minZoom: minZoom !== undefined ? minZoom : config.minZoom,
+      });
+    },
+    { immediate: true }
+  );
+
+  const interactiveType = computed<PlaygroundInteractiveType>(() =>
+    editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD'
+  );
+
+  return reactive({
+    zoomin: handleZoomIn,
+    zoomout: handleZoomOut,
+    updateZoom: handleUpdateZoom,
+    zoom,
+    interactiveType,
+    toggleIneractiveType: handleToggleIneractiveType,
+  }) as PlaygroundTools;
+}

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,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import 'reflect-metadata';
+
+/* 核心 模块导出 */
+export { useRefresh, Emitter, Event, Disposable } from '@flowgram-vue/utils';
+export * from '@flowgram-vue/core';
+
+export { usePlaygroundTools } from './composables';
+export type { PlaygroundTools, PlaygroundToolsPropsType } from './composables';
+export {
+  PlaygroundVue,
+  PlaygroundVueContent,
+  type PlaygroundVueContentProps,
+  type PlaygroundRef,
+} from './components';
+export {
+  createPlaygroundVuePreset,
+  type PlaygroundVueProps,
+  type BackgroundLayerOptions,
+  type ShortcutsRegistry,
+} from './preset';

package/src/layers/playground-content-layer.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Layer } from '@flowgram-vue/core';
+import { domUtils } from '@flowgram-vue/utils';
+import { injectable } from 'inversify';
+import { h, type CSSProperties, type VNode } from 'vue';
+
+export interface PlaygroundVueContentProps {
+  className?: string;
+  style?: CSSProperties;
+  children?: VNode | VNode[];
+}
+
+@injectable()
+export class PlaygroundContentLayer extends Layer<PlaygroundVueContentProps> {
+  static type = 'PlaygroundContentLayer';
+
+  readonly node = domUtils.createDivWithClass(
+    'gedit-playground-layer gedit-playground-content-layer'
+  );
+
+  onZoom(scale: number): void {
+    this.node.style.transform = `scale(${scale})`;
+  }
+
+  onReady() {
+    this.node.style.left = '0px';
+    this.node.style.top = '0px';
+  }
+
+  updateOptions(opts: PlaygroundVueContentProps) {
+    this.options = opts;
+    this.render();
+  }
+
+  render() {
+    return h(
+      'div',
+      {
+        class: this.options.className,
+        style: { position: 'absolute', ...this.options.style },
+      },
+      this.options.children
+    );
+  }
+}

package/src/preset/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createPlaygroundVuePreset } from './playground-vue-preset';
+export type {
+  BackgroundLayerOptions,
+  PlaygroundVueProps,
+  ShortcutsRegistry,
+} from './playground-vue-props';

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

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import * as backgroundPlugin from '@flowgram-vue/background-plugin';
+import {
+  createPlaygroundPlugin,
+  PlaygroundConfig,
+  PlaygroundLayer,
+  type Plugin,
+  type PluginContext,
+  type PluginsProvider,
+} from '@flowgram-vue/core';
+import * as shortcutsPlugin from '@flowgram-vue/shortcuts-plugin';
+
+import type {
+  BackgroundLayerOptions,
+  PlaygroundVueProps,
+  ShortcutsRegistry,
+} from './playground-vue-props';
+
+type BackgroundPluginExports = {
+  createBackgroundPlugin?: (options: BackgroundLayerOptions) => Plugin;
+};
+
+type ShortcutsPluginExports = {
+  createShortcutsPlugin?: (options: {
+    registerShortcuts: (registry: ShortcutsRegistry) => void;
+  }) => Plugin;
+};
+
+export function createPlaygroundVuePreset<CTX extends PluginContext = PluginContext>(
+  opts: PlaygroundVueProps<CTX>,
+  plugins: Plugin[] = []
+): PluginsProvider<CTX> {
+  return (ctx: CTX) => {
+    plugins = plugins.slice();
+    const { createBackgroundPlugin } = backgroundPlugin as BackgroundPluginExports;
+    const { createShortcutsPlugin } = shortcutsPlugin as ShortcutsPluginExports;
+    /**
+     * 注册背景 (放前面插入), 默认打开
+     */
+    if (opts.background || opts.background === undefined) {
+      const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};
+      if (typeof createBackgroundPlugin === 'function') {
+        plugins.push(createBackgroundPlugin(backgroundOptions));
+      }
+    }
+    /**
+     * 注册快捷键
+     */
+    if (opts.shortcuts && typeof createShortcutsPlugin === 'function') {
+      plugins.push(
+        createShortcutsPlugin({
+          registerShortcuts: (registry) => opts.shortcuts!(registry, ctx),
+        })
+      );
+    }
+    /**
+     * 注册三方插件
+     */
+    if (opts.plugins) {
+      plugins.push(...opts.plugins(ctx));
+    }
+    /**
+     * 画布生命周期注册
+     */
+    plugins.push(
+      createPlaygroundPlugin<CTX>({
+        onBind: (bindConfig) => {
+          opts.onBind?.(bindConfig);
+        },
+        onInit: (ctx) => {
+          const playgroundConfig = ctx.get<PlaygroundConfig>(PlaygroundConfig);
+          if (opts.playground) {
+            if (opts.playground.autoFocus !== undefined) {
+              playgroundConfig.autoFocus = opts.playground.autoFocus;
+            }
+            if (opts.playground.autoResize !== undefined) {
+              playgroundConfig.autoResize = opts.playground.autoResize;
+            }
+          }
+          playgroundConfig.autoFocus = false;
+          ctx.playground.registerLayer(PlaygroundLayer, opts.playground);
+          if (opts.layers) {
+            ctx.playground.registerLayers(...opts.layers);
+          }
+          if (opts.onInit) opts.onInit(ctx);
+        },
+        onReady(ctx) {
+          if (opts.onReady) opts.onReady(ctx);
+        },
+        onAllLayersRendered() {
+          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);
+        },
+        onDispose() {
+          if (opts.onDispose) opts.onDispose(ctx);
+        },
+        containerModules: opts.containerModules || [],
+      })
+    );
+    return plugins;
+  };
+}

package/src/preset/playground-vue-props.ts

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type {
+  LayerRegistry,
+  PlaygroundLayerOptions,
+  Plugin,
+  PluginBindConfig,
+  PluginContext,
+} from '@flowgram-vue/core';
+import type { interfaces } from 'inversify';
+import type { VNodeChild } from 'vue';
+
+/**
+ * Background options aligned with `@flowgram-vue/background-plugin`.
+ * Inlined until Wave 4 ships the plugin (Wave 0 stub has no named exports).
+ */
+export interface BackgroundLayerOptions {
+  gridSize?: number;
+  dotSize?: number;
+  dotColor?: string;
+  dotOpacity?: number;
+  backgroundColor?: string;
+  dotFillColor?: string;
+  logo?: {
+    text?: string;
+    imageUrl?: string;
+    position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'small' | 'medium' | 'large' | number;
+    opacity?: number;
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold' | 'lighter' | number;
+    offset?: { x: number; y: number };
+    neumorphism?: {
+      enabled?: boolean;
+      textColor?: string;
+      lightShadowColor?: string;
+      darkShadowColor?: string;
+      shadowOffset?: number;
+      shadowBlur?: number;
+      intensity?: number;
+      raised?: boolean;
+    };
+  };
+}
+
+/**
+ * Shortcuts registry aligned with `@flowgram-vue/shortcuts-plugin`.
+ * Inlined until Wave 4 ships the plugin (Wave 0 stub has no named exports).
+ */
+export interface ShortcutsRegistry {
+  shortcutsHandlers: unknown[];
+  addHandlers(...handlers: unknown[]): void;
+  addHandlersIfNotFound(...handlers: unknown[]): void;
+  removeHandler(commandId: string): void;
+  has(commandId: string): boolean;
+}
+
+/**
+ * 画布配置
+ */
+export interface PlaygroundVueProps<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;
+  /**
+   * 插件扩展
+   */
+  plugins?: (ctx: CTX) => Plugin[];
+  /**
+   * 注册 layer
+   */
+  layers?: LayerRegistry[];
+  /**
+   * IOC 模块，用于更底层的插件扩展
+   */
+  containerModules?: interfaces.ContainerModule[];
+  /**
+   * 内容 slot（React 版的 children）。组件上请用默认插槽。
+   */
+  children?: VNodeChild;
+  /**
+   * 父 IOC 容器
+   */
+  parentContainer?: interfaces.Container;
+}