feat: support screen.backingScaleFactor changes

Perform a full relayout whenever a RCTWindow moves to a screen with a different "point scaling factor".

At the same time, redraw any text and images (including view borders).

Author: aleclarson

Libraries/Image/RCTImageBlurUtils.m

@@ -24,7 +24,7 @@
   if (CGImageGetBitsPerPixel(imageRef) != 32 ||
       CGImageGetBitsPerComponent(imageRef) != 8 ||
       !((CGImageGetBitmapInfo(imageRef) & kCGBitmapAlphaInfoMask))) {
-    UIGraphicsBeginImageContextWithOptions(inputImage.size, NO, 1.0f); //TODO: real scale
+    UIGraphicsBeginImageContextWithOptions(inputImage.size, NO, 0.0);
     [inputImage drawInRect:NSMakeRect(0, 0, inputImage.size.width, inputImage.size.height)];
     imageRef = RCTGetCGImage(UIGraphicsGetImageFromCurrentImageContext());
     UIGraphicsEndImageContext();

Libraries/Image/RCTImageLoader.m

@@ -671,16 +671,16 @@ - (RCTImageLoaderCancellationBlock)decodeImageData:(NSData *)data
                     // Decompress the image data (this may be CPU and memory intensive)
                     NSImage *image = RCTDecodeImageWithData(data, size, scale, resizeMode);
 
-#if RCT_DEV
-                    CGSize imagePixelSize = RCTSizeInPixels(image.size, 1.0f);
-                    CGSize screenPixelSize = RCTSizeInPixels(RCTScreenSize(), RCTScreenScale());
-                    if (imagePixelSize.width * imagePixelSize.height >
-                        screenPixelSize.width * screenPixelSize.height) {
-                      RCTLogInfo(@"[PERF ASSETS] Loading image at size %@, which is larger "
-                                   "than the screen size %@", NSStringFromSize(imagePixelSize),
-                                   NSStringFromSize(screenPixelSize));
-                    }
-#endif
+//#if RCT_DEV
+//                    CGSize imagePixelSize = RCTSizeInPixels(image.size, 1.0f);
+//                    CGSize screenPixelSize = RCTSizeInPixels(RCTScreenSize(), RCTScreenScale());
+//                    if (imagePixelSize.width * imagePixelSize.height >
+//                        screenPixelSize.width * screenPixelSize.height) {
+//                      RCTLogInfo(@"[PERF ASSETS] Loading image at size %@, which is larger "
+//                                   "than the screen size %@", NSStringFromSize(imagePixelSize),
+//                                   NSStringFromSize(screenPixelSize));
+//                    }
+//#endif
 
                     if (image) {
                         completionHandler(nil, image);

Libraries/Image/RCTImageView.m

@@ -244,7 +244,7 @@ - (RCTImageSource *)imageSourceForSize:(CGSize)size
     return nil;
   }
 
-  const CGFloat scale = RCTScreenScale();
+  const CGFloat scale = self.window.screen.backingScaleFactor;
   const CGFloat targetImagePixels = size.width * size.height * scale * scale;
 
   RCTImageSource *bestSource = nil;
@@ -307,7 +307,7 @@ - (void)reloadImage
     };
 
     CGSize imageSize = self.bounds.size;
-    CGFloat imageScale = RCTScreenScale();
+    CGFloat imageScale = self.window.screen.backingScaleFactor;
     if (!UIEdgeInsetsEqualToEdgeInsets(_capInsets, NSEdgeInsetsZero)) {
       // Don't resize images that use capInsets
       imageSize = CGSizeZero;
@@ -378,8 +378,10 @@ - (void)imageLoaderLoadedImage:(NSImage *)loadedImage error:(NSError *)error for
   };
 
   if (_blurRadius > __FLT_EPSILON__) {
+    NSScreen *screen = self.window.screen;
     // Blur on a background thread to avoid blocking interaction
     dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+      RCTSetScreen(screen);
       NSImage *blurredImage = RCTBlurredImageWithRadius(loadedImage, self->_blurRadius);
       RCTExecuteOnMainQueue(^{
         setImageBlock(blurredImage);
@@ -407,8 +409,9 @@ - (void)reactSetFrame:(CGRect)frame
     [self reloadImage];
   } else if ([self shouldReloadImageSourceAfterResize]) {
     CGSize imageSize = self.image.size;
-    CGFloat imageScale = RCTScreenScale();
-    CGSize idealSize = RCTTargetSize(imageSize, imageScale, frame.size, RCTScreenScale(),
+    CGFloat imageScale = 1.0;
+    CGFloat screenScale = self.window.screen.backingScaleFactor;
+    CGSize idealSize = RCTTargetSize(imageSize, imageScale, frame.size, screenScale,
                                      self.resizeMode, YES);
 
     // Don't reload if the current image or target image size is close enough

Libraries/Text/Text/RCTTextShadowView.m

@@ -11,6 +11,7 @@
 
 #import <React/RCTBridge.h>
 #import <React/RCTShadowView+Layout.h>
+#import <React/RCTRootShadowView.h>
 #import <React/RCTUIManager.h>
 #import <yoga/Yoga.h>
 
@@ -284,12 +285,13 @@ - (void)layoutSubviewsWithContext:(RCTLayoutContext)layoutContext
 
       NSFont *font = [textStorage attribute:NSFontAttributeName atIndex:range.location effectiveRange:nil];
 
+      CGFloat scale = YGNodeLayoutGetPointScaleFactor(shadowView.rootView.yogaNode);
       CGRect frame = {{
-        RCTRoundPixelValue(glyphRect.origin.x),
-        RCTRoundPixelValue(glyphRect.origin.y + glyphRect.size.height - attachmentSize.height + font.descender)
+        RCTRoundPixelValue(glyphRect.origin.x, scale),
+        RCTRoundPixelValue(glyphRect.origin.y + glyphRect.size.height - attachmentSize.height + font.descender, scale)
       }, {
-        RCTRoundPixelValue(attachmentSize.width),
-        RCTRoundPixelValue(attachmentSize.height)
+        RCTRoundPixelValue(attachmentSize.width, scale),
+        RCTRoundPixelValue(attachmentSize.height, scale)
       }};
 
       RCTLayoutContext localLayoutContext = layoutContext;
@@ -327,9 +329,10 @@ static YGSize RCTTextShadowViewMeasure(YGNodeRef node, float width, YGMeasureMod
     size.width -= letterSpacing;
   }
 
+  CGFloat scale = YGNodeLayoutGetPointScaleFactor(shadowTextView.rootView.yogaNode);
   size = (CGSize){
-    MIN(RCTCeilPixelValue(size.width), maximumSize.width),
-    MIN(RCTCeilPixelValue(size.height), maximumSize.height)
+    MIN(RCTCeilPixelValue(size.width, scale), maximumSize.width),
+    MIN(RCTCeilPixelValue(size.height, scale), maximumSize.height)
   };
 
   return (YGSize){

Libraries/Text/TextInput/RCTBaseTextInputShadowView.m

@@ -227,8 +227,8 @@ - (CGSize)sizeThatFitsMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximu
   CGSize size = [_layoutManager usedRectForTextContainer:_textContainer].size;
 
   return (CGSize){
-    MAX(minimumSize.width, MIN(RCTCeilPixelValue(size.width), maximumSize.width)),
-    MAX(minimumSize.height, MIN(RCTCeilPixelValue(size.height), maximumSize.height))
+    MAX(minimumSize.width, MIN(RCTCeilPixelValue(size.width, 1.0), maximumSize.width)),
+    MAX(minimumSize.height, MIN(RCTCeilPixelValue(size.height, 1.0), maximumSize.height))
   };
 }
 

React/Base/RCTRootView.h

@@ -150,6 +150,8 @@ extern NSString *const RCTContentDidAppearNotification;
 @property (nonatomic, assign) NSTimeInterval loadingViewFadeDelay;
 @property (nonatomic, assign) NSTimeInterval loadingViewFadeDuration;
 
+@property (nonatomic, assign) CGFloat scaleFactor;
+
 @end
 
 @interface RCTRootView (Deprecated)

React/Base/RCTRootView.m

@@ -27,6 +27,7 @@
 #import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"
 #import "RCTView.h"
+#import "RCTShadowView.h"
 #import "NSView+React.h"
 
 #if TARGET_OS_TV
@@ -215,6 +216,22 @@ - (BOOL)isFlipped
   return NO;
 }
 
+- (void)setScaleFactor:(CGFloat)scaleFactor
+{
+  if (scaleFactor != _scaleFactor) {
+    _scaleFactor = scaleFactor;
+    if (scaleFactor > 0.0) {
+      NSNumber *reactTag = self.reactTag;
+      RCTUIManager *uiManager = _bridge.uiManager;
+      RCTExecuteOnUIManagerQueue(^{
+        RCTShadowView *shadowView = [uiManager shadowViewForReactTag:reactTag];
+        YGNodeLayoutSetPointScaleFactor(shadowView.yogaNode, scaleFactor);
+        [uiManager setNeedsLayout];
+      });
+    }
+  }
+}
+
 - (void)setLoadingView:(NSView *)loadingView
 {
   _loadingView = loadingView;

React/Base/RCTUtils.h

@@ -44,13 +44,14 @@ RCT_EXTERN void RCTExecuteOnMainQueue(dispatch_block_t block);
 RCT_EXTERN void RCTUnsafeExecuteOnMainQueueSync(dispatch_block_t block);
 
 // Get screen metrics in a thread-safe way
+RCT_EXTERN void RCTSetScreen(NSScreen *);
 RCT_EXTERN CGFloat RCTScreenScale(void);
 RCT_EXTERN CGSize RCTScreenSize(void);
 
 // Round float coordinates to nearest whole screen pixel (not point)
-RCT_EXTERN CGFloat RCTRoundPixelValue(CGFloat value);
-RCT_EXTERN CGFloat RCTCeilPixelValue(CGFloat value);
-RCT_EXTERN CGFloat RCTFloorPixelValue(CGFloat value);
+RCT_EXTERN CGFloat RCTRoundPixelValue(CGFloat value, CGFloat scale);
+RCT_EXTERN CGFloat RCTCeilPixelValue(CGFloat value, CGFloat scale);
+RCT_EXTERN CGFloat RCTFloorPixelValue(CGFloat value, CGFloat scale);
 
 // Convert a size in points to pixels, rounded up to the nearest integral size
 RCT_EXTERN CGSize RCTSizeInPixels(CGSize pointSize, CGFloat scale);

React/Base/RCTUtils.m

@@ -280,50 +280,38 @@ static void RCTUnsafeExecuteOnMainQueueOnceSync(dispatch_once_t *onceToken, disp
   }
 }
 
-CGFloat RCTScreenScale()
-{
-  static dispatch_once_t onceToken;
-  static CGFloat scale;
+static __weak NSScreen *currentScreen = nil;
 
-  RCTUnsafeExecuteOnMainQueueOnceSync(&onceToken, ^{
-      scale = [NSScreen mainScreen].backingScaleFactor; // TODO:
-  });
+void RCTSetScreen(NSScreen *screen)
+{
+  RCTAssertMainQueue();
+  currentScreen = screen;
+}
 
-  return scale;
+CGFloat RCTScreenScale()
+{
+  RCTAssertMainQueue();
+  return currentScreen.backingScaleFactor;
 }
 
 CGSize RCTScreenSize()
 {
-  // FIXME: this caches the bounds at app start, whatever those were, and then
-  // doesn't update when the device is rotated. We need to find another thread-
-  // safe way to get the screen size.
-
-  static CGSize size;
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-    RCTUnsafeExecuteOnMainQueueSync(^{
-      size = [NSScreen mainScreen].frame.size;
-    });
-  });
-
-  return size;
+  RCTAssertMainQueue();
+  return currentScreen.frame.size;
 }
 
-CGFloat RCTRoundPixelValue(CGFloat value)
+CGFloat RCTRoundPixelValue(CGFloat value, CGFloat scale)
 {
-  CGFloat scale = RCTScreenScale();
   return round(value * scale) / scale;
 }
 
-CGFloat RCTCeilPixelValue(CGFloat value)
+CGFloat RCTCeilPixelValue(CGFloat value, CGFloat scale)
 {
-  CGFloat scale = RCTScreenScale();
   return ceil(value * scale) / scale;
 }
 
-CGFloat RCTFloorPixelValue(CGFloat value)
+CGFloat RCTFloorPixelValue(CGFloat value, CGFloat scale)
 {
-  CGFloat scale = RCTScreenScale();
   return floor(value * scale) / scale;
 }
 

React/Base/UIImageUtils.m

@@ -5,10 +5,12 @@
 //  Copyright © 2015 Facebook. All rights reserved.
 //
 
-#import "UIImageUtils.h"
 #import <Foundation/Foundation.h>
 #import <AppKit/AppKit.h>
 
+#import "RCTUtils.h"
+#import "UIImageUtils.h"
+
 NSData *UIImagePNGRepresentation(NSImage *image)
 {
   CGImageSourceRef source = CGImageSourceCreateWithData((CFDataRef)[image TIFFRepresentation], NULL);
@@ -57,7 +59,7 @@ void UIGraphicsPushContext(CGContextRef ctx)
 void UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
 {
   if (scale == 0.f) {
-    scale = [NSScreen mainScreen].backingScaleFactor ?: 1;
+    scale = RCTScreenScale();
   }
 
   const size_t width = size.width * scale;