graphit/index.html at main · erickcpassos/graphit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png?">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png?">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png?">
    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico?">
    <link rel="manifest" href="/assets/site.webmanifest">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
        rel="stylesheet">

    <link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <title>Graphit</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"
        integrity="sha512-M7uzkKVt12bO/ClDOwaTk0AUwDPmJzjxri/KQKft2cisI6q3zJ4KxX3IfSQXF9Z6WU6NNW67JAljgWrA4WiiOA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <script src="utilities.js"></script>
    <script src="Node.js"></script>
    <script src="Edge.js"></script>

    <header>
        <div id="logo-things">
            <img id="logo" src="./assets/logo-699.png" alt="Logo do Graphit">
            <h1>Graphit</h1>

        </div>
    </header>
    <main>
        <div id="app">
            <div>
                <div id="mode-buttons">
                    <button id="move-btn" class="func-btn selected">1 | <span><img class="sm-icon"
                                src="./assets/move_icon.svg"></span></button>
                    <button id="node-btn" class="func-btn">2 | <span><img class="sm-icon"
                                src="./assets/plus_icon.svg"></span></button>
                    <button id="edge-btn" class="func-btn">3 | <span><img class="sm-icon"
                                src="./assets/edge_icon.svg"></span></button>
                    <button id="delete-btn" class="func-btn">4 | <span><img class="sm-icon"
                                src="./assets/delete_icon.svg"></span></button>
                    <button id="draw-btn" class="func-btn">5 | <span><img class="sm-icon"
                                src="./assets/draw_icon.svg"></span></button>
                </div>
                <p>Text Input</p>
                <textarea></textarea>
            </div>
            <div id="central-area">
                <div id="p5-canvas"></div>
                <div id="buttons">
                    <button onclick="saveCanvasAsPNG()" class="func-btn">Download Image</button>
                    <button onclick="clearGraph()" class="func-btn">Clear graph</button>
                    <button id="info-btn" class="func-btn">i</button>
                </div>
            </div>
            <div id="representations">
                <div id="edge-list-frame">
                    <p>Edge List</p>
                    <div id="edge-list"></div>
                </div>
            </div>
        </div>

    </main>

    <aside id="info-modal" style="display: none;">
        <ul>
            <li id="color-list"></li>
            <li>Current mode: <span id="current-mode"></span></li>
            <li>A + Click: adds vertex</li>
            <li>E + Click: seleciona vértice que originará uma nova aresta. Sem soltar o E, clique em outro vertice para
                ligar.</li>
            <li>D + Click: deletes clicked node or edge.</li>
            <li>Q + Click: desenha na tela com o mouse. Para apagar tudo, com o Q pressionado, pressione C.</li>
        </ul>
    </aside>


    <aside id="tutorial-modal">

        <div id="tutorial-card">
            <div class="tutorial-page">
                <h2>Thank you for using Graphit! :D</h2>
                <p>This website was built by me (@erickcpassos) to be used in graph theory lessons for programming
                    competitions.</p>
                <p>Its main goal is to provide a quick way to sketch and manipulate simple graphs, along with displaying
                    information that is useful for people learning about graph theory or preparing for algorithmic
                    competitions.</p>
                <p>This quick tutorial introduces you to the functionalities and shortcuts, but I hope this web app is
                    easy to use intuitively.</p>
                <p>Best wishes, Erick</p>
            </div>
            <div class="tutorial-page">
                <h2>Add a new node</h2>
                <p>To add a new node in the graph, select the ADD option (clicking the 2 button or holding the '2' key) and click in the canvas area. The new node will be automatically assigned a number as a label. </p>
                <p>New nodes will also be added if they are referred to in the text input. The text input can also be used to change the label of nodes created by clicking.</p>
            </div>
            <div class="tutorial-page">
                <h2>Add a new edge</h2>
                <p>To add a new edge in the graph, select the EDGE option (clicking the 3 button or holding the '3' key) and click on the node that will be the edge's source. After that, click another node to be the edge's destination. A new edge will be drawn between both edges.</p>
                <p>It is also possible to add more than one edge between the same pair of vertices. Additionally, a value can be added to an edge by editing the text input, adding the value after the destination node.</p>
            </div>
            <div class="tutorial-page">
                <h2>Deleting things</h2>
                <p>The DELETE mode can be accessed by selecting option 4. In this mode, you can click any node or edge and it will be promptly deleted from the graph.</p>
                <p>Note that removing a node will also delete any edges connected to it.</p>
            </div>
            <div class="tutorial-page">
                <h2>Drawing (yay!)</h2>
                <p>Sometimes, ideas can just be conveyed the right way with some drawings.</p>
                <p>To draw on top of the graph, select option 5. You can draw freely within the canvas using the mouse.</p>
                <p>To delete your drawings, press C (for clear) while you are in the drawing mode.</p>
                <p>If you want to download the graph image with your drawings in it, ensure you are in the draw mode when pressing 'Download Image'</p>
            </div>

            <div class="tutorial-page">
                <h2>That's all!</h2>
                <p>Now you should know the basics of Graphit and be able to use it to sketch your graphs.</p>
                <p>To open this tutorial again, just click the 'i' info button in the menu.</p>
            </div>

            <div>
                <div id="tutorial-btns">
                    <button class="func-btn" id="tutorial-back">
                        < Back</button>
                            <button class="func-btn" id="tutorial-next">Next ></button>
                </div>

                <div id="tutorial-stages">
                    <span class="tutorial-stage-square selected"></span><span class="tutorial-stage-square"></span><span
                        class="tutorial-stage-square"></span><span class="tutorial-stage-square"></span><span
                        class="tutorial-stage-square"></span><span
                        class="tutorial-stage-square"></span>
                </div>
            </div>

        </div>

    </aside>

    <footer>
        <p>
            Developed by @erickcpassos |
            <a href="https://github.com/erickcpassos/graphit"
                target="_blank">https://github.com/erickcpassos/graphit</a>
        </p>
    </footer>


    <script src="./script.js"></script>
    <script src="./index.js"></script>


</body>

</html>