@flowgram.ai/editor 0.1.0-alpha.10
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.
- package/dist/esm/index.js +424 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +243 -0
- package/dist/index.d.ts +243 -0
- package/dist/index.js +477 -0
- package/dist/index.js.map +1 -0
- package/package.json +74 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,477 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
31
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
32
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
33
|
+
if (decorator = decorators[i])
|
|
34
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
35
|
+
if (kind && result) __defProp(target, key, result);
|
|
36
|
+
return result;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// src/index.ts
|
|
40
|
+
var src_exports = {};
|
|
41
|
+
__export(src_exports, {
|
|
42
|
+
AsyncContainerModule: () => import_inversify4.AsyncContainerModule,
|
|
43
|
+
Container: () => import_inversify4.Container,
|
|
44
|
+
ContainerModule: () => import_inversify4.ContainerModule,
|
|
45
|
+
Editor: () => Editor,
|
|
46
|
+
EditorProps: () => EditorProps,
|
|
47
|
+
EditorProvider: () => EditorProvider,
|
|
48
|
+
EditorRenderer: () => import_core8.PlaygroundReactRenderer,
|
|
49
|
+
FeedbackLevel: () => import_form.FeedbackLevel,
|
|
50
|
+
Field: () => import_form.Field,
|
|
51
|
+
FieldArray: () => import_form.FieldArray,
|
|
52
|
+
FlowEditorClient: () => FlowEditorClient,
|
|
53
|
+
FlowNodeFormData: () => import_form_core.FlowNodeFormData,
|
|
54
|
+
Form: () => import_form.Form,
|
|
55
|
+
FormModel: () => import_node.FormModelV2,
|
|
56
|
+
NodeClient: () => NodeClient,
|
|
57
|
+
NodeFocusService: () => NodeFocusService,
|
|
58
|
+
NodeRender: () => import_form_core.NodeRender,
|
|
59
|
+
ValidateTrigger: () => import_form.ValidateTrigger,
|
|
60
|
+
createDefaultPreset: () => createDefaultPreset,
|
|
61
|
+
createFlowEditorClientPlugin: () => createFlowEditorClientPlugin,
|
|
62
|
+
createFlowEditorClientPlugins: () => createFlowEditorClientPlugins,
|
|
63
|
+
createPlaygroundReactPreset: () => import_playground_react.createPlaygroundReactPreset,
|
|
64
|
+
highlightFormItem: () => highlightFormItem,
|
|
65
|
+
inject: () => import_inversify4.inject,
|
|
66
|
+
injectable: () => import_inversify4.injectable,
|
|
67
|
+
multiInject: () => import_inversify4.multiInject,
|
|
68
|
+
named: () => import_inversify4.named,
|
|
69
|
+
postConstruct: () => import_inversify4.postConstruct,
|
|
70
|
+
useCurrentField: () => import_form.useCurrentField,
|
|
71
|
+
useCurrentFieldState: () => import_form.useCurrentFieldState,
|
|
72
|
+
useField: () => import_form.useField,
|
|
73
|
+
useFieldValidate: () => import_form.useFieldValidate,
|
|
74
|
+
useFlowEditor: () => useFlowEditor,
|
|
75
|
+
useForm: () => import_form.useForm,
|
|
76
|
+
useHighlight: () => useHighlight,
|
|
77
|
+
useWatch: () => import_form.useWatch
|
|
78
|
+
});
|
|
79
|
+
module.exports = __toCommonJS(src_exports);
|
|
80
|
+
var import_reflect_metadata = require("reflect-metadata");
|
|
81
|
+
var import_node = require("@flowgram.ai/node");
|
|
82
|
+
__reExport(src_exports, require("@flowgram.ai/utils"), module.exports);
|
|
83
|
+
__reExport(src_exports, require("@flowgram.ai/core"), module.exports);
|
|
84
|
+
__reExport(src_exports, require("@flowgram.ai/document"), module.exports);
|
|
85
|
+
__reExport(src_exports, require("@flowgram.ai/renderer"), module.exports);
|
|
86
|
+
__reExport(src_exports, require("@flowgram.ai/variable-plugin"), module.exports);
|
|
87
|
+
__reExport(src_exports, require("@flowgram.ai/shortcuts-plugin"), module.exports);
|
|
88
|
+
__reExport(src_exports, require("@flowgram.ai/node-core-plugin"), module.exports);
|
|
89
|
+
__reExport(src_exports, require("@flowgram.ai/i18n-plugin"), module.exports);
|
|
90
|
+
var import_inversify4 = require("inversify");
|
|
91
|
+
var import_form_core = require("@flowgram.ai/form-core");
|
|
92
|
+
var import_form = require("@flowgram.ai/form");
|
|
93
|
+
__reExport(src_exports, require("@flowgram.ai/node"), module.exports);
|
|
94
|
+
|
|
95
|
+
// src/preset/editor-props.ts
|
|
96
|
+
var EditorProps;
|
|
97
|
+
((EditorProps3) => {
|
|
98
|
+
EditorProps3.DEFAULT = {
|
|
99
|
+
background: {}
|
|
100
|
+
};
|
|
101
|
+
})(EditorProps || (EditorProps = {}));
|
|
102
|
+
|
|
103
|
+
// src/preset/editor-default-preset.ts
|
|
104
|
+
var import_renderer = require("@flowgram.ai/renderer");
|
|
105
|
+
var import_redux_devtool_plugin = require("@flowgram.ai/redux-devtool-plugin");
|
|
106
|
+
var import_node_variable_plugin = require("@flowgram.ai/node-variable-plugin");
|
|
107
|
+
var import_node_core_plugin = require("@flowgram.ai/node-core-plugin");
|
|
108
|
+
var import_materials_plugin = require("@flowgram.ai/materials-plugin");
|
|
109
|
+
var import_i18n_plugin = require("@flowgram.ai/i18n-plugin");
|
|
110
|
+
var import_history_node_plugin = require("@flowgram.ai/history-node-plugin");
|
|
111
|
+
var import_document2 = require("@flowgram.ai/document");
|
|
112
|
+
var import_core6 = require("@flowgram.ai/core");
|
|
113
|
+
|
|
114
|
+
// src/utils/compose.ts
|
|
115
|
+
var compose = (fnList) => (node, data) => {
|
|
116
|
+
const list = fnList.filter(Boolean);
|
|
117
|
+
if (!list.length) {
|
|
118
|
+
return data;
|
|
119
|
+
}
|
|
120
|
+
return list.reduce((acc, fn) => fn(node, acc), data);
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// src/clients/flow-editor-client-plugins.ts
|
|
124
|
+
var import_core5 = require("@flowgram.ai/core");
|
|
125
|
+
|
|
126
|
+
// src/clients/node-client/create-node-client-plugins.ts
|
|
127
|
+
var import_core3 = require("@flowgram.ai/core");
|
|
128
|
+
|
|
129
|
+
// src/clients/node-client/node-focus-service.ts
|
|
130
|
+
var import_inversify = require("inversify");
|
|
131
|
+
var import_core = require("@flowgram.ai/core");
|
|
132
|
+
|
|
133
|
+
// src/clients/node-client/highlight/highlight-form-item.ts
|
|
134
|
+
var import_document = require("@flowgram.ai/document");
|
|
135
|
+
|
|
136
|
+
// src/clients/node-client/highlight/highlight-style.ts
|
|
137
|
+
var HIGHLIGHT_CLASSNAME = "flowide-highlight";
|
|
138
|
+
var styleText = `
|
|
139
|
+
@keyframes flowide-fade {
|
|
140
|
+
from {
|
|
141
|
+
opacity: 1.0;
|
|
142
|
+
}
|
|
143
|
+
to {
|
|
144
|
+
opacity: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
@-webkit-keyframes flowide-fade {
|
|
148
|
+
from {
|
|
149
|
+
opacity: 1.0;
|
|
150
|
+
}
|
|
151
|
+
to {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
.${HIGHLIGHT_CLASSNAME} {
|
|
156
|
+
background-color: rgba(238, 245, 40, 0.5);
|
|
157
|
+
animation: flowide-fade 2s 1 forwards;
|
|
158
|
+
-webkit-animation: flowide-fade 2s 1 forwards;
|
|
159
|
+
}
|
|
160
|
+
`;
|
|
161
|
+
var styleDom;
|
|
162
|
+
function createHighlightStyle() {
|
|
163
|
+
if (styleDom) return;
|
|
164
|
+
styleDom = document.createElement("style");
|
|
165
|
+
styleDom.innerHTML = styleText;
|
|
166
|
+
document.head.appendChild(styleDom);
|
|
167
|
+
}
|
|
168
|
+
function removeHighlightStyle() {
|
|
169
|
+
styleDom?.remove();
|
|
170
|
+
styleDom = void 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// src/clients/node-client/highlight/constants.ts
|
|
174
|
+
var DEFAULT_HIGHLIGHT_PADDING = 0;
|
|
175
|
+
|
|
176
|
+
// src/clients/node-client/highlight/highlight-form-item.ts
|
|
177
|
+
function highlightFormItem(formItem, options) {
|
|
178
|
+
const parent = formItem.formModel.flowNodeEntity.getData(import_document.FlowNodeRenderData).node;
|
|
179
|
+
const target = formItem.domRef.current;
|
|
180
|
+
if (!target) {
|
|
181
|
+
return void 0;
|
|
182
|
+
}
|
|
183
|
+
const overlay = document.createElement("div");
|
|
184
|
+
const { padding = DEFAULT_HIGHLIGHT_PADDING, overlayClassName } = options || {};
|
|
185
|
+
overlay.style.position = "absolute";
|
|
186
|
+
overlay.style.top = "0";
|
|
187
|
+
overlay.style.left = "0";
|
|
188
|
+
overlay.style.width = "100%";
|
|
189
|
+
overlay.style.height = "100%";
|
|
190
|
+
overlay.style.zIndex = "9999";
|
|
191
|
+
parent.appendChild(overlay);
|
|
192
|
+
const parentRect = parent.getBoundingClientRect();
|
|
193
|
+
const targetRect = target.getBoundingClientRect();
|
|
194
|
+
overlay.style.top = targetRect.top - parentRect.top - padding + "px";
|
|
195
|
+
overlay.style.left = targetRect.left - parentRect.left - padding + "px";
|
|
196
|
+
overlay.style.width = targetRect.width + padding * 2 + "px";
|
|
197
|
+
overlay.style.height = targetRect.height + padding * 2 + "px";
|
|
198
|
+
overlay.className = overlayClassName || HIGHLIGHT_CLASSNAME;
|
|
199
|
+
setTimeout(() => {
|
|
200
|
+
overlay.remove();
|
|
201
|
+
}, 2e3);
|
|
202
|
+
return overlay;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// src/clients/node-client/highlight/use-highlight.ts
|
|
206
|
+
var import_react = require("react");
|
|
207
|
+
function useHighlight(props) {
|
|
208
|
+
const ref = (0, import_react.useRef)(null);
|
|
209
|
+
const { form, path } = props;
|
|
210
|
+
const formItem = form.getFormItemByPath(path);
|
|
211
|
+
if (!formItem) {
|
|
212
|
+
return null;
|
|
213
|
+
}
|
|
214
|
+
formItem.domRef = ref;
|
|
215
|
+
return ref;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// src/clients/node-client/node-focus-service.ts
|
|
219
|
+
var NodeFocusService = class {
|
|
220
|
+
highlightNodeFormItem(formItem, options) {
|
|
221
|
+
this.previousOverlay = highlightFormItem(formItem, options);
|
|
222
|
+
}
|
|
223
|
+
focusNodeFormItem(formItem, options) {
|
|
224
|
+
const node = formItem.formModel.flowNodeEntity;
|
|
225
|
+
const { canvas = {}, highlight } = options || {};
|
|
226
|
+
if (this.previousOverlay) {
|
|
227
|
+
this.previousOverlay.remove();
|
|
228
|
+
this.previousOverlay = void 0;
|
|
229
|
+
}
|
|
230
|
+
const currentPromise = this.playground.scrollToView({ entities: [node], scrollToCenter: true, ...canvas }).then(() => {
|
|
231
|
+
if (!formItem || !highlight || this.currentPromise !== currentPromise) {
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
this.highlightNodeFormItem(formItem, typeof highlight === "boolean" ? {} : highlight);
|
|
235
|
+
});
|
|
236
|
+
this.currentPromise = currentPromise;
|
|
237
|
+
return this.currentPromise;
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
__decorateClass([
|
|
241
|
+
(0, import_inversify.inject)(import_core.Playground)
|
|
242
|
+
], NodeFocusService.prototype, "playground", 2);
|
|
243
|
+
NodeFocusService = __decorateClass([
|
|
244
|
+
(0, import_inversify.injectable)()
|
|
245
|
+
], NodeFocusService);
|
|
246
|
+
|
|
247
|
+
// src/clients/node-client/node-client.ts
|
|
248
|
+
var import_inversify2 = require("inversify");
|
|
249
|
+
var NodeClient = class {
|
|
250
|
+
};
|
|
251
|
+
__decorateClass([
|
|
252
|
+
(0, import_inversify2.inject)(NodeFocusService)
|
|
253
|
+
], NodeClient.prototype, "nodeFocusService", 2);
|
|
254
|
+
NodeClient = __decorateClass([
|
|
255
|
+
(0, import_inversify2.injectable)()
|
|
256
|
+
], NodeClient);
|
|
257
|
+
|
|
258
|
+
// src/clients/node-client/highlight/create-node-highlight-plugin.ts
|
|
259
|
+
var import_core2 = require("@flowgram.ai/core");
|
|
260
|
+
var createNodeHighlightPlugin = (0, import_core2.definePluginCreator)({
|
|
261
|
+
onInit() {
|
|
262
|
+
createHighlightStyle();
|
|
263
|
+
},
|
|
264
|
+
onDispose() {
|
|
265
|
+
removeHighlightStyle();
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
// src/clients/node-client/create-node-client-plugins.ts
|
|
270
|
+
var createNodeClientPlugin = (0, import_core3.definePluginCreator)({
|
|
271
|
+
onBind({ bind }) {
|
|
272
|
+
bind(NodeFocusService).toSelf().inSingletonScope();
|
|
273
|
+
bind(NodeClient).toSelf().inSingletonScope();
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
var createNodeClientPlugins = () => [
|
|
277
|
+
createNodeHighlightPlugin({}),
|
|
278
|
+
createNodeClientPlugin({})
|
|
279
|
+
];
|
|
280
|
+
|
|
281
|
+
// src/clients/flow-editor-client.ts
|
|
282
|
+
var import_inversify3 = require("inversify");
|
|
283
|
+
var import_core4 = require("@flowgram.ai/core");
|
|
284
|
+
var FlowEditorClient = class {
|
|
285
|
+
focusNodeFormItem(formItem, options) {
|
|
286
|
+
this.nodeClient.nodeFocusService.focusNodeFormItem(formItem, options);
|
|
287
|
+
}
|
|
288
|
+
focusNode(node, options) {
|
|
289
|
+
this.playground.scrollToView({ entities: [node], ...options });
|
|
290
|
+
}
|
|
291
|
+
};
|
|
292
|
+
__decorateClass([
|
|
293
|
+
(0, import_inversify3.inject)(NodeClient)
|
|
294
|
+
], FlowEditorClient.prototype, "nodeClient", 2);
|
|
295
|
+
__decorateClass([
|
|
296
|
+
(0, import_inversify3.inject)(import_core4.Playground)
|
|
297
|
+
], FlowEditorClient.prototype, "playground", 2);
|
|
298
|
+
FlowEditorClient = __decorateClass([
|
|
299
|
+
(0, import_inversify3.injectable)()
|
|
300
|
+
], FlowEditorClient);
|
|
301
|
+
|
|
302
|
+
// src/clients/flow-editor-client-plugins.ts
|
|
303
|
+
var createFlowEditorClientPlugin = (0, import_core5.definePluginCreator)({
|
|
304
|
+
onBind({ bind }) {
|
|
305
|
+
bind(FlowEditorClient).toSelf().inSingletonScope();
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
var createFlowEditorClientPlugins = () => [
|
|
309
|
+
...createNodeClientPlugins(),
|
|
310
|
+
createFlowEditorClientPlugin({})
|
|
311
|
+
];
|
|
312
|
+
|
|
313
|
+
// src/preset/editor-default-preset.ts
|
|
314
|
+
function createDefaultPreset(opts, plugins = []) {
|
|
315
|
+
return (ctx) => {
|
|
316
|
+
opts = { ...EditorProps.DEFAULT, ...opts };
|
|
317
|
+
if (opts.i18n) {
|
|
318
|
+
plugins.push((0, import_i18n_plugin.createI18nPlugin)(opts.i18n));
|
|
319
|
+
}
|
|
320
|
+
plugins.push(...createFlowEditorClientPlugins());
|
|
321
|
+
if (opts.reduxDevTool?.enable) {
|
|
322
|
+
plugins.push((0, import_redux_devtool_plugin.createReduxDevToolPlugin)(opts.reduxDevTool));
|
|
323
|
+
}
|
|
324
|
+
const defaultContainerModules = [
|
|
325
|
+
import_document2.FlowDocumentContainerModule,
|
|
326
|
+
// 默认文档
|
|
327
|
+
import_renderer.FlowRendererContainerModule
|
|
328
|
+
// 默认渲染
|
|
329
|
+
];
|
|
330
|
+
plugins.push((0, import_materials_plugin.createMaterialsPlugin)(opts.materials || {}));
|
|
331
|
+
if (opts.nodeEngine && opts.nodeEngine.enable !== false) {
|
|
332
|
+
plugins.push((0, import_node_core_plugin.createNodeCorePlugin)({ materials: opts.nodeEngine.materials }));
|
|
333
|
+
if (opts.variableEngine?.enable) {
|
|
334
|
+
plugins.push((0, import_node_variable_plugin.createNodeVariablePlugin)({}));
|
|
335
|
+
}
|
|
336
|
+
if (opts.history?.enable) {
|
|
337
|
+
plugins.push((0, import_history_node_plugin.createHistoryNodePlugin)({}));
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
plugins.push(
|
|
341
|
+
(0, import_core6.createPlaygroundPlugin)({
|
|
342
|
+
onInit: (ctx2) => {
|
|
343
|
+
if (opts.nodeRegistries) {
|
|
344
|
+
ctx2.document.registerFlowNodes(...opts.nodeRegistries);
|
|
345
|
+
}
|
|
346
|
+
if (opts.constants) {
|
|
347
|
+
ctx2.document.options.constants = opts.constants;
|
|
348
|
+
}
|
|
349
|
+
if (opts.formatNodeLines) {
|
|
350
|
+
ctx2.document.options.formatNodeLines = compose([
|
|
351
|
+
ctx2.document.options.formatNodeLines,
|
|
352
|
+
opts.formatNodeLines
|
|
353
|
+
]);
|
|
354
|
+
}
|
|
355
|
+
if (opts.formatNodeLabels) {
|
|
356
|
+
ctx2.document.options.formatNodeLabels = compose([
|
|
357
|
+
ctx2.document.options.formatNodeLabels,
|
|
358
|
+
opts.formatNodeLabels
|
|
359
|
+
]);
|
|
360
|
+
}
|
|
361
|
+
if (opts.getNodeDefaultRegistry) {
|
|
362
|
+
ctx2.document.options.getNodeDefaultRegistry = opts.getNodeDefaultRegistry;
|
|
363
|
+
}
|
|
364
|
+
ctx2.get(import_renderer.FlowRendererRegistry).init();
|
|
365
|
+
},
|
|
366
|
+
onReady(ctx2) {
|
|
367
|
+
if (opts.initialData) {
|
|
368
|
+
ctx2.document.fromJSON(opts.initialData);
|
|
369
|
+
}
|
|
370
|
+
if (opts.readonly) {
|
|
371
|
+
ctx2.playground.config.readonly = opts.readonly;
|
|
372
|
+
}
|
|
373
|
+
ctx2.document.load().then(() => {
|
|
374
|
+
if (opts.onLoad) opts.onLoad(ctx2);
|
|
375
|
+
});
|
|
376
|
+
},
|
|
377
|
+
onDispose(ctx2) {
|
|
378
|
+
ctx2.document.dispose();
|
|
379
|
+
},
|
|
380
|
+
containerModules: defaultContainerModules
|
|
381
|
+
})
|
|
382
|
+
);
|
|
383
|
+
return plugins;
|
|
384
|
+
};
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
// src/components/editor-provider.tsx
|
|
388
|
+
var import_react2 = __toESM(require("react"));
|
|
389
|
+
var import_document3 = require("@flowgram.ai/document");
|
|
390
|
+
var import_core7 = require("@flowgram.ai/core");
|
|
391
|
+
var EditorProvider = (props) => {
|
|
392
|
+
const { children, ...others } = props;
|
|
393
|
+
const preset = (0, import_react2.useMemo)(() => createDefaultPreset(others), []);
|
|
394
|
+
const customPluginContext = (0, import_react2.useCallback)(
|
|
395
|
+
(container) => ({
|
|
396
|
+
...(0, import_core7.createPluginContextDefault)(container),
|
|
397
|
+
get document() {
|
|
398
|
+
return container.get(import_document3.FlowDocument);
|
|
399
|
+
},
|
|
400
|
+
get selection() {
|
|
401
|
+
return container.get(import_core7.SelectionService);
|
|
402
|
+
}
|
|
403
|
+
}),
|
|
404
|
+
[]
|
|
405
|
+
);
|
|
406
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_core7.PlaygroundReactProvider, { plugins: preset, customPluginContext }, children);
|
|
407
|
+
};
|
|
408
|
+
|
|
409
|
+
// src/components/editor-renderer.tsx
|
|
410
|
+
var import_core8 = require("@flowgram.ai/core");
|
|
411
|
+
|
|
412
|
+
// src/components/editor.tsx
|
|
413
|
+
var import_react3 = __toESM(require("react"));
|
|
414
|
+
var Editor = (props) => {
|
|
415
|
+
const { children, ...otherProps } = props;
|
|
416
|
+
return /* @__PURE__ */ import_react3.default.createElement(EditorProvider, { ...otherProps }, /* @__PURE__ */ import_react3.default.createElement(import_core8.PlaygroundReactRenderer, null, children));
|
|
417
|
+
};
|
|
418
|
+
|
|
419
|
+
// src/hooks/use-flow-editor.ts
|
|
420
|
+
var import_core9 = require("@flowgram.ai/core");
|
|
421
|
+
function useFlowEditor() {
|
|
422
|
+
return (0, import_core9.useService)(FlowEditorClient);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
// src/index.ts
|
|
426
|
+
__reExport(src_exports, require("@flowgram.ai/node-variable-plugin"), module.exports);
|
|
427
|
+
var import_playground_react = require("@flowgram.ai/playground-react");
|
|
428
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
429
|
+
0 && (module.exports = {
|
|
430
|
+
AsyncContainerModule,
|
|
431
|
+
Container,
|
|
432
|
+
ContainerModule,
|
|
433
|
+
Editor,
|
|
434
|
+
EditorProps,
|
|
435
|
+
EditorProvider,
|
|
436
|
+
EditorRenderer,
|
|
437
|
+
FeedbackLevel,
|
|
438
|
+
Field,
|
|
439
|
+
FieldArray,
|
|
440
|
+
FlowEditorClient,
|
|
441
|
+
FlowNodeFormData,
|
|
442
|
+
Form,
|
|
443
|
+
FormModel,
|
|
444
|
+
NodeClient,
|
|
445
|
+
NodeFocusService,
|
|
446
|
+
NodeRender,
|
|
447
|
+
ValidateTrigger,
|
|
448
|
+
createDefaultPreset,
|
|
449
|
+
createFlowEditorClientPlugin,
|
|
450
|
+
createFlowEditorClientPlugins,
|
|
451
|
+
createPlaygroundReactPreset,
|
|
452
|
+
highlightFormItem,
|
|
453
|
+
inject,
|
|
454
|
+
injectable,
|
|
455
|
+
multiInject,
|
|
456
|
+
named,
|
|
457
|
+
postConstruct,
|
|
458
|
+
useCurrentField,
|
|
459
|
+
useCurrentFieldState,
|
|
460
|
+
useField,
|
|
461
|
+
useFieldValidate,
|
|
462
|
+
useFlowEditor,
|
|
463
|
+
useForm,
|
|
464
|
+
useHighlight,
|
|
465
|
+
useWatch,
|
|
466
|
+
...require("@flowgram.ai/utils"),
|
|
467
|
+
...require("@flowgram.ai/core"),
|
|
468
|
+
...require("@flowgram.ai/document"),
|
|
469
|
+
...require("@flowgram.ai/renderer"),
|
|
470
|
+
...require("@flowgram.ai/variable-plugin"),
|
|
471
|
+
...require("@flowgram.ai/shortcuts-plugin"),
|
|
472
|
+
...require("@flowgram.ai/node-core-plugin"),
|
|
473
|
+
...require("@flowgram.ai/i18n-plugin"),
|
|
474
|
+
...require("@flowgram.ai/node"),
|
|
475
|
+
...require("@flowgram.ai/node-variable-plugin")
|
|
476
|
+
});
|
|
477
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/preset/editor-props.ts","../src/preset/editor-default-preset.ts","../src/utils/compose.ts","../src/clients/flow-editor-client-plugins.ts","../src/clients/node-client/create-node-client-plugins.ts","../src/clients/node-client/node-focus-service.ts","../src/clients/node-client/highlight/highlight-form-item.ts","../src/clients/node-client/highlight/highlight-style.ts","../src/clients/node-client/highlight/constants.ts","../src/clients/node-client/highlight/use-highlight.ts","../src/clients/node-client/node-client.ts","../src/clients/node-client/highlight/create-node-highlight-plugin.ts","../src/clients/flow-editor-client.ts","../src/components/editor-provider.tsx","../src/components/editor-renderer.tsx","../src/components/editor.tsx","../src/hooks/use-flow-editor.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 'reflect-metadata';\nimport { FormModelV2 } from '@flowgram.ai/node';\n\n/* 核心 模块导出 */\nexport * from '@flowgram.ai/utils';\nexport * from '@flowgram.ai/core';\nexport * from '@flowgram.ai/document';\nexport * from '@flowgram.ai/renderer';\nexport * from '@flowgram.ai/variable-plugin';\nexport * from '@flowgram.ai/shortcuts-plugin';\nexport * from '@flowgram.ai/node-core-plugin';\nexport * from '@flowgram.ai/i18n-plugin';\nexport {\n type interfaces,\n injectable,\n postConstruct,\n named,\n Container,\n ContainerModule,\n AsyncContainerModule,\n inject,\n multiInject,\n} from 'inversify';\n\nexport { FlowNodeFormData, NodeRender, type NodeRenderProps } from '@flowgram.ai/form-core';\n\nexport type {\n FormState,\n FieldState,\n FieldArrayRenderProps,\n FieldRenderProps,\n FormRenderProps,\n Validate,\n FormControl,\n FieldName,\n FieldError,\n FieldWarning,\n IField,\n IFieldArray,\n IForm,\n Errors,\n Warnings,\n} from '@flowgram.ai/form';\n\nexport {\n Form,\n Field,\n FieldArray,\n useForm,\n useField,\n useCurrentField,\n useCurrentFieldState,\n useFieldValidate,\n useWatch,\n ValidateTrigger,\n FeedbackLevel,\n} from '@flowgram.ai/form';\nexport * from '@flowgram.ai/node';\nexport { FormModelV2 as FormModel };\n\n/**\n * 固定布局模块导出\n */\nexport * from './preset';\nexport * from './components';\nexport * from './hooks';\nexport * from './clients';\n\n/**\n * Plugin 导出\n */\n\nexport * from '@flowgram.ai/node-variable-plugin';\n\nexport { createPlaygroundReactPreset } from '@flowgram.ai/playground-react';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { VariablePluginOptions } from '@flowgram.ai/variable-plugin';\nimport { ReduxDevToolPluginOptions } from '@flowgram.ai/redux-devtool-plugin';\nimport { PlaygroundReactProps, SelectionService } from '@flowgram.ai/playground-react';\nimport { NodeCorePluginOptions } from '@flowgram.ai/node-core-plugin';\nimport { MaterialsPluginOptions } from '@flowgram.ai/materials-plugin';\nimport { I18nPluginOptions } from '@flowgram.ai/i18n-plugin';\nimport { HistoryPluginOptions } from '@flowgram.ai/history';\nimport { FormMetaOrFormMetaGenerator } from '@flowgram.ai/form-core';\nimport {\n FlowDocument,\n FlowDocumentJSON,\n FlowNodeEntity,\n type FlowNodeJSON,\n FlowNodeRegistry,\n FlowNodeType,\n FlowTransitionLabel,\n FlowTransitionLine,\n} from '@flowgram.ai/document';\nimport { PluginContext } from '@flowgram.ai/core';\n\nexport interface EditorPluginContext extends PluginContext {\n document: FlowDocument;\n selection: SelectionService;\n}\n\n/**\n * 固定布局配置\n */\nexport interface EditorProps<\n CTX extends EditorPluginContext = EditorPluginContext,\n JSON = FlowDocumentJSON\n> extends PlaygroundReactProps<CTX> {\n /**\n * 初始化数据\n */\n initialData?: JSON;\n /**\n * 是否为 readonly\n */\n readonly?: boolean;\n /**\n * 节点定义\n */\n nodeRegistries?: FlowNodeRegistry[];\n /**\n * 获取默认的节点配置\n */\n getNodeDefaultRegistry?: (type: FlowNodeType) => FlowNodeRegistry;\n /**\n * 节点引擎配置\n */\n nodeEngine?: NodeCorePluginOptions & {\n /**\n * 默认FormMeta\n */\n createDefaultFormMeta?: (node: FlowNodeEntity) => FormMetaOrFormMetaGenerator;\n /**\n * 开启\n */\n enable?: boolean;\n };\n /**\n * 默认是否展开所有节点\n */\n allNodesDefaultExpanded?: boolean;\n /**\n * 画布物料\n */\n materials?: MaterialsPluginOptions;\n /**\n * 画布数据加载完成, 请使用 onAllLayersRendered 替代\n * @deprecated\n * */\n onLoad?: (ctx: CTX) => void;\n /**\n * 是否开启变量引擎\n */\n variableEngine?: VariablePluginOptions;\n /**\n * 是否开启历史\n */\n history?: HistoryPluginOptions<CTX> & { disableShortcuts?: boolean };\n\n /**\n * redux 开发者工具配置\n */\n reduxDevTool?: ReduxDevToolPluginOptions;\n\n scroll?: {\n enableScrollLimit?: boolean; // 开启滚动限制\n disableScrollBar?: boolean; // 关闭滚动条\n };\n\n /**\n * 节点数据导出\n * - node 当前节点\n * - json 当前节点数据\n */\n toNodeJSON?(node: FlowNodeEntity, json: FlowNodeJSON): FlowNodeJSON;\n /**\n * 节点数据导入\n * - node 当前节点\n * - json 当前节点数据\n * - isFirstCreate 是否是第一次创建\n */\n fromNodeJSON?(node: FlowNodeEntity, json: FlowNodeJSON, isFirstCreate: boolean): FlowNodeJSON;\n /**\n * 画布内部常量自定义\n */\n constants?: Record<string, any>;\n /**\n * 自定义节点线条\n */\n formatNodeLines?: (node: FlowNodeEntity, lines: FlowTransitionLine[]) => FlowTransitionLine[];\n /**\n * 自定义节点 label\n */\n formatNodeLabels?: (node: FlowNodeEntity, lines: FlowTransitionLabel[]) => FlowTransitionLabel[];\n /**\n * 国际化\n */\n i18n?: I18nPluginOptions;\n}\n\nexport namespace EditorProps {\n /**\n * 默认配置\n */\n export const DEFAULT: EditorProps = {\n background: {},\n };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { interfaces } from 'inversify';\nimport { FlowRendererContainerModule, FlowRendererRegistry } from '@flowgram.ai/renderer';\nimport { createReduxDevToolPlugin } from '@flowgram.ai/redux-devtool-plugin';\nimport { createNodeVariablePlugin } from '@flowgram.ai/node-variable-plugin';\nimport { createNodeCorePlugin } from '@flowgram.ai/node-core-plugin';\nimport { createMaterialsPlugin } from '@flowgram.ai/materials-plugin';\nimport { createI18nPlugin } from '@flowgram.ai/i18n-plugin';\nimport { createHistoryNodePlugin } from '@flowgram.ai/history-node-plugin';\nimport { FlowDocumentContainerModule } from '@flowgram.ai/document';\nimport { createPlaygroundPlugin, Plugin, PluginsProvider } from '@flowgram.ai/core';\n\nimport { compose } from '../utils/compose';\nimport { createFlowEditorClientPlugins } from '../clients/flow-editor-client-plugins';\nimport { EditorPluginContext, EditorProps } from './editor-props';\n\nexport function createDefaultPreset<CTX extends EditorPluginContext = EditorPluginContext>(\n opts: EditorProps<CTX>,\n plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n return (ctx: CTX) => {\n opts = { ...EditorProps.DEFAULT, ...opts };\n /**\n * i18n support\n */\n if (opts.i18n) {\n plugins.push(createI18nPlugin(opts.i18n));\n }\n /**\n * 默认注册顶层 flow editor client plugin\n */\n plugins.push(...createFlowEditorClientPlugins());\n\n /**\n * 注册 Redux 开发者工具\n */\n if (opts.reduxDevTool?.enable) {\n plugins.push(createReduxDevToolPlugin(opts.reduxDevTool));\n }\n\n /**\n * 注册画布模块\n */\n const defaultContainerModules: interfaces.ContainerModule[] = [\n FlowDocumentContainerModule, // 默认文档\n FlowRendererContainerModule, // 默认渲染\n ];\n /**\n * 注册物料\n */\n plugins.push(createMaterialsPlugin(opts.materials || {}));\n\n /**\n * 注册节点引擎\n */\n if (opts.nodeEngine && opts.nodeEngine.enable !== false) {\n plugins.push(createNodeCorePlugin({ materials: opts.nodeEngine.materials }));\n\n if (opts.variableEngine?.enable) {\n plugins.push(createNodeVariablePlugin({}));\n }\n\n if (opts.history?.enable) {\n plugins.push(createHistoryNodePlugin({}));\n }\n }\n /**\n * 画布生命周期注册\n */\n plugins.push(\n createPlaygroundPlugin<CTX>({\n onInit: (ctx) => {\n if (opts.nodeRegistries) {\n ctx.document.registerFlowNodes(...opts.nodeRegistries);\n }\n // 自定义画布内部常量\n if (opts.constants) {\n ctx.document.options.constants = opts.constants;\n }\n // 劫持节点线条\n if (opts.formatNodeLines) {\n ctx.document.options.formatNodeLines = compose([\n ctx.document.options.formatNodeLines,\n opts.formatNodeLines,\n ]);\n }\n // 劫持节点 label\n if (opts.formatNodeLabels) {\n ctx.document.options.formatNodeLabels = compose([\n ctx.document.options.formatNodeLabels,\n opts.formatNodeLabels,\n ]);\n }\n if (opts.getNodeDefaultRegistry) {\n ctx.document.options.getNodeDefaultRegistry = opts.getNodeDefaultRegistry;\n }\n // TODO\n // if (opts.onContentChange) {\n // ctx.document.onContentChange(event => opts.onContentChange!(ctx, event));\n // }\n // TODO 这个会触发组件注册,后续要废弃这个,通过 materials 插件来做\n ctx.get<FlowRendererRegistry>(FlowRendererRegistry).init();\n },\n onReady(ctx) {\n if (opts.initialData) {\n ctx.document.fromJSON(opts.initialData);\n }\n if (opts.readonly) {\n ctx.playground.config.readonly = opts.readonly;\n }\n ctx.document.load().then(() => {\n if (opts.onLoad) opts.onLoad(ctx);\n });\n },\n onDispose(ctx) {\n ctx.document.dispose();\n },\n containerModules: defaultContainerModules,\n })\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 { FlowNodeEntity } from '@flowgram.ai/document';\n\nexport type ComposeListItem<T> = (node: FlowNodeEntity, data: T[]) => T[];\n\nexport const compose =\n <T>(fnList: (ComposeListItem<T> | undefined)[]) =>\n (node: FlowNodeEntity, data: T[]): T[] => {\n const list = fnList.filter(Boolean) as ComposeListItem<T>[];\n if (!list.length) {\n return data;\n }\n return list.reduce((acc: T[], fn) => fn(node, acc), data);\n };\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { createNodeClientPlugins } from './node-client/create-node-client-plugins';\nimport { FlowEditorClient } from './flow-editor-client';\n\nexport const createFlowEditorClientPlugin = definePluginCreator<{}>({\n onBind({ bind }) {\n bind(FlowEditorClient).toSelf().inSingletonScope();\n },\n});\n\nexport const createFlowEditorClientPlugins = () => [\n ...createNodeClientPlugins(),\n createFlowEditorClientPlugin({}),\n];\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { NodeFocusService } from './node-focus-service';\nimport { NodeClient } from './node-client';\nimport { createNodeHighlightPlugin } from './highlight/create-node-highlight-plugin';\n\nexport const createNodeClientPlugin = definePluginCreator<{}>({\n onBind({ bind }) {\n bind(NodeFocusService).toSelf().inSingletonScope();\n bind(NodeClient).toSelf().inSingletonScope();\n },\n});\n\nexport const createNodeClientPlugins = () => [\n createNodeHighlightPlugin({}),\n createNodeClientPlugin({}),\n];\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { type FormItem } from '@flowgram.ai/form-core';\nimport { Playground, PlaygroundConfigRevealOpts } from '@flowgram.ai/core';\n\nimport { highlightFormItem, HighLightOptions } from './highlight';\n\nexport type FocusNodeCanvasOptions = PlaygroundConfigRevealOpts;\n\nexport interface FocusNodeFormItemOptions {\n canvas?: FocusNodeCanvasOptions;\n highlight?: boolean | HighLightOptions;\n}\n\n@injectable()\nexport class NodeFocusService {\n @inject(Playground) readonly playground: Playground;\n\n protected previousOverlay: HTMLDivElement | undefined;\n\n protected currentPromise: Promise<void> | undefined;\n\n highlightNodeFormItem(formItem: FormItem, options?: HighLightOptions) {\n this.previousOverlay = highlightFormItem(formItem, options);\n }\n\n focusNodeFormItem(formItem: FormItem, options?: FocusNodeFormItemOptions): Promise<void> {\n const node = formItem.formModel.flowNodeEntity;\n const { canvas = {}, highlight } = options || {};\n if (this.previousOverlay) {\n this.previousOverlay.remove();\n this.previousOverlay = undefined;\n }\n const currentPromise = this.playground\n .scrollToView({ entities: [node], scrollToCenter: true, ...canvas })\n .then(() => {\n if (!formItem || !highlight || this.currentPromise !== currentPromise) {\n return;\n }\n this.highlightNodeFormItem(formItem, typeof highlight === 'boolean' ? {} : highlight);\n });\n this.currentPromise = currentPromise;\n return this.currentPromise;\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FormItem } from '@flowgram.ai/form-core';\nimport { FlowNodeRenderData } from '@flowgram.ai/document';\n\nimport { HIGHLIGHT_CLASSNAME } from './highlight-style';\nimport { DEFAULT_HIGHLIGHT_PADDING } from './constants';\n\nexport interface HighLightOptions {\n padding?: number;\n overlayClassName?: string;\n}\n\nexport function highlightFormItem(\n formItem: FormItem,\n options?: HighLightOptions,\n): HTMLDivElement | undefined {\n const parent =\n formItem.formModel.flowNodeEntity.getData<FlowNodeRenderData>(FlowNodeRenderData).node;\n const target = formItem.domRef.current;\n\n if (!target) {\n return undefined;\n }\n\n const overlay = document.createElement('div');\n\n const { padding = DEFAULT_HIGHLIGHT_PADDING, overlayClassName } = options || {};\n\n overlay.style.position = 'absolute';\n overlay.style.top = '0';\n overlay.style.left = '0';\n overlay.style.width = '100%';\n overlay.style.height = '100%';\n overlay.style.zIndex = '9999';\n\n parent.appendChild(overlay);\n\n const parentRect = parent.getBoundingClientRect();\n const targetRect = target.getBoundingClientRect();\n\n overlay.style.top = targetRect.top - parentRect.top - padding + 'px';\n overlay.style.left = targetRect.left - parentRect.left - padding + 'px';\n overlay.style.width = targetRect.width + padding * 2 + 'px';\n overlay.style.height = targetRect.height + padding * 2 + 'px';\n\n overlay.className = overlayClassName || HIGHLIGHT_CLASSNAME;\n setTimeout(() => {\n overlay.remove();\n }, 2000);\n return overlay;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const HIGHLIGHT_CLASSNAME = 'flowide-highlight';\n\nconst styleText = `\n@keyframes flowide-fade {\n from {\n opacity: 1.0;\n }\n to {\n opacity: 0;\n }\n}\n@-webkit-keyframes flowide-fade {\n from {\n opacity: 1.0;\n }\n to {\n opacity: 0;\n }\n}\n.${HIGHLIGHT_CLASSNAME} {\n background-color: rgba(238, 245, 40, 0.5);\n animation: flowide-fade 2s 1 forwards;\n -webkit-animation: flowide-fade 2s 1 forwards;\n}\n`;\n\nlet styleDom: HTMLStyleElement | undefined;\n\nexport function createHighlightStyle(): void {\n if (styleDom) return;\n styleDom = document.createElement('style');\n styleDom.innerHTML = styleText;\n document.head.appendChild(styleDom);\n}\n\nexport function removeHighlightStyle(): void {\n styleDom?.remove();\n styleDom = undefined;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const DEFAULT_HIGHLIGHT_COLOR = 'rgba(238, 245, 40, 0.5)';\nexport const DEFAULT_HIGHLIGHT_PADDING = 0;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useRef } from 'react';\n\nimport { FormModel } from '@flowgram.ai/form-core';\n\ninterface HighlightProps {\n form: FormModel;\n path: string;\n}\n\nexport function useHighlight(props: HighlightProps) {\n const ref = useRef<any>(null);\n const { form, path } = props;\n const formItem = form.getFormItemByPath(path);\n if (!formItem) {\n return null;\n }\n formItem.domRef = ref;\n return ref;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { NodeFocusService } from './node-focus-service';\n\n@injectable()\nexport class NodeClient {\n @inject(NodeFocusService) nodeFocusService: NodeFocusService;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { createHighlightStyle, removeHighlightStyle } from './highlight-style';\n\nexport const createNodeHighlightPlugin = definePluginCreator<{}>({\n onInit() {\n createHighlightStyle();\n },\n onDispose() {\n removeHighlightStyle();\n },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { type FormItem } from '@flowgram.ai/form-core';\nimport { FlowNodeEntity } from '@flowgram.ai/document';\nimport { Playground, PlaygroundConfigRevealOpts } from '@flowgram.ai/core';\n\nimport { FocusNodeFormItemOptions, NodeClient } from './node-client';\n\ninterface FocusNodeOptions {\n zoom?: PlaygroundConfigRevealOpts['zoom'];\n easing?: PlaygroundConfigRevealOpts['easing']; // 是否开启缓动,默认开启\n easingDuration?: PlaygroundConfigRevealOpts['easingDuration']; // 默认 500 ms\n scrollToCenter?: PlaygroundConfigRevealOpts['scrollToCenter']; // 是否滚动到中心\n}\n\n@injectable()\nexport class FlowEditorClient {\n @inject(NodeClient) readonly nodeClient: NodeClient;\n\n @inject(Playground) readonly playground: Playground;\n\n focusNodeFormItem(formItem: FormItem, options?: FocusNodeFormItemOptions) {\n this.nodeClient.nodeFocusService.focusNodeFormItem(formItem, options);\n }\n\n focusNode(node: FlowNodeEntity, options?: FocusNodeOptions) {\n this.playground.scrollToView({ entities: [node], ...options });\n }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo, useCallback } from 'react';\n\nimport { interfaces } from 'inversify';\nimport { FlowDocument } from '@flowgram.ai/document';\nimport {\n PlaygroundReactProvider,\n createPluginContextDefault,\n SelectionService,\n} from '@flowgram.ai/core';\n\nimport { EditorPluginContext, EditorProps, createDefaultPreset } from '../preset';\n\nexport const EditorProvider: React.FC<EditorProps> = (props: EditorProps) => {\n const { children, ...others } = props;\n const preset = useMemo(() => createDefaultPreset(others), []);\n const customPluginContext = useCallback(\n (container: interfaces.Container) =>\n ({\n ...createPluginContextDefault(container),\n get document(): FlowDocument {\n return container.get<FlowDocument>(FlowDocument);\n },\n get selection(): SelectionService {\n return container.get<SelectionService>(SelectionService);\n },\n } as EditorPluginContext),\n []\n );\n return (\n <PlaygroundReactProvider plugins={preset} customPluginContext={customPluginContext}>\n {children}\n </PlaygroundReactProvider>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport { PlaygroundReactRenderer as EditorRenderer } from '@flowgram.ai/core';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { EditorProps } from '../preset';\nimport { EditorRenderer } from './editor-renderer';\nimport { EditorProvider } from './editor-provider';\n\n/**\n * 画布编辑器\n * @param props\n * @constructor\n */\nexport const Editor: React.FC<EditorProps> = (props: EditorProps) => {\n const { children, ...otherProps } = props;\n return (\n <EditorProvider {...otherProps}>\n <EditorRenderer>{children}</EditorRenderer>\n </EditorProvider>\n );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { FlowEditorClient } from '../clients';\n\nexport function useFlowEditor(): FlowEditorClient {\n return useService(FlowEditorClient);\n}\n"],"mappings":"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","names":["import_inversify","EditorProps","import_document","import_core","import_core","import_core","import_inversify","import_core","import_inversify","import_core","ctx","import_react","import_document","import_core","React","import_core","import_react","React","import_core"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@flowgram.ai/editor",
|
|
3
|
+
"version": "0.1.0-alpha.10",
|
|
4
|
+
"homepage": "https://flowgram.ai/",
|
|
5
|
+
"repository": "https://github.com/bytedance/flowgram.ai",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"exports": {
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"import": "./dist/esm/index.js",
|
|
10
|
+
"require": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"main": "./dist/index.js",
|
|
13
|
+
"module": "./dist/esm/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"inversify": "^6.0.1",
|
|
20
|
+
"reflect-metadata": "~0.2.2",
|
|
21
|
+
"@flowgram.ai/background-plugin": "0.1.0-alpha.10",
|
|
22
|
+
"@flowgram.ai/core": "0.1.0-alpha.10",
|
|
23
|
+
"@flowgram.ai/document": "0.1.0-alpha.10",
|
|
24
|
+
"@flowgram.ai/form": "0.1.0-alpha.10",
|
|
25
|
+
"@flowgram.ai/form-core": "0.1.0-alpha.10",
|
|
26
|
+
"@flowgram.ai/group-plugin": "0.1.0-alpha.10",
|
|
27
|
+
"@flowgram.ai/history": "0.1.0-alpha.10",
|
|
28
|
+
"@flowgram.ai/history-node-plugin": "0.1.0-alpha.10",
|
|
29
|
+
"@flowgram.ai/i18n-plugin": "0.1.0-alpha.10",
|
|
30
|
+
"@flowgram.ai/materials-plugin": "0.1.0-alpha.10",
|
|
31
|
+
"@flowgram.ai/node": "0.1.0-alpha.10",
|
|
32
|
+
"@flowgram.ai/node-variable-plugin": "0.1.0-alpha.10",
|
|
33
|
+
"@flowgram.ai/node-core-plugin": "0.1.0-alpha.10",
|
|
34
|
+
"@flowgram.ai/playground-react": "0.1.0-alpha.10",
|
|
35
|
+
"@flowgram.ai/redux-devtool-plugin": "0.1.0-alpha.10",
|
|
36
|
+
"@flowgram.ai/shortcuts-plugin": "0.1.0-alpha.10",
|
|
37
|
+
"@flowgram.ai/renderer": "0.1.0-alpha.10",
|
|
38
|
+
"@flowgram.ai/utils": "0.1.0-alpha.10",
|
|
39
|
+
"@flowgram.ai/variable-plugin": "0.1.0-alpha.10"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@types/bezier-js": "4.1.3",
|
|
43
|
+
"@types/lodash": "^4.14.137",
|
|
44
|
+
"@types/react": "^18",
|
|
45
|
+
"@types/react-dom": "^18",
|
|
46
|
+
"@vitest/coverage-v8": "^0.32.0",
|
|
47
|
+
"eslint": "^8.54.0",
|
|
48
|
+
"react": "^18",
|
|
49
|
+
"react-dom": "^18",
|
|
50
|
+
"tsup": "^8.0.1",
|
|
51
|
+
"typescript": "^5.0.4",
|
|
52
|
+
"vitest": "^0.34.6",
|
|
53
|
+
"@flowgram.ai/eslint-config": "0.1.0-alpha.10",
|
|
54
|
+
"@flowgram.ai/ts-config": "0.1.0-alpha.10"
|
|
55
|
+
},
|
|
56
|
+
"peerDependencies": {
|
|
57
|
+
"react": ">=16.8",
|
|
58
|
+
"react-dom": ">=16.8"
|
|
59
|
+
},
|
|
60
|
+
"publishConfig": {
|
|
61
|
+
"access": "public",
|
|
62
|
+
"registry": "https://registry.npmjs.org/"
|
|
63
|
+
},
|
|
64
|
+
"scripts": {
|
|
65
|
+
"build": "npm run build:fast -- --dts-resolve",
|
|
66
|
+
"build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
|
|
67
|
+
"build:watch": "npm run build:fast -- --dts-resolve",
|
|
68
|
+
"clean": "rimraf dist",
|
|
69
|
+
"test": "exit 0",
|
|
70
|
+
"test:cov": "exit 0",
|
|
71
|
+
"ts-check": "tsc --noEmit",
|
|
72
|
+
"watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
|
|
73
|
+
}
|
|
74
|
+
}
|