perf(graph): canvas implementation (#1328)

* perf(graph): initial canvas layout

include nodes and links drawn

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* fix(graph): update persistent for nodeGfx

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* chore(graph): add canvas element to avoid rerendering glitch

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* fix(spa): only render graph once in global

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* fix(graph): change svg as button

render global graph on toggle

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* fix(graph): fix anchor position and zIndex behaviour

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* chore(graph): increase linkDistance

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

* refactor

* fmt

* pkg

---------

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Aaron Pham
2024-08-25 03:33:14 -04:00
committed by GitHub
parent 4c9e860150
commit bca74623a3
5 changed files with 556 additions and 250 deletions

View File

@ -16,10 +16,13 @@
overflow: hidden;
& > #global-graph-icon {
cursor: pointer;
background: none;
border: none;
color: var(--dark);
opacity: 0.5;
width: 18px;
height: 18px;
width: 24px;
height: 24px;
position: absolute;
padding: 0.2rem;
margin: 0.3rem;
@ -59,8 +62,8 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60vh;
width: 50vw;
height: 80vh;
width: 80vw;
@media all and (max-width: $fullPageWidth) {
width: 90%;