@liveblocks/react-flow 3.16.0-flow1 → 3.16.0-flow2
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/README.md +51 -0
- package/dist/constants.cjs +33 -0
- package/dist/constants.cjs.map +1 -0
- package/dist/constants.js +29 -0
- package/dist/constants.js.map +1 -0
- package/dist/cursors.cjs +27 -18
- package/dist/cursors.cjs.map +1 -1
- package/dist/cursors.js +29 -20
- package/dist/cursors.js.map +1 -1
- package/dist/flow.cjs +174 -237
- package/dist/flow.cjs.map +1 -1
- package/dist/flow.js +179 -240
- package/dist/flow.js.map +1 -1
- package/dist/helpers.cjs +35 -0
- package/dist/helpers.cjs.map +1 -0
- package/dist/helpers.js +30 -0
- package/dist/helpers.js.map +1 -0
- package/dist/index.cjs +3 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +158 -91
- package/dist/index.d.ts +158 -91
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.js +1 -1
- package/package.json +6 -18
- package/dist/suspense.cjs +0 -13
- package/dist/suspense.cjs.map +0 -1
- package/dist/suspense.d.cts +0 -149
- package/dist/suspense.d.ts +0 -149
- package/dist/suspense.js +0 -7
- package/dist/suspense.js.map +0 -1
- package/suspense/README.md +0 -5
- package/suspense/package.json +0 -4
package/dist/helpers.cjs
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('@liveblocks/core');
|
|
4
|
+
var constants = require('./constants.cjs');
|
|
5
|
+
|
|
6
|
+
function toLiveblocksInternalNode(node, config) {
|
|
7
|
+
return core.LiveObject.from(
|
|
8
|
+
node,
|
|
9
|
+
config
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
function toLiveblocksInternalEdge(edge, config) {
|
|
13
|
+
return core.LiveObject.from(
|
|
14
|
+
edge,
|
|
15
|
+
config
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
function toLiveblocksNode(node, config) {
|
|
19
|
+
return toLiveblocksInternalNode(node, {
|
|
20
|
+
...constants.NODE_BASE_CONFIG,
|
|
21
|
+
data: config
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function toLiveblocksEdge(edge, config) {
|
|
25
|
+
return toLiveblocksInternalEdge(edge, {
|
|
26
|
+
...constants.EDGE_BASE_CONFIG,
|
|
27
|
+
data: config
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
exports.toLiveblocksEdge = toLiveblocksEdge;
|
|
32
|
+
exports.toLiveblocksInternalEdge = toLiveblocksInternalEdge;
|
|
33
|
+
exports.toLiveblocksInternalNode = toLiveblocksInternalNode;
|
|
34
|
+
exports.toLiveblocksNode = toLiveblocksNode;
|
|
35
|
+
//# sourceMappingURL=helpers.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.cjs","sources":["../src/helpers.ts"],"sourcesContent":["import type { JsonObject, SyncConfig } from \"@liveblocks/core\";\nimport { LiveObject } from \"@liveblocks/core\";\nimport type { Edge, Node } from \"@xyflow/react\";\n\nimport { EDGE_BASE_CONFIG, NODE_BASE_CONFIG } from \"./constants\";\nimport type {\n InternalLiveblocksEdge,\n InternalLiveblocksNode,\n LiveblocksEdge,\n LiveblocksNode,\n} from \"./types\";\n\nexport function toLiveblocksInternalNode<N extends Node>(\n node: N,\n config: SyncConfig\n): InternalLiveblocksNode {\n return LiveObject.from(\n node as unknown as JsonObject,\n config\n ) as InternalLiveblocksNode;\n}\n\nexport function toLiveblocksInternalEdge<E extends Edge>(\n edge: E,\n config: SyncConfig\n): InternalLiveblocksEdge {\n return LiveObject.from(\n edge as unknown as JsonObject,\n config\n ) as InternalLiveblocksEdge;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Node` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksNode<N extends Node>(\n node: N,\n config?: SyncConfig\n): LiveblocksNode<N> {\n return toLiveblocksInternalNode(node, {\n ...NODE_BASE_CONFIG,\n data: config,\n }) as unknown as LiveblocksNode<N>;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Edge` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksEdge<E extends Edge>(\n edge: E,\n config?: SyncConfig\n): LiveblocksEdge<E> {\n return toLiveblocksInternalEdge(edge, {\n ...EDGE_BASE_CONFIG,\n data: config,\n }) as unknown as LiveblocksEdge<E>;\n}\n"],"names":["LiveObject","NODE_BASE_CONFIG","EDGE_BASE_CONFIG"],"mappings":";;;;;AAYgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAOA,eAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAOA,eAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAGC,0BAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAGC,0BAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH;;;;;;;"}
|
package/dist/helpers.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { LiveObject } from '@liveblocks/core';
|
|
2
|
+
import { NODE_BASE_CONFIG, EDGE_BASE_CONFIG } from './constants.js';
|
|
3
|
+
|
|
4
|
+
function toLiveblocksInternalNode(node, config) {
|
|
5
|
+
return LiveObject.from(
|
|
6
|
+
node,
|
|
7
|
+
config
|
|
8
|
+
);
|
|
9
|
+
}
|
|
10
|
+
function toLiveblocksInternalEdge(edge, config) {
|
|
11
|
+
return LiveObject.from(
|
|
12
|
+
edge,
|
|
13
|
+
config
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
function toLiveblocksNode(node, config) {
|
|
17
|
+
return toLiveblocksInternalNode(node, {
|
|
18
|
+
...NODE_BASE_CONFIG,
|
|
19
|
+
data: config
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function toLiveblocksEdge(edge, config) {
|
|
23
|
+
return toLiveblocksInternalEdge(edge, {
|
|
24
|
+
...EDGE_BASE_CONFIG,
|
|
25
|
+
data: config
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { toLiveblocksEdge, toLiveblocksInternalEdge, toLiveblocksInternalNode, toLiveblocksNode };
|
|
30
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type { JsonObject, SyncConfig } from \"@liveblocks/core\";\nimport { LiveObject } from \"@liveblocks/core\";\nimport type { Edge, Node } from \"@xyflow/react\";\n\nimport { EDGE_BASE_CONFIG, NODE_BASE_CONFIG } from \"./constants\";\nimport type {\n InternalLiveblocksEdge,\n InternalLiveblocksNode,\n LiveblocksEdge,\n LiveblocksNode,\n} from \"./types\";\n\nexport function toLiveblocksInternalNode<N extends Node>(\n node: N,\n config: SyncConfig\n): InternalLiveblocksNode {\n return LiveObject.from(\n node as unknown as JsonObject,\n config\n ) as InternalLiveblocksNode;\n}\n\nexport function toLiveblocksInternalEdge<E extends Edge>(\n edge: E,\n config: SyncConfig\n): InternalLiveblocksEdge {\n return LiveObject.from(\n edge as unknown as JsonObject,\n config\n ) as InternalLiveblocksEdge;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Node` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksNode<N extends Node>(\n node: N,\n config?: SyncConfig\n): LiveblocksNode<N> {\n return toLiveblocksInternalNode(node, {\n ...NODE_BASE_CONFIG,\n data: config,\n }) as unknown as LiveblocksNode<N>;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Edge` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksEdge<E extends Edge>(\n edge: E,\n config?: SyncConfig\n): LiveblocksEdge<E> {\n return toLiveblocksInternalEdge(edge, {\n ...EDGE_BASE_CONFIG,\n data: config,\n }) as unknown as LiveblocksEdge<E>;\n}\n"],"names":[],"mappings":";;;AAYgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAO,UAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAO,UAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAG,gBAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAG,gBAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH;;;;"}
|
package/dist/index.cjs
CHANGED
|
@@ -4,10 +4,12 @@ var core = require('@liveblocks/core');
|
|
|
4
4
|
var version = require('./version.cjs');
|
|
5
5
|
var cursors = require('./cursors.cjs');
|
|
6
6
|
var flow = require('./flow.cjs');
|
|
7
|
+
var helpers = require('./helpers.cjs');
|
|
7
8
|
|
|
8
9
|
core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
|
|
9
10
|
|
|
10
11
|
exports.Cursors = cursors.Cursors;
|
|
11
|
-
exports.createLiveblocksFlow = flow.createLiveblocksFlow;
|
|
12
12
|
exports.useLiveblocksFlow = flow.useLiveblocksFlow;
|
|
13
|
+
exports.toLiveblocksEdge = helpers.toLiveblocksEdge;
|
|
14
|
+
exports.toLiveblocksNode = helpers.toLiveblocksNode;
|
|
13
15
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { CursorsCursorProps, CursorsProps } from \"./cursors\";\nexport { Cursors } from \"./cursors\";\nexport { useLiveblocksFlow } from \"./flow\";\nexport { toLiveblocksEdge, toLiveblocksNode } from \"./helpers\";\nexport type {\n EdgeSyncConfig,\n LiveblocksEdge,\n LiveblocksFlow,\n LiveblocksNode,\n NodeSyncConfig,\n SyncConfig,\n SyncMode,\n} from \"./types\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
-
import { LiveObject, DistributiveOmit, LsonObject, LiveMap, Resolve
|
|
4
|
-
|
|
2
|
+
import { ComponentPropsWithoutRef, ComponentType } from 'react';
|
|
3
|
+
import { SyncConfig, LiveObject, DistributiveOmit, LsonObject, LiveMap, Resolve } from '@liveblocks/core';
|
|
4
|
+
export { SyncConfig, SyncMode } from '@liveblocks/core';
|
|
5
|
+
import { Node, Edge, BuiltInNode, BuiltInEdge, OnNodesChange, OnEdgesChange, OnConnect, OnDelete } from '@xyflow/react';
|
|
5
6
|
|
|
7
|
+
interface CursorsCursorProps {
|
|
8
|
+
/**
|
|
9
|
+
* The user ID for this cursor.
|
|
10
|
+
*/
|
|
11
|
+
userId: string;
|
|
12
|
+
/**
|
|
13
|
+
* The connection ID for this cursor.
|
|
14
|
+
*/
|
|
15
|
+
connectionId: number;
|
|
16
|
+
}
|
|
17
|
+
interface CursorsComponents {
|
|
18
|
+
/**
|
|
19
|
+
* The component used to display each cursor.
|
|
20
|
+
*/
|
|
21
|
+
Cursor: ComponentType<CursorsCursorProps>;
|
|
22
|
+
}
|
|
6
23
|
interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
|
|
7
24
|
/**
|
|
8
25
|
* The key used to store the cursors in users' Presence.
|
|
@@ -10,6 +27,10 @@ interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
10
27
|
* Defaults to `"cursor"`.
|
|
11
28
|
*/
|
|
12
29
|
presenceKey?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Override the component's components.
|
|
32
|
+
*/
|
|
33
|
+
components?: Partial<CursorsComponents>;
|
|
13
34
|
}
|
|
14
35
|
/**
|
|
15
36
|
* Displays other users' cursors inside a React Flow canvas and stores the
|
|
@@ -20,131 +41,177 @@ interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
20
41
|
*/
|
|
21
42
|
declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
|
|
22
43
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
type
|
|
26
|
-
type
|
|
44
|
+
type InferNodeTypeLiterals<N> = N extends Node<any, infer T extends string> ? string extends T ? never : T : never;
|
|
45
|
+
type NodeTypeLiterals<N> = (string & {}) | "*" | InferNodeTypeLiterals<N>;
|
|
46
|
+
type InferEdgeTypeLiterals<E> = E extends Edge<any, infer T extends string> ? string extends T ? never : T : never;
|
|
47
|
+
type EdgeTypeLiterals<E> = (string & {}) | "*" | InferEdgeTypeLiterals<E>;
|
|
48
|
+
type NodeSyncConfig<N extends Node> = {
|
|
49
|
+
[key in NodeTypeLiterals<N>]?: SyncConfig;
|
|
50
|
+
};
|
|
51
|
+
type EdgeSyncConfig<E extends Edge> = {
|
|
52
|
+
[key in EdgeTypeLiterals<E>]?: SyncConfig;
|
|
53
|
+
};
|
|
27
54
|
/**
|
|
28
55
|
* The Liveblocks Storage representation of a React Flow `Node`.
|
|
29
|
-
*
|
|
30
|
-
* It doesn't include local-only properties.
|
|
31
|
-
* The entire node and its `data` property are both stored as `LiveObject`s.
|
|
32
56
|
*/
|
|
33
|
-
type LiveblocksNode<
|
|
34
|
-
data:
|
|
57
|
+
type LiveblocksNode<N extends Node = BuiltInNode, _S extends NodeSyncConfig<N> = NodeSyncConfig<N>> = LiveObject<DistributiveOmit<N, "data"> & {
|
|
58
|
+
data: LsonObject;
|
|
35
59
|
} & LsonObject>;
|
|
36
60
|
/**
|
|
37
61
|
* The Liveblocks Storage representation of a React Flow `Edge`.
|
|
38
|
-
*
|
|
39
|
-
* It doesn't include local-only properties.
|
|
40
|
-
* The entire edge and its `data` property are both stored as `LiveObject`s.
|
|
41
62
|
*/
|
|
42
|
-
type LiveblocksEdge<
|
|
43
|
-
data?:
|
|
63
|
+
type LiveblocksEdge<E extends Edge = BuiltInEdge, _S extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<DistributiveOmit<E, "data"> & {
|
|
64
|
+
data?: LsonObject;
|
|
44
65
|
} & LsonObject>;
|
|
45
66
|
/**
|
|
46
67
|
* The Liveblocks Storage representation of a React Flow diagram made of nodes and edges.
|
|
47
|
-
*
|
|
48
|
-
* Nodes and edges are stored as `LiveMap`s keyed by their IDs, enabling
|
|
49
|
-
* fine-grained conflict-free updates from multiple clients simultaneously.
|
|
50
68
|
*/
|
|
51
|
-
type LiveblocksFlow<
|
|
52
|
-
nodes: LiveMap<string, LiveblocksNode<
|
|
53
|
-
edges: LiveMap<string, LiveblocksEdge<
|
|
69
|
+
type LiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge, NS extends NodeSyncConfig<N> = NodeSyncConfig<N>, ES extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<{
|
|
70
|
+
nodes: LiveMap<string, LiveblocksNode<N, NS>>;
|
|
71
|
+
edges: LiveMap<string, LiveblocksEdge<E, ES>>;
|
|
54
72
|
}>;
|
|
55
|
-
|
|
73
|
+
|
|
74
|
+
type UseLiveblocksFlowResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Resolve<({
|
|
56
75
|
nodes: null;
|
|
57
76
|
edges: null;
|
|
58
77
|
isLoading: true;
|
|
59
78
|
} | {
|
|
60
|
-
nodes:
|
|
61
|
-
edges:
|
|
79
|
+
nodes: N[];
|
|
80
|
+
edges: E[];
|
|
62
81
|
isLoading: false;
|
|
63
82
|
}) & {
|
|
64
|
-
onNodesChange: OnNodesChange<
|
|
65
|
-
onEdgesChange: OnEdgesChange<
|
|
83
|
+
onNodesChange: OnNodesChange<N>;
|
|
84
|
+
onEdgesChange: OnEdgesChange<E>;
|
|
66
85
|
onConnect: OnConnect;
|
|
86
|
+
onDelete: OnDelete<N, E>;
|
|
67
87
|
}>;
|
|
68
|
-
type
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
88
|
+
type LiveblocksFlowSuspenseResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Extract<UseLiveblocksFlowResult<N, E>, {
|
|
89
|
+
isLoading: false;
|
|
90
|
+
}>;
|
|
91
|
+
type UseLiveblocksFlowOptions<N extends Node, E extends Edge> = {
|
|
92
|
+
nodes?: {
|
|
93
|
+
/**
|
|
94
|
+
* The initial React Flow nodes.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* const { ... } = useLiveblocksFlow({
|
|
99
|
+
* nodes: {
|
|
100
|
+
* initial: [
|
|
101
|
+
* { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
|
|
102
|
+
* { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
|
|
103
|
+
* ],
|
|
104
|
+
* },
|
|
105
|
+
* });
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
108
|
+
initial?: N[];
|
|
109
|
+
/**
|
|
110
|
+
* Per-type sync configuration for node data keys.
|
|
111
|
+
*
|
|
112
|
+
* Use `"*"` as a fallback for all node types. Type-specific entries are
|
|
113
|
+
* deep-merged on top of `"*"`, with explicitly named keys taking
|
|
114
|
+
* precedence.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* ```tsx
|
|
118
|
+
* const { ... } = useLiveblocksFlow({
|
|
119
|
+
* nodes: {
|
|
120
|
+
* sync: {
|
|
121
|
+
* // Fallback for all node types
|
|
122
|
+
* "*": { label: false },
|
|
123
|
+
*
|
|
124
|
+
* // Override for "custom" nodes
|
|
125
|
+
* "custom": { color: false },
|
|
126
|
+
* },
|
|
127
|
+
* },
|
|
128
|
+
* });
|
|
129
|
+
* ```
|
|
130
|
+
*/
|
|
131
|
+
sync?: NodeSyncConfig<N>;
|
|
132
|
+
};
|
|
133
|
+
edges?: {
|
|
134
|
+
initial?: E[];
|
|
135
|
+
/**
|
|
136
|
+
* Per-type sync configuration for edge data keys.
|
|
137
|
+
*
|
|
138
|
+
* Use `"*"` as a fallback for all edge types. Type-specific entries are
|
|
139
|
+
* deep-merged on top of `"*"`, with explicitly named keys taking
|
|
140
|
+
* precedence.
|
|
141
|
+
*
|
|
142
|
+
* @example
|
|
143
|
+
* ```tsx
|
|
144
|
+
* const { ... } = useLiveblocksFlow({
|
|
145
|
+
* edges: {
|
|
146
|
+
* sync: {
|
|
147
|
+
* // Fallback for all node types
|
|
148
|
+
* "*": { floating: false },
|
|
149
|
+
* },
|
|
150
|
+
* },
|
|
151
|
+
* });
|
|
152
|
+
* ```
|
|
153
|
+
*/
|
|
154
|
+
sync?: EdgeSyncConfig<E>;
|
|
106
155
|
};
|
|
107
156
|
/**
|
|
108
157
|
* The key used to store the React Flow diagram in Liveblocks Storage.
|
|
109
|
-
*
|
|
110
158
|
* Defaults to `"flow"`.
|
|
111
|
-
*
|
|
112
|
-
* @example
|
|
113
|
-
* ```tsx
|
|
114
|
-
* const { ... } = useLiveblocksFlow({
|
|
115
|
-
* storageKey: "myDiagram",
|
|
116
|
-
* });
|
|
117
|
-
* ```
|
|
118
159
|
*/
|
|
119
160
|
storageKey?: string;
|
|
161
|
+
/**
|
|
162
|
+
* When true, suspends until Storage is ready (use a React `Suspense`
|
|
163
|
+
* boundary). Then `nodes` and `edges` are always arrays and `isLoading` is
|
|
164
|
+
* always false.
|
|
165
|
+
*/
|
|
166
|
+
suspense?: boolean;
|
|
120
167
|
};
|
|
121
|
-
/**
|
|
122
|
-
* Creates a Liveblocks Storage representation of a React Flow diagram from nodes and edges.
|
|
123
|
-
*
|
|
124
|
-
* @example
|
|
125
|
-
* ```tsx
|
|
126
|
-
* <RoomProvider
|
|
127
|
-
* initialStorage={{
|
|
128
|
-
* flow: createLiveblocksFlow(initialNodes, initialEdges),
|
|
129
|
-
* }}
|
|
130
|
-
* />
|
|
131
|
-
* ```
|
|
132
|
-
*/
|
|
133
|
-
declare function createLiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge>(nodes?: TNode[], edges?: TEdge[]): LiveblocksFlow<TNode, TEdge>;
|
|
134
168
|
/**
|
|
135
169
|
* Returns a controlled React Flow state backed by Liveblocks Storage.
|
|
136
170
|
*
|
|
137
171
|
* @example
|
|
138
172
|
* ```tsx
|
|
139
|
-
* const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isLoading } = useLiveblocksFlow();
|
|
173
|
+
* const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete, isLoading } = useLiveblocksFlow();
|
|
140
174
|
*
|
|
141
175
|
* if (isLoading) {
|
|
142
176
|
* return <div>Loading…</div>
|
|
143
177
|
* }
|
|
144
178
|
*
|
|
145
|
-
* return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />;
|
|
179
|
+
* return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onDelete={onDelete} />;
|
|
146
180
|
* ```
|
|
181
|
+
* Pass `{ suspense: true }` to suspend until Storage is ready, `nodes` and `edges` will never be `null`.
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```tsx
|
|
185
|
+
* const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete } =
|
|
186
|
+
* useLiveblocksFlow({ suspense: true });
|
|
187
|
+
*
|
|
188
|
+
* return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onDelete={onDelete} />;
|
|
189
|
+
* ```
|
|
190
|
+
*/
|
|
191
|
+
declare function useLiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge>(options?: UseLiveblocksFlowOptions<N, E> & {
|
|
192
|
+
suspense?: false;
|
|
193
|
+
}): Resolve<UseLiveblocksFlowResult<N, E>>;
|
|
194
|
+
declare function useLiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge>(options: UseLiveblocksFlowOptions<N, E> & {
|
|
195
|
+
suspense: true;
|
|
196
|
+
}): Resolve<LiveblocksFlowSuspenseResult<N, E>>;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* @experimental
|
|
200
|
+
*
|
|
201
|
+
* Converts a React Flow `Node` into a Liveblocks Storage version.
|
|
202
|
+
* Keys marked `false` in config are set as local-only (not synced).
|
|
203
|
+
* Keys marked `"atomic"` are stored as plain Json (no deep wrapping).
|
|
204
|
+
* All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).
|
|
205
|
+
*/
|
|
206
|
+
declare function toLiveblocksNode<N extends Node>(node: N, config?: SyncConfig): LiveblocksNode<N>;
|
|
207
|
+
/**
|
|
208
|
+
* @experimental
|
|
209
|
+
*
|
|
210
|
+
* Converts a React Flow `Edge` into a Liveblocks Storage version.
|
|
211
|
+
* Keys marked `false` in config are set as local-only (not synced).
|
|
212
|
+
* Keys marked `"atomic"` are stored as plain Json (no deep wrapping).
|
|
213
|
+
* All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).
|
|
147
214
|
*/
|
|
148
|
-
declare function
|
|
215
|
+
declare function toLiveblocksEdge<E extends Edge>(edge: E, config?: SyncConfig): LiveblocksEdge<E>;
|
|
149
216
|
|
|
150
|
-
export { Cursors, LiveblocksEdge, LiveblocksFlow, LiveblocksNode,
|
|
217
|
+
export { Cursors, CursorsCursorProps, CursorsProps, EdgeSyncConfig, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, NodeSyncConfig, toLiveblocksEdge, toLiveblocksNode, useLiveblocksFlow };
|