open-index/open-npm huggingface dataset:
npm package: @kennycha/react-graph-tree
Description: [![npm version](https://badge.fury.io/js/@kennycha%2Freact-graph-tree.svg)](https://www.npmjs.com/package/@kennycha/react-graph-tree)
Latest version: 1.1.0

# @kennycha/react-graph-tree

[![npm version](https://badge.fury.io/js/@kennycha%2Freact-graph-tree.svg)](https://www.npmjs.com/package/@kennycha/react-graph-tree)

A visual graph editor React component for building node-based workflows.

## Demo

**[Live Demo](https://kennycha.github.io/react-graph-tree-sample/)**

## Installation

```bash
npm install @kennycha/react-graph-tree
# or
pnpm add @kennycha/react-graph-tree
```

## Quick Start

```tsx
import { useState } from "react";
import { GraphEditor } from "@kennycha/react-graph-tree";

const INITIAL_GRAPH = {
  nodes: [
    {
      id: "detector1",
      title: "Detector 1",
      type: "detector",
      position: { x: 50, y: 100 },
      payload: {},
      allowMultipleInputs: false,
    },
    {
      id: "output1",
      title: "Output 1", 
      type: "output",
      position: { x: 400, y: 100 },
      payload: {},
      allowMultipleInputs: true,
    },
  ],
  edges: [
    { id: "edge1", sourceNodeId: "detector1", targetNodeId: "output1" },
  ],
  viewState: {
    offset: { x: 0, y: 0 },
    zoom: 1.0,
  },
};

function App() {
  const [currentGraph, setCurrentGraph] = useState(INITIAL_GRAPH);

  const config = {
    graph: currentGraph,
    nodeTypes: [
      { id: "detector", label: "Detector", color: "red" },
      { id: "tracker", label: "Tracker", color: "blue" },
      { id: "feature", label: "Feature", color: "green" },
      { id: "filter", label: "Filter", color: "purple" },
      { id: "output", label: "Output", color: "orange", allowMultipleInputs: true },
    ],
    onGraphChange: (graph) => {
      setCurrentGraph(graph);
    },
  };

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <GraphEditor config={config} />
    </div>
  );
}
```

## Requirements

- React >= 18.0.0
- styled-components >= 5.0.0
- zustand >= 4.0.0

## Features

- **Visual Graph Editing**: Drag nodes, create connections by dragging from output ports
- **Context Menus**: Right-click nodes/canvas for actions (duplicate, delete, add nodes, zoom)
- **Pan & Zoom**: Mouse wheel to zoom, drag to pan
- **Connection Rules**: Configurable input limits per node type
- **Theming**: Customizable colors and styling

## Controls

- **Add Node**: Right-click canvas → select node type
- **Connect Nodes**: Drag from right side (output) to left side (input) of nodes
- **Delete Connection**: Double-click connection line
- **Pan**: Left-click drag on empty canvas
- **Zoom**: Mouse wheel
- **Node Actions**: Right-click node → duplicate/delete/disconnect
- **Cancel Connection**: Press Escape while connecting
npm package: @kennyek/hello-wa
Description: <div align="center">
Latest version: 0.1.0

<div align="center">

  <h1><code>wasm-pack-template</code></h1>

  <strong>A template for kick starting a Rust and WebAssembly project using <a href="https://github.com/rustwasm/wasm-pack">wasm-pack</a>.</strong>

  <p>
    <a href="https://travis-ci.org/rustwasm/wasm-pack-template"><img src="https://img.shields.io/travis/rustwasm/wasm-pack-template.svg?style=flat-square" alt="Build Status" /></a>
  </p>

  <h3>
    <a href="https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html">Tutorial</a>
    <span> | </span>
    <a href="https://discordapp.com/channels/442252698964721669/443151097398296587">Chat</a>
  </h3>

  <sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
</div>

## About

[**📚 Read this template tutorial! 📚**][template-docs]

This template is designed for compiling Rust libraries into WebAssembly and
publishing the resulting package to NPM.

Be sure to check out [other `wasm-pack` tutorials online][tutorials] for other
templates and usages of `wasm-pack`.

[tutorials]: https://rustwasm.github.io/docs/wasm-pack/tutorials/index.html
[template-docs]: https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html

## 🚴 Usage

### 🐑 Use `cargo generate` to Clone this Template

[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)

```
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
```

### 🛠️ Build with `wasm-pack build`

```
wasm-pack build
```

### 🔬 Test in Headless Browsers with `wasm-pack test`

```
wasm-pack test --headless --firefox
```

### 🎁 Publish to NPM with `wasm-pack publish`

```
wasm-pack publish
```

## 🔋 Batteries Included

* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
  between WebAssembly and JavaScript.
* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
  for logging panic messages to the developer console.
* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
  for small code size.