💫 Update: Exp - AdaptiveModal

Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
dominicstop · May 31, 2023 · 02ca95a · 02ca95a
1 parent 91912d6
commit 02ca95a
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 184 deletions.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift
@@ -20,10 +20,8 @@ struct AdaptiveModalAnimationConfig {
   let modalBackgroundColor: UIColor?;
   let modalBackgroundOpacity: CGFloat?;
 
-  let modalRadiusTopLeft: CGFloat?;
-  let modalRadiusTopRight: CGFloat?;
-  let modalRadiusBottomLeft: CGFloat?;
-  let modalRadiusBottomRight: CGFloat?;
+  let modalCornerRadius: CGFloat?;
+  let modalMaskedCorners: CACornerMask?;
 
   let modalBlurEffectStyle: UIBlurEffect.Style?;
   let modalBlurEffectIntensity: CGFloat?;
@@ -42,10 +40,8 @@ struct AdaptiveModalAnimationConfig {
      modalTranslateY: CGFloat? = nil,
      modalBackgroundColor: UIColor? = nil,
      modalBackgroundOpacity: CGFloat? = nil,
-     modalRadiusTopLeft: CGFloat? = nil,
-     modalRadiusTopRight: CGFloat? = nil,
-     modalRadiusBottomLeft: CGFloat? = nil,
-     modalRadiusBottomRight: CGFloat? = nil,
+     modalCornerRadius: CGFloat? = nil,
+     modalMaskedCorners: CACornerMask? = nil,
      modalBlurEffectStyle: UIBlurEffect.Style? = nil,
      modalBlurEffectIntensity: CGFloat? = nil,
      backgroundColor: UIColor? = nil,
@@ -64,10 +60,8 @@ struct AdaptiveModalAnimationConfig {
     self.modalBackgroundColor = modalBackgroundColor;
     self.modalBackgroundOpacity = modalBackgroundOpacity;
 
-    self.modalRadiusTopLeft = modalRadiusTopLeft;
-    self.modalRadiusTopRight = modalRadiusTopRight;
-    self.modalRadiusBottomLeft = modalRadiusBottomLeft;
-    self.modalRadiusBottomRight = modalRadiusBottomRight;
+    self.modalCornerRadius = modalCornerRadius;
+    self.modalMaskedCorners = modalMaskedCorners;
 
     self.modalBlurEffectStyle = modalBlurEffectStyle;
     self.modalBlurEffectIntensity = modalBlurEffectIntensity;

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -12,47 +12,29 @@ 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;
-  };
-
+  let modalCornerRadius: CGFloat;
+  let modalMaskedCorners: CACornerMask;
+
   init(
     withTargetRect targetRect: CGRect,
     currentSize: CGSize,
     snapPointConfig: AdaptiveModalSnapPointConfig,
-    modalRadiusTopLeft: CGFloat,
-    modalRadiusTopRight: CGFloat,
-    modalRadiusBottomLeft: CGFloat,
-    modalRadiusBottomRight: CGFloat
+    modalCornerRadius: CGFloat,
+    modalMaskedCorners: CACornerMask
   ) {
     self.computedRect = snapPointConfig.snapPoint.computeRect(
       withTargetRect: targetRect,
       currentSize: currentSize
     );
 
-    self.modalRadiusTopLeft = modalRadiusTopLeft;
-    self.modalRadiusTopRight = modalRadiusTopRight;
-    self.modalRadiusBottomLeft = modalRadiusBottomLeft;
-    self.modalRadiusBottomRight = modalRadiusBottomRight;
+    self.modalCornerRadius = modalCornerRadius;
+    self.modalMaskedCorners = modalMaskedCorners;
+  };
+
+  func apply(toModalView modalView: UIView){
+    modalView.frame = self.computedRect;
+    modalView.layer.cornerRadius = self.modalCornerRadius;
+    modalView.layer.maskedCorners = self.modalMaskedCorners;
   };
 };
 
@@ -67,6 +49,13 @@ extension AdaptiveModalInterpolationPoint {
   var items: [AdaptiveModalInterpolationPoint] = [];
 
   let defaultCornerRadius: CGFloat = 0;
+
+  let defaultMaskedCorners: CACornerMask = [
+    .layerMaxXMinYCorner,
+    .layerMinXMinYCorner,
+    .layerMaxXMaxYCorner,
+    .layerMinXMaxYCorner,
+  ];
 
     for snapConfig in modalConfig.snapPoints {
       let keyframe = snapConfig.animationKeyframe;
@@ -78,17 +67,11 @@ extension AdaptiveModalInterpolationPoint {
           currentSize    : currentSize,
           snapPointConfig: snapConfig,
 
-          modalRadiusTopLeft: keyframe?.modalRadiusTopLeft
-            ?? prevKeyframe?.modalRadiusTopLeft ?? defaultCornerRadius,
-
-          modalRadiusTopRight: keyframe?.modalRadiusTopRight
-            ?? prevKeyframe?.modalRadiusTopRight ?? defaultCornerRadius,
-
-          modalRadiusBottomLeft: keyframe?.modalRadiusBottomLeft
-            ?? prevKeyframe?.modalRadiusBottomLeft ?? defaultCornerRadius,
+          modalCornerRadius: keyframe?.modalCornerRadius
+            ?? prevKeyframe?.modalCornerRadius ?? defaultCornerRadius,
 
-          modalRadiusBottomRight: keyframe?.modalRadiusBottomRight
-            ?? prevKeyframe?.modalRadiusBottomRight ?? defaultCornerRadius
+          modalMaskedCorners: keyframe?.modalMaskedCorners
+            ?? prevKeyframe?.modalMaskedCorners ?? defaultMaskedCorners
         )
       );
     };