From 4b82685aaa0f8995ab68dd4ecdffd3106bba08f6 Mon Sep 17 00:00:00 2001 From: Oleg Sh Date: Sun, 18 Sep 2022 13:19:53 +0200 Subject: [PATCH] Add creating graph using Edge List. --- i/css/create_graph_by_pair.css | 47 ++++++++ lang/bg/create_graph_by_edge_list.php | 19 ++++ lang/bg/home.php | 4 + lang/bg/main_tpl.php | 1 + lang/ch/create_graph_by_edge_list.php | 19 ++++ lang/ch/home.php | 4 + lang/ch/main_tpl.php | 1 + lang/de/create_graph_by_edge_list.php | 19 ++++ lang/de/home.php | 4 + lang/de/main_tpl.php | 1 + lang/el/create_graph_by_edge_list.php | 19 ++++ lang/el/home.php | 4 + lang/el/main_tpl.php | 1 + lang/en/create_graph_by_edge_list.php | 19 ++++ lang/en/home.php | 4 + lang/en/main_tpl.php | 1 + lang/es/create_graph_by_edge_list.php | 19 ++++ lang/es/home.php | 4 + lang/es/main_tpl.php | 1 + lang/fr/create_graph_by_edge_list.php | 19 ++++ lang/fr/home.php | 4 + lang/fr/main_tpl.php | 1 + lang/nl/create_graph_by_edge_list.php | 19 ++++ lang/nl/home.php | 4 + lang/nl/main_tpl.php | 1 + lang/pt/create_graph_by_edge_list.php | 19 ++++ lang/pt/home.php | 4 + lang/pt/main_tpl.php | 1 + lang/ru/create_graph_by_edge_list.php | 19 ++++ lang/ru/home.php | 4 + lang/ru/main_tpl.php | 1 + lang/sv/create_graph_by_edge_list.php | 19 ++++ lang/sv/home.php | 4 + lang/sv/main_tpl.php | 1 + script/Application.js | 87 +++++++++++++++ script/Graph.js | 153 ++++++++++++++++++++++++++ script/texts.js | 5 + src/main_tpl.php | 3 + tpl/create_graph_by_edge_list.php | 76 +++++++++++++ tpl/home.php | 10 +- 40 files changed, 644 insertions(+), 1 deletion(-) create mode 100644 i/css/create_graph_by_pair.css create mode 100644 lang/bg/create_graph_by_edge_list.php create mode 100644 lang/ch/create_graph_by_edge_list.php create mode 100644 lang/de/create_graph_by_edge_list.php create mode 100644 lang/el/create_graph_by_edge_list.php create mode 100644 lang/en/create_graph_by_edge_list.php create mode 100644 lang/es/create_graph_by_edge_list.php create mode 100644 lang/fr/create_graph_by_edge_list.php create mode 100644 lang/nl/create_graph_by_edge_list.php create mode 100644 lang/pt/create_graph_by_edge_list.php create mode 100644 lang/ru/create_graph_by_edge_list.php create mode 100644 lang/sv/create_graph_by_edge_list.php create mode 100644 tpl/create_graph_by_edge_list.php diff --git a/i/css/create_graph_by_pair.css b/i/css/create_graph_by_pair.css new file mode 100644 index 0000000..65b9ae7 --- /dev/null +++ b/i/css/create_graph_by_pair.css @@ -0,0 +1,47 @@ + + .form-inline + { + .checkbox + { + margin-right: 12px; + } + } + + #PairFieldPage + { + overflow: scroll; + width: 100%; + height: 300px; + overflow-wrap: normal; + } + +#AdjacencyMatrixFieldInput +{ + overflow: scroll; + max-width: 100%; + max-height: 300px; + overflow-x: scroll; + white-space:nowrap; +} + + #BadFormatMessage + { + padding: 8px; + display: none; + } + +::-webkit-scrollbar { + -webkit-appearance: none; + width: 7px; + height: 7px; +} + +::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: rgba(0,0,0,.5); + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); +} + +#CreateByPair { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/lang/bg/create_graph_by_edge_list.php b/lang/bg/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/bg/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/bg/home.php b/lang/bg/home.php index 50cd2ca..a7a5cf5 100644 --- a/lang/bg/home.php +++ b/lang/bg/home.php @@ -288,4 +288,8 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit"; $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/bg/main_tpl.php b/lang/bg/main_tpl.php index 6587a96..522c93e 100644 --- a/lang/bg/main_tpl.php +++ b/lang/bg/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Новини"; $g_lang["menu_9"] = "Пример за използване на граф"; $g_lang["menu_10"] = "Отворен код"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Онлайн Граф е проект с отворен код, насочен към създаване и лесна визуализация на граф и търсене на най-кратък път. Освен това можете да създадете граф от матрица на съседство. Повече за проекта и страница за помощ.\n"; $g_lang["lang"] = "Language"; ?> \ No newline at end of file diff --git a/lang/ch/create_graph_by_edge_list.php b/lang/ch/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/ch/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/ch/home.php b/lang/ch/home.php index 4dd5f8a..e8394e6 100644 --- a/lang/ch/home.php +++ b/lang/ch/home.php @@ -288,4 +288,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/ch/main_tpl.php b/lang/ch/main_tpl.php index 7529bad..e346d1a 100644 --- a/lang/ch/main_tpl.php +++ b/lang/ch/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "新闻"; $g_lang["menu_9"] = "使用图的例子"; $g_lang["menu_10"] = "开源"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online 是一个在线项目为了帮助 创造和可视化图 寻找最短路. 你也可以创造使用 邻接矩阵创造图. 关于项目 和 帮助页面.\n"; $g_lang["lang"] = "语言"; ?> \ No newline at end of file diff --git a/lang/de/create_graph_by_edge_list.php b/lang/de/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/de/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/de/home.php b/lang/de/home.php index d9032c2..502d0c2 100644 --- a/lang/de/home.php +++ b/lang/de/home.php @@ -251,4 +251,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/de/main_tpl.php b/lang/de/main_tpl.php index 1bde7d4..ca3230b 100644 --- a/lang/de/main_tpl.php +++ b/lang/de/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Nachrichten"; $g_lang["menu_9"] = "anhand dem Beispielgraph"; $g_lang["menu_10"] = "anhand eines Diagrammbeispiels"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online ist ein online Projekt, der sich auf Erstellen und einfache Visualisierung des Graphes und kürzesten Pfad-Suche richtet. Außerdem, können Sie einen Graph via Adjazenzmatrix erstellen. "; $g_lang["lang"] = "Sprache"; $g_lang["home_notg"] = "Home"; diff --git a/lang/el/create_graph_by_edge_list.php b/lang/el/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/el/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/el/home.php b/lang/el/home.php index dc49845..0e375d7 100644 --- a/lang/el/home.php +++ b/lang/el/home.php @@ -289,4 +289,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/el/main_tpl.php b/lang/el/main_tpl.php index f15dedd..4ca8e2a 100644 --- a/lang/el/main_tpl.php +++ b/lang/el/main_tpl.php @@ -10,6 +10,7 @@ $g_lang["menu_8"] = "Νέα"; $g_lang["menu_9"] = "Από παραδείγματα γράφων"; $g_lang["menu_10"] = "Ανοιχτό λογισμικό"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = " Το Graph Online είναι ενα online πρότζεκτ με στόχο την εύκολη δημιουργία και απεικόνιση γράφων. diff --git a/lang/en/create_graph_by_edge_list.php b/lang/en/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/en/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/en/home.php b/lang/en/home.php index 5422771..02c238c 100755 --- a/lang/en/home.php +++ b/lang/en/home.php @@ -288,4 +288,8 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit"; $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/en/main_tpl.php b/lang/en/main_tpl.php index 60dbe3e..be47cf3 100755 --- a/lang/en/main_tpl.php +++ b/lang/en/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "News"; $g_lang["menu_9"] = "Using graph example"; $g_lang["menu_10"] = "Open source"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online is online project aimed at creation and easy visualization of graph and shortest path searching. Also you can create graph from adjacency matrix. About project and look help page.\n"; $g_lang["lang"] = "Language"; ?> \ No newline at end of file diff --git a/lang/es/create_graph_by_edge_list.php b/lang/es/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/es/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/es/home.php b/lang/es/home.php index a0b7f95..8f599b7 100755 --- a/lang/es/home.php +++ b/lang/es/home.php @@ -288,4 +288,8 @@ Tenemos traducciones en griego 🇬🇷. diff --git a/lang/es/main_tpl.php b/lang/es/main_tpl.php index bbc93e8..be33038 100755 --- a/lang/es/main_tpl.php +++ b/lang/es/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Novedades"; $g_lang["menu_9"] = "Usar grafo de ejemplo"; $g_lang["menu_10"] = "Código abierto"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online es un proyecto en línea que apunta a la creación y fácil visualización de grafos y búsqueda de caminos más cortos. Además puedes crear grafos a partir de matrices de adyacencia. Acerca del proyecto y consulta nuestra página de ayuda.\n"; $g_lang["lang"] = "Idioma"; ?> \ No newline at end of file diff --git a/lang/fr/create_graph_by_edge_list.php b/lang/fr/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/fr/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/fr/home.php b/lang/fr/home.php index b25df14..4737d67 100644 --- a/lang/fr/home.php +++ b/lang/fr/home.php @@ -256,4 +256,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/fr/main_tpl.php b/lang/fr/main_tpl.php index 343f122..6753d01 100644 --- a/lang/fr/main_tpl.php +++ b/lang/fr/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Nouveau"; $g_lang["menu_9"] = "En utilisant un graph en exemple"; $g_lang["menu_10"] = "Droit libre"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online est un projet en ligne pour créer et visualiser facilement des graphes, et également rechercher  le chemin le plus court. L'on peut également créer des graphes à partir de leurs matrices d'adjacence. A propos du projet et acces à la page d'aide."; $g_lang["lang"] = "Langue"; $g_lang["home"] = "Maison"; diff --git a/lang/nl/create_graph_by_edge_list.php b/lang/nl/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/nl/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/nl/home.php b/lang/nl/home.php index 806e2c1..7d9b717 100644 --- a/lang/nl/home.php +++ b/lang/nl/home.php @@ -253,4 +253,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/nl/main_tpl.php b/lang/nl/main_tpl.php index 093528b..d48d0c4 100644 --- a/lang/nl/main_tpl.php +++ b/lang/nl/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Nieuws"; $g_lang["menu_9"] = "Gebruik voorbeeld graaf"; $g_lang["menu_10"] = "Open source"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graph Online is een online project met als doel het creëren en eenvoudig visualiseren van grafen en het vinden van een kortste route. Verder kunt u ook grafen creëren middels bogenmatrixen. Meer info over het project vind u op de help pagina "; $g_lang["lang"] = "Taal"; diff --git a/lang/pt/create_graph_by_edge_list.php b/lang/pt/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/pt/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/pt/home.php b/lang/pt/home.php index c0f04b1..b148916 100644 --- a/lang/pt/home.php +++ b/lang/pt/home.php @@ -254,4 +254,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/pt/main_tpl.php b/lang/pt/main_tpl.php index 0ac4565..65a9b80 100644 --- a/lang/pt/main_tpl.php +++ b/lang/pt/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "News"; $g_lang["menu_9"] = "Usando grafo de exemplo"; $g_lang["menu_10"] = "Open Source"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Grph Online é um projeto que mira a criação e visualização fácil de um grafo e a busca de seu melhor caminho. Você também pode criar um grafo através de uma matriz de adjacência. Sobre o projeto e visitar a página de ajuda"; $g_lang["lang"] = "Língua"; $g_lang["home"] = "Home"; diff --git a/lang/ru/create_graph_by_edge_list.php b/lang/ru/create_graph_by_edge_list.php new file mode 100644 index 0000000..541fe32 --- /dev/null +++ b/lang/ru/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +На данной странице вы можете задать список рёбер и построить по нему граф.

'; + $g_lang['pair_description'] = 'Задайте список рёбер, каждое ребро должно быть на новой строке и используйте в качестве разделителя между вершинами "-". Например: 1-2. Читайте ниже о расширеном формате.'; + $g_lang['plot_graph_button'] = 'Построить граф'; + $g_lang['pair_bad_format'] = 'Не правильный формат. Ребро должно иметь формат: вершина1-вершина2. Читайте о расширеном формате ниже.'; + $g_lang['ex_pair_format'] = "Расширеный формат"; + $g_lang['ex_pair_forma_description'] =" С помощью расширеного формата можно задавать орентированные и нагруженные дуги. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Список рёбер'; +?> \ No newline at end of file diff --git a/lang/ru/home.php b/lang/ru/home.php index 0cb378e..ea3834a 100755 --- a/lang/ru/home.php +++ b/lang/ru/home.php @@ -291,4 +291,8 @@ $g_lang['save_svg_image'] = "Сохранить граф в SVG"; + $g_lang["bad_inc_pair_message"] = "Ошибка создания графа. Список рёбер имеет неправильный формат. Нажимте кнопку \"исправить\" чтобы исправить список или кнопку \"справка\" чтобы открыть справку о формате"; + $g_lang["edge_list_wrong_format"] = "Неправильный формат списка рёбер"; + $g_lang["fix_button"] = "исправить"; + ?> diff --git a/lang/ru/main_tpl.php b/lang/ru/main_tpl.php index 973668d..09e62e3 100755 --- a/lang/ru/main_tpl.php +++ b/lang/ru/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Новости"; $g_lang["menu_9"] = "По примеру"; $g_lang["menu_10"] = "Открытый исходный код"; + $g_lang["menu_11"] = "По списку рёбер"; $g_lang["footer_info"] = "Граф Online - создание и визуализация графа в два клика или по матрице смежности и поиск кратчайшего пути, поиск компоненты связности, поиск Эйлеровго цикла. Поделиться: Twitter, В Контакте.\n"; $g_lang["lang"] = "Язык"; ?> \ No newline at end of file diff --git a/lang/sv/create_graph_by_edge_list.php b/lang/sv/create_graph_by_edge_list.php new file mode 100644 index 0000000..c640290 --- /dev/null +++ b/lang/sv/create_graph_by_edge_list.php @@ -0,0 +1,19 @@ +On this page you can enter edge list and plot graph

'; + $g_lang['pair_description'] = 'Enter edge list. Each edge should be placed on a new line. Use "-" as separator between vertices. E.g. 1-2. Read about extended format below.'; + $g_lang['plot_graph_button'] = 'Plot graph'; + $g_lang['pair_bad_format'] = 'Edge list format is incorrect. Format of edge should be like: vertex1-vertex2. Read about extension format below.'; + $g_lang['ex_pair_format'] = "Extended format"; + $g_lang['ex_pair_forma_description'] ="Using extended format you may set up directed and weighted edges. Разные варианты использования: + "; + $g_lang['edge_list'] = 'Edge List'; +?> \ No newline at end of file diff --git a/lang/sv/home.php b/lang/sv/home.php index e8b3568..bd7b1ff 100644 --- a/lang/sv/home.php +++ b/lang/sv/home.php @@ -250,4 +250,8 @@ $g_lang['make_all_directed'] = "Make all edges directed"; $g_lang['save_svg_image'] = "Save graph to SVG"; + + $g_lang["bad_inc_pair_message"] = "Cannot create graph. Edge list has wrong format. Click \"fix\" button to fix edge list or \"help\" button to open help about format"; + $g_lang["edge_list_wrong_format"] = "Edge list format is incorrect"; + $g_lang["fix_button"] = "fix"; ?> diff --git a/lang/sv/main_tpl.php b/lang/sv/main_tpl.php index f0bb9e0..f0b9ae4 100644 --- a/lang/sv/main_tpl.php +++ b/lang/sv/main_tpl.php @@ -11,6 +11,7 @@ $g_lang["menu_8"] = "Nyheter"; $g_lang["menu_9"] = "Följ exemplet"; $g_lang["menu_10"] = "Öppen källa"; + $g_lang["menu_11"] = "Using edge list"; $g_lang["footer_info"] = "Graf online är att vertz för att skapa och visualisera en graf i två klick eller använda en grannmatris och hitta den kortaste sökvägen för anslutningsdelar som söker efter en Eulercykel. Dela med. Grafvisualisering och kortaste sökväg."; $g_lang["lang"] = "Språk"; $g_lang["home"] = "Huvudsida"; diff --git a/script/Application.js b/script/Application.js index 2bbeae1..71d8a73 100644 --- a/script/Application.js +++ b/script/Application.js @@ -846,6 +846,28 @@ Application.prototype.onPostLoadEvent = function() wasLoad = true; } + var pairs = document.getElementById("inputPair").innerHTML; + + if (pairs.length > 0) + { + pairs = pairs.replaceAll('>', '>'); + pairs = pairs.replaceAll('<', '<'); + + if (!this.SetPairSmart(pairs)) + { + this.userAction("Pair.Failed"); + this.ShowPairErrorDialog(pairs); + } + else + { + this.userAction("Pair.Success"); + } + + this.updateMessage(); + this.redrawGraph(); + wasLoad = true; + } + if (!wasLoad) { var graphName = this.getParameterByName("graph"); @@ -933,6 +955,22 @@ Application.prototype.SetAdjacencyMatrix = function (matrix, separator) return res; } +Application.prototype.SetPair = function (pair) +{ + var res = true; + var r = {}; + var c = {}; + if (!this.TestPair(pair)) + { + $.get( "/" + SiteDir + "cgi-bin/addFailedMatrix.php?text=pair&matrix=" + encodeURIComponent(pair), function( data ) {;}); + res = false; + } + + this.graph.SetPair(pair, new Point(this.GetRealWidth(), this.GetRealHeight()), this.currentEnumVerticesType); + this.AutoAdjustViewport(); + this.redrawGraph(); + return res; +} Application.prototype.GetIncidenceMatrix = function () { @@ -944,6 +982,11 @@ Application.prototype.TestIncidenceMatrix = function (matrix, rowsObj, colsObj) return this.graph.TestIncidenceMatrix(matrix, rowsObj, colsObj); } +Application.prototype.TestPair = function (pair) +{ + return this.graph.TestPair(pair); +} + Application.prototype.SetIncidenceMatrix = function (matrix) { var res = true; @@ -1011,6 +1054,22 @@ Application.prototype.SetIncidenceMatrixSmart = function (matrix) return res; } +Application.prototype.SetPairSmart = function (pair) +{ + var res = false; + + if (this.TestPair(pair)) + { + res = this.SetPair(pair); + } + else + { + res = false; + } + + return res; +} + Application.prototype.SaveGraphOnDisk = function () { @@ -1288,6 +1347,34 @@ Application.prototype.ShowIncidenceMatrixErrorDialog = function(matrix) buttons: dialogButtons, }); } + +Application.prototype.ShowPairErrorDialog = function(pair) +{ + var dialogButtons = {}; + + pair = pair.replaceAll(/\n/g,'%0A'); + pair = pair.replaceAll('>', '>'); + pair = pair.replaceAll('<', '<'); + + dialogButtons[g_readMatrixHelp] = function() { + window.location.assign(g_language == "ru" ? "./wiki/Справка/СписокРебер" : "./wiki/Help/EdgeList"); + }; + dialogButtons[g_fix] = function() { + window.location.assign("./create_graph_by_edge_list?pair=" + pair); + }; + dialogButtons[g_close] = function() { + $( this ).dialog( "close" ); + }; + + $( "#pairErrorInc" ).dialog({ + resizable: false, + title: g_pairWrongFormat, + width: 400, + modal: true, + dialogClass: 'EdgeDialog', + buttons: dialogButtons, + }); +} Application.prototype.SetFindPathReport = function (value) { diff --git a/script/Graph.js b/script/Graph.js index 05945cf..5d93d72 100644 --- a/script/Graph.js +++ b/script/Graph.js @@ -38,6 +38,21 @@ Graph.prototype.AddNewVertex = function(vertex) return this.vertices.length - 1; } +Graph.prototype.ClearGraph = function() { + // List of vertex. + this.vertices = []; + // List of arcs. + this.edges = []; + // Unique Id of new graph. + this.uidGraph = 0; + // Unique Id of new edge. + this.uidEdge = 10000; + // Has direction edge. + this.hasDirect = false; + // Is graph multi + this.isMultiGraph = false; +} + Graph.prototype.AddNewEdgeSafe = function(graph1, graph2, isDirect, weight, replaceIfExists = true) { return this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight), replaceIfExists); @@ -138,6 +153,21 @@ Graph.prototype.FindVertex = function(id) return res; } +Graph.prototype.FindVertexByTitle = function(title) +{ + var res = null; + for (var i = 0; i < this.vertices.length; i++) + { + if (this.vertices[i].mainText == title) + { + res = this.vertices[i]; + break; + } + } + + return res; +} + // deprecated Graph.prototype.FindEdge = function(id1, id2) { @@ -349,6 +379,43 @@ Graph.prototype.TestAdjacencyMatrix = function (matrix, rowsObj, colsObj, separa return bGoodFormat; } +Graph.prototype.TestPair = function (pair) +{ + let lines = pair.split ("\n"); + // Check: + // a - b + // a > b + // a < b + // a-(1)-b + // a-(1)>b + // a<(1)-b + let regExp = [ + /^.+-.+$/g, + /^.+\>.+$/g, + /^.+<.+$/g, + /^.+-\(\d+\.?\d+\)-.+$/g, + /^.+-\(\d+\.?\d+\)\>.+$/g, + /^.+<\(\d+\.?\d+\)\-.+$/g + ]; + let res = true; + for (let i = 0; i < lines.length; ++i) + { + let resLine = false; + let line = lines[i]; + if (line == "") { + continue; + } + for (let j = 0; j < regExp.length; ++j) { + if (line.match(regExp[j])) { + resLine = true; + } + } + res = resLine && res; + } + + return res; +} + Graph.prototype.IsVerticesHaveSamePosition = function (position, vertexCount) { @@ -366,6 +433,10 @@ Graph.prototype.IsVerticesHaveSamePosition = function (position, vertexCount) return res; } +Graph.prototype.GetRandomPosition = function (viewportSize) { + return new Point(Math.random() * viewportSize.x, Math.random() * viewportSize.y); +} + Graph.prototype.GetRandomPositionOfVertex = function (matrix, vertexIndex, viewportSize) { var point = new Point(0, 0); @@ -628,6 +699,88 @@ Graph.prototype.SetAdjacencyMatrix = function (matrix, viewportSize, currentEnum } } +Graph.prototype.SetPair = function (pairs, viewportSize, currentEnumVerticesType) +{ + if (this.TestPair(pairs)) + { + this.ClearGraph(); + + let lines = pairs.split ("\n"); + // Extract: + // a - b + // a > b + // a < b + // a-(1)-b + // a-(1)>b + // a<(1)-b + let regExp = [ + /^(.+)-(.+)$/g, + /^(.+)\>(.+)$/g, + /^(.+)<(.+)$/g, + /^(.+)-\((\d+|\d+\.?\d+)\)-(.+)$/g, + /^(.+)-\((\d+|\d+\.?\d+)\)\>(.+)$/g, + /^(.+)<\((\d+|\d+\.?\d+)\)\-(.+)$/g, + ]; + + let bWeightGraph = false; + var newVertices = []; + + for (var i = 0; i < lines.length; i++) + { + let line = lines[i]; + if (line == "") { + continue; + } + + for (let j = regExp.length - 1; j >= 0; --j) { + if (!line.match(regExp[j])) { + continue; + } + + let groupes = Array.from(line.matchAll(regExp[j])); + let groupe = groupes[0]; + let vetext1Title = groupe[1]; + let vertex1 = this.FindVertexByTitle(vetext1Title); + if (vertex1 == null) { + let newPosition = this.GetRandomPosition(viewportSize); + vertex1 = this.vertices[this.AddNewVertex(new BaseVertex(newPosition.x, newPosition.y, currentEnumVerticesType))]; + vertex1.mainText = vetext1Title; + newVertices.push(vertex1); + } + let vetext2Title = groupe[j <= 2 ? 2 : 3]; + let vertex2 = this.FindVertexByTitle(vetext2Title); + if (vertex2 == null) { + let newPosition = this.GetRandomPosition(viewportSize); + vertex2 = this.vertices[this.AddNewVertex(new BaseVertex(newPosition.x, newPosition.y, currentEnumVerticesType))]; + vertex2.mainText = vetext2Title; + newVertices.push(vertex2); + } + let isDirect = j == 1 || j == 2 || j == 4 || j == 5; + let weight = 1; + if (j > 2) { + weight = groupe[2]; + bWeightGraph = true; + } + let isRevertEdge = j == 2 || j == 5; + + let nEdgeIndex = this.AddNewEdgeSafe(isRevertEdge ? vertex2 : vertex1, isRevertEdge ? vertex1 : vertex2, isDirect, weight, false); + this.FixEdgeCurve(nEdgeIndex); + break; + } + } + + // Set use weight false, because we have unweighted graph. + if (!bWeightGraph) + { + this.edges.forEach(function(part, index, theArray) { + theArray[index].useWeight = false; + }); + } + + this.VerticesReposition(viewportSize, newVertices); + } +} + Graph.prototype.TestIncidenceMatrix = function (matrix, rowsObj, colsObj, separator) { diff --git a/script/texts.js b/script/texts.js index 40a5a48..d81bfed 100644 --- a/script/texts.js +++ b/script/texts.js @@ -43,6 +43,8 @@ var g_write_to_us = "Write to us"; var g_fixMatrix = "Fix matrix"; var g_readMatrixHelp = "Matrix format help"; var g_matrixWrongFormat = "Matrix is wrong"; +var g_pairWrongFormat = "Edge List is wrong"; +var g_fix = "Fix" var g_save_image_dialog = "Save graph image"; @@ -395,4 +397,7 @@ function loadTexts() g_reverseAllEdges = document.getElementById("reverseAllEdges").innerHTML; g_makeAllUndirected = document.getElementById("makeAllUndirected").innerHTML; g_makeAllDirected = document.getElementById("makeAllDirected").innerHTML; + + g_pairWrongFormat = document.getElementById("pairWrongFormat").innerHTML; + g_fix = document.getElementById("fixButton").innerHTML;; } diff --git a/src/main_tpl.php b/src/main_tpl.php index 06eb266..c6c4dd8 100755 --- a/src/main_tpl.php +++ b/src/main_tpl.php @@ -23,6 +23,9 @@ array( "title" => L("menu_5"), "link" => SiteRoot("create_graph_by_incidence_matrix"),), + array( + "title" => L("menu_11"), + "link" => SiteRoot("create_graph_by_edge_list"),), array( "title" => L("menu_9"), "link" => SiteRoot("graphs_examples"),) diff --git a/tpl/create_graph_by_edge_list.php b/tpl/create_graph_by_edge_list.php new file mode 100644 index 0000000..483e3a5 --- /dev/null +++ b/tpl/create_graph_by_edge_list.php @@ -0,0 +1,76 @@ + + + + + + + +

+

+ +
+ +

+
+
+
+ +
+
+
+ + + +
+
+
\ No newline at end of file diff --git a/tpl/home.php b/tpl/home.php index 406b9c5..087e154 100755 --- a/tpl/home.php +++ b/tpl/home.php @@ -11,7 +11,7 @@ - + @@ -445,6 +445,10 @@
+ +
+
+
@@ -721,6 +725,7 @@

+

", ">", $_POST["pairs"])) : ""?>

@@ -850,6 +855,9 @@

+

+

+