/src/Template/Cuts.elm at 1837da51943a92285a3d084d104e7bf63de9e9af

-- Copyright 2026 Shota FUJI
--
-- This Source Code Form is subject to the terms of the Mozilla Public
-- License, v. 2.0. If a copy of the MPL was not distributed with this
-- file, You can obtain one at https://mozilla.org/MPL/2.0/.
--
-- SPDX-License-Identifier: MPL-2.0


module Template.Cuts exposing (cuts)

import Length exposing (Length, toMM)
import Parameters exposing (LoopStyle(..), Parameters)
import Parameters.Key exposing (Key(..))
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.Path as Path exposing (..)
import Template.Layout.Container as Container exposing (aligned, columns, gapped, noGrow, padded, rows, sized)
import Template.Layout.Coordinate exposing (Request(..))
import Template.Layout.Item exposing (Item)


highlightStroke : Bool -> Svg.Attribute msg
highlightStroke enabled =
    if enabled then
        class "highlight-stroke"

    else
        class "highlight-none"


cuts : Parameters -> Maybe Key -> Item msg
cuts params highlighting =
    -- TODO: Pack items more smartly, so it won't push infoArea out
    rows
        |> sized (AtLeast 0) (AtLeast 0)
        |> aligned Container.Start
        |> padded (toMM params.rendering.gap / 2)
        |> gapped (toMM params.rendering.gap)
        |> Container.build
            ([ columns
                |> gapped (toMM params.rendering.gap)
                |> Container.build
                    ([ surfacePieces params highlighting
                     , linings params highlighting
                     ]
                        |> List.map noGrow
                    )
                |> Just
             , loops params highlighting
             ]
                |> List.filterMap identity
                |> List.map noGrow
            )


surfacePieces : Parameters -> Maybe Key -> Item msg
surfacePieces params highlighting =
    rows
        |> aligned Container.Center
        |> gapped (toMM params.rendering.gap / 2)
        |> Container.build
            [ Item
                { width = Exactly 50, height = Exactly 5 }
                (\p size ->
                    text_
                        [ x (String.fromFloat (p.x + size.width / 2))
                        , y (String.fromFloat p.y)
                        , fontSize "5"
                        , fontWeight "100"
                        , textAnchor "middle"
                        , dominantBaseline "hanging"
                        , fill "currentColor"
                        ]
                        [ text ("Surfaces / t = " ++ (toMM params.thickness |> String.fromFloat) ++ "mm") ]
                )
            , columns
                |> gapped (toMM params.rendering.gap)
                |> Container.build
                    [ longPiece params highlighting, shortPiece params highlighting ]
            ]


skivingSeamStroke : Parameters -> List (Svg.Attribute msg)
skivingSeamStroke params =
    [ fill "none"
    , stroke "currentColor"
    , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
    , strokeDasharray "1 0.5"
    ]


longPieceShape : ( Float, Float ) -> Parameters -> Maybe Key -> List Path.PathCommand -> Svg msg
longPieceShape ( x, y ) params highlighting commands =
    let
        lugWidth =
            toMM params.lugWidth

        length =
            toMM params.longPiece.length

        taperUntil =
            Basics.min
                (toMM params.longPiece.buckleHole.offset - toMM params.longPiece.buckleHole.interval)
                (length / 2)

        taper =
            toMM params.taper

        buckleWidth =
            lugWidth - taper
    in
    Svg.path
        [ Path.d
            (MoveTo Absolute ( x, y )
                :: CubicBezierCurve Relative
                    ( ( taper / 2, taperUntil )
                    , ( taper / 2, taperUntil )
                    , ( taper / 2, length - buckleWidth / 2 )
                    )
                    []
                :: EllipticalArcCurve Relative
                    { rx = buckleWidth / 2
                    , ry = buckleWidth / 2
                    , angle = 0.0
                    , largeArcFlag = LargeArc
                    , sweepFlag = Counterclockwise
                    , x = buckleWidth
                    , y = 0
                    }
                    []
                :: CubicBezierCurve Absolute
                    ( ( x + lugWidth - taper / 2, y + taperUntil )
                    , ( x + lugWidth - taper / 2, y + taperUntil )
                    , ( x + lugWidth, y )
                    )
                    []
                :: commands
            )
        , fill "none"
        , stroke "currentColor"
        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
        , highlightStroke
            (highlighting
                == Just LongPieceLength
                || highlighting
                == Just LugWidth
                || highlighting
                == Just Taper
                || (toMM params.taper
                        > 0
                        && (highlighting
                                == Just BuckleHoleOffset
                                || highlighting
                                == Just BuckleHoleInterval
                           )
                   )
            )
        ]
        []


longPiece : Parameters -> Maybe Key -> Item msg
longPiece params highlighting =
    let
        lugWidth =
            toMM params.lugWidth

        length =
            toMM params.longPiece.length

        flap =
            toMM params.longPiece.flap
    in
    { size = { width = Exactly lugWidth, height = Exactly (length + flap) }
    , element =
        \p _ ->
            g
                []
                (longPieceShape
                    ( p.x, p.y + flap )
                    params
                    highlighting
                    [ VerticalLineTo Relative -flap
                    , HorizontalLineTo Relative -lugWidth
                    , VerticalLineTo Relative flap
                    , ClosePath
                    ]
                    :: Svg.path
                        (Path.d
                            [ MoveTo Absolute ( p.x, p.y + flap )
                            , HorizontalLineTo Relative lugWidth
                            ]
                            :: skivingSeamStroke params
                        )
                        []
                    :: Svg.path
                        [ Path.d
                            [ MoveTo Absolute ( p.x, p.y )
                            , HorizontalLineTo Relative lugWidth
                            , VerticalLineTo Relative flap
                            , HorizontalLineTo Relative -lugWidth
                            , ClosePath
                            ]
                        , fill "url(#SkivingPattern)"
                        ]
                        []
                    :: (List.range 0 (params.longPiece.buckleHole.count - 1)
                            |> List.map
                                (\index ->
                                    let
                                        { buckleHole } =
                                            params.longPiece

                                        offset =
                                            toMM buckleHole.offset

                                        interval =
                                            toMM buckleHole.interval
                                    in
                                    hole
                                        params
                                        buckleHole.diameter
                                        ( p.x + lugWidth / 2
                                        , p.y + offset + interval * toFloat index
                                        )
                                        [ highlightStroke
                                            (highlighting
                                                == Just BuckleHoleDiameter
                                                || highlighting
                                                == Just BuckleHoleCount
                                                || highlighting
                                                == Just BuckleHoleInterval
                                                || highlighting
                                                == Just BuckleHoleOffset
                                            )
                                        ]
                                )
                       )
                )
    }


hole : Parameters -> Length -> ( Float, Float ) -> List (Svg.Attribute msg) -> Svg msg
hole params diameter ( cx, cy ) attrs =
    let
        radius =
            toMM diameter / 2
    in
    g
        []
        [ circle
            (Svg.Attributes.cx (String.fromFloat cx)
                :: Svg.Attributes.cy (String.fromFloat cy)
                :: r (String.fromFloat radius)
                :: fill "none"
                :: stroke "currentColor"
                :: strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                :: attrs
            )
            []
        , g
            [ fill "none"
            , stroke "currentColor"
            , strokeWidth "0.1"
            ]
            [ Svg.path
                [ Path.d
                    [ MoveTo Absolute ( cx - radius / 2, cy )
                    , HorizontalLineTo Relative radius
                    ]
                ]
                []
            , Svg.path
                [ Path.d
                    [ MoveTo Absolute ( cx, cy - radius / 2 )
                    , VerticalLineTo Relative radius
                    ]
                ]
                []
            ]
        ]


type alias ShortPieceOptions =
    { includeCaseSideFlap : Bool
    , includeClaspSideFlap : Bool
    , at : ( Float, Float )
    }


shortPieceShape : Parameters -> Maybe Key -> ShortPieceOptions -> Svg msg
shortPieceShape params highlighting { includeCaseSideFlap, includeClaspSideFlap, at } =
    let
        lugWidth =
            toMM params.lugWidth

        length =
            toMM params.shortPiece.length

        taperUntil =
            Basics.min
                (toMM params.longPiece.buckleHole.offset - toMM params.longPiece.buckleHole.interval)
                (length / 2)

        taper =
            toMM params.taper

        ( x, y ) =
            at
    in
    Svg.path
        [ Path.d
            ([ Just (MoveTo Absolute ( x, y ))
             , if includeCaseSideFlap then
                Just (VerticalLineTo Relative (toMM params.shortPiece.caseSideFlap))

               else
                Nothing
             , Just
                (CubicBezierCurve Relative
                    ( ( taper / 2, taperUntil )
                    , ( taper / 2, taperUntil )
                    , ( taper / 2, length )
                    )
                    []
                )
             , if includeClaspSideFlap then
                Just (VerticalLineTo Relative (toMM params.shortPiece.claspSideFlap))

               else
                Nothing
             , Just (HorizontalLineTo Relative (lugWidth - taper))
             , if includeClaspSideFlap then
                Just (VerticalLineTo Relative -(toMM params.shortPiece.claspSideFlap))

               else
                Nothing
             , Just
                (CubicBezierCurve Relative
                    ( ( 0, -length + taperUntil )
                    , ( 0, -length + taperUntil )
                    , ( taper / 2, -length )
                    )
                    []
                )
             , if includeCaseSideFlap then
                Just (VerticalLineTo Relative -(toMM params.shortPiece.caseSideFlap))

               else
                Nothing
             , Just ClosePath
             ]
                |> List.filterMap identity
            )
        , fill "none"
        , stroke "currentColor"
        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
        , highlightStroke
            (highlighting
                == Just ShortPieceLength
                || highlighting
                == Just LugWidth
                || highlighting
                == Just Taper
                || (toMM params.taper
                        > 0
                        && (highlighting
                                == Just BuckleHoleOffset
                                || highlighting
                                == Just BuckleHoleInterval
                           )
                   )
            )
        ]
        []


shortPiece : Parameters -> Maybe Key -> Item msg
shortPiece params highlighting =
    let
        lugWidth =
            toMM params.lugWidth

        taper =
            toMM params.taper

        buckleWidth =
            lugWidth - taper

        length =
            toMM params.shortPiece.length

        caseSideFlap =
            toMM params.shortPiece.caseSideFlap

        claspSideFlap =
            toMM params.shortPiece.claspSideFlap
    in
    { size =
        { width = Exactly lugWidth, height = Exactly (length + caseSideFlap + claspSideFlap) }
    , element =
        \p _ ->
            g
                []
                [ shortPieceShape params
                    highlighting
                    { includeCaseSideFlap = True
                    , includeClaspSideFlap = True
                    , at = ( p.x, p.y )
                    }
                , g
                    (skivingSeamStroke params)
                    [ Svg.path
                        [ Path.d
                            [ MoveTo Absolute ( p.x, p.y + caseSideFlap )
                            , HorizontalLineTo Relative lugWidth
                            ]
                        ]
                        []
                    , Svg.path
                        [ Path.d
                            [ MoveTo Absolute ( p.x + taper / 2, p.y + caseSideFlap + length )
                            , HorizontalLineTo Relative buckleWidth
                            ]
                        ]
                        []
                    ]
                , g
                    [ fill "url(#SkivingPattern)" ]
                    [ Svg.path
                        [ Path.d
                            [ MoveTo Absolute ( p.x, p.y )
                            , HorizontalLineTo Relative lugWidth
                            , VerticalLineTo Relative caseSideFlap
                            , HorizontalLineTo Relative -lugWidth
                            , ClosePath
                            ]
                        ]
                        []
                    , Svg.path
                        [ Path.d
                            [ MoveTo Absolute ( p.x + taper / 2, p.y + caseSideFlap + length )
                            , HorizontalLineTo Relative buckleWidth
                            , VerticalLineTo Relative claspSideFlap
                            , HorizontalLineTo Relative -buckleWidth
                            , ClosePath
                            ]
                        ]
                        []
                    ]
                ]
    }


linings : Parameters -> Maybe Key -> Item msg
linings params highlighting =
    rows
        |> aligned Container.Center
        |> gapped (toMM params.rendering.gap / 2)
        |> Container.build
            [ Item
                { width = Exactly 50, height = Exactly 5 }
                (\p size ->
                    text_
                        [ x (String.fromFloat (p.x + size.width / 2))
                        , y (String.fromFloat p.y)
                        , fontSize "5"
                        , fontWeight "100"
                        , textAnchor "middle"
                        , dominantBaseline "hanging"
                        , fill "currentColor"
                        ]
                        [ text ("Linings / t = " ++ (toMM params.lining |> String.fromFloat) ++ "mm") ]
                )
            , columns
                |> gapped (toMM params.rendering.gap)
                |> Container.build
                    [ longLining params highlighting, shortLining params highlighting ]
            ]


longLining : Parameters -> Maybe Key -> Item msg
longLining params highlighting =
    let
        lugWidth =
            toMM params.lugWidth

        length =
            toMM params.longPiece.length
    in
    { size =
        { width = Exactly lugWidth, height = Exactly length }
    , element =
        \p _ ->
            longPieceShape
                ( p.x, p.y )
                params
                highlighting
                [ HorizontalLineTo Relative -lugWidth
                , ClosePath
                ]
    }


shortLining : Parameters -> Maybe Key -> Item msg
shortLining params highlighting =
    let
        lugWidth =
            toMM params.lugWidth

        length =
            toMM params.shortPiece.length
    in
    { size =
        { width = Exactly lugWidth, height = Exactly length }
    , element =
        \p _ ->
            shortPieceShape params
                highlighting
                { at = ( p.x, p.y )
                , includeCaseSideFlap = False
                , includeClaspSideFlap = False
                }
    }


loops : Parameters -> Maybe Key -> Maybe (Item msg)
loops params highlighting =
    let
        root =
            params.shortPiece.loops
    in
    case ( root.fixed, root.free ) of
        ( Nothing, Nothing ) ->
            Nothing

        _ ->
            rows
                |> aligned Container.Center
                |> gapped (toMM params.rendering.gap / 2)
                |> Container.build
                    [ Item
                        { width = Exactly 40, height = Exactly 5 }
                        (\p size ->
                            text_
                                [ x (String.fromFloat (p.x + size.width / 2))
                                , y (String.fromFloat p.y)
                                , fontSize "5"
                                , fontWeight "100"
                                , textAnchor "middle"
                                , dominantBaseline "hanging"
                                , fill "currentColor"
                                ]
                                [ text ("Loops / t = " ++ (toMM root.thickness |> String.fromFloat) ++ "mm") ]
                        )
                    , columns
                        |> gapped (toMM params.rendering.gap)
                        |> Container.build
                            ([ fixedLoop params highlighting
                             , freeLoop params highlighting
                             ]
                                |> List.filterMap identity
                            )
                    ]
                |> Just


fixedLoop : Parameters -> Maybe Key -> Maybe (Item msg)
fixedLoop params highlighting =
    Maybe.map
        (\{ width, play } ->
            let
                strapThickness =
                    toMM params.thickness + toMM params.lining

                lugWidth =
                    toMM params.lugWidth

                length =
                    lugWidth * 2 + strapThickness * 2 + toMM play
            in
            { size =
                { width = Exactly length
                , height =
                    Exactly
                        (case params.shortPiece.loops.style of
                            Simple ->
                                toMM width

                            Folded ->
                                toMM width * 2
                        )
                }
            , element =
                \p size ->
                    let
                        hCutLine : Float -> Svg msg
                        hCutLine yOffset =
                            g
                                [ fill "none"
                                , stroke "currentColor"
                                , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                ]
                                [ Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x, p.y + yOffset )
                                        , HorizontalLineTo Relative lugWidth
                                        ]
                                    , highlightStroke (highlighting == Just LugWidth)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth, p.y + yOffset )
                                        , HorizontalLineTo Relative strapThickness
                                        ]
                                    , highlightStroke (highlighting == Just SurfaceThickness || highlighting == Just LiningThickness)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth + strapThickness, p.y + yOffset )
                                        , HorizontalLineTo Relative lugWidth
                                        ]
                                    , highlightStroke (highlighting == Just LugWidth)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth * 2 + strapThickness, p.y + yOffset )
                                        , HorizontalLineTo Relative strapThickness
                                        ]
                                    , highlightStroke (highlighting == Just SurfaceThickness || highlighting == Just LiningThickness)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth * 2 + strapThickness * 2, p.y + yOffset )
                                        , HorizontalLineTo Relative (toMM play)
                                        ]
                                    , highlightStroke (highlighting == Just FixedLoopPlay)
                                    ]
                                    []
                                ]
                    in
                    g
                        []
                        [ hCutLine 0
                        , hCutLine size.height
                        , case params.shortPiece.loops.style of
                            Simple ->
                                g
                                    [ fill "none"
                                    , stroke "currentColor"
                                    , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                    ]
                                    [ Svg.path
                                        [ Path.d
                                            [ MoveTo Absolute ( p.x, p.y )
                                            , VerticalLineTo Relative (toMM width)
                                            ]
                                        , highlightStroke (highlighting == Just FixedLoopWidth)
                                        ]
                                        []
                                    , Svg.path
                                        [ Path.d
                                            [ MoveTo Absolute ( p.x + length, p.y )
                                            , VerticalLineTo Relative (toMM width)
                                            ]
                                        , highlightStroke (highlighting == Just FixedLoopWidth)
                                        ]
                                        []
                                    ]

                            Folded ->
                                g
                                    []
                                    [ g
                                        [ fill "none"
                                        , stroke "currentColor"
                                        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                        , strokeDasharray "1 0.5"
                                        ]
                                        [ Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y + toMM width / 2 )
                                                , HorizontalLineTo Relative length
                                                ]
                                            ]
                                            []
                                        , Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y + toMM width * 1.5 )
                                                , HorizontalLineTo Relative length
                                                ]
                                            ]
                                            []
                                        ]
                                    , g
                                        [ fill "none"
                                        , stroke "currentColor"
                                        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                        ]
                                        [ Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y )
                                                , VerticalLineTo Relative (toMM width * 2)
                                                ]
                                            , highlightStroke (highlighting == Just FixedLoopWidth)
                                            ]
                                            []
                                        , Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x + length, p.y )
                                                , VerticalLineTo Relative (toMM width * 2)
                                                ]
                                            , highlightStroke (highlighting == Just FixedLoopWidth)
                                            ]
                                            []
                                        ]
                                    ]
                        ]
            }
        )
        params.shortPiece.loops.fixed


freeLoop : Parameters -> Maybe Key -> Maybe (Item msg)
freeLoop params highlighting =
    Maybe.map
        (\{ width, play, overlap } ->
            let
                strapThickness =
                    toMM params.thickness + toMM params.lining

                lugWidth =
                    toMM params.lugWidth

                length =
                    lugWidth * 2 + strapThickness * 2 + toMM play + toMM overlap

                materialWidth =
                    case params.shortPiece.loops.style of
                        Simple ->
                            toMM width

                        Folded ->
                            toMM width * 2
            in
            { size =
                { width = Exactly length, height = Exactly materialWidth }
            , element =
                \p _ ->
                    let
                        hCutLine : Float -> Svg msg
                        hCutLine yOffset =
                            g
                                [ fill "none"
                                , stroke "currentColor"
                                , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                ]
                                [ Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x, p.y + yOffset )
                                        , HorizontalLineTo Relative lugWidth
                                        ]
                                    , highlightStroke (highlighting == Just LugWidth)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth, p.y + yOffset )
                                        , HorizontalLineTo Relative strapThickness
                                        ]
                                    , highlightStroke (highlighting == Just SurfaceThickness || highlighting == Just LiningThickness)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth + strapThickness, p.y + yOffset )
                                        , HorizontalLineTo Relative lugWidth
                                        ]
                                    , highlightStroke (highlighting == Just LugWidth)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth * 2 + strapThickness, p.y + yOffset )
                                        , HorizontalLineTo Relative strapThickness
                                        ]
                                    , highlightStroke (highlighting == Just SurfaceThickness || highlighting == Just LiningThickness)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth * 2 + strapThickness * 2, p.y + yOffset )
                                        , HorizontalLineTo Relative (toMM play)
                                        ]
                                    , highlightStroke (highlighting == Just FreeLoopPlay)
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + lugWidth * 2 + strapThickness * 2 + toMM play, p.y + yOffset )
                                        , HorizontalLineTo Relative (toMM overlap)
                                        ]
                                    , highlightStroke (highlighting == Just FreeLoopOverlap)
                                    ]
                                    []
                                ]
                    in
                    g
                        []
                        [ hCutLine 0
                        , hCutLine materialWidth
                        , Svg.path
                            [ Path.d
                                [ MoveTo Absolute ( p.x + length - toMM overlap, p.y )
                                , VerticalLineTo Relative materialWidth
                                ]
                            , fill "none"
                            , stroke "currentColor"
                            , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                            , strokeDasharray "1 0.5"
                            ]
                            []
                        , case params.shortPiece.loops.style of
                            Simple ->
                                g
                                    [ fill "none"
                                    , stroke "currentColor"
                                    , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                    ]
                                    [ Svg.path
                                        [ Path.d
                                            [ MoveTo Absolute ( p.x, p.y )
                                            , VerticalLineTo Relative (toMM width)
                                            ]
                                        , highlightStroke (highlighting == Just FreeLoopWidth)
                                        ]
                                        []
                                    , Svg.path
                                        [ Path.d
                                            [ MoveTo Absolute ( p.x + length, p.y )
                                            , VerticalLineTo Relative (toMM width)
                                            ]
                                        , highlightStroke (highlighting == Just FreeLoopWidth)
                                        ]
                                        []
                                    ]

                            Folded ->
                                g
                                    []
                                    [ g
                                        [ fill "none"
                                        , stroke "currentColor"
                                        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                        , strokeDasharray "1 0.5"
                                        ]
                                        [ Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y + toMM width / 2 )
                                                , HorizontalLineTo Relative length
                                                ]
                                            ]
                                            []
                                        , Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y + toMM width * 1.5 )
                                                , HorizontalLineTo Relative length
                                                ]
                                            ]
                                            []
                                        ]
                                    , g
                                        [ fill "none"
                                        , stroke "currentColor"
                                        , strokeWidth (toMM params.rendering.lineWidth |> String.fromFloat)
                                        ]
                                        [ Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x, p.y )
                                                , VerticalLineTo Relative (toMM width * 2)
                                                ]
                                            , highlightStroke (highlighting == Just FreeLoopWidth)
                                            ]
                                            []
                                        , Svg.path
                                            [ Path.d
                                                [ MoveTo Absolute ( p.x + length, p.y )
                                                , VerticalLineTo Relative (toMM width * 2)
                                                ]
                                            , highlightStroke (highlighting == Just FreeLoopWidth)
                                            ]
                                            []
                                        ]
                                    ]
                        ]
            }
        )
        params.shortPiece.loops.free