Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

A react flow chart builder with custom nodes

NotificationsYou must be signed in to change notification settings

CibiAananth/cuddly-engine

Repository files navigation

This project was generated withVite version 4.3.8.

Development server

Runnpm run dev for a dev server. Navigate tohttp://localhost:9000/. The app will automatically reload if you change any of the source files.

Build

Runnpm run build to build the project. The build artifacts will be stored in thedist/ directory.

Steps to create and add a new custom node to the flow builder

  1. Create a new file insrc/components/Nodes folder with the name of the node. For examplesrc/components/Nodes/MyCustomNode.jsx
  2. Add the node's Settings, Node and NodeBlock components and its factory function. Please refer the existing nodes for the structure.
  3. Add the new node tonodeTypes and it's factory function tonodeCreator insrc/components/Flow.jsx

The philosophy followed throughout the project is

  • Keep the components as dumb as possible and move the logic to its corresponding helper functions. This helps in reusing the components in different contexts. For example, the settings for each node is dynamic and bound to the node object so the Sidebar component is kept dumb and simply renders the settings component passed to it.

  • Colocate the node and its pet components in the same file. For example, theMessageNode component and its helper functions are colocated in the same filesrc/components/Nodes/MessageNode.jsx

About

A react flow chart builder with custom nodes

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp