{"id":23223875,"url":"https://github.com/oierorg/grapheditoren","last_synced_at":"2025-04-05T16:34:50.600Z","repository":{"id":256743568,"uuid":"856293666","full_name":"OIerOrg/GraphEditorEN","owner":"OIerOrg","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-12T11:49:24.000Z","size":1368,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-18T23:20:14.694Z","etag":null,"topics":["cp","oi","tools"],"latest_commit_sha":null,"homepage":"https://oierorg.github.io/GraphEditorEN/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OIerOrg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-12T10:30:32.000Z","updated_at":"2024-10-04T07:59:18.000Z","dependencies_parsed_at":"2024-09-12T21:56:23.788Z","dependency_job_id":null,"html_url":"https://github.com/OIerOrg/GraphEditorEN","commit_stats":null,"previous_names":["zjx-kimi/grapheditoren","oierorg/grapheditoren"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OIerOrg%2FGraphEditorEN","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OIerOrg%2FGraphEditorEN/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OIerOrg%2FGraphEditorEN/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OIerOrg%2FGraphEditorEN/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OIerOrg","download_url":"https://codeload.github.com/OIerOrg/GraphEditorEN/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238301611,"owners_count":19449471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cp","oi","tools"],"created_at":"2024-12-18T23:19:48.324Z","updated_at":"2025-02-11T13:34:25.065Z","avatar_url":"https://github.com/OIerOrg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Another Graph Editor\n\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish/ [简体中文](https://github.com/zjx-kimi/GraphEditorZH) \n\n\u003c/div\u003e\n\nA graph editor inspired by [CS Academy's graph editor](https://csacademy.com/app/graph_editor/),\ndesigned with competitive programming in mind.\n\nMade with React, Typescript, Tailwind CSS, and HTML Canvas.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/main.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eA Multi-Component Graph\u003c/em\u003e\n\u003c/p\u003e\n\n## Features\n\n- Common input formats:\n  - A list of edges `u v [w]`, denoting an edge from node `u` to node `v`, where\n  `w` is an optional edge label.\n  - Leetcode-style adjacency list strings such as `[[2,4],[1,3],[2,1],[4,3]]`;\n  ensure that you do **not** put any spaces inside the string.\n  - A parent and child array, where `p[i]` and `c[i]` denote an edge from\n  node `p[i]` to `c[i]`.\n  - Assuming a nonzero number of nodes, you may also label each node. This\n  is useful in scenarios where you are offered an array `a`, where `a[i]`\n  corresponds to the value at node `i`.\n- Label offset (to convert a zero-indexed input to one-indexed and vice versa)\n- Dark/light themes\n- Undirected/directed mode\n- Normal/tree mode\n- Show/hide bridges and cut vertices\n- Show/hide components\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/parentChild.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eA Demonstration of the Parent-Child Input Format\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/leetcode.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eLeetcode-Style Adjacency Lists Work as Well Under Edges\u003c/em\u003e\n\u003c/p\u003e\n\n\u003e [!NOTE]\n\u003e *Tree Mode* and *Bridges* are only available for undirected graphs.\n\n\u003e [!NOTE]\n\u003e For directed graphs, **strongly connected components** are displayed.\n\n## Configuration\n\nIn addition to the light/dark themes, there are three sliders available\nfor adjusting the *node radius*, *line thickness*, and *edge length* at discrete\nintervals. Your configuration will be preserved across refreshes.\n\n\u003e [!NOTE]\n\u003e As the node radius changes, the font size is scaled accordingly to maintain readability.\n\nBy default, the graph is in *Force Mode*, where edges hold everything together\nand nodes repel one another, creating a cool space-like effect. To disable\nthis behavior, simply toggle *Lock Mode*.\n\n## Usage\n\nAdjust the input format to your liking and type away!\n\n\u003e [!IMPORTANT]\n\u003e If you're coming from a platform like [Codeforces](https://codeforces.com/)\n\u003e and the input data contains `n m`, representing the number of vertices and\n\u003e edges respectively, please **omit** it when copy-pasting the test case data.\n\u003e Similarly, if you have an array `p` where `p[i]` represents the parent of `i`,\n\u003e double check that the parent array lines up with the child array.\n\n\u003e [!TIP]\n\u003e To enter a single node, enter `u` or `u u`.\n\n\u003e [!TIP]\n\u003e When entering node labels, if you want to skip over a particular node,\n\u003e use the character '_' as a placeholder.\n\n### Tree Mode\n\nIn this mode, the *first* node that appears in the input data becomes the root.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/twoRootBefore.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eNode 1 is the Original Root\u003c/em\u003e\n\u003c/p\u003e\n\nTo set some arbitrary root, say node 2, as the root, under the *Roots*\nsection, type `2`, and it'll become the root of the tree. In scenarios where\nyou have multiple trees, simply type a comma-separated list of all the roots.\nA caveat is that if you type two nodes that belong to the same tree under\n*Roots*, the one that comes first takes precedence, i.e., if you type\n`2 1`, then node 2 is the root, but if you type `1 2`, then node 1 is the root.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/twoRootAfter.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eNode 2 is the New Root\u003c/em\u003e\n\u003c/p\u003e\n\nWhat happens if the graph isn't a tree? Well, the **DFS Tree** would be\ndisplayed instead, where *back edges* are displayed as dotted lines.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/dfsTree.png?\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cem\u003eA DFS Tree With Bridges and Cut Vertices Shown\u003c/em\u003e\n\u003c/p\u003e\n\n## Credits\n\n- [CS Academy's Graph Editor](https://csacademy.com/app/graph_editor/)\n- [Codeforces](https://codeforces.com/)\n- [Atcoder](https://atcoder.jp/)\n- [USACO Guide](https://usaco.guide/)\n- [-is-this-fft-'s Blog on the DFS Tree](https://codeforces.com/blog/entry/68138)\n- [English version of the original project](https://github.com/anAcc22/another_graph_editor/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foierorg%2Fgrapheditoren","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foierorg%2Fgrapheditoren","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foierorg%2Fgrapheditoren/lists"}