可旋转节点

此示例展示了如何使用 CSS 变换实现可以旋转的自定义节点。

¥This example shows how to implement a custom node that can be rotated using CSS transforms.


import React from 'react';
import { ReactFlow, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
 
import RotatableNode from './RotatableNode';
import { nodes, edges } from './initialElements';
 
const nodeTypes = {
  rotatableNode: RotatableNode,
};
 
function Flow() {
  return (
    <ReactFlow
      nodeTypes={nodeTypes}
      defaultNodes={nodes}
      defaultEdges={edges}
      fitView
      style={{ backgroundColor: "#F7F9FB" }}
    >
      <Background />
    </ReactFlow>
  );
}
 
export default Flow;