My math is wrong...

Author: bbrk24

Sources/SwiftCrossUI/Path.swift

@@ -1,4 +1,4 @@
-import Foundation  // for sinf and cosf
+import Foundation  // for sin and cos
 
 public enum StrokeCap {
     /// The stroke ends square exactly at the last point.
@@ -12,15 +12,15 @@ public enum StrokeCap {
 public enum StrokeJoin {
     /// Corners are sharp, unless they are longer than `limit` times half the stroke width,
     /// in which case they are beveled.
-    case miter(limit: Float)
+    case miter(limit: Double)
     /// Corners are rounded.
     case round
     /// Corners are beveled.
     case bevel
 }
 
 public struct StrokeStyle {
-    public var width: Float = 1.0
+    public var width: Double = 1.0
     public var cap: StrokeCap = .butt
     public var join: StrokeJoin = .miter(limit: 10.0)
 
@@ -39,45 +39,43 @@ public enum FillRule {
 
 /// A type representing an affine transformation on a 2-D point.
 ///
-/// Performing an affine transform consists of translating by ``translation`` followed by
-/// multiplying by ``linearTransform``.
-public struct AffineTransform: Equatable {
+/// Performing an affine transform consists of multiplying the matrix ``linearTransform``
+/// by the point as a column vector, then adding ``translation``.
+public struct AffineTransform: Equatable, CustomDebugStringConvertible {
     /// The linear transformation. This is a 2x2 matrix stored in row-major order.
     ///
     /// The four properties (`x`, `y`, `z`, `w`) correspond to the 2x2 matrix as follows:
     /// ```
     /// [ x  y ]
     /// [ z  w ]
     /// ```
-    public var linearTransform: SIMD4<Float>
+    public var linearTransform: SIMD4<Double>
     /// The translation applied after the linear transformation.
-    public var translation: SIMD2<Float>
+    public var translation: SIMD2<Double>
 
-    public init(linearTransform: SIMD4<Float>, translation: SIMD2<Float>) {
+    public init(linearTransform: SIMD4<Double>, translation: SIMD2<Double>) {
         self.linearTransform = linearTransform
         self.translation = translation
     }
 
-    public static func translate(x: Float, y: Float) -> AffineTransform {
+    public static func translation(x: Double, y: Double) -> AffineTransform {
         AffineTransform(
             linearTransform: SIMD4(x: 1.0, y: 0.0, z: 0.0, w: 1.0),
             translation: SIMD2(x: x, y: y)
         )
     }
 
-    public static func scale(by factor: Float) -> AffineTransform {
+    public static func scaling(by factor: Double) -> AffineTransform {
         AffineTransform(
             linearTransform: SIMD4(x: factor, y: 0.0, z: 0.0, w: factor),
             translation: .zero
         )
     }
 
-    public static func rotate(
-        radians: Float,
-        center: SIMD2<Float> = .zero
-    ) -> AffineTransform {
-        let sine = sinf(radians)
-        let cosine = cosf(radians)
+    public static func rotation(radians: Double, center: SIMD2<Double>) -> AffineTransform {
+        // Making the sine negative so that positive rotations are clockwise
+        let sine = sin(-radians)
+        let cosine = cos(radians)
         return AffineTransform(
             linearTransform: SIMD4(x: cosine, y: -sine, z: sine, w: cosine),
             translation: SIMD2(
@@ -87,53 +85,118 @@ public struct AffineTransform: Equatable {
         )
     }
 
-    public static func rotate(
-        degrees: Float,
-        center: SIMD2<Float> = .zero
-    ) -> AffineTransform {
-        rotate(radians: degrees * (.pi / 180.0), center: center)
+    public static func rotation(degrees: Double, center: SIMD2<Double>) -> AffineTransform {
+        rotation(radians: degrees * (.pi / 180.0), center: center)
     }
 
     public static let identity = AffineTransform(
         linearTransform: SIMD4(x: 1.0, y: 0.0, z: 0.0, w: 1.0),
         translation: .zero
     )
+
+    public func inverted() -> AffineTransform? {
+        let determinant = linearTransform.x * linearTransform.w - linearTransform.y * linearTransform.z
+        if determinant == 0.0 {
+            return nil
+        }
+
+        return AffineTransform(
+            linearTransform: SIMD4(
+                x: linearTransform.w,
+                y: -linearTransform.y,
+                z: -linearTransform.z,
+                w: linearTransform.x
+            ) / determinant,
+            translation: SIMD2(
+                x: (linearTransform.y * translation.y - linearTransform.w * translation.x),
+                y: (linearTransform.z * translation.x - linearTransform.x * translation.y)
+            ) / determinant
+        )
+    }
+
+    public func followedBy(_ other: AffineTransform) -> AffineTransform {
+        // Composing two transformations is equivalent to forming the 3x3 matrix shown by
+        // `debugDescription`, then multiplying `other * self` (the left matrix is applied
+        // after the right matrix).
+        return AffineTransform(
+            linearTransform: SIMD4(
+                x: other.linearTransform.x * linearTransform.x + other.linearTransform.y
+                    * linearTransform.z,
+                y: other.linearTransform.x * linearTransform.y + other.linearTransform.y
+                    * linearTransform.w,
+                z: other.linearTransform.z * linearTransform.x + other.linearTransform.w
+                    * linearTransform.z,
+                w: other.linearTransform.z * linearTransform.y + other.linearTransform.w
+                    * linearTransform.w
+            ),
+            translation: SIMD2(
+                x: other.linearTransform.x * translation.x + other.linearTransform.y * translation.y
+                    + other.translation.x,
+                y: other.linearTransform.z * translation.x + other.linearTransform.w * translation.y
+                    + other.translation.y
+            )
+        )
+    }
+
+    public var debugDescription: String {
+        let numberFormat = "%.5g"
+        let a = String(format: numberFormat, linearTransform.x)
+        let b = String(format: numberFormat, linearTransform.y)
+        let c = String(format: numberFormat, linearTransform.z)
+        let d = String(format: numberFormat, linearTransform.w)
+        let tx = String(format: numberFormat, translation.x)
+        let ty = String(format: numberFormat, translation.y)
+        let zero = String(format: numberFormat, 0.0)
+        let one = String(format: numberFormat, 1.0)
+
+        let maxLength = [a, b, c, d, tx, ty, zero, one].map(\.count).max()!
+
+        func pad(_ s: String) -> String {
+            String(repeating: " ", count: maxLength - s.count) + s
+        }
+
+        return """
+            [ \(pad(a)) \(pad(b)) \(pad(tx)) ]
+            [ \(pad(c)) \(pad(d)) \(pad(ty)) ]
+            [ \(pad(zero)) \(pad(zero)) \(pad(one)) ]
+            """
+    }
 }
 
 public struct Path {
     public struct Rect: Equatable {
-        public var origin: SIMD2<Float>
-        public var size: SIMD2<Float>
+        public var origin: SIMD2<Double>
+        public var size: SIMD2<Double>
 
-        public init(origin: SIMD2<Float>, size: SIMD2<Float>) {
+        public init(origin: SIMD2<Double>, size: SIMD2<Double>) {
             self.origin = origin
             self.size = size
         }
 
-        public var x: Float { origin.x }
-        public var y: Float { origin.y }
-        public var width: Float { size.x }
-        public var height: Float { size.y }
+        public var x: Double { origin.x }
+        public var y: Double { origin.y }
+        public var width: Double { size.x }
+        public var height: Double { size.y }
 
-        public init(x: Float, y: Float, width: Float, height: Float) {
+        public init(x: Double, y: Double, width: Double, height: Double) {
             origin = SIMD2(x: x, y: y)
             size = SIMD2(x: width, y: height)
         }
     }
 
     /// The types of actions that can be performed on a path.
     public enum Action: Equatable {
-        case moveTo(SIMD2<Float>)
-        case lineTo(SIMD2<Float>)
-        case quadCurve(control: SIMD2<Float>, end: SIMD2<Float>)
-        case cubicCurve(control1: SIMD2<Float>, control2: SIMD2<Float>, end: SIMD2<Float>)
+        case moveTo(SIMD2<Double>)
+        case lineTo(SIMD2<Double>)
+        case quadCurve(control: SIMD2<Double>, end: SIMD2<Double>)
+        case cubicCurve(control1: SIMD2<Double>, control2: SIMD2<Double>, end: SIMD2<Double>)
         case rectangle(Rect)
-        case circle(center: SIMD2<Float>, radius: Float)
+        case circle(center: SIMD2<Double>, radius: Double)
         case arc(
-            center: SIMD2<Float>,
-            radius: Float,
-            startAngle: Float,
-            endAngle: Float,
+            center: SIMD2<Double>,
+            radius: Double,
+            startAngle: Double,
+            endAngle: Double,
             clockwise: Bool
         )
         case transform(AffineTransform)
@@ -152,28 +215,28 @@ public struct Path {
 
     public init() {}
 
-    public consuming func move(to point: SIMD2<Float>) -> Path {
+    public consuming func move(to point: SIMD2<Double>) -> Path {
         actions.append(.moveTo(point))
         return self
     }
 
-    public consuming func addLine(to point: SIMD2<Float>) -> Path {
+    public consuming func addLine(to point: SIMD2<Double>) -> Path {
         actions.append(.lineTo(point))
         return self
     }
 
     public consuming func addQuadCurve(
-        control: SIMD2<Float>,
-        to endPoint: SIMD2<Float>
+        control: SIMD2<Double>,
+        to endPoint: SIMD2<Double>
     ) -> Path {
         actions.append(.quadCurve(control: control, end: endPoint))
         return self
     }
 
     public consuming func addCubicCurve(
-        control1: SIMD2<Float>,
-        control2: SIMD2<Float>,
-        to endPoint: SIMD2<Float>
+        control1: SIMD2<Double>,
+        control2: SIMD2<Double>,
+        to endPoint: SIMD2<Double>
     ) -> Path {
         actions.append(.cubicCurve(control1: control1, control2: control2, end: endPoint))
         return self
@@ -184,16 +247,16 @@ public struct Path {
         return self
     }
 
-    public consuming func addCircle(center: SIMD2<Float>, radius: Float) -> Path {
+    public consuming func addCircle(center: SIMD2<Double>, radius: Double) -> Path {
         actions.append(.circle(center: center, radius: radius))
         return self
     }
 
     public consuming func addArc(
-        center: SIMD2<Float>,
-        radius: Float,
-        startAngle: Float,
-        endAngle: Float,
+        center: SIMD2<Double>,
+        radius: Double,
+        startAngle: Double,
+        endAngle: Double,
         clockwise: Bool
     ) -> Path {
         actions.append(

Sources/SwiftCrossUI/Views/Shapes/Shape.swift

@@ -40,7 +40,7 @@ extension Shape {
         let storage = children as! ShapeStorage
         let size = size(fitting: proposedSize)
 
-        let path = path(in: Path.Rect(x: 0.0, y: 0.0, width: Float(size.x), height: Float(size.y)))
+        let path = path(in: Path.Rect(x: 0.0, y: 0.0, width: Double(size.x), height: Double(size.y)))
         let pointsChanged = storage.oldPath?.actions != path.actions
         storage.oldPath = path
 

Sources/UIKitBackend/UIKitBackend+Path.swift

@@ -38,58 +38,56 @@ extension UIKitBackend {
             for action in source.actions {
                 switch action {
                     case .moveTo(let point):
-                        path.move(to: CGPoint(x: Double(point.x), y: Double(point.y)))
+                        path.move(to: CGPoint(x: point.x, y: point.y))
                     case .lineTo(let point):
-                        path.addLine(to: CGPoint(x: Double(point.x), y: Double(point.y)))
+                        path.addLine(to: CGPoint(x: point.x, y: point.y))
                     case .quadCurve(let control, let end):
                         path.addQuadCurve(
-                            to: CGPoint(x: Double(end.x), y: Double(end.y)),
-                            controlPoint: CGPoint(x: Double(control.x), y: Double(control.y)))
+                            to: CGPoint(x: end.x, y: end.y),
+                            controlPoint: CGPoint(x: control.x, y: control.y)
+                        )
                     case .cubicCurve(let control1, let control2, let end):
                         path.addCurve(
-                            to: CGPoint(x: Double(end.x), y: Double(end.y)),
-                            controlPoint1: CGPoint(x: Double(control1.x), y: Double(control1.y)),
-                            controlPoint2: CGPoint(x: Double(control2.x), y: Double(control2.y)))
+                            to: CGPoint(x: end.x, y: end.y),
+                            controlPoint1: CGPoint(x: control1.x, y: control1.y),
+                            controlPoint2: CGPoint(x: control2.x, y: control2.y)
+                        )
                     case .rectangle(let rect):
                         let cgPath: CGMutablePath = path.cgPath.mutableCopy()!
                         cgPath.addRect(
-                            CGRect(
-                                x: CGFloat(rect.x),
-                                y: CGFloat(rect.y),
-                                width: CGFloat(rect.width),
-                                height: CGFloat(rect.height)
-                            )
+                            CGRect(x: rect.x, y: rect.y, width: rect.width, height: rect.height)
                         )
                         path.cgPath = cgPath
                     case .circle(let center, let radius):
                         let cgPath: CGMutablePath = path.cgPath.mutableCopy()!
                         cgPath.addEllipse(
                             in: CGRect(
-                                x: CGFloat(center.x - radius),
-                                y: CGFloat(center.y - radius),
-                                width: CGFloat(radius * 2.0),
-                                height: CGFloat(radius * 2.0)
+                                x: center.x - radius,
+                                y: center.y - radius,
+                                width: radius * 2.0,
+                                height: radius * 2.0
                             )
                         )
                         path.cgPath = cgPath
                     case .arc(let center, let radius, let startAngle, let endAngle, let clockwise):
                         path.addArc(
-                            withCenter: CGPoint(x: Double(center.x), y: Double(center.y)),
+                            withCenter: CGPoint(x: center.x, y: center.y),
                             radius: CGFloat(radius),
                             startAngle: CGFloat(startAngle),
                             endAngle: CGFloat(endAngle),
                             clockwise: clockwise
                         )
                     case .transform(let transform):
-                        let cgAT = CGAffineTransform(
-                            a: Double(transform.linearTransform.x),
-                            b: Double(transform.linearTransform.y),
-                            c: Double(transform.linearTransform.z),
-                            d: Double(transform.linearTransform.w),
-                            tx: Double(transform.translation.x),
-                            ty: Double(transform.translation.y)
+                        path.apply(
+                            CGAffineTransform(
+                                a: transform.linearTransform.x,
+                                b: transform.linearTransform.y,
+                                c: transform.linearTransform.z,
+                                d: transform.linearTransform.w,
+                                tx: transform.translation.x,
+                                ty: transform.translation.y
+                            )
                         )
-                        path.apply(cgAT)
                 }
             }
         }
@@ -101,6 +99,6 @@ extension UIKitBackend {
         maskLayer.path = path.cgPath
         maskLayer.fillRule = path.usesEvenOddFillRule ? .evenOdd : .nonZero
         container.view.layer.mask = maskLayer
-        container.view.backgroundColor = .red  // TODO
+        container.view.backgroundColor = environment.suggestedForegroundColor.uiColor
     }
 }