Skip to content

Commit 5900471

Browse files
lukethacoderlukethacoder
committed
♻️ refactor / hook up settings + more settings / add apex + static resource logic to svg nodes / fix svg node memoization / fix component view overflow scroll + add sticky section headers
1 parent 0886c59 commit 5900471

File tree

7 files changed

+486
-101
lines changed

7 files changed

+486
-101
lines changed

‎index.html

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>LWC Dependency Viewer</title>
88
</head>
@@ -11,6 +11,8 @@
1111
<p data-js>JavaScript</p>
1212
<p data-html>HTML</p>
1313
<p data-css>CSS</p>
14+
<p data-static-resource>StaticResource</p>
15+
<p data-apex>Apex</p>
1416
</div>
1517

1618
<div class="buttons">
@@ -42,12 +44,31 @@ <h2 title="component name">component name component name component name componen
4244
</span>
4345
</header>
4446

45-
<h3 class="ref-title">Referenced by</h3>
46-
<ul class="referenced-by"></ul>
47+
<div class="file-ref-container">
48+
<div class="file-ref-type-container">
49+
<h3 class="ref-title" id="referenced-by">Referenced by</h3>
50+
<ul class="referenced-by"></ul>
51+
</div>
4752

48-
<h3 class="ref-title">References</h3>
49-
<ul class="references"></ul>
50-
53+
<div class="file-ref-type-container">
54+
<h3 class="ref-title" id="references">References</h3>
55+
<ul class="references"></ul>
56+
</div>
57+
58+
<div class="file-ref-type-container">
59+
<h3 class="ref-title" id="apex-references" data-has-data="false">
60+
Apex Methods
61+
</h3>
62+
<ul class="apex-references"></ul>
63+
</div>
64+
65+
<div class="file-ref-type-container">
66+
<h3 class="ref-title" id="static-resources" data-has-data="false">
67+
Static Resources
68+
</h3>
69+
<ul class="static-resources"></ul>
70+
</div>
71+
</div>
5172
</div>
5273
</div>
5374

@@ -68,6 +89,22 @@ <h2>Settings</h2>
6889
</header>
6990

7091
<div>
92+
<div class="input-container select">
93+
<label for="set-curve-type">
94+
<span class="label">Set Edge Curve Type</span>
95+
<span>
96+
<p>Override the default curve style. "haystack" is more performant for larger graphs but removes arrows.</p>
97+
<select id="set-curve-type">
98+
<option value="bezier" selected>bezier</option>
99+
<option value="unbundled-bezier">unbundled-bezier</option>
100+
<option value="haystack">haystack</option>
101+
<option value="straight">straight</option>
102+
<option value="segments">segments</option>
103+
<option value="taxi">taxi</option>
104+
</select>
105+
</span>
106+
</label>
107+
</div>
71108
<div class="input-container checkbox">
72109
<label for="toggle-orphan-modules">
73110
<span class="label">Hide Orphan Modules</span>
@@ -77,6 +114,24 @@ <h2>Settings</h2>
77114
</span>
78115
</label>
79116
</div>
117+
<div class="input-container checkbox">
118+
<label for="toggle-apex-references">
119+
<span class="label">Hide Apex References</span>
120+
<span>
121+
<input type="checkbox" id="toggle-apex-references"/>
122+
<p>Hides indicators of Apex imports.</p>
123+
</span>
124+
</label>
125+
</div>
126+
<div class="input-container checkbox">
127+
<label for="toggle-static-resource-references">
128+
<span class="label">Hide StaticResource References</span>
129+
<span>
130+
<input type="checkbox" id="toggle-static-resource-references"/>
131+
<p>Hides indicators of StaticResource imports.</p>
132+
</span>
133+
</label>
134+
</div>
80135
</div>
81136
</div>
82137
</div>
@@ -91,6 +146,6 @@ <h2>Settings</h2>
91146

92147
<div id="cy"></div>
93148

94-
<script type="module" src="/main.ts"></script>
149+
<script type="module" src="/src/main.ts"></script>
95150
</body>
96151
</html>

‎src/constants.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { IFileTypes } from '../types'
2+
3+
export const EDGES_COLORS: IFileTypes = {
4+
js: '#f1e05a',
5+
css: '#563d7c',
6+
html: '#e34c26',
7+
apex: '#1797c0',
8+
staticResource: '#589059',
9+
}
10+
11+
export const EDGE_CURVE_STYLE:
12+
| 'haystack'
13+
| 'straight'
14+
| 'bezier'
15+
| 'unbundled-bezier'
16+
| 'segments'
17+
| 'taxi' = 'bezier'
18+
export const DEFAULT_EDGE_OPACITY = 0.48

0 commit comments

Comments
 (0)