Online Example1: https://www.relation-graph.com/#/demo/react?id=element-lines
Online Example2: https://www.relation-graph.com/#/demo/react?id=interest-group

Developing a Scalable, Draggable, and Exportable Drawing Board in React with relation-graph

In various applications, particularly in design and education, there is a need for a powerful drawing board tool that allows users to freely zoom, drag, and export their creations as images. This article will guide you through developing such a drawing board application using React and the relation-graph library.

Benefits of Using relation-graph

relation-graph is not just a library for displaying relational data; its high customizability and interactivity make it also very suitable for developing complex drawing board applications. Here are some reasons to choose relation-graph:

• High Interactivity: Supports zooming, dragging, and other user interactions, allowing users to freely manipulate elements on the drawing board.
• Powerful Customization: Enables customization of nodes, lines, and the overall layout and behavior of the drawing board.
• Export Capabilities: Allows users to export the drawing board content as an image, facilitating saving and sharing.

Implementation Steps

1. Environment Setup

Ensure your development environment is set up with Node.js and React. Create a new React project and install relation-graph-react:

npm install relation-graph-react

2. Component Development

Create a new React component named DrawingBoard. This component will serve as the main container for your drawing board application:

import React, { useRef } from 'react';
import RelationGraph from 'relation-graph-react';
import './drawing-board.scss'; // Import custom styles

3. Configure Drawing Board Options

Set up the drawing board options, including enabling zooming, dragging, and image export functionality:

const graphOptions = {
  debug: true,
  defaultNodeColor: '#f39930',
  layout: {
    layoutName: 'free' // Free layout
  }
};

4. Initialize and Render the Drawing Board

Use useRef to get a reference to the drawing board and initialize it:

const graphRef = useRef(null);

const initGraph = () => {
  const graphInstance = graphRef.current?.getInstance();
  if (graphInstance) {
    // Initialize drawing board elements
    graphInstance.setJsonData({
      nodes: [
        { id: 'node1', text: 'Example Node 1', x: 100, y: 100 },
        // Other nodes
      ],
      lines: [
        // Connections
      ]
    });
  }
};

5. Customize Node Rendering

Utilize the nodeSlot property to render custom designs for each node, making each node visually distinct and informative:

const NodeSlot = ({ node }) => (
  <div className="custom-node">
    {node.text}
  </div>
);

6. Component Output

Integrate the RelationGraph component within the return function of your component, applying all configurations:

return (
  <div style={{ height: '100vh' }}>
    <RelationGraph
      ref={graphRef}
      options={graphOptions}
      nodeSlot={NodeSlot}
      onNodeClick={(node, event) => console.log('Node clicked:', node)}
    />
  </div>
);

Conclusion

By following these steps, you have successfully developed a highly interactive drawing board application using React and relation-graph. This application not only supports basic drawing board functionalities but also allows users to export their creations as images, making it ideal for scenarios that require graphic design and presentation capabilities.

Further Resources

For more information or to explore more about relation-graph, consider visiting:

• GitHub Repository: https://github.com/seeksdream/relation-graph
• Official Website: https://www.relation-graph.com/
• Online Examples: https://www.relation-graph.com/#/demo/list
• Documentation: https://www.relation-graph.com/#/docs/start

Explore relation-graph to elevate your data relationships and creative visualizations to new levels.