@3plate/graph-react 0.1.7 → 0.1.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +4 -1
  2. package/dist/index.d.ts +4 -1
  3. package/dist/index.js +3 -111
  4. package/dist/index.mjs +3 -111
  5. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { Update, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
2
+ import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
3
+ export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
3
4
 
4
5
  type GraphProps<N, E> = {
5
6
  /** Initial nodes */
@@ -8,6 +9,8 @@ type GraphProps<N, E> = {
8
9
  edges?: E[];
9
10
  /** Initial history */
10
11
  history?: Update<N, E>[];
12
+ /** Ingestion source configuration (alternative to nodes/edges/history) */
13
+ ingestion?: IngestionConfig;
11
14
  /** Options */
12
15
  options?: APIArguments<N, E>['options'];
13
16
  /** Events */
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { Update, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
2
+ import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
3
+ export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
3
4
 
4
5
  type GraphProps<N, E> = {
5
6
  /** Initial nodes */
@@ -8,6 +9,8 @@ type GraphProps<N, E> = {
8
9
  edges?: E[];
9
10
  /** Initial history */
10
11
  history?: Update<N, E>[];
12
+ /** Ingestion source configuration (alternative to nodes/edges/history) */
13
+ ingestion?: IngestionConfig;
11
14
  /** Options */
12
15
  options?: APIArguments<N, E>['options'];
13
16
  /** Events */
package/dist/index.js CHANGED
@@ -42,21 +42,15 @@ function Graph(props) {
42
42
  const rootRef = (0, import_react.useRef)(null);
43
43
  const apiRef = (0, import_react.useRef)(null);
44
44
  const rootIdRef = (0, import_react.useRef)(`graph-${Math.random().toString(36).slice(2, 11)}`);
45
- const prevPropsRef = (0, import_react.useRef)({});
46
45
  (0, import_react.useEffect)(() => {
47
46
  if (!rootRef.current || apiRef.current) return;
48
47
  rootRef.current.id = rootIdRef.current;
49
- prevPropsRef.current = {
50
- nodes: props.nodes,
51
- edges: props.edges,
52
- history: props.history,
53
- options: props.options
54
- };
55
48
  (0, import_graph_core.graph)({
56
49
  root: rootIdRef.current,
57
50
  nodes: props.nodes,
58
51
  edges: props.edges,
59
52
  history: props.history,
53
+ ingestion: props.ingestion,
60
54
  options: props.options,
61
55
  events: props.events
62
56
  }).then((api) => {
@@ -77,112 +71,10 @@ function Graph(props) {
77
71
  }, []);
78
72
  (0, import_react.useEffect)(() => {
79
73
  if (!apiRef.current) return;
80
- const api = apiRef.current;
81
- const prev = prevPropsRef.current;
82
- const nodesChanged = !shallowEqual(props.nodes, prev.nodes);
83
- const edgesChanged = !shallowEqual(props.edges, prev.edges);
84
- if (nodesChanged || edgesChanged) {
85
- if (props.nodes) {
86
- api.replaceSnapshot(props.nodes, props.edges || [], void 0);
87
- }
88
- prevPropsRef.current = { ...prevPropsRef.current, nodes: props.nodes, edges: props.edges };
89
- return;
90
- }
91
- if (props.history !== prev.history) {
92
- if (props.history === void 0) {
93
- if (props.nodes) {
94
- api.replaceSnapshot(props.nodes, props.edges || [], void 0);
95
- }
96
- prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
97
- return;
98
- }
99
- if (prev.history && isHistoryAppended(prev.history, props.history)) {
100
- const prevLength = prev.history.length;
101
- const newFrames = props.history.slice(prevLength);
102
- for (const frame of newFrames) {
103
- api.update((u) => {
104
- if (frame.addNodes) u.addNodes(...frame.addNodes);
105
- if (frame.removeNodes) u.deleteNodes(...frame.removeNodes);
106
- if (frame.updateNodes) u.updateNodes(...frame.updateNodes);
107
- if (frame.addEdges) u.addEdges(...frame.addEdges);
108
- if (frame.removeEdges) u.deleteEdges(...frame.removeEdges);
109
- if (frame.updateEdges) u.updateEdges(...frame.updateEdges);
110
- if (frame.description) u.describe(frame.description);
111
- });
112
- }
113
- } else {
114
- api.replaceHistory(props.history);
115
- }
116
- prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
117
- }
118
- }, [props.nodes, props.edges, props.history]);
119
- (0, import_react.useEffect)(() => {
120
- if (!apiRef.current) return;
121
- const api = apiRef.current;
122
- const prev = prevPropsRef.current.options;
123
- const curr = props.options;
124
- const prevCanvas = prev?.canvas;
125
- const currCanvas = curr?.canvas;
126
- const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
127
- if (colorModeChanged && currCanvas?.colorMode) {
128
- api.setColorMode(currCanvas.colorMode);
129
- }
130
- const themeChanged = prevCanvas?.theme !== currCanvas?.theme;
131
- const nodeTypesChanged = prevCanvas?.nodeTypes !== currCanvas?.nodeTypes;
132
- const edgeTypesChanged = prevCanvas?.edgeTypes !== currCanvas?.edgeTypes;
133
- if (themeChanged || nodeTypesChanged || edgeTypesChanged) {
134
- api.updateStyles({
135
- theme: currCanvas?.theme,
136
- nodeTypes: currCanvas?.nodeTypes,
137
- edgeTypes: currCanvas?.edgeTypes
138
- });
139
- }
140
- prevPropsRef.current = { ...prevPropsRef.current, options: props.options };
141
- }, [props.options]);
74
+ apiRef.current.applyProps(props);
75
+ }, [props.nodes, props.edges, props.history, props.options]);
142
76
  return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
143
77
  }
144
- function shallowEqual(a, b) {
145
- if (a === b) return true;
146
- if (!a || !b) return false;
147
- if (a.length !== b.length) return false;
148
- for (let i = 0; i < a.length; i++) {
149
- if (a[i] !== b[i]) {
150
- if (typeof a[i] === "object" && a[i] !== null && typeof b[i] === "object" && b[i] !== null) {
151
- const aObj = a[i];
152
- const bObj = b[i];
153
- const aKeys = Object.keys(aObj);
154
- const bKeys = Object.keys(bObj);
155
- if (aKeys.length !== bKeys.length) return false;
156
- for (const key of aKeys) {
157
- if (aObj[key] !== bObj[key]) return false;
158
- }
159
- } else {
160
- return false;
161
- }
162
- }
163
- }
164
- return true;
165
- }
166
- function isHistoryAppended(oldHistory, newHistory) {
167
- if (newHistory.length < oldHistory.length) return false;
168
- for (let i = 0; i < oldHistory.length; i++) {
169
- if (!shallowEqualUpdates(oldHistory[i], newHistory[i])) {
170
- return false;
171
- }
172
- }
173
- return true;
174
- }
175
- function shallowEqualUpdates(a, b) {
176
- if (a === b) return true;
177
- if (a.description !== b.description) return false;
178
- if (!shallowEqual(a.addNodes, b.addNodes)) return false;
179
- if (!shallowEqual(a.removeNodes, b.removeNodes)) return false;
180
- if (!shallowEqual(a.updateNodes, b.updateNodes)) return false;
181
- if (!shallowEqual(a.addEdges, b.addEdges)) return false;
182
- if (!shallowEqual(a.removeEdges, b.removeEdges)) return false;
183
- if (!shallowEqual(a.updateEdges, b.updateEdges)) return false;
184
- return true;
185
- }
186
78
 
187
79
  // src/Playground.tsx
188
80
  var import_react2 = __toESM(require("react"));
package/dist/index.mjs CHANGED
@@ -5,21 +5,15 @@ function Graph(props) {
5
5
  const rootRef = useRef(null);
6
6
  const apiRef = useRef(null);
7
7
  const rootIdRef = useRef(`graph-${Math.random().toString(36).slice(2, 11)}`);
8
- const prevPropsRef = useRef({});
9
8
  useEffect(() => {
10
9
  if (!rootRef.current || apiRef.current) return;
11
10
  rootRef.current.id = rootIdRef.current;
12
- prevPropsRef.current = {
13
- nodes: props.nodes,
14
- edges: props.edges,
15
- history: props.history,
16
- options: props.options
17
- };
18
11
  graph({
19
12
  root: rootIdRef.current,
20
13
  nodes: props.nodes,
21
14
  edges: props.edges,
22
15
  history: props.history,
16
+ ingestion: props.ingestion,
23
17
  options: props.options,
24
18
  events: props.events
25
19
  }).then((api) => {
@@ -40,112 +34,10 @@ function Graph(props) {
40
34
  }, []);
41
35
  useEffect(() => {
42
36
  if (!apiRef.current) return;
43
- const api = apiRef.current;
44
- const prev = prevPropsRef.current;
45
- const nodesChanged = !shallowEqual(props.nodes, prev.nodes);
46
- const edgesChanged = !shallowEqual(props.edges, prev.edges);
47
- if (nodesChanged || edgesChanged) {
48
- if (props.nodes) {
49
- api.replaceSnapshot(props.nodes, props.edges || [], void 0);
50
- }
51
- prevPropsRef.current = { ...prevPropsRef.current, nodes: props.nodes, edges: props.edges };
52
- return;
53
- }
54
- if (props.history !== prev.history) {
55
- if (props.history === void 0) {
56
- if (props.nodes) {
57
- api.replaceSnapshot(props.nodes, props.edges || [], void 0);
58
- }
59
- prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
60
- return;
61
- }
62
- if (prev.history && isHistoryAppended(prev.history, props.history)) {
63
- const prevLength = prev.history.length;
64
- const newFrames = props.history.slice(prevLength);
65
- for (const frame of newFrames) {
66
- api.update((u) => {
67
- if (frame.addNodes) u.addNodes(...frame.addNodes);
68
- if (frame.removeNodes) u.deleteNodes(...frame.removeNodes);
69
- if (frame.updateNodes) u.updateNodes(...frame.updateNodes);
70
- if (frame.addEdges) u.addEdges(...frame.addEdges);
71
- if (frame.removeEdges) u.deleteEdges(...frame.removeEdges);
72
- if (frame.updateEdges) u.updateEdges(...frame.updateEdges);
73
- if (frame.description) u.describe(frame.description);
74
- });
75
- }
76
- } else {
77
- api.replaceHistory(props.history);
78
- }
79
- prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
80
- }
81
- }, [props.nodes, props.edges, props.history]);
82
- useEffect(() => {
83
- if (!apiRef.current) return;
84
- const api = apiRef.current;
85
- const prev = prevPropsRef.current.options;
86
- const curr = props.options;
87
- const prevCanvas = prev?.canvas;
88
- const currCanvas = curr?.canvas;
89
- const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
90
- if (colorModeChanged && currCanvas?.colorMode) {
91
- api.setColorMode(currCanvas.colorMode);
92
- }
93
- const themeChanged = prevCanvas?.theme !== currCanvas?.theme;
94
- const nodeTypesChanged = prevCanvas?.nodeTypes !== currCanvas?.nodeTypes;
95
- const edgeTypesChanged = prevCanvas?.edgeTypes !== currCanvas?.edgeTypes;
96
- if (themeChanged || nodeTypesChanged || edgeTypesChanged) {
97
- api.updateStyles({
98
- theme: currCanvas?.theme,
99
- nodeTypes: currCanvas?.nodeTypes,
100
- edgeTypes: currCanvas?.edgeTypes
101
- });
102
- }
103
- prevPropsRef.current = { ...prevPropsRef.current, options: props.options };
104
- }, [props.options]);
37
+ apiRef.current.applyProps(props);
38
+ }, [props.nodes, props.edges, props.history, props.options]);
105
39
  return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
106
40
  }
107
- function shallowEqual(a, b) {
108
- if (a === b) return true;
109
- if (!a || !b) return false;
110
- if (a.length !== b.length) return false;
111
- for (let i = 0; i < a.length; i++) {
112
- if (a[i] !== b[i]) {
113
- if (typeof a[i] === "object" && a[i] !== null && typeof b[i] === "object" && b[i] !== null) {
114
- const aObj = a[i];
115
- const bObj = b[i];
116
- const aKeys = Object.keys(aObj);
117
- const bKeys = Object.keys(bObj);
118
- if (aKeys.length !== bKeys.length) return false;
119
- for (const key of aKeys) {
120
- if (aObj[key] !== bObj[key]) return false;
121
- }
122
- } else {
123
- return false;
124
- }
125
- }
126
- }
127
- return true;
128
- }
129
- function isHistoryAppended(oldHistory, newHistory) {
130
- if (newHistory.length < oldHistory.length) return false;
131
- for (let i = 0; i < oldHistory.length; i++) {
132
- if (!shallowEqualUpdates(oldHistory[i], newHistory[i])) {
133
- return false;
134
- }
135
- }
136
- return true;
137
- }
138
- function shallowEqualUpdates(a, b) {
139
- if (a === b) return true;
140
- if (a.description !== b.description) return false;
141
- if (!shallowEqual(a.addNodes, b.addNodes)) return false;
142
- if (!shallowEqual(a.removeNodes, b.removeNodes)) return false;
143
- if (!shallowEqual(a.updateNodes, b.updateNodes)) return false;
144
- if (!shallowEqual(a.addEdges, b.addEdges)) return false;
145
- if (!shallowEqual(a.removeEdges, b.removeEdges)) return false;
146
- if (!shallowEqual(a.updateEdges, b.updateEdges)) return false;
147
- return true;
148
- }
149
41
 
150
42
  // src/Playground.tsx
151
43
  import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3plate/graph-react",
3
- "version": "0.1.7",
3
+ "version": "0.1.10",
4
4
  "license": "GPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,7 +21,7 @@
21
21
  "react-dom": "^18.0.0 || ^19.0.0"
22
22
  },
23
23
  "dependencies": {
24
- "@3plate/graph-core": "0.1.7"
24
+ "@3plate/graph-core": "0.1.10"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@testing-library/jest-dom": "^6.6.3",