@flowgram.ai/playground-react 0.2.16 → 0.2.18

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 (6) hide show
  1. package/dist/esm/index.js.map +1 -1
  2. package/dist/index.d.mts +30 -0
  3. package/dist/index.d.ts +30 -0
  4. package/dist/index.js.map +1 -1
  5. package/index.css +5 -0
  6. package/package.json +7 -7
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 { 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","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.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","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":"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","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.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 { 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","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.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","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.2.16",
3
+ "version": "0.2.18",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
@@ -25,10 +25,10 @@
25
25
  "dependencies": {
26
26
  "inversify": "^6.0.1",
27
27
  "reflect-metadata": "~0.2.2",
28
- "@flowgram.ai/background-plugin": "0.2.16",
29
- "@flowgram.ai/core": "0.2.16",
30
- "@flowgram.ai/utils": "0.2.16",
31
- "@flowgram.ai/shortcuts-plugin": "0.2.16"
28
+ "@flowgram.ai/background-plugin": "0.2.18",
29
+ "@flowgram.ai/shortcuts-plugin": "0.2.18",
30
+ "@flowgram.ai/core": "0.2.18",
31
+ "@flowgram.ai/utils": "0.2.18"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/bezier-js": "4.1.3",
@@ -42,8 +42,8 @@
42
42
  "tsup": "^8.0.1",
43
43
  "typescript": "^5.0.4",
44
44
  "vitest": "^0.34.6",
45
- "@flowgram.ai/eslint-config": "0.2.16",
46
- "@flowgram.ai/ts-config": "0.2.16"
45
+ "@flowgram.ai/eslint-config": "0.2.18",
46
+ "@flowgram.ai/ts-config": "0.2.18"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": ">=16.8",