feat(react): add basic ssr support

2023-10-04 16:03:23 +02:00
parent 53c04e2546
commit 86c041c2a0
21 changed files with 2915 additions and 606 deletions
@@ -1,65 +1,69 @@
-import { devWarn, infiniteExtent, ConnectionMode } from '@xyflow/system';
+import { devWarn, infiniteExtent, ConnectionMode, updateNodes } from '@xyflow/system';

-import type { ReactFlowStore } from '../types';
+import type { Edge, Node, ReactFlowStore } from '../types';

-const initialState: ReactFlowStore = {
-  rfId: '1',
-  width: 0,
-  height: 0,
-  transform: [0, 0, 1],
-  nodes: [],
-  edges: [],
-  onNodesChange: null,
-  onEdgesChange: null,
-  hasDefaultNodes: false,
-  hasDefaultEdges: false,
-  panZoom: null,
-  minZoom: 0.5,
-  maxZoom: 2,
-  translateExtent: infiniteExtent,
-  nodeExtent: infiniteExtent,
-  nodesSelectionActive: false,
-  userSelectionActive: false,
-  userSelectionRect: null,
-  connectionPosition: { x: 0, y: 0 },
-  connectionStatus: null,
-  connectionMode: ConnectionMode.Strict,
-  domNode: null,
-  paneDragging: false,
-  noPanClassName: 'nopan',
-  nodeOrigin: [0, 0],
-  nodeDragThreshold: 0,
+const getInitialState = ({ nodes = [], edges = [] }: { nodes?: Node[]; edges?: Edge[] }): ReactFlowStore => {
+  const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });

-  snapGrid: [15, 15],
-  snapToGrid: false,
+  return {
+    rfId: '1',
+    width: 0,
+    height: 0,
+    transform: [0, 0, 1],
+    nodes: nextNodes,
+    edges: edges,
+    onNodesChange: null,
+    onEdgesChange: null,
+    hasDefaultNodes: false,
+    hasDefaultEdges: false,
+    panZoom: null,
+    minZoom: 0.5,
+    maxZoom: 2,
+    translateExtent: infiniteExtent,
+    nodeExtent: infiniteExtent,
+    nodesSelectionActive: false,
+    userSelectionActive: false,
+    userSelectionRect: null,
+    connectionPosition: { x: 0, y: 0 },
+    connectionStatus: null,
+    connectionMode: ConnectionMode.Strict,
+    domNode: null,
+    paneDragging: false,
+    noPanClassName: 'nopan',
+    nodeOrigin: [0, 0],
+    nodeDragThreshold: 0,

-  nodesDraggable: true,
-  nodesConnectable: true,
-  nodesFocusable: true,
-  edgesFocusable: true,
-  edgesUpdatable: true,
-  elementsSelectable: true,
-  elevateNodesOnSelect: true,
-  fitViewOnInit: false,
-  fitViewDone: false,
-  fitViewOnInitOptions: undefined,
-  selectNodesOnDrag: true,
+    snapGrid: [15, 15],
+    snapToGrid: false,

-  multiSelectionActive: false,
+    nodesDraggable: true,
+    nodesConnectable: true,
+    nodesFocusable: true,
+    edgesFocusable: true,
+    edgesUpdatable: true,
+    elementsSelectable: true,
+    elevateNodesOnSelect: true,
+    fitViewOnInit: false,
+    fitViewDone: false,
+    fitViewOnInitOptions: undefined,
+    selectNodesOnDrag: true,

-  connectionStartHandle: null,
-  connectionEndHandle: null,
-  connectionClickStartHandle: null,
-  connectOnClick: true,
+    multiSelectionActive: false,

-  ariaLiveMessage: '',
-  autoPanOnConnect: true,
-  autoPanOnNodeDrag: true,
-  connectionRadius: 20,
-  onError: devWarn,
-  isValidConnection: undefined,
+    connectionStartHandle: null,
+    connectionEndHandle: null,
+    connectionClickStartHandle: null,
+    connectOnClick: true,

-  lib: 'react',
+    ariaLiveMessage: '',
+    autoPanOnConnect: true,
+    autoPanOnNodeDrag: true,
+    connectionRadius: 20,
+    onError: devWarn,
+    isValidConnection: undefined,
+
+    lib: 'react',
+  };
 };

-export default initialState;
+export default getInitialState;