snippets/paths.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>