@flowgram.ai/playground-react 0.1.0-alpha.2 → 0.1.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/esm/index.js +15 -13
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +30 -0
  4. package/dist/index.d.ts +30 -0
  5. package/dist/index.js +19 -17
  6. package/dist/index.js.map +1 -1
  7. package/index.css +5 -0
  8. package/package.json +13 -13
package/dist/esm/index.js CHANGED
@@ -16,35 +16,29 @@ export * from "@flowgram.ai/core";
16
16
 
17
17
  // src/hooks/use-playground-tools.ts
18
18
  import { useCallback, useEffect, useState } from "react";
19
+ import { DisposableCollection } from "@flowgram.ai/utils";
19
20
  import {
20
21
  EditorState,
21
22
  EditorStateConfigEntity,
22
23
  useConfigEntity,
23
24
  usePlayground
24
25
  } from "@flowgram.ai/core";
25
- import { DisposableCollection } from "@flowgram.ai/utils";
26
26
  function usePlaygroundTools(props) {
27
- const { maxZoom = 2, minZoom = 0.25 } = props || {};
27
+ const { maxZoom, minZoom } = props || {};
28
28
  const playground = usePlayground();
29
29
  const editorState = useConfigEntity(EditorStateConfigEntity, true);
30
30
  const [zoom, setZoom] = useState(1);
31
31
  const handleZoomOut = useCallback(
32
32
  (easing) => {
33
- if (zoom < minZoom) {
34
- return;
35
- }
36
33
  playground.config.zoomout(easing);
37
34
  },
38
- [zoom, playground, minZoom]
35
+ [playground]
39
36
  );
40
37
  const handleZoomIn = useCallback(
41
38
  (easing) => {
42
- if (zoom > maxZoom) {
43
- return;
44
- }
45
39
  playground.config.zoomin(easing);
46
40
  },
47
- [zoom, playground, maxZoom]
41
+ [playground]
48
42
  );
49
43
  const handleUpdateZoom = useCallback(
50
44
  (value, easing, easingDuration) => {
@@ -64,6 +58,13 @@ function usePlaygroundTools(props) {
64
58
  dispose.push(playground.onZoom((z) => setZoom(z)));
65
59
  return () => dispose.dispose();
66
60
  }, [playground]);
61
+ useEffect(() => {
62
+ const config = playground.config.config;
63
+ playground.config.updateConfig({
64
+ maxZoom: maxZoom !== void 0 ? maxZoom : config.maxZoom,
65
+ minZoom: minZoom !== void 0 ? minZoom : config.minZoom
66
+ });
67
+ }, [playground, maxZoom, minZoom]);
67
68
  return {
68
69
  zoomin: handleZoomIn,
69
70
  zoomout: handleZoomOut,
@@ -93,6 +94,10 @@ import { createBackgroundPlugin } from "@flowgram.ai/background-plugin";
93
94
  function createPlaygroundReactPreset(opts, plugins = []) {
94
95
  return (ctx) => {
95
96
  plugins = plugins.slice();
97
+ if (opts.background || opts.background === void 0) {
98
+ const backgroundOptions = typeof opts.background === "object" ? opts.background : {};
99
+ plugins.push(createBackgroundPlugin(backgroundOptions));
100
+ }
96
101
  if (opts.shortcuts) {
97
102
  plugins.push(
98
103
  createShortcutsPlugin({
@@ -137,9 +142,6 @@ function createPlaygroundReactPreset(opts, plugins = []) {
137
142
  containerModules: opts.containerModules || []
138
143
  })
139
144
  );
140
- if (opts.background || opts.background === void 0) {
141
- plugins.push(createBackgroundPlugin(opts.background || {}));
142
- }
143
145
  return plugins;
144
146
  };
145
147
  }
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
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"]}
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":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport '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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { DisposableCollection } from '@flowgram.ai/utils';\nimport {\n EditorState,\n EditorStateConfigEntity,\n PlaygroundInteractiveType,\n useConfigEntity,\n usePlayground,\n} from '@flowgram.ai/core';\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, minZoom } = 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 playground.config.zoomout(easing);\n },\n [playground]\n );\n\n const handleZoomIn = useCallback(\n (easing?: boolean) => {\n playground.config.zoomin(easing);\n },\n [playground]\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 useEffect(() => {\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 }, [playground, maxZoom, minZoom]);\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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { 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.background || opts.background === undefined) {\n const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n plugins.push(createBackgroundPlugin(backgroundOptions));\n }\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 return plugins;\n };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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":";;;;;;;;;;;;AAKA,OAAO;AAGP,SAAS,YAAY,SAAS,OAAO,kBAAkB;AACvD,cAAc;;;ACJd,SAAS,aAAa,WAAW,gBAAgB;AAEjD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAyCA,SAAS,mBAAmB,OAAmD;AACpF,QAAM,EAAE,SAAS,QAAQ,IAAI,SAAS,CAAC;AACvC,QAAM,aAAa,cAAc;AACjC,QAAM,cAAc,gBAAgB,yBAAyB,IAAI;AAEjE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAElC,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAqB;AACpB,iBAAW,OAAO,QAAQ,MAAM;AAAA,IAClC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,WAAqB;AACpB,iBAAW,OAAO,OAAO,MAAM;AAAA,IACjC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,OAAe,QAAkB,mBAA4B;AAC5D,iBAAW,OAAO,WAAW,OAAO,QAAQ,cAAc;AAAA,IAC5D;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,6BAA6B,YAAY,MAAM;AACnD,QAAI,YAAY,oBAAoB,GAAG;AACrC,kBAAY,YAAY,YAAY,aAAa,EAAE;AAAA,IACrD,OAAO;AACL,kBAAY,YAAY,YAAY,4BAA4B,EAAE;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,UAAM,UAAU,IAAI,qBAAqB;AACzC,YAAQ,KAAK,WAAW,OAAO,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC;AACjD,WAAO,MAAM,QAAQ,QAAQ;AAAA,EAC/B,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,SAAS,WAAW,OAAO;AACjC,eAAW,OAAO,aAAa;AAAA,MAC7B,SAAS,YAAY,SAAY,UAAU,OAAO;AAAA,MAClD,SAAS,YAAY,SAAY,UAAU,OAAO;AAAA,IACpD,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,SAAS,OAAO,CAAC;AAEjC,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA,iBAAiB,YAAY,oBAAoB,IAAI,UAAU;AAAA,IAC/D,sBAAsB;AAAA,EACxB;AACF;;;AC5GA,OAAOA,UAAS,SAAS,kBAAkB;AAE3C;AAAA,EACE,0BAAAC;AAAA,EACA;AAAA,EACA;AAAA,OAEK;;;ACPP,SAAS,6BAA6B;AACtC;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AAIhC,SAAS,4BACd,MACA,UAAoB,CAAC,GACC;AACtB,SAAO,CAAC,QAAa;AACnB,cAAU,QAAQ,MAAM;AAIxB,QAAI,KAAK,cAAc,KAAK,eAAe,QAAW;AACpD,YAAM,oBAAoB,OAAO,KAAK,eAAe,WAAW,KAAK,aAAa,CAAC;AACnF,cAAQ,KAAK,uBAAuB,iBAAiB,CAAC;AAAA,IACxD;AAIA,QAAI,KAAK,WAAW;AAClB,cAAQ;AAAA,QACN,sBAAsB;AAAA,UACpB,mBAAmB,CAAC,aAAa,KAAK,UAAW,UAAU,GAAG;AAAA,QAChE,CAAC;AAAA,MACH;AAAA,IACF;AAIA,QAAI,KAAK,SAAS;AAChB,cAAQ,KAAK,GAAG,KAAK,QAAQ,GAAG,CAAC;AAAA,IACnC;AAIA,YAAQ;AAAA,MACN,uBAA4B;AAAA,QAC1B,QAAQ,CAAC,eAAe;AACtB,eAAK,SAAS,UAAU;AAAA,QAC1B;AAAA,QACA,QAAQ,CAACC,SAAQ;AACf,gBAAM,mBAAmBA,KAAI,IAAsB,gBAAgB;AACnE,cAAI,KAAK,YAAY;AACnB,gBAAI,KAAK,WAAW,cAAc,QAAW;AAC3C,+BAAiB,YAAY,KAAK,WAAW;AAAA,YAC/C;AACA,gBAAI,KAAK,WAAW,eAAe,QAAW;AAC5C,+BAAiB,aAAa,KAAK,WAAW;AAAA,YAChD;AAAA,UACF;AACA,2BAAiB,YAAY;AAC7B,UAAAA,KAAI,WAAW,cAAc,iBAAiB,KAAK,UAAU;AAC7D,cAAI,KAAK,QAAQ;AACf,YAAAA,KAAI,WAAW,eAAe,GAAG,KAAK,MAAM;AAAA,UAC9C;AACA,cAAI,KAAK,OAAQ,MAAK,OAAOA,IAAG;AAAA,QAClC;AAAA,QACA,QAAQA,MAAK;AACX,cAAI,KAAK,QAAS,MAAK,QAAQA,IAAG;AAAA,QACpC;AAAA,QACA,sBAAsB;AACpB,cAAI,KAAK,oBAAqB,MAAK,oBAAoB,GAAG;AAAA,QAC5D;AAAA,QACA,YAAY;AACV,cAAI,KAAK,UAAW,MAAK,UAAU,GAAG;AAAA,QACxC;AAAA,QACA,kBAAkB,KAAK,oBAAoB,CAAC;AAAA,MAC9C,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT;AACF;;;ACjFA,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AASlB,IAAM,yBAAN,cAAqC,MAAmC;AAAA,EAAxE;AAAA;AAGL,SAAS,OAAO,SAAS;AAAA,MACvB;AAAA,IACF;AAAA;AAAA,EAEA,OAAO,OAAqB;AAC1B,SAAK,KAAK,MAAM,YAAY,SAAS,KAAK;AAAA,EAC5C;AAAA,EAEA,UAAU;AACR,SAAK,KAAK,MAAM,OAAO;AACvB,SAAK,KAAK,MAAM,MAAM;AAAA,EACxB;AAAA,EAEA,cAAc,MAAmC;AAC/C,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,SAAsB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,QAAQ;AAAA,QACxB,OAAO,EAAE,UAAU,YAAY,GAAG,KAAK,QAAQ,MAAM;AAAA;AAAA,MAEpD,KAAK,QAAQ;AAAA,IAChB;AAAA,EAEJ;AACF;AA/Ba,uBACJ,OAAO;AADH,yBAAN;AAAA,EADN,WAAW;AAAA,GACC;;;AFCN,IAAM,kBAAkB;AAAA,EAC7B,SAASC,iBAAgB,OAAO,KAAK;AACnC,UAAM,EAAE,iBAAiB,UAAU,GAAG,OAAO,IAAI;AACjD,UAAM,oBAAoB;AAAA,MACxB,MACEC,wBAAuB;AAAA,QACrB,OAAO,KAAK;AACV,cAAI,WAAW,cAAc,sBAAsB;AAAA,QACrD;AAAA,MACF,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AACA,UAAM,SAAS,QAAQ,MAAM,4BAA4B,QAAQ,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;AACzF,WACE,gBAAAC,OAAA,cAAC,2BAAwB,KAAU,SAAS,QAAQ,mBAClD,gBAAAA,OAAA,cAAC,+BAAyB,QAAS,CACrC;AAAA,EAEJ;AACF;;;AGjCA,OAAOC,UAAS,WAAAC,gBAAe;AAE/B,SAAS,iBAAAC,sBAAqB;AASvB,IAAM,yBAAgE,WAAS;AACpF,QAAM,aAAaC,eAAc;AACjC,EAAAC,SAAQ,MAAM;AACZ,UAAM,QAAQ,WAAW,SAAS,sBAAsB;AACxD,UAAM,cAAc,KAAK;AAAA,EAC3B,GAAG,CAAC,KAAK,CAAC;AACV,SAAO,gBAAAC,OAAA,cAAAA,OAAA,cAAE;AACX;","names":["React","createPlaygroundPlugin","ctx","PlaygroundReact","createPlaygroundPlugin","React","React","useMemo","usePlayground","usePlayground","useMemo","React"]}
package/dist/index.d.mts CHANGED
@@ -6,6 +6,11 @@ import { interfaces } from 'inversify';
6
6
  import { ShortcutsRegistry } from '@flowgram.ai/shortcuts-plugin';
7
7
  import { BackgroundLayerOptions } from '@flowgram.ai/background-plugin';
8
8
 
9
+ /**
10
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
11
+ * SPDX-License-Identifier: MIT
12
+ */
13
+
9
14
  interface PlaygroundToolsPropsType {
10
15
  /**
11
16
  * 最大缩放比，默认 2
@@ -45,6 +50,11 @@ interface PlaygroundTools {
45
50
  }
46
51
  declare function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools;
47
52
 
53
+ /**
54
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
55
+ * SPDX-License-Identifier: MIT
56
+ */
57
+
48
58
  /**
49
59
  * 画布配置配置
50
60
  */
@@ -104,17 +114,37 @@ interface PlaygroundReactProps<CTX extends PluginContext = PluginContext> {
104
114
  parentContainer?: interfaces.Container;
105
115
  }
106
116
 
117
+ /**
118
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
119
+ * SPDX-License-Identifier: MIT
120
+ */
121
+
107
122
  declare function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(opts: PlaygroundReactProps<CTX>, plugins?: Plugin[]): PluginsProvider<CTX>;
108
123
 
124
+ /**
125
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
126
+ * SPDX-License-Identifier: MIT
127
+ */
128
+
109
129
  type PlaygroundRef = PluginContext;
110
130
  declare const PlaygroundReact: React.ForwardRefExoticComponent<PlaygroundReactProps<PluginContext> & React.RefAttributes<PluginContext>>;
111
131
 
132
+ /**
133
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
134
+ * SPDX-License-Identifier: MIT
135
+ */
136
+
112
137
  interface PlaygroundReactContentProps {
113
138
  className?: string;
114
139
  style?: React.CSSProperties;
115
140
  children?: React.ReactNode;
116
141
  }
117
142
 
143
+ /**
144
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
145
+ * SPDX-License-Identifier: MIT
146
+ */
147
+
118
148
  declare const PlaygroundReactContent: React.FC<PlaygroundReactContentProps>;
119
149
 
120
150
  export { PlaygroundReact, PlaygroundReactContent, type PlaygroundReactContentProps, type PlaygroundReactProps, type PlaygroundRef, createPlaygroundReactPreset, usePlaygroundTools };
package/dist/index.d.ts CHANGED
@@ -6,6 +6,11 @@ import { interfaces } from 'inversify';
6
6
  import { ShortcutsRegistry } from '@flowgram.ai/shortcuts-plugin';
7
7
  import { BackgroundLayerOptions } from '@flowgram.ai/background-plugin';
8
8
 
9
+ /**
10
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
11
+ * SPDX-License-Identifier: MIT
12
+ */
13
+
9
14
  interface PlaygroundToolsPropsType {
10
15
  /**
11
16
  * 最大缩放比，默认 2
@@ -45,6 +50,11 @@ interface PlaygroundTools {
45
50
  }
46
51
  declare function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools;
47
52
 
53
+ /**
54
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
55
+ * SPDX-License-Identifier: MIT
56
+ */
57
+
48
58
  /**
49
59
  * 画布配置配置
50
60
  */
@@ -104,17 +114,37 @@ interface PlaygroundReactProps<CTX extends PluginContext = PluginContext> {
104
114
  parentContainer?: interfaces.Container;
105
115
  }
106
116
 
117
+ /**
118
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
119
+ * SPDX-License-Identifier: MIT
120
+ */
121
+
107
122
  declare function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(opts: PlaygroundReactProps<CTX>, plugins?: Plugin[]): PluginsProvider<CTX>;
108
123
 
124
+ /**
125
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
126
+ * SPDX-License-Identifier: MIT
127
+ */
128
+
109
129
  type PlaygroundRef = PluginContext;
110
130
  declare const PlaygroundReact: React.ForwardRefExoticComponent<PlaygroundReactProps<PluginContext> & React.RefAttributes<PluginContext>>;
111
131
 
132
+ /**
133
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
134
+ * SPDX-License-Identifier: MIT
135
+ */
136
+
112
137
  interface PlaygroundReactContentProps {
113
138
  className?: string;
114
139
  style?: React.CSSProperties;
115
140
  children?: React.ReactNode;
116
141
  }
117
142
 
143
+ /**
144
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
145
+ * SPDX-License-Identifier: MIT
146
+ */
147
+
118
148
  declare const PlaygroundReactContent: React.FC<PlaygroundReactContentProps>;
119
149
 
120
150
  export { PlaygroundReact, PlaygroundReactContent, type PlaygroundReactContentProps, type PlaygroundReactProps, type PlaygroundRef, createPlaygroundReactPreset, usePlaygroundTools };
package/dist/index.js CHANGED
@@ -37,8 +37,8 @@ var __decorateClass = (decorators, target, key, kind) => {
37
37
  };
38
38
 
39
39
  // src/index.ts
40
- var src_exports = {};
41
- __export(src_exports, {
40
+ var index_exports = {};
41
+ __export(index_exports, {
42
42
  Disposable: () => import_utils3.Disposable,
43
43
  Emitter: () => import_utils3.Emitter,
44
44
  Event: () => import_utils3.Event,
@@ -48,37 +48,31 @@ __export(src_exports, {
48
48
  usePlaygroundTools: () => usePlaygroundTools,
49
49
  useRefresh: () => import_utils3.useRefresh
50
50
  });
51
- module.exports = __toCommonJS(src_exports);
51
+ module.exports = __toCommonJS(index_exports);
52
52
  var import_reflect_metadata = require("reflect-metadata");
53
53
  var import_utils3 = require("@flowgram.ai/utils");
54
- __reExport(src_exports, require("@flowgram.ai/core"), module.exports);
54
+ __reExport(index_exports, require("@flowgram.ai/core"), module.exports);
55
55
 
56
56
  // src/hooks/use-playground-tools.ts
57
57
  var import_react = require("react");
58
- var import_core = require("@flowgram.ai/core");
59
58
  var import_utils = require("@flowgram.ai/utils");
59
+ var import_core = require("@flowgram.ai/core");
60
60
  function usePlaygroundTools(props) {
61
- const { maxZoom = 2, minZoom = 0.25 } = props || {};
61
+ const { maxZoom, minZoom } = props || {};
62
62
  const playground = (0, import_core.usePlayground)();
63
63
  const editorState = (0, import_core.useConfigEntity)(import_core.EditorStateConfigEntity, true);
64
64
  const [zoom, setZoom] = (0, import_react.useState)(1);
65
65
  const handleZoomOut = (0, import_react.useCallback)(
66
66
  (easing) => {
67
- if (zoom < minZoom) {
68
- return;
69
- }
70
67
  playground.config.zoomout(easing);
71
68
  },
72
- [zoom, playground, minZoom]
69
+ [playground]
73
70
  );
74
71
  const handleZoomIn = (0, import_react.useCallback)(
75
72
  (easing) => {
76
- if (zoom > maxZoom) {
77
- return;
78
- }
79
73
  playground.config.zoomin(easing);
80
74
  },
81
- [zoom, playground, maxZoom]
75
+ [playground]
82
76
  );
83
77
  const handleUpdateZoom = (0, import_react.useCallback)(
84
78
  (value, easing, easingDuration) => {
@@ -98,6 +92,13 @@ function usePlaygroundTools(props) {
98
92
  dispose.push(playground.onZoom((z) => setZoom(z)));
99
93
  return () => dispose.dispose();
100
94
  }, [playground]);
95
+ (0, import_react.useEffect)(() => {
96
+ const config = playground.config.config;
97
+ playground.config.updateConfig({
98
+ maxZoom: maxZoom !== void 0 ? maxZoom : config.maxZoom,
99
+ minZoom: minZoom !== void 0 ? minZoom : config.minZoom
100
+ });
101
+ }, [playground, maxZoom, minZoom]);
101
102
  return {
102
103
  zoomin: handleZoomIn,
103
104
  zoomout: handleZoomOut,
@@ -119,6 +120,10 @@ var import_background_plugin = require("@flowgram.ai/background-plugin");
119
120
  function createPlaygroundReactPreset(opts, plugins = []) {
120
121
  return (ctx) => {
121
122
  plugins = plugins.slice();
123
+ if (opts.background || opts.background === void 0) {
124
+ const backgroundOptions = typeof opts.background === "object" ? opts.background : {};
125
+ plugins.push((0, import_background_plugin.createBackgroundPlugin)(backgroundOptions));
126
+ }
122
127
  if (opts.shortcuts) {
123
128
  plugins.push(
124
129
  (0, import_shortcuts_plugin.createShortcutsPlugin)({
@@ -163,9 +168,6 @@ function createPlaygroundReactPreset(opts, plugins = []) {
163
168
  containerModules: opts.containerModules || []
164
169
  })
165
170
  );
166
- if (opts.background || opts.background === void 0) {
167
- plugins.push((0, import_background_plugin.createBackgroundPlugin)(opts.background || {}));
168
- }
169
171
  return plugins;
170
172
  };
171
173
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"]}
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":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport '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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { DisposableCollection } from '@flowgram.ai/utils';\nimport {\n EditorState,\n EditorStateConfigEntity,\n PlaygroundInteractiveType,\n useConfigEntity,\n usePlayground,\n} from '@flowgram.ai/core';\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, minZoom } = 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 playground.config.zoomout(easing);\n },\n [playground]\n );\n\n const handleZoomIn = useCallback(\n (easing?: boolean) => {\n playground.config.zoomin(easing);\n },\n [playground]\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 useEffect(() => {\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 }, [playground, maxZoom, minZoom]);\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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { 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.background || opts.background === undefined) {\n const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n plugins.push(createBackgroundPlugin(backgroundOptions));\n }\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 return plugins;\n };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 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 CHANGED
@@ -1,3 +1,8 @@
1
+ /**
2
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
3
+ * SPDX-License-Identifier: MIT
4
+ */
5
+
1
6
  :root {
2
7
  --g-selection-background: #4d53e8;
3
8
  --g-editor-background: #f2f3f5;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowgram.ai/playground-react",
3
- "version": "0.1.0-alpha.2",
3
+ "version": "0.1.0-alpha.20",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
@@ -25,29 +25,29 @@
25
25
  "dependencies": {
26
26
  "inversify": "^6.0.1",
27
27
  "reflect-metadata": "~0.2.2",
28
- "@flowgram.ai/background-plugin": "0.1.0-alpha.2",
29
- "@flowgram.ai/core": "0.1.0-alpha.2",
30
- "@flowgram.ai/shortcuts-plugin": "0.1.0-alpha.2",
31
- "@flowgram.ai/utils": "0.1.0-alpha.2"
28
+ "@flowgram.ai/background-plugin": "0.1.0-alpha.20",
29
+ "@flowgram.ai/core": "0.1.0-alpha.20",
30
+ "@flowgram.ai/shortcuts-plugin": "0.1.0-alpha.20",
31
+ "@flowgram.ai/utils": "0.1.0-alpha.20"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/bezier-js": "4.1.3",
35
- "@types/lodash": "^4.14.137",
35
+ "@types/lodash-es": "^4.17.12",
36
36
  "@types/react": "^18",
37
37
  "@types/react-dom": "^18",
38
- "@vitest/coverage-v8": "^0.32.0",
38
+ "@vitest/coverage-v8": "^3.2.4",
39
39
  "eslint": "^8.54.0",
40
40
  "react": "^18",
41
41
  "react-dom": "^18",
42
42
  "tsup": "^8.0.1",
43
- "typescript": "^5.0.4",
44
- "vitest": "^0.34.6",
45
- "@flowgram.ai/eslint-config": "0.1.0-alpha.2",
46
- "@flowgram.ai/ts-config": "0.1.0-alpha.2"
43
+ "typescript": "^5.8.3",
44
+ "vitest": "^3.2.4",
45
+ "@flowgram.ai/eslint-config": "0.1.0-alpha.20",
46
+ "@flowgram.ai/ts-config": "0.1.0-alpha.20"
47
47
  },
48
48
  "peerDependencies": {
49
- "react": ">=17",
50
- "react-dom": ">=17"
49
+ "react": ">=16.8",
50
+ "react-dom": ">=16.8"
51
51
  },
52
52
  "publishConfig": {
53
53
  "access": "public",