💫 Update: Exp - AdaptiveModal

Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
dominicstop · May 29, 2023 · 5ff377d · 5ff377d
1 parent 36f9647
commit 5ff377d
Show file tree

Hide file tree

Showing 5 changed files with 314 additions and 201 deletions.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift
@@ -8,72 +8,6 @@
 import UIKit
 
 
-struct AdaptiveModalInterpolationPoint {
-
-  static func compute(
-    modalConfig: AdaptiveModalConfig,
-    withTargetRect targetRect: CGRect,
-    currentSize: CGSize
-  ) -> [Self] {
-    var items: [Self] = [];
-
-    for snapConfig in modalConfig.snapPoints {
-      let keyframe = snapConfig.animationKeyframe;
-      let prevKeyframe = items.last;
-
-      items.append(
-        Self.init(
-          withTargetRect : targetRect,
-          currentSize    : currentSize,
-          snapPointConfig: snapConfig,
-
-          modalRadiusTopLeft: keyframe?.modalRadiusTopLeft
-            ?? prevKeyframe?.modalRadiusTopLeft ?? 0,
-
-          modalRadiusTopRight: keyframe?.modalRadiusTopRight
-            ?? prevKeyframe?.modalRadiusTopRight ?? 0,
-
-          modalRadiusBottomLeft: keyframe?.modalRadiusBottomLeft
-            ?? prevKeyframe?.modalRadiusBottomLeft ?? 0,
-
-          modalRadiusBottomRight: keyframe?.modalRadiusBottomRight
-            ?? prevKeyframe?.modalRadiusBottomRight ?? 0
-        )
-      );
-    };
-
-    return items;
-  };
-
-  /// The computed frames of the modal based on the snap points
-  let computedRect: CGRect;
-
-  let modalRadiusTopLeft: CGFloat;
-  let modalRadiusTopRight: CGFloat;
-  let modalRadiusBottomLeft: CGFloat;
-  let modalRadiusBottomRight: CGFloat;
-
-  init(
-    withTargetRect targetRect: CGRect,
-    currentSize: CGSize,
-    snapPointConfig: AdaptiveModalSnapPointConfig,
-    modalRadiusTopLeft: CGFloat,
-    modalRadiusTopRight: CGFloat,
-    modalRadiusBottomLeft: CGFloat,
-    modalRadiusBottomRight: CGFloat
-  ) {
-    self.computedRect = snapPointConfig.snapPoint.computeRect(
-      withTargetRect: targetRect,
-      currentSize: currentSize
-    );
-
-    self.modalRadiusTopLeft = modalRadiusTopLeft;
-    self.modalRadiusTopRight = modalRadiusTopRight;
-    self.modalRadiusBottomLeft = modalRadiusBottomLeft;
-    self.modalRadiusBottomRight = modalRadiusBottomRight;
-  };
-};
-
 struct AdaptiveModalAnimationConfig {
   let modalRotation: CGFloat?;
 

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -0,0 +1,99 @@
+//
+//  AdaptiveModalInterpolationPoint.swift
+//  swift-programmatic-modal
+//
+//  Created by Dominic Go on 5/29/23.
+//
+
+import UIKit
+
+struct AdaptiveModalInterpolationPoint {
+
+  /// The computed frames of the modal based on the snap points
+  let computedRect: CGRect;
+
+  let modalRadiusTopLeft: CGFloat;
+  let modalRadiusTopRight: CGFloat;
+  let modalRadiusBottomLeft: CGFloat;
+  let modalRadiusBottomRight: CGFloat;
+
+  var modalRadiusMask: CAShapeLayer {
+    let radiusPath = UIBezierPath(
+      shouldRoundRect: CGRect(
+        origin: .zero,
+        size: self.computedRect.size
+      ),
+      topLeftRadius: self.modalRadiusTopLeft,
+      topRightRadius: self.modalRadiusTopRight,
+      bottomLeftRadius: self.modalRadiusBottomLeft,
+      bottomRightRadius: self.modalRadiusBottomRight
+    );
+
+    let shape = CAShapeLayer();
+    shape.path = radiusPath.cgPath;
+
+    return shape;
+  };
+
+  init(
+    withTargetRect targetRect: CGRect,
+    currentSize: CGSize,
+    snapPointConfig: AdaptiveModalSnapPointConfig,
+    modalRadiusTopLeft: CGFloat,
+    modalRadiusTopRight: CGFloat,
+    modalRadiusBottomLeft: CGFloat,
+    modalRadiusBottomRight: CGFloat
+  ) {
+    self.computedRect = snapPointConfig.snapPoint.computeRect(
+      withTargetRect: targetRect,
+      currentSize: currentSize
+    );
+
+    self.modalRadiusTopLeft = modalRadiusTopLeft;
+    self.modalRadiusTopRight = modalRadiusTopRight;
+    self.modalRadiusBottomLeft = modalRadiusBottomLeft;
+    self.modalRadiusBottomRight = modalRadiusBottomRight;
+  };
+};
+
+extension AdaptiveModalInterpolationPoint {
+
+  static func compute(
+    usingModalConfig modalConfig: AdaptiveModalConfig,
+    withTargetRect targetRect: CGRect,
+    currentSize: CGSize
+  ) -> [AdaptiveModalInterpolationPoint] {
+
+  var items: [AdaptiveModalInterpolationPoint] = [];
+
+  let defaultCornerRadius: CGFloat = 0;
+
+    for snapConfig in modalConfig.snapPoints {
+      let keyframe = snapConfig.animationKeyframe;
+      let prevKeyframe = items.last;
+
+      items.append(
+        AdaptiveModalInterpolationPoint(
+          withTargetRect : targetRect,
+          currentSize    : currentSize,
+          snapPointConfig: snapConfig,
+
+          modalRadiusTopLeft: keyframe?.modalRadiusTopLeft
+            ?? prevKeyframe?.modalRadiusTopLeft ?? defaultCornerRadius,
+
+          modalRadiusTopRight: keyframe?.modalRadiusTopRight
+            ?? prevKeyframe?.modalRadiusTopRight ?? defaultCornerRadius,
+
+          modalRadiusBottomLeft: keyframe?.modalRadiusBottomLeft
+            ?? prevKeyframe?.modalRadiusBottomLeft ?? defaultCornerRadius,
+
+          modalRadiusBottomRight: keyframe?.modalRadiusBottomRight
+            ?? prevKeyframe?.modalRadiusBottomRight ?? defaultCornerRadius
+        )
+      );
+    };
+
+    return items;
+  };
+
+};