37 lines
2.1 KiB
HTML
37 lines
2.1 KiB
HTML
|
|
<svg [attr.viewBox]="viewBox" xmlns="http://www.w3.org/2000/svg"
|
|
style="border: solid thin black; margin: 1rem; padding: 5px">
|
|
@let allSinglePoints = getSinglePoints();
|
|
@let firstPoint = allSinglePoints[0];
|
|
@let lastPoint = allSinglePoints[allSinglePoints.length - 1];
|
|
<line [attr.x1]="firstPoint" [attr.y1]="1.5*normalizedLineHeight" [attr.x2]="lastPoint"
|
|
[attr.y2]="1.5*normalizedLineHeight" [attr.stroke-width]="normalizedNumberLineStrokeWidth" stroke="#000000">
|
|
</line>
|
|
@for (singlePoint of allSinglePoints; track $index) {
|
|
<line [attr.x1]="singlePoint" [attr.y1]="normalizedLineHeight" [attr.x2]="singlePoint"
|
|
[attr.y2]="2*normalizedLineHeight" [attr.stroke-width]="normalizedNumberLineStrokeWidth" stroke="#000000">
|
|
</line>
|
|
<text [attr.font-size]="normalizedNumberLineFontSize" [attr.x]="singlePoint"
|
|
[attr.y]="$index % 2 === 0 ? normalizedLineHeight : 2*normalizedLineHeight"
|
|
[attr.alignment-baseline]="$index % 2 === 1 ? 'before-edge' : 'after-edge'"
|
|
[attr.text-anchor]="singlePoint < lastPoint / 2 ? 'start' : 'end'">{{singlePoint}} mm</text>
|
|
}
|
|
@for (point of points; track $index; let index=$index) {
|
|
@let color = getRandomColor(index);
|
|
@for (line of lineCountNumber(point.count); track line) {
|
|
@let start = line % 2 === 1 ? point.start : point.end;
|
|
@let end = line % 2 === 1 ? point.end : point.start;
|
|
@let offset = (start > end ? 0.5 : -0.5) * normalizedStrokeWidth;
|
|
|
|
<line [attr.x1]="start + offset" [attr.y1]="getLineNumber(index, line) * lineGap + 0.5 * normalizedStrokeWidth"
|
|
[attr.x2]="end + offset" [attr.y2]="getLineNumber(index, line) * lineGap + 0.5 * normalizedStrokeWidth"
|
|
[attr.stroke]="color" [attr.stroke-width]="normalizedStrokeWidth" />
|
|
@if (index
|
|
< points.length - 1 || (index===points.length - 1 && line < point.count)) { <line [attr.x1]="end"
|
|
[attr.y1]="getLineNumber(index, line) * lineGap" [attr.x2]="end"
|
|
[attr.y2]="(getLineNumber(index, line)+1) * lineGap + normalizedStrokeWidth" [attr.stroke]="color"
|
|
[attr.stroke-width]="normalizedStrokeWidth" />
|
|
}
|
|
}
|
|
}
|
|
</svg> |