Merge pull request #4 from xyflow/v12

V12

Author: moklick

reactflow-astro/package-lock.json

@@ -10,14 +10,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@reactflow/core": "^11.9.0",
-    "astro": "^3.0.13",
+    "@xyflow/react": "^12.0.0",
+    "astro": "^4.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@astrojs/react": "^3.0.2",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7"
+    "@astrojs/react": "^3.1.0",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22"
   }
 }

reactflow-astro/package.json

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  type OnConnect,
+} from "@xyflow/react";
+
+import "@xyflow/react/dist/style.css";
+
+import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes";
+import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges";
+
+export default function App() {
+  const [nodes, , onNodesChange] = useNodesState<CustomNodeType>(initialNodes);
+  const [edges, setEdges, onEdgesChange] =
+    useEdgesState<CustomEdgeType>(initialEdges);
+  const onConnect: OnConnect = useCallback(
+    (connection) => setEdges((edges) => addEdge(connection, edges)),
+    [setEdges]
+  );
+
+  return (
+    <ReactFlow<CustomNodeType, CustomEdgeType>
+      nodes={nodes}
+      nodeTypes={nodeTypes}
+      onNodesChange={onNodesChange}
+      edges={edges}
+      edgeTypes={edgeTypes}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+    >
+      <Background />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}

reactflow-astro/public/favicon.ico

@@ -0,0 +1,72 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath,
+  useReactFlow,
+  type EdgeProps,
+  type Edge,
+} from "@xyflow/react";
+
+const buttonStyle = {
+  width: 20,
+  height: 20,
+  background: "#eee",
+  border: "1px solid #fff",
+  cursor: "pointer",
+  borderRadius: "50%",
+  fontSize: "12px",
+  lineHeight: 1,
+};
+
+type ButtonEdgeData = {};
+
+export type ButtonEdge = Edge<ButtonEdgeData>;
+
+export default function ButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: EdgeProps<ButtonEdge>) {
+  const { setEdges } = useReactFlow();
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const onEdgeClick = () => {
+    setEdges((edges) => edges.filter((edge) => edge.id !== id));
+  };
+
+  return (
+    <>
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: "all",
+          }}
+          className="nodrag nopan"
+        >
+          <button style={buttonStyle} onClick={onEdgeClick}>
+            ×
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}

reactflow-astro/public/favicon.svg

@@ -0,0 +1,17 @@
+import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react";
+
+import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge";
+
+export const initialEdges = [
+  { id: "a->c", source: "a", target: "c", animated: true },
+  { id: "b->d", source: "b", target: "d", type: "button-edge" },
+  { id: "c->d", source: "c", target: "d", animated: true },
+] satisfies Edge[];
+
+export const edgeTypes = {
+  // Add your custom edge types here!
+  "button-edge": ButtonEdge,
+} satisfies EdgeTypes;
+
+// Append the types of you custom edges to the BuiltInEdge type
+export type CustomEdgeType = BuiltInEdge | ButtonEdgeType;

reactflow-astro/src/components/Flow.tsx

@@ -0,0 +1,30 @@
+import type { Node, NodeProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
+
+export type PositionLoggerNodeData = {
+  label?: string;
+};
+
+export type PositionLoggerNode = Node<PositionLoggerNodeData>;
+
+export default function PositionLoggerNode({
+  positionAbsoluteX,
+  positionAbsoluteY,
+  data,
+}: NodeProps<PositionLoggerNode>) {
+  const x = `${Math.round(positionAbsoluteX)}px`;
+  const y = `${Math.round(positionAbsoluteY)}px`;
+
+  return (
+    // We add this class to use the same styles as React Flow's default nodes.
+    <div className="react-flow__node-default">
+      {data.label && <div>{data.label}</div>}
+
+      <div>
+        {x} {y}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  );
+}