Merge pull request #4 from public-value-tech/fix/triangle-optical-alignment-alternative-points

Author: fruitcoder

.github/workflows/tests.yml

@@ -11,6 +11,6 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: Select Xcode Version
-      run: sudo xcode-select --switch /Applications/Xcode_13.2.1.app # (13C100)
+      run: sudo xcode-select --switch /Applications/Xcode_14.1.app
     - name: Run tests
-      run: xcodebuild test -scheme PlayButton -destination "OS=15.2,name=iPhone 11"
+      run: xcodebuild test -scheme PlayButton -destination "OS=16.1,name=iPhone 11"

Sources/PlayButton.docc/PlayButton.md

@@ -40,7 +40,7 @@ extension CGPath {
       let intersectionX = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4))
       let intersectionY = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4))
 
-      let arcCenter = CGPoint(x: floor(intersectionX), y: floor(intersectionY))
+      let arcCenter = CGPoint(x: (intersectionX), y: (intersectionY))
       let startAngle = fromAngle - (.pi / 2.0)
 
       let createCubicBezierFromArc: (_ angle: CGFloat, _ rotationOffset: CGFloat) -> (start: CGPoint, end: CGPoint, c1: CGPoint, c2: CGPoint) = { angle, rotationOffset in
@@ -117,6 +117,7 @@ extension CGPath {
     }
 
     path.closeSubpath()
+
     return (path, firstBezierEndPointXSpacing)
   }
 

Sources/PlayButton.docc/Resources/trigonometry.png

@@ -294,13 +294,6 @@ public class PlayButton: UIButton {
   private var shapeWidth: CGFloat { leftShape.bounds.width }
   private var shapeHeight: CGFloat { leftShape.bounds.height }
 
-  /// Visual corretion for "centering" the triangle
-  private var triangleXOffset: CGFloat {
-    let rightTipToBackgroundCircleDistance = (shapeWidth - triangleWidth) / 2.0
-    let topLeftToBackgroundCircleDistance = shapeWidth / 2.0 - sqrt(pow(triangleWidth, 2) + pow(triangleWidth, 2)) / 2.0
-    return (rightTipToBackgroundCircleDistance - topLeftToBackgroundCircleDistance) / 2.0
-  }
-
   /// This is the horizontal spacing between the end points of the triangle's first two bezier curves.
   /// It's used to calculate helper points along the straight lines of the bar and square paths.
   private var triangleBezierXSpacing: CGFloat = 0.0
@@ -357,7 +350,6 @@ public class PlayButton: UIButton {
         addGestureRecognizer(UIHoverGestureRecognizer(target: self, action: #selector(hover)))
       }
 
-
       if #available(macCatalyst 13.4, iOS 13.4, *) {
         isPointerInteractionEnabled = true
         pointerStyleProvider = { [weak self] _, _, _ in
@@ -481,19 +473,20 @@ public class PlayButton: UIButton {
   // ▶️
   /// The path of the triangle is only calculated when necessary and cached in ``currentTrianglePath``.
   private func updateTrianglePath() {
-    let xOffset = triangleXOffset
+    let r: CGFloat = 5.0 / 8.0 * triangleWidth
+    let centerOffset = shapeWidth / 2.0
 
     let topLeft = CGPoint(
-      x: (shapeWidth - triangleWidth) / 2.0 + xOffset,
-      y: (shapeHeight - triangleWidth) / 2.0
+      x: -3.0 / 8.0 * triangleWidth + centerOffset,
+      y: -triangleWidth / 2.0 + centerOffset
     )
     let middleRight = CGPoint(
-      x: (shapeWidth + triangleWidth) / 2.0 + xOffset,
-      y: shapeHeight / 2.0
+      x: r + centerOffset,
+      y: 0 + centerOffset
     )
     let bottomLeft = CGPoint(
-      x: (shapeWidth - triangleWidth) / 2.0 + xOffset,
-      y: (shapeHeight + triangleWidth) / 2.0
+      x: topLeft.x,
+      y: triangleWidth / 2.0 + centerOffset
     )
 
     let (path, offset) = CGPath.createTriangleWithVertices(

Sources/PlayButton.docc/Resources/trigonometry~dark.png

@@ -279,6 +279,35 @@ final class PlayButtonTests: XCTestCase {
     windowView.addSubview(button)
     assertSnapshot(matching: button, as: .image)
   }
+
+  func testTriangleOpticalAlignmentZeroCornerRadius() {
+    let button = PlayButton(frame: CGRect(x: 0, y: 0, width: 176, height: 176))
+		button.triangleCornerRadius = 0.0
+    button.playBufferingBackgroundColor = .systemBlue
+    button.playBufferingTintColor = .white
+
+    let circle = CircleView(frame: CGRect(origin: .zero, size: CGSize(width: 102, height: 102)))
+    button.addSubview(circle)
+    circle.center = button.center
+
+    windowView.addSubview(button)
+
+    assertSnapshot(matching: button, as: .image, named: "triangle")
+  }
+
+	func testTriangleOpticalAlignmentDefaultCornerRadius() {
+		let button = PlayButton(frame: CGRect(x: 0, y: 0, width: 176, height: 176))
+		button.playBufferingBackgroundColor = .systemBlue
+		button.playBufferingTintColor = .white
+
+		let circle = CircleView(frame: CGRect(origin: .zero, size: CGSize(width: 92, height: 92)))
+		button.addSubview(circle)
+		circle.center = button.center
+
+		windowView.addSubview(button)
+
+		assertSnapshot(matching: button, as: .image, named: "triangle")
+	}
 }
 
 private enum CompletionCondition {
@@ -378,3 +407,22 @@ extension CALayer {
     return rasterizedView
   }
 }
+
+class CircleView: UIView {
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    backgroundColor = .clear
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  override func draw(_ rect: CGRect) {
+    guard let context = UIGraphicsGetCurrentContext() else {return}
+
+    context.setLineWidth(1)
+    context.setStrokeColor(UIColor.green.cgColor)
+    context.strokeEllipse(in: rect.insetBy(dx: 1, dy: 1))
+  }
+}