Skip to content
This repository was archived by the owner on Sep 9, 2025. It is now read-only.

Commit 2316968

Browse files
author
Hendrik van Antwerpen
committed
Use node shape instead of symbol to indicate push and pop nodes
1 parent f89a9e0 commit 2316968

File tree

2 files changed

+100
-40
lines changed

2 files changed

+100
-40
lines changed

‎stack-graphs/src/visualization/visualization.css‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,114 +49,118 @@
4949

5050
/* --- drop scopes --- */
5151

52-
.sg .node.drop_scopes circle.background {
52+
.sg .node.drop_scopes .background {
5353
fill: #cc3311;
5454
r: 6px;
5555
}
5656

5757
/* --- jump to scope --- */
5858

59-
.sg .node.jump_to_scope circle.background {
59+
.sg .node.jump_to_scope .background {
6060
fill: #ee7733;
6161
r: 6px;
6262
stroke: black;
6363
}
6464

6565
/* --- pop symbol --- */
6666

67-
.sg .node.pop_symbol rect.background {
67+
.sg .node.pop_symbol .background,
68+
.sg .node.pop_scoped_symbol .background {
6869
fill: #009988;
6970
}
7071

71-
.sg .node.pop_scoped_symbol rect.background {
72-
fill: #009988;
72+
.sg .node.pop_symbol .arrow,
73+
.sg .node.pop_scoped_symbol .arrow {
74+
fill: #005b51;
7375
}
7476

75-
.sg .node.pop_scoped_symbol circle.pop_scope {
77+
.sg .node.pop_scoped_symbol .pop_scope {
7678
fill: #ee7733;
7779
r: 6px;
7880
stroke: black;
7981
}
8082

81-
.sg .node.definition rect.background {
83+
.sg .node.definition .background {
8284
stroke: black;
8385
}
8486

8587
/* --- push symbol --- */
8688

87-
.sg .node.push_symbol rect.background {
89+
.sg .node.push_symbol .background,
90+
.sg .node.push_scoped_symbol .background {
8891
fill: #33bbee;
8992
}
9093

91-
.sg .node.push_scoped_symbol rect.background {
92-
fill: #33bbee;
94+
.sg .node.push_symbol .arrow,
95+
.sg .node.push_scoped_symbol .arrow {
96+
fill: #006e96;
9397
}
9498

95-
.sg .node.push_scoped_symbol circle.push_scope {
99+
.sg .node.push_scoped_symbol .push_scope {
96100
fill: #bbbbbb;
97101
r: 6px;
98102
stroke: black;
99103
}
100104

101-
.sg .node.push_scoped_symbol circle.push_scope-focus-point {
105+
.sg .node.push_scoped_symbol .push_scope-focus-point {
102106
fill: none;
103107
r: 3px;
104108
}
105109

106-
.sg .node.push_scoped_symbol.focus circle.push_scope-focus-point {
110+
.sg .node.push_scoped_symbol.focus .push_scope-focus-point {
107111
fill: black;
108112
}
109113

110-
.sg .node.reference rect.background {
114+
.sg .node.reference .background {
111115
stroke: black;
112116
}
113117

114118
/* --- root --- */
115119

116-
.sg .node.root circle.background {
120+
.sg .node.root .background {
117121
fill: #0077bb;
118122
r: 6px;
119123
stroke: black;
120124
}
121125

122126
/* --- scope --- */
123127

124-
.sg .node.scope circle.border {
128+
.sg .node.scope .border {
125129
fill: #0077bb;
126130
r: 6px;
127131
}
128132

129-
.sg .node.scope circle.background {
133+
.sg .node.scope .background {
130134
fill: #bbbbbb;
131135
r: 6px;
132136
}
133137

134-
.sg .node.scope.exported circle.background {
138+
.sg .node.scope.exported .background {
135139
stroke: black;
136140
}
137141

138-
.sg .node.scope circle.focus-point {
142+
.sg .node.scope .focus-point {
139143
r: 3px;
140144
fill: none;
141145
}
142146

143-
.sg .node.scope.ref-focus circle.focus-point {
147+
.sg .node.scope.ref-focus .focus-point {
144148
fill: black;
145149
}
146150

147151
/* --- plain labeled node --- */
148152

149-
.sg .node.scope.plain_labeled_node rect.border {
153+
.sg .node.scope.plain_labeled_node .border {
150154
fill: #0077bb;
151155
rx: 6px;
152156
}
153157

154-
.sg .node.scope.plain_labeled_node rect.background {
158+
.sg .node.scope.plain_labeled_node .background {
155159
fill: #bbbbbb;
156160
rx: 6px;
157161
}
158162

159-
.sg .node.scope.plain_labeled_node.exported rect.background {
163+
.sg .node.scope.plain_labeled_node.exported .background {
160164
stroke: black;
161165
}
162166

‎stack-graphs/src/visualization/visualization.js‎

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ class StackGraph {
1313
static distx = 15;
1414
static disty = 15;
1515

16+
static arrow_stem_w = 2;
17+
static arrow_head_w = 16;
18+
static arrow_head_h = 8;
19+
1620
constructor(container, graph, paths, metadata) {
1721
this.metadata = metadata;
1822

@@ -280,27 +284,27 @@ class StackGraph {
280284
this.render_scope(g);
281285
break;
282286
case "pop_symbol":
283-
this.render_symbol_node(g, "↑" + node.symbol);
287+
this.render_symbol_node(g, node.symbol, null, "pop");
284288
if (node.is_definition) {
285289
g.classed('definition', true);
286290
}
287291
break;
288292
case "pop_scoped_symbol":
289293
let pop_scope = { class: "pop_scope" };
290-
this.render_symbol_node(g, "↑" + node.symbol, pop_scope);
294+
this.render_symbol_node(g, node.symbol, pop_scope, "pop");
291295
if (node.is_definition) {
292296
g.classed('definition', true);
293297
}
294298
break;
295299
case "push_symbol":
296-
this.render_symbol_node(g, "↓" + node.symbol);
300+
this.render_symbol_node(g, node.symbol, null, "push");
297301
if (node.is_reference) {
298302
g.classed('reference', true);
299303
}
300304
break;
301305
case "push_scoped_symbol":
302306
let push_scope = { class: "push_scope" };
303-
this.render_symbol_node(g, "↓" + node.symbol, push_scope);
307+
this.render_symbol_node(g, node.symbol, push_scope, "push");
304308
if (node.is_reference) {
305309
g.classed('reference', true);
306310
}
@@ -331,12 +335,11 @@ class StackGraph {
331335
break;
332336
}
333337
}
334-
335-
render_symbol_node(g, text, scope) {
338+
render_symbol_node(g, text, scope, shape) {
336339
let content = g.append("g");
337340
content.append('text').text(text);
338341
let text_bbox = content.node().getBBox();
339-
if (scope !== undefined) {
342+
if (scope !== undefined && scope !== null) {
340343
content.append("circle")
341344
.attr("class", scope.class)
342345
.attr("transform", `translate(${text_bbox.width + StackGraph.margin}, ${6 - text_bbox.height / 2})`);
@@ -345,18 +348,71 @@ class StackGraph {
345348
.attr("transform", `translate(${text_bbox.width + StackGraph.margin}, ${6 - text_bbox.height / 2})`);
346349
}
347350
let bbox = content.node().getBBox();
348-
g.append('rect').lower()
351+
let l = bbox.x - StackGraph.margin,
352+
r = bbox.x + bbox.width + StackGraph.margin,
353+
t = bbox.y - StackGraph.margin,
354+
b = bbox.y + bbox.height + StackGraph.margin;
355+
var box_points;
356+
var arrow_points = null;
357+
switch (shape) {
358+
case "pop":
359+
box_points = `
360+
${l},${t}
361+
${r},${t}
362+
${r},${b}
363+
${l - StackGraph.arrow_stem_w},${b}
364+
${l - StackGraph.arrow_stem_w},${t + StackGraph.arrow_head_h}
365+
${l - StackGraph.arrow_head_w/2},${t + StackGraph.arrow_head_h}
366+
`;
367+
arrow_points = `
368+
${l},${t}
369+
${l + StackGraph.arrow_head_w/2},${t + StackGraph.arrow_head_h}
370+
${l + StackGraph.arrow_stem_w},${t + StackGraph.arrow_head_h}
371+
${l + StackGraph.arrow_stem_w},${b}
372+
${l - StackGraph.arrow_stem_w},${b}
373+
${l - StackGraph.arrow_stem_w},${t + StackGraph.arrow_head_h}
374+
${l - StackGraph.arrow_head_w/2},${t + StackGraph.arrow_head_h}
375+
`;
376+
break;
377+
case "push":
378+
box_points = `
379+
${l - StackGraph.arrow_stem_w},${t}
380+
${r},${t}
381+
${r},${b}
382+
${l},${b}
383+
${l - StackGraph.arrow_head_w/2},${b - StackGraph.arrow_head_h}
384+
${l - StackGraph.arrow_stem_w},${b - StackGraph.arrow_head_h}
385+
`;
386+
arrow_points = `
387+
${l - StackGraph.arrow_stem_w},${t}
388+
${l + StackGraph.arrow_stem_w},${t}
389+
${l + StackGraph.arrow_stem_w},${b - StackGraph.arrow_head_h}
390+
${l + StackGraph.arrow_head_w/2},${b - StackGraph.arrow_head_h}
391+
${l},${b}
392+
${l - StackGraph.arrow_head_w/2},${b - StackGraph.arrow_head_h}
393+
${l - StackGraph.arrow_stem_w},${b - StackGraph.arrow_head_h}
394+
`;
395+
break;
396+
default:
397+
box_points = `
398+
${l},${t}
399+
${r},${t}
400+
${r},${b}
401+
${l},${b}
402+
`;
403+
break;
404+
}
405+
if (arrow_points !== null) {
406+
g.append('polygon').lower()
407+
.attr("class", "arrow")
408+
.attr('points', arrow_points);
409+
}
410+
g.append('polygon').lower()
349411
.attr("class", "background")
350-
.attr('x', bbox.x - StackGraph.margin)
351-
.attr('y', bbox.y - StackGraph.margin)
352-
.attr('width', bbox.width + 2 * StackGraph.margin)
353-
.attr('height', bbox.height + 2 * StackGraph.margin);
354-
g.append('rect').lower().lower()
412+
.attr('points', box_points);
413+
g.append('polygon').lower()
355414
.attr("class", "border")
356-
.attr('x', bbox.x - StackGraph.margin)
357-
.attr('y', bbox.y - StackGraph.margin)
358-
.attr('width', bbox.width + 2 * StackGraph.margin)
359-
.attr('height', bbox.height + 2 * StackGraph.margin);
415+
.attr('points', box_points);
360416
}
361417

362418
render_scope(g) {

0 commit comments

Comments
 (0)