Skip to content

Commit af9fb18

Browse files
mhdirksemhdirkse
committed
Simplify data structure for label texts
1 parent 0368c83 commit af9fb18

8 files changed

Lines changed: 37 additions & 47 deletions

File tree

‎projects/frank-config-layout/src/lib/dimensions.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,8 @@ export interface DerivedDimensions {
1414
boxCrossProtectionMargin: number;
1515
lineTransgressionPerc: number;
1616
edgeLabelFontSize: number;
17-
// TODO: Applies to edge labels;
18-
estCharacterWidth: number;
19-
estLabelLineHeight: number;
17+
estEdgeLabelCharacterWidth: number;
18+
estEdgeLabelLineHeight: number;
2019
preferredVertDistanceFromOrigin: number;
2120
strictlyKeepLabelOutOfBox: boolean;
2221
}
@@ -34,12 +33,12 @@ export function getDerivedDimensions(d: Dimensions): DerivedDimensions {
3433
intermediateLayerPassedByVerticalLine: d.intermediateLayerPassedByVerticalLine,
3534
boxCrossProtectionMargin: d.boxCrossProtectionMargin,
3635
lineTransgressionPerc: d.lineTransgressionPerc,
37-
estCharacterWidth: calculateAverageFontCharacterWidth(d.edgeLabelFontSize),
36+
estEdgeLabelCharacterWidth: calculateAverageFontCharacterWidth(d.edgeLabelFontSize),
3837
edgeLabelFontSize: d.edgeLabelFontSize,
3938
// In theory, we need a margin between multiple lines of an edge label.
4039
// In practice, we get an acceptable result by adjusting the line heigt
4140
// to produce it.
42-
estLabelLineHeight: d.edgeLabelFontSize + 3,
41+
estEdgeLabelLineHeight: d.edgeLabelFontSize + 3,
4342
preferredVertDistanceFromOrigin: d.preferredVertDistanceFromOrigin,
4443
strictlyKeepLabelOutOfBox: d.strictlyKeepLabelOutOfBox,
4544
};

‎projects/frank-config-layout/src/lib/graphics/edge-label-layouter.spec.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { EdgeLabelDimensions, EdgeLabelLayouter } from './edge-label-layouter';
55
describe('EdgeLabelLayouter', () => {
66
it('When two labels fit next to each other they appear next to each other, downwards', () => {
77
const dimensions: EdgeLabelDimensions = {
8-
estCharacterWidth: 5,
9-
estLabelLineHeight: 10,
8+
estEdgeLabelCharacterWidth: 5,
9+
estEdgeLabelLineHeight: 10,
1010
preferredVertDistanceFromOrigin: 30,
1111
strictlyKeepLabelOutOfBox: false,
1212
};
@@ -27,8 +27,8 @@ describe('EdgeLabelLayouter', () => {
2727

2828
it('When two labels do not fit next to each other they appear on different heights, downwards', () => {
2929
const dimensions: EdgeLabelDimensions = {
30-
estCharacterWidth: 5,
31-
estLabelLineHeight: 10,
30+
estEdgeLabelCharacterWidth: 5,
31+
estEdgeLabelLineHeight: 10,
3232
preferredVertDistanceFromOrigin: 30,
3333
strictlyKeepLabelOutOfBox: false,
3434
};
@@ -52,8 +52,8 @@ describe('EdgeLabelLayouter', () => {
5252

5353
it('When two labels fit next to each other they appear next to each other, upwards', () => {
5454
const dimensions: EdgeLabelDimensions = {
55-
estCharacterWidth: 5,
56-
estLabelLineHeight: 10,
55+
estEdgeLabelCharacterWidth: 5,
56+
estEdgeLabelLineHeight: 10,
5757
preferredVertDistanceFromOrigin: 30,
5858
strictlyKeepLabelOutOfBox: false,
5959
};
@@ -74,8 +74,8 @@ describe('EdgeLabelLayouter', () => {
7474

7575
it('When two labels do not fit next to each other they appear on different heights, upwards', () => {
7676
const dimensions: EdgeLabelDimensions = {
77-
estCharacterWidth: 5,
78-
estLabelLineHeight: 10,
77+
estEdgeLabelCharacterWidth: 5,
78+
estEdgeLabelLineHeight: 10,
7979
preferredVertDistanceFromOrigin: 30,
8080
strictlyKeepLabelOutOfBox: false,
8181
};
@@ -96,8 +96,8 @@ describe('EdgeLabelLayouter', () => {
9696

9797
it('When not strictlyKeepLabelOutOfBox, label can intersect box', () => {
9898
const dimensions = {
99-
estCharacterWidth: 5,
100-
estLabelLineHeight: 10,
99+
estEdgeLabelCharacterWidth: 5,
100+
estEdgeLabelLineHeight: 10,
101101
preferredVertDistanceFromOrigin: 12,
102102
strictlyKeepLabelOutOfBox: false,
103103
};
@@ -114,8 +114,8 @@ describe('EdgeLabelLayouter', () => {
114114

115115
it('When strictlyKeepLabelOutOfBox, label can not intersect box', () => {
116116
const dimensions = {
117-
estCharacterWidth: 5,
118-
estLabelLineHeight: 10,
117+
estEdgeLabelCharacterWidth: 5,
118+
estEdgeLabelLineHeight: 10,
119119
preferredVertDistanceFromOrigin: 12,
120120
strictlyKeepLabelOutOfBox: true,
121121
};

‎projects/frank-config-layout/src/lib/graphics/edge-label-layouter.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import { Interval } from '../util/interval';
2020
import { Line, Point } from './graphics';
2121

2222
export interface EdgeLabelDimensions {
23-
estCharacterWidth: number;
24-
estLabelLineHeight: number;
23+
estEdgeLabelCharacterWidth: number;
24+
estEdgeLabelLineHeight: number;
2525
preferredVertDistanceFromOrigin: number;
2626
strictlyKeepLabelOutOfBox: boolean;
2727
}
@@ -36,7 +36,7 @@ export class EdgeLabelLayouter {
3636
while (true) {
3737
const vdistSource: number = vdistSources.next();
3838
const vdist: number =
39-
this.dimensions.preferredVertDistanceFromOrigin + vdistSource * this.dimensions.estLabelLineHeight;
39+
this.dimensions.preferredVertDistanceFromOrigin + vdistSource * this.dimensions.estEdgeLabelLineHeight;
4040
if (vdist <= 0) {
4141
// The vertical center of the label would be in the box from which the line originates.
4242
// Next vdistSource.
@@ -45,11 +45,11 @@ export class EdgeLabelLayouter {
4545
const candidateCenter: Point = this.pointAt(vdist, line);
4646
const horizontalBox = Interval.createFromCenterSize(
4747
candidateCenter.x,
48-
numCharactersOnLine * this.dimensions.estCharacterWidth,
48+
numCharactersOnLine * this.dimensions.estEdgeLabelCharacterWidth,
4949
);
5050
const verticalBox = Interval.createFromCenterSize(
5151
candidateCenter.y,
52-
numTextLines * this.dimensions.estLabelLineHeight,
52+
numTextLines * this.dimensions.estEdgeLabelLineHeight,
5353
);
5454
const candidateBox = new Box(horizontalBox, verticalBox);
5555
if (this.dimensions.strictlyKeepLabelOutOfBox && candidateBox.verticalBox.contains(line.startPoint.y)) {

‎projects/frank-config-layout/src/lib/graphics/svg-generator.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ interface SvgGenerationDimensions {
2525
nodeTextFontSize: number;
2626
nodeTextBorder: number;
2727
edgeLabelFontSize: number;
28-
estCharacterWidth: number;
28+
estEdgeLabelCharacterWidth: number;
2929
}
3030

3131
export function generateSvg(layout: Layout, d: SvgGenerationDimensions): string {
@@ -38,7 +38,7 @@ export function generateSvg(layout: Layout, d: SvgGenerationDimensions): string
3838
d.nodeTextFontSize,
3939
) +
4040
renderEdges(layout.layoutLineSegments) +
41-
renderLabels(layout.edgeLabels, d.edgeLabelFontSize, d.estCharacterWidth) +
41+
renderLabels(layout.edgeLabels, d.edgeLabelFontSize, d.estEdgeLabelCharacterWidth) +
4242
closeSvg()
4343
);
4444
}
@@ -164,21 +164,21 @@ function classOfLine(edge: LayoutLineSegment): string {
164164
}
165165
}
166166

167-
function renderLabels(labels: EdgeLabel[], edgeLabelFontSize: number, estCharacterWidth: number): string {
168-
return ` <g text-anchor="middle" dominant-baseline="middle">${labels.map((label) => renderLabel(label, edgeLabelFontSize, estCharacterWidth)).join('')}</g>`;
167+
function renderLabels(labels: EdgeLabel[], edgeLabelFontSize: number, estEdgeLabelCharacterWidth: number): string {
168+
return ` <g text-anchor="middle" dominant-baseline="middle">${labels.map((label) => renderLabel(label, edgeLabelFontSize, estEdgeLabelCharacterWidth)).join('')}</g>`;
169169
}
170170

171-
function renderLabel(label: EdgeLabel, edgeLabelFontSize: number, estCharacterWidth: number): string {
171+
function renderLabel(label: EdgeLabel, edgeLabelFontSize: number, estEdgeLabelCharacterWidth: number): string {
172172
const coordinates: Point[] = arrangeInBox({
173173
container: new Box(label.horizontalBox, label.verticalBox),
174174
border: 0,
175-
itemWidths: label.text.lines.map((l) => l.text.length * estCharacterWidth),
175+
itemWidths: label.text.lines.map((l) => l.length * estEdgeLabelCharacterWidth),
176176
commonItemHeight: edgeLabelFontSize,
177177
});
178178
let result: string = '';
179179
for (let i = 0; i < label.text.lines.length; ++i) {
180180
const p: Point = coordinates[i];
181-
result += renderSingleLayerText(p.x, p.y, edgeLabelFontSize, label.text.lines[i].text);
181+
result += renderSingleLayerText(p.x, p.y, edgeLabelFontSize, label.text.lines[i]);
182182
}
183183
return result;
184184
}

‎projects/frank-config-layout/src/lib/model/error-flow.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ N1 --> |success<br/> exception | N2`;
102102
const c: OriginalGraph = findErrorFlow(b);
103103
const instance = c.getEdgeByKey('N1-N2');
104104
expect(instance.text.numLines).toEqual(2);
105-
expect(instance.text.lines.map((l) => l.text)).toEqual(['success', 'exception']);
105+
expect(instance.text.lines).toEqual(['success', 'exception']);
106106
// The second line is trimmed, length of word 'exception'
107107
expect(instance.text.maxLineLength).toEqual(9);
108108
});
@@ -121,9 +121,9 @@ function dimensions(): NodeTextDimensions & EdgeLabelDimensions {
121121
return {
122122
nodeTextFontSize: 16,
123123
nodeTextBorder: 4,
124-
estLabelLineHeight: 10,
124+
estEdgeLabelLineHeight: 10,
125125
preferredVertDistanceFromOrigin: 5,
126126
strictlyKeepLabelOutOfBox: true,
127-
estCharacterWidth: 0,
127+
estEdgeLabelCharacterWidth: 0,
128128
};
129129
}

‎projects/frank-config-layout/src/lib/model/error-flow.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@ function transformEdge(from: OriginalNode, to: OriginalNode, text: EdgeText): Or
8686
return { from, to, text, errorStatus: ERROR_STATUS_SUCCESS };
8787
} else {
8888
const isError: boolean = text.lines
89-
.map((line) => ERROR_FORWARD_NAMES.has(line.text))
89+
.map((line) => ERROR_FORWARD_NAMES.has(line))
9090
.every((lineIsError) => lineIsError === true);
9191
const isSuccess: boolean = text.lines
92-
.map((line) => !ERROR_FORWARD_NAMES.has(line.text))
92+
.map((line) => !ERROR_FORWARD_NAMES.has(line))
9393
.every((lineIsSuccess) => lineIsSuccess === true);
9494
if (isError) {
9595
return { from, to, text, errorStatus: ERROR_STATUS_ERROR };

‎projects/frank-config-layout/src/lib/model/text.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ describe('Text', () => {
1212
it('When text has one line then have one line trimmed', () => {
1313
const instance: EdgeText = createEdgeText(' exception ');
1414
expect(instance.html).toEqual('exception');
15-
expect(instance.lines.map((l) => l.text)).toEqual(['exception']);
15+
expect(instance.lines).toEqual(['exception']);
1616
expect(instance.numLines).toEqual(1);
1717
expect(instance.maxLineLength).toEqual(9);
1818
});
1919

2020
it('When text has two lines then over-all HTML joined by <br/>', () => {
2121
const instance = createEdgeText('success<br/> exception ');
2222
expect(instance.numLines).toEqual(2);
23-
expect(instance.lines.map((l) => l.text)).toEqual(['success', 'exception']);
23+
expect(instance.lines).toEqual(['success', 'exception']);
2424
// The second line is trimmed, length of word "exception"
2525
expect(instance.maxLineLength).toEqual(9);
2626
expect(instance.html).toEqual('success<br/>exception');

‎projects/frank-config-layout/src/lib/model/text.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,9 @@ export interface NodeTextDimensions {
1919
nodeTextBorder: number;
2020
}
2121

22-
export interface EdgeTextLine {
23-
text: string;
24-
}
25-
2622
export interface EdgeText {
2723
readonly html: string;
28-
readonly lines: EdgeTextLine[];
24+
readonly lines: string[];
2925
readonly numLines: number;
3026
readonly maxLineLength: number;
3127
}
@@ -69,12 +65,7 @@ export function createEdgeText(originalHtml: string): EdgeText {
6965
}
7066
return {
7167
html: lines.join('<br/>'),
72-
lines: lines.map((l) => {
73-
// TODO: No need to use an object here, string suffices.
74-
return {
75-
text: l,
76-
};
77-
}),
68+
lines,
7869
maxLineLength,
7970
numLines: lines.length,
8071
};

0 commit comments

Comments
 (0)