@theclearsky/react-blender-nodes 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -43
- package/dist/index.d.ts +607 -31
- package/dist/react-blender-nodes.css +1 -1
- package/dist/react-blender-nodes.es.js +4606 -3984
- package/dist/react-blender-nodes.es.js.map +1 -1
- package/dist/react-blender-nodes.umd.js +20 -20
- package/dist/react-blender-nodes.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,53 +5,25 @@ a flexible and customizable node-based graph editor for web applications.
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Quick Links
|
|
9
|
+
|
|
10
|
+
- [](https://theclearsky.github.io/react-blender-nodes/?path=/story/components-organisms-fullgraph--playground) -
|
|
11
|
+
Interactive examples and component playground
|
|
12
|
+
- [](https://www.npmjs.com/package/@theclearsky/react-blender-nodes) -
|
|
13
|
+
Install and use in your project
|
|
14
|
+
- [](https://github.com/TheClearSky/react-blender-nodes/issues) -
|
|
15
|
+
Report bugs and issues
|
|
16
|
+
- [](https://github.com/TheClearSky/react-blender-nodes/discussions) -
|
|
17
|
+
Request features and discuss ideas
|
|
18
|
+
|
|
19
|
+
## Overview
|
|
9
20
|
|
|
10
21
|
React Blender Nodes recreates the iconic Blender node editor experience on the
|
|
11
22
|
web. Built with modern React patterns and TypeScript, it offers a complete
|
|
12
23
|
solution for creating interactive node-based interfaces with support for custom
|
|
13
24
|
nodes, connections, and real-time manipulation.
|
|
14
25
|
|
|
15
|
-
##
|
|
16
|
-
|
|
17
|
-
### 🎨 Blender-Inspired Interface
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- Authentic dark theme matching Blender's node editor
|
|
22
|
-
- Familiar interactions and visual design
|
|
23
|
-
- Smooth animations and transitions
|
|
24
|
-
|
|
25
|
-
### 🔧 Customizable Nodes
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
- Dynamic inputs and outputs with custom shapes
|
|
30
|
-
- Collapsible input panels for complex configurations
|
|
31
|
-
- Interactive input components (text, number sliders)
|
|
32
|
-
- Custom handle shapes (circle, square, diamond, star, etc.)
|
|
33
|
-
|
|
34
|
-
### 🎮 Interactive Graph Editor
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
- Pan, zoom, and select nodes with intuitive controls
|
|
39
|
-
- Drag and drop node connections
|
|
40
|
-
- Context menu for adding new nodes
|
|
41
|
-
- Real-time node manipulation
|
|
42
|
-
|
|
43
|
-
### 🎯 Advanced Features
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- **Handle Shapes**: 13+ custom handle shapes including geometric and artistic
|
|
48
|
-
designs
|
|
49
|
-
- **Input Components**: Built-in text and number inputs with validation
|
|
50
|
-
- **Panel System**: Collapsible panels for organizing complex node inputs
|
|
51
|
-
- **State Management**: Integrated reducer for managing graph state
|
|
52
|
-
- **TypeScript Support**: Full type safety with comprehensive definitions
|
|
53
|
-
|
|
54
|
-
## 🚀 Quick Start
|
|
26
|
+
## Quick Start
|
|
55
27
|
|
|
56
28
|
### Installation
|
|
57
29
|
|
|
@@ -122,7 +94,7 @@ function MyNodeEditor() {
|
|
|
122
94
|
}
|
|
123
95
|
```
|
|
124
96
|
|
|
125
|
-
###
|
|
97
|
+
### Type Safety with Auto-Infer Helpers
|
|
126
98
|
|
|
127
99
|
The auto-infer helper functions are **essential** for type safety in React
|
|
128
100
|
Blender Nodes. They ensure TypeScript can properly validate type references
|
|
@@ -164,7 +136,46 @@ const dataTypes = {
|
|
|
164
136
|
};
|
|
165
137
|
```
|
|
166
138
|
|
|
167
|
-
##
|
|
139
|
+
## Features
|
|
140
|
+
|
|
141
|
+
### 🎨 Blender-Inspired Interface
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
- Authentic dark theme matching Blender's node editor
|
|
146
|
+
- Familiar interactions and visual design
|
|
147
|
+
- Smooth animations and transitions
|
|
148
|
+
|
|
149
|
+
### 🔧 Customizable Nodes
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
- Dynamic inputs and outputs with custom shapes
|
|
154
|
+
- Collapsible input panels for complex configurations
|
|
155
|
+
- Interactive input components (text, number sliders)
|
|
156
|
+
- Custom handle shapes (circle, square, diamond, star, etc.)
|
|
157
|
+
|
|
158
|
+
### 🎮 Interactive Graph Editor
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
- Pan, zoom, and select nodes with intuitive controls
|
|
163
|
+
- Drag and drop node connections
|
|
164
|
+
- Context menu for adding new nodes
|
|
165
|
+
- Real-time node manipulation
|
|
166
|
+
|
|
167
|
+
### 🎯 Advanced Features
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
- **Handle Shapes**: 13+ custom handle shapes including geometric and artistic
|
|
172
|
+
designs
|
|
173
|
+
- **Input Components**: Built-in text and number inputs with validation
|
|
174
|
+
- **Panel System**: Collapsible panels for organizing complex node inputs
|
|
175
|
+
- **State Management**: Integrated reducer for managing graph state
|
|
176
|
+
- **TypeScript Support**: Full type safety with comprehensive definitions
|
|
177
|
+
|
|
178
|
+
## Usage Examples
|
|
168
179
|
|
|
169
180
|
### Custom Node with Panels
|
|
170
181
|
|