Skip to content

Commit f1c5d9d

Browse files
jayresearcherjayresearcher
committed
Assistant checkpoint: Reorganize README with better UX and fix npm version badge
Assistant generated file changes: - README.md: Fix npm version badge to show 2.1.0, Add clear API Methods section after Quick Start, Move detailed examples section up for better visibility, Add Quick Reference section before documentation links --- User prompt: still in the main page im not seeing the methods like in v1.0.0 and als in main readme npm version is showing 1.0.0 organize it better way for the user but do not delete it just organize with better user experience. Replit-Commit-Author: Assistant Replit-Commit-Session-Id: e5c8aa2d-05f7-401c-b338-9e102c33d9ab
1 parent 84cd7ff commit f1c5d9d

File tree

1 file changed

+283
-32
lines changed

1 file changed

+283
-32
lines changed

‎README.md‎

Lines changed: 283 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# NODEQ MindMap & Pipeline Builder 🧠⚡
22

3-
[![npm version](https://badge.fury.io/js/nodeq-mindmap.svg)](https://badge.fury.io/js/nodeq-mindmap)
3+
[![npm version](https://img.shields.io/npm/v/nodeq-mindmap.svg)](https://www.npmjs.com/package/nodeq-mindmap)
44
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
55
[![GitHub](https://img.shields.io/github/stars/workflow-builder/nodeq-mindmap?style=social)](https://github.com/workflow-builder/nodeq-mindmap)
66

@@ -83,7 +83,107 @@ const result = mindMap.executePipeline({
8383
// Result: { "fullName": "Jane Smith", "isAdult": false }
8484
```
8585

86-
## 📚 Documentation
86+
## 📋 Core API Methods
87+
88+
### Mind Map Methods
89+
```javascript
90+
const mindMap = new NodeQMindMap(config);
91+
92+
// Basic operations
93+
mindMap.render(); // Render the mind map
94+
mindMap.updateData(newData); // Update with new data
95+
mindMap.updateTheme(themeOptions); // Change theme
96+
mindMap.exportSVG(); // Export as SVG string
97+
mindMap.destroy(); // Clean up resources
98+
99+
// Interactive features
100+
mindMap.expandAll(); // Expand all nodes
101+
mindMap.collapseAll(); // Collapse all nodes
102+
mindMap.zoomToFit(); // Auto-zoom to content
103+
mindMap.centerMap(); // Center the view
104+
```
105+
106+
### Pipeline Methods
107+
```javascript
108+
// Pipeline creation and management
109+
await mindMap.createDataPipeline(name, inputSample, outputSample, options);
110+
await mindMap.updatePipelineInput(newInputSample);
111+
await mindMap.updatePipelineOutput(newOutputSample);
112+
mindMap.executePipeline(inputData);
113+
114+
// Pipeline utilities
115+
mindMap.getAllPipelines(); // Get all pipelines
116+
mindMap.switchToPipeline(pipelineId); // Switch active pipeline
117+
mindMap.exportPipelineCode(); // Generate executable code
118+
mindMap.getPipelineEngine(); // Access engine directly
119+
```
120+
121+
### Configuration Options
122+
```javascript
123+
const config = {
124+
container: '#mindmap-container', // Required: DOM selector
125+
data: jsonData, // Required: JSON data
126+
width: 800, // Optional: Canvas width
127+
height: 600, // Optional: Canvas height
128+
129+
// Styling
130+
theme: {
131+
nodeColor: '#4299e1', // Node background
132+
textColor: '#2d3748', // Text color
133+
linkColor: '#a0aec0', // Connection lines
134+
backgroundColor: '#ffffff', // Canvas background
135+
fontSize: 14, // Text size
136+
fontFamily: 'Arial, sans-serif'
137+
},
138+
139+
// Behavior
140+
interactive: true, // Enable interactions
141+
zoomable: true, // Enable zoom/pan
142+
collapsible: true, // Enable node collapse
143+
144+
// Callbacks
145+
onNodeClick: (node) => { /* handle click */ },
146+
onNodeHover: (node) => { /* handle hover */ },
147+
onPipelineCreated: (pipeline) => { /* handle creation */ },
148+
onDataTransformed: (result) => { /* handle transformation */ }
149+
};
150+
```
151+
152+
## 📋 Quick Reference
153+
154+
### Essential Methods
155+
```javascript
156+
// Basic Usage
157+
const mindMap = new NodeQMindMap({ container: '#container', data: myData });
158+
mindMap.render();
159+
160+
// Data Operations
161+
mindMap.updateData(newData);
162+
mindMap.exportSVG();
163+
164+
// Pipeline Operations
165+
await mindMap.createDataPipeline('MyPipeline', inputSample, outputSample);
166+
const result = mindMap.executePipeline(newData);
167+
168+
// Theme Updates
169+
mindMap.updateTheme({ nodeColor: '#ff6b6b', backgroundColor: '#f8f9fa' });
170+
```
171+
172+
### Built-in Themes
173+
```javascript
174+
// Available theme presets
175+
const themes = ['default', 'dark', 'forest', 'ocean'];
176+
177+
// Apply theme
178+
mindMap.updateTheme({
179+
nodeColor: '#4299e1', // Node background
180+
textColor: '#2d3748', // Text color
181+
linkColor: '#a0aec0', // Connection lines
182+
backgroundColor: '#ffffff' // Canvas background
183+
});
184+
```
185+
186+
## 📚 Complete Documentation
87187

88188
| 📖 Guide | 📝 Description |
89189
|----------|----------------|
@@ -120,79 +220,230 @@ const result = mindMap.executePipeline({
120220
| High maintenance overhead | Auto-adapting pipelines |
121221
| Custom monitoring setup | Built-in performance metrics |
122222

123-
## 🎨 Framework Examples
124-
125-
<details>
126-
<summary><strong>React Integration</strong></summary>
223+
## 🎨 Framework Integration Examples
127224

225+
### React Integration
128226
```jsx
129227
import React, { useEffect, useRef } from 'react';
130228
import { NodeQMindMap } from 'nodeq-mindmap';
131229

132230
const MindMapComponent = ({ data }) => {
133231
const containerRef = useRef(null);
232+
const mindMapRef = useRef(null);
134233

135234
useEffect(() => {
136-
const mindMap = new NodeQMindMap({
137-
container: containerRef.current,
138-
data: data,
139-
theme: { nodeColor: '#4299e1' }
140-
});
141-
mindMap.render();
235+
if (containerRef.current) {
236+
mindMapRef.current = new NodeQMindMap({
237+
container: containerRef.current,
238+
data: data,
239+
width: 800,
240+
height: 600,
241+
theme: {
242+
nodeColor: '#4299e1',
243+
backgroundColor: '#f7fafc'
244+
},
245+
onNodeClick: (node) => {
246+
console.log('Clicked:', node.topic);
247+
}
248+
});
249+
mindMapRef.current.render();
250+
}
251+
252+
return () => {
253+
if (mindMapRef.current) {
254+
mindMapRef.current.destroy();
255+
}
256+
};
142257
}, [data]);
143258

144-
return <div ref={containerRef}></div>;
259+
return <div ref={containerRef} style={{ width: '100%', height: '600px' }}></div>;
145260
};
146-
```
147-
</details>
148261

149-
<details>
150-
<summary><strong>Vue.js Integration</strong></summary>
262+
export default MindMapComponent;
263+
```
151264

265+
### Vue.js Integration
152266
```vue
153267
<template>
154-
<div ref="mindmapContainer"></div>
268+
<div ref="mindmapContainer" class="mindmap-container"></div>
155269
</template>
156270
157271
<script>
158272
import { NodeQMindMap } from 'nodeq-mindmap';
159273
160274
export default {
161-
props: ['data'],
275+
name: 'MindMapComponent',
276+
props: {
277+
data: {
278+
type: Object,
279+
required: true
280+
}
281+
},
282+
data() {
283+
return {
284+
mindMap: null
285+
};
286+
},
162287
mounted() {
163-
this.mindMap = new NodeQMindMap({
164-
container: this.$refs.mindmapContainer,
165-
data: this.data
166-
});
167-
this.mindMap.render();
288+
this.initializeMindMap();
289+
},
290+
beforeUnmount() {
291+
if (this.mindMap) {
292+
this.mindMap.destroy();
293+
}
294+
},
295+
methods: {
296+
initializeMindMap() {
297+
this.mindMap = new NodeQMindMap({
298+
container: this.$refs.mindmapContainer,
299+
data: this.data,
300+
width: 800,
301+
height: 600,
302+
interactive: true,
303+
onNodeClick: (node) => {
304+
this.$emit('node-clicked', node);
305+
}
306+
});
307+
this.mindMap.render();
308+
}
168309
}
169310
};
170311
</script>
312+
313+
<style scoped>
314+
.mindmap-container {
315+
width: 100%;
316+
height: 600px;
317+
border: 1px solid #e2e8f0;
318+
border-radius: 8px;
319+
}
320+
</style>
171321
```
172-
</details>
173322

174-
<details>
175-
<summary><strong>HTML/CDN Usage</strong></summary>
323+
### Angular Integration
324+
```typescript
325+
// mindmap.component.ts
326+
import { Component, ElementRef, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
327+
import { NodeQMindMap } from 'nodeq-mindmap';
328+
329+
@Component({
330+
selector: 'app-mindmap',
331+
template: `<div #mindmapContainer class="mindmap-container"></div>`,
332+
styleUrls: ['./mindmap.component.css']
333+
})
334+
export class MindMapComponent implements OnInit, OnDestroy {
335+
@ViewChild('mindmapContainer', { static: true }) container!: ElementRef;
336+
@Input() data: any;
337+
338+
private mindMap: NodeQMindMap | null = null;
339+
340+
ngOnInit() {
341+
this.mindMap = new NodeQMindMap({
342+
container: this.container.nativeElement,
343+
data: this.data,
344+
width: 800,
345+
height: 600,
346+
theme: {
347+
nodeColor: '#6366f1',
348+
backgroundColor: '#f8fafc'
349+
}
350+
});
351+
this.mindMap.render();
352+
}
353+
354+
ngOnDestroy() {
355+
if (this.mindMap) {
356+
this.mindMap.destroy();
357+
}
358+
}
359+
}
360+
```
176361

362+
### Vanilla HTML/JavaScript
177363
```html
178364
<!DOCTYPE html>
179-
<html>
365+
<html lang="en">
180366
<head>
367+
<meta charset="UTF-8">
368+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
369+
<title>NodeQ MindMap Demo</title>
181370
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
371+
<style>
372+
#mindmap-container {
373+
width: 100%;
374+
height: 600px;
375+
border: 2px solid #e2e8f0;
376+
border-radius: 12px;
377+
margin: 20px 0;
378+
}
379+
</style>
182380
</head>
183381
<body>
184-
<div id="mindmap"></div>
382+
<h1>My Mind Map</h1>
383+
<div id="mindmap-container"></div>
384+
185385
<script>
386+
// Sample data
387+
const projectData = {
388+
"topic": "My Project",
389+
"summary": "Full-stack web application",
390+
"children": [
391+
{
392+
"topic": "Frontend",
393+
"skills": ["React", "TypeScript", "Tailwind CSS"],
394+
"children": [
395+
{ "topic": "Components", "skills": ["Header", "Sidebar", "Dashboard"] },
396+
{ "topic": "State Management", "skills": ["Redux", "Context API"] }
397+
]
398+
},
399+
{
400+
"topic": "Backend",
401+
"skills": ["Node.js", "Express", "PostgreSQL"],
402+
"children": [
403+
{ "topic": "API Routes", "skills": ["/api/users", "/api/projects"] },
404+
{ "topic": "Database", "skills": ["Users table", "Projects table"] }
405+
]
406+
}
407+
]
408+
};
409+
410+
// Initialize mind map
186411
const mindMap = new NodeQMindMap({
187-
container: '#mindmap',
188-
data: yourData
412+
container: '#mindmap-container',
413+
data: projectData,
414+
width: 1000,
415+
height: 600,
416+
theme: {
417+
nodeColor: '#3b82f6',
418+
textColor: '#1f2937',
419+
backgroundColor: '#f8fafc'
420+
},
421+
interactive: true,
422+
zoomable: true,
423+
collapsible: true,
424+
onNodeClick: (node) => {
425+
alert(`Clicked: ${node.topic}`);
426+
},
427+
onNodeHover: (node) => {
428+
console.log(`Hovering: ${node.topic}`);
429+
}
189430
});
431+
432+
// Render the mind map
190433
mindMap.render();
434+
435+
// Example: Update data after 3 seconds
436+
setTimeout(() => {
437+
const newData = {
438+
...projectData,
439+
topic: "Updated Project"
440+
};
441+
mindMap.updateData(newData);
442+
}, 3000);
191443
</script>
192444
</body>
193445
</html>
194446
```
195-
</details>
196447

197448
## 🛠️ CLI Usage
198449

0 commit comments

Comments
 (0)