Fix padding pieces are smaller version of main rather than offset If one build a piece with the previous paddings and main pieces, margin around the padding piece will not be uniform. Offset shape drawing is not an easy problem, and as I choose Elm for robustness and correctness sacrificing flexibility, I opted for SVG hack to do quasi-offset shape drawing.

Changes

1 changed files (+193/-117)

• src/Models/PWS01/Template/Cuts.elm
  • @@ -8,6 +8,7 @@
    module Models.PWS01.Template.Cuts exposing (cuts) + import Html.Attributes exposing (attribute) import Length exposing (Length, toMM) import Models.PWS01.Parameters exposing (LoopStyle(..), Parameters, Profile(..), TipStyle(..)) import Models.PWS01.Parameters.Key exposing (Key(..))
  • @@ -100,10 +101,10 @@ longPieceShape : LongPieceShapeProps -> Svg msg
    longPieceShape { x, y, offset, highlighting, parameters } = let shoulderWidth = - toMM parameters.shoulderWidth - offset * 2 + toMM parameters.shoulderWidth length = - toMM parameters.longPiece.length - offset + toMM parameters.longPiece.length taperUntil = Basics.min
  • @@ -118,7 +119,7 @@ longPieceShape { x, y, offset, highlighting, parameters } =
    0.0 Tapered to -> - shoulderWidth - (toMM to - offset * 2) + shoulderWidth - toMM to buckleWidth = shoulderWidth - taper
  • @@ -130,83 +131,120 @@ longPieceShape { x, y, offset, highlighting, parameters } =
    Pointed _ -> buckleWidth + + localId : String -> String + localId body = + "long_piece__" ++ String.fromInt (ceiling (offset * 100)) ++ "__" ++ body in Svg.g [] - [ Svg.path - [ Path.d - (MoveTo Absolute ( x, y ) - :: LineTo Relative ( taper / 2, taperUntil ) - :: VerticalLineTo Relative (length - curvedSectionLength - taperUntil) - :: (case parameters.longPiece.tip of - Round -> - [ EllipticalArcCurve Relative - { rx = buckleWidth / 2 - , ry = buckleWidth / 2 - , angle = 0.0 - , largeArcFlag = LargeArc - , sweepFlag = Counterclockwise - , x = buckleWidth - , y = 0 - } - [] - ] + [ defs + [] + [ Svg.path + [ id (localId "body") + , Path.d + (MoveTo Absolute ( x - offset, y - offset ) + :: VerticalLineTo Relative offset + :: LineTo Relative ( taper / 2, taperUntil ) + :: VerticalLineTo Relative (length - curvedSectionLength - taperUntil) + :: (case parameters.longPiece.tip of + Round -> + [ EllipticalArcCurve Relative + { rx = buckleWidth / 2 + , ry = buckleWidth / 2 + , angle = 0.0 + , largeArcFlag = LargeArc + , sweepFlag = Counterclockwise + , x = buckleWidth + , y = 0 + } + [] + ] - Pointed sharpness -> - let - sy = - buckleWidth * (toFloat (100 - sharpness) / 100) - in - [ CubicBezierCurve - Relative - ( ( 0, sy ) - , ( buckleWidth / 2, buckleWidth ) - , ( buckleWidth / 2, buckleWidth ) - ) - [] - , CubicBezierCurve - Relative - ( ( 0, 0 ) - , ( buckleWidth / 2, -(buckleWidth - sy) ) - , ( buckleWidth / 2, -buckleWidth ) - ) - [] - ] - ) - ++ [ VerticalLineTo Relative -(length - curvedSectionLength - taperUntil) - , LineTo Relative ( taper / 2, -taperUntil ) - , ClosePath - ] - ) - , fill "none" - , stroke "currentColor" - , strokeWidth (toMM parameters.rendering.lineWidth |> String.fromFloat) - , highlightStroke - (highlighting - == Just LongPieceLength - || highlighting - == Just ShoulderWidth - || highlighting - == Just Profile - || highlighting - == Just TaperTo - || (case parameters.profile of - Straight -> - False - - Tapered _ -> - highlighting - == Just BuckleHoleDistance - || highlighting - == Just BuckleHoleInterval - ) - ) + Pointed sharpness -> + let + sy = + buckleWidth * (toFloat (100 - sharpness) / 100) + in + [ CubicBezierCurve + Relative + ( ( 0, sy ) + , ( buckleWidth / 2, buckleWidth ) + , ( buckleWidth / 2, buckleWidth ) + ) + [] + , CubicBezierCurve + Relative + ( ( 0, 0 ) + , ( buckleWidth / 2, -(buckleWidth - sy) ) + , ( buckleWidth / 2, -buckleWidth ) + ) + [] + ] + ) + ++ [ VerticalLineTo Relative -(length - curvedSectionLength - taperUntil) + , LineTo Relative ( taper / 2, -taperUntil ) + , VerticalLineTo Relative -offset + , ClosePath + ] + ) + ] + [] ] - [] + , if offset > 0 then + g + [] + [ Svg.mask [ id (localId "mask"), attribute "mask-type" "luminance" ] + [ use + [ attribute "href" ("#" ++ localId "body") + , stroke "black" + , strokeWidth (offset * 2 |> String.fromFloat) + , fill "white" + ] + [] + ] + , use + [ attribute "href" ("#" ++ localId "body") + , Svg.Attributes.mask ("url(#" ++ localId "mask" ++ ")") + , fill "none" + , stroke "currentColor" + , strokeWidth (offset * 2 + toMM parameters.rendering.lineWidth * 2 |> String.fromFloat) + ] + [] + ] + + else + use + [ attribute "href" ("#" ++ localId "body") + , fill "none" + , stroke "currentColor" + , strokeWidth (toMM parameters.rendering.lineWidth |> String.fromFloat) + , highlightStroke + (highlighting + == Just LongPieceLength + || highlighting + == Just ShoulderWidth + || highlighting + == Just Profile + || highlighting + == Just TaperTo + || (case parameters.profile of + Straight -> + False + + Tapered _ -> + highlighting + == Just BuckleHoleDistance + || highlighting + == Just BuckleHoleInterval + ) + ) + ] + [] , Svg.path (Path.d - [ MoveTo Absolute ( x + shoulderWidth / 2, y ) - , VerticalLineTo Relative length + [ MoveTo Absolute ( x + shoulderWidth / 2 - offset, y ) + , VerticalLineTo Relative (length - offset) ] :: highlightStroke (highlighting == Just LongPieceLength) :: guideStroke
  • @@ -214,13 +252,15 @@ longPieceShape { x, y, offset, highlighting, parameters } =
    [] , case parameters.longPiece.tip of Round -> - g [] [] + g + [] + [] Pointed _ -> Svg.path (Path.d [ MoveTo Absolute ( x + taper / 2, y + (length - curvedSectionLength) ) - , HorizontalLineTo Relative buckleWidth + , HorizontalLineTo Relative (buckleWidth - offset * 2) ] :: guideStroke )
  • @@ -233,7 +273,7 @@ longPieceShape { x, y, offset, highlighting, parameters } =
    Svg.path (Path.d [ MoveTo Absolute ( x + taper / 2, y + taperUntil ) - , HorizontalLineTo Relative buckleWidth + , HorizontalLineTo Relative (buckleWidth - offset * 2) ] :: highlightStroke (highlighting
  • @@ -361,10 +401,10 @@ shortPieceShape : ShortPieceShapeProps -> Svg msg
    shortPieceShape { x, y, offset, parameters, highlighting } = let shoulderWidth = - toMM parameters.shoulderWidth - offset * 2 + toMM parameters.shoulderWidth length = - toMM parameters.shortPiece.length - offset + toMM parameters.shortPiece.length taperUntil = Basics.min
  • @@ -379,50 +419,86 @@ shortPieceShape { x, y, offset, parameters, highlighting } =
    0.0 Tapered to -> - shoulderWidth - (toMM to - offset * 2) + shoulderWidth - toMM to + + localId : String -> String + localId body = + "short_piece__" ++ String.fromInt (ceiling (offset * 100)) ++ "__" ++ body in g [] - [ Svg.path - [ Path.d - ([ Just (MoveTo Absolute ( x, y )) - , Just (LineTo Relative ( taper / 2, taperUntil )) - , Just (VerticalLineTo Relative (length - taperUntil)) - , Just (HorizontalLineTo Relative (shoulderWidth - taper)) - , Just (VerticalLineTo Relative -(length - taperUntil)) - , Just (LineTo Relative ( taper / 2, -taperUntil )) - , Just ClosePath - ] - |> List.filterMap identity - ) - , fill "none" - , stroke "currentColor" - , strokeWidth (toMM parameters.rendering.lineWidth |> String.fromFloat) - , highlightStroke - (highlighting - == Just ShortPieceLength - || highlighting - == Just ShoulderWidth - || highlighting - == Just Profile - || highlighting - == Just TaperTo - || (case parameters.profile of - Straight -> - False - - Tapered _ -> - highlighting - == Just BuckleHoleDistance - || highlighting - == Just BuckleHoleInterval - ) - ) + [ defs [] + [ Svg.path + [ id (localId "body") + , Path.d + [ MoveTo Absolute ( x - offset, y - offset ) + , VerticalLineTo Relative offset + , LineTo Relative ( taper / 2, taperUntil ) + , VerticalLineTo Relative (length - taperUntil) + , VerticalLineTo Relative offset + , HorizontalLineTo Relative (shoulderWidth - taper) + , VerticalLineTo Relative -offset + , VerticalLineTo Relative -(length - taperUntil) + , LineTo Relative ( taper / 2, -taperUntil ) + , VerticalLineTo Relative -offset + , ClosePath + ] + ] + [] ] - [] + , if offset > 0 then + g + [] + [ Svg.mask [ id (localId "mask"), attribute "mask-type" "luminance" ] + [ use + [ attribute "href" ("#" ++ localId "body") + , stroke "black" + , strokeWidth (offset * 2 |> String.fromFloat) + , fill "white" + ] + [] + ] + , use + [ attribute "href" ("#" ++ localId "body") + , Svg.Attributes.mask ("url(#" ++ localId "mask" ++ ")") + , fill "none" + , stroke "currentColor" + , strokeWidth (offset * 2 + toMM parameters.rendering.lineWidth * 2 |> String.fromFloat) + ] + [] + ] + + else + use + [ attribute "href" ("#" ++ localId "body") + , fill "none" + , stroke "currentColor" + , strokeWidth (toMM parameters.rendering.lineWidth |> String.fromFloat) + , highlightStroke + (highlighting + == Just ShortPieceLength + || highlighting + == Just ShoulderWidth + || highlighting + == Just Profile + || highlighting + == Just TaperTo + || (case parameters.profile of + Straight -> + False + + Tapered _ -> + highlighting + == Just BuckleHoleDistance + || highlighting + == Just BuckleHoleInterval + ) + ) + ] + [] , Svg.path (Path.d - [ MoveTo Absolute ( x + shoulderWidth / 2, y ) + [ MoveTo Absolute ( x + shoulderWidth / 2 - offset, y ) , VerticalLineTo Relative length ] :: highlightStroke (highlighting == Just ShortPieceLength)
  • @@ -437,7 +513,7 @@ shortPieceShape { x, y, offset, parameters, highlighting } =
    Svg.path (Path.d [ MoveTo Absolute ( x + taper / 2, y + taperUntil ) - , HorizontalLineTo Relative (shoulderWidth - taper) + , HorizontalLineTo Relative (shoulderWidth - taper - offset * 2) ] :: guideStroke )