https://github.com/oierorg/grapheditoren

https://github.com/oierorg/grapheditoren

cp oi tools

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/oierorg/grapheditoren
• Owner: OIerOrg
• License: mit
• Created: 2024-09-12T10:30:32.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-12T11:49:24.000Z (over 1 year ago)
• Last Synced: 2024-12-18T23:20:14.694Z (over 1 year ago)
• Topics: cp, oi, tools
• Language: TypeScript
• Homepage: https://oierorg.github.io/GraphEditorEN/
• Size: 1.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Another Graph Editor



English/ [简体中文](https://github.com/zjx-kimi/GraphEditorZH) 



A graph editor inspired by [CS Academy's graph editor](https://csacademy.com/app/graph_editor/),

designed with competitive programming in mind.

Made with React, Typescript, Tailwind CSS, and HTML Canvas.



    





A Multi-Component Graph



## Features

- Common input formats:

  - A list of edges `u v [w]`, denoting an edge from node `u` to node `v`, where

  `w` is an optional edge label.

  - Leetcode-style adjacency list strings such as `[[2,4],[1,3],[2,1],[4,3]]`;

  ensure that you do **not** put any spaces inside the string.

  - A parent and child array, where `p[i]` and `c[i]` denote an edge from

  node `p[i]` to `c[i]`.

  - Assuming a nonzero number of nodes, you may also label each node. This

  is useful in scenarios where you are offered an array `a`, where `a[i]`

  corresponds to the value at node `i`.

- Label offset (to convert a zero-indexed input to one-indexed and vice versa)

- Dark/light themes

- Undirected/directed mode

- Normal/tree mode

- Show/hide bridges and cut vertices

- Show/hide components



    





A Demonstration of the Parent-Child Input Format





    





Leetcode-Style Adjacency Lists Work as Well Under Edges



> [!NOTE]

> *Tree Mode* and *Bridges* are only available for undirected graphs.

> [!NOTE]

> For directed graphs, **strongly connected components** are displayed.

## Configuration

In addition to the light/dark themes, there are three sliders available

for adjusting the *node radius*, *line thickness*, and *edge length* at discrete

intervals. Your configuration will be preserved across refreshes.

> [!NOTE]

> As the node radius changes, the font size is scaled accordingly to maintain readability.

By default, the graph is in *Force Mode*, where edges hold everything together

and nodes repel one another, creating a cool space-like effect. To disable

this behavior, simply toggle *Lock Mode*.

## Usage

Adjust the input format to your liking and type away!

> [!IMPORTANT]

> If you're coming from a platform like [Codeforces](https://codeforces.com/)

> and the input data contains `n m`, representing the number of vertices and

> edges respectively, please **omit** it when copy-pasting the test case data.

> Similarly, if you have an array `p` where `p[i]` represents the parent of `i`,

> double check that the parent array lines up with the child array.

> [!TIP]

> To enter a single node, enter `u` or `u u`.

> [!TIP]

> When entering node labels, if you want to skip over a particular node,

> use the character '_' as a placeholder.

### Tree Mode

In this mode, the *first* node that appears in the input data becomes the root.



    





Node 1 is the Original Root



To set some arbitrary root, say node 2, as the root, under the *Roots*

section, type `2`, and it'll become the root of the tree. In scenarios where

you have multiple trees, simply type a comma-separated list of all the roots.

A caveat is that if you type two nodes that belong to the same tree under

*Roots*, the one that comes first takes precedence, i.e., if you type

`2 1`, then node 2 is the root, but if you type `1 2`, then node 1 is the root.



    





Node 2 is the New Root



What happens if the graph isn't a tree? Well, the **DFS Tree** would be

displayed instead, where *back edges* are displayed as dotted lines.



    





A DFS Tree With Bridges and Cut Vertices Shown



## Credits

- [CS Academy's Graph Editor](https://csacademy.com/app/graph_editor/)

- [Codeforces](https://codeforces.com/)

- [Atcoder](https://atcoder.jp/)

- [USACO Guide](https://usaco.guide/)

- [-is-this-fft-'s Blog on the DFS Tree](https://codeforces.com/blog/entry/68138)

- [English version of the original project](https://github.com/anAcc22/another_graph_editor/)