Merge branch 'respondsToLiveResizing'

Author: ptmt

Examples/UIExplorer/UIExplorerApp.osx.js

@@ -26,7 +26,6 @@ var {
   View,
   Text,
   Dimensions,
-  TouchableHighlight
 } = ReactNative;
 
 var defaultLayout = Dimensions.get('window');
@@ -48,7 +47,7 @@ class UIExplorerApp extends React.Component {
         <View style={[styles.leftPanel, {width: 300}]}>
           <UIExplorerList openExample={(component) => this.setState({component})}/>
         </View>
-        <View style={[styles.rightPanel, {width: this.state.layout.width - 300}]}>
+        <View style={[styles.rightPanel, {width: this.state.layout.width - 300}]}  respondsToLiveResizing>
             {this.state.component && <Component />}
         </View>
       </View>
@@ -69,7 +68,7 @@ class Welcome extends React.Component {
 var styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   itemWrapper: {
     backgroundColor: '#eaeaea',

Libraries/Components/View/View.js

@@ -284,6 +284,11 @@ const View = React.createClass({
      */
     removeClippedSubviews: PropTypes.bool,
 
+    /**
+     * Workaround until we have not found the way to solve the resizing issue
+     */
+    respondsToLiveResizing: PropTypes.bool,
+
     /**
      * Whether this view should render itself (and all of its children) into a
      * single hardware texture on the GPU.

React/Base/RCTDisplayLink.m

@@ -31,7 +31,7 @@ - (instancetype)init
   if ((self = [super init])) {
     _frameUpdateObservers = [NSMutableSet new];
     _jsTimer = [NSTimer
-                   timerWithTimeInterval:0.01
+                   timerWithTimeInterval:0.025
                    target:self
                    selector:@selector(_jsThreadUpdate:)
                    userInfo:nil

React/Base/RCTRootView.m

@@ -68,7 +68,9 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
 
     // TODO: Turn on layer backing just to avoid https://github.com/ptmt/react-native-desktop/issues/47
     // Maybe we could turn it off after the bug fixed in the future.
-    [self setWantsLayer:YES];
+    if (([self window].styleMask & NSFullSizeContentViewWindowMask) != NSFullSizeContentViewWindowMask) {
+      [self setWantsLayer:YES];
+    }
 
     [self setNeedsLayout:NO];
     [self setMaterial:NSVisualEffectMaterialLight];
@@ -313,6 +315,7 @@ @implementation RCTRootContentView
   __weak RCTBridge *_bridge;
   RCTTouchHandler *_touchHandler;
   NSColor *_backgroundColor;
+  CFTimeInterval _lastResizingAt;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -321,6 +324,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 {
   if ((self = [super initWithFrame:frame])) {
     _bridge = bridge;
+    _lastResizingAt = CACurrentMediaTime();
     self.reactTag = reactTag;
     _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge];
     [self addGestureRecognizer:_touchHandler];
@@ -367,25 +371,28 @@ - (void)mouseExited:(__unused NSEvent *)theEvent
   [[self window] setAcceptsMouseMovedEvents:NO];
 }
 
-// TODO: fire onLayout or something?
-//- (void)viewDidEndLiveResize
-//{
-//  [self setFrame:[RCTSharedApplication() mainWindow].contentView.frame];
-//}
+- (void)viewDidEndLiveResize
+{
+  [super viewDidEndLiveResize];
+  [_bridge.uiManager setFrame:self.frame forView:self];
+}
 
 - (void)setFrame:(CGRect)frame
 {
   super.frame = frame;
   if (self.reactTag && _bridge.isValid) {
-    [_bridge.uiManager setFrame:frame forView:self];
+    if (!self.inLiveResize || (self.inLiveResize && (CACurrentMediaTime() - _lastResizingAt) > 0.026)) {
+      [_bridge.uiManager setFrame:frame forView:self];
+      _lastResizingAt = CACurrentMediaTime();
+    }
   }
 }
 
 - (void)setBackgroundColor:(NSColor *)backgroundColor
 {
   _backgroundColor = backgroundColor;
   if (self.reactTag && _bridge.isValid) {
-    [_bridge.uiManager setBackgroundColor:backgroundColor forView:self];
+      [_bridge.uiManager setBackgroundColor:backgroundColor forView:self];
   }
 }
 

React/Modules/RCTUIManager.m

@@ -575,7 +575,7 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
 
       // Animate view creation
       if (createAnimation) {
-        [view reactSetFrame:frame];
+        //[view reactSetFrame:frame];
 
         CATransform3D finalTransform = view.layer.transform;
         CGFloat finalOpacity = view.layer.opacity;
@@ -616,7 +616,7 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
       // Update without animation
       } else {
         // Workaround for https://github.com/ptmt/react-native-desktop/issues/47
-        // Need to speedup layout or make cancelling mechanism
+        // Need to speedup layout or make a cancelling mechanism
         if (!view.isReactRootView) {
           [view reactSetFrame:frame];
         }

React/Views/NSView+React.m

@@ -84,6 +84,11 @@ - (NSView *)reactSuperview
 
 - (void)reactSetFrame:(CGRect)frame
 {
+//  if ([self respondsToSelector:@selector(respondsToLiveResizing)]) {
+//
+//  } else {
+//    NSLog(@"%@", self.reactTag);
+//  }
   // These frames are in terms of anchorPoint = topLeft, but internally the
   // views are anchorPoint = center for easier scale and rotation animations.
   // Convert the frame so it works with anchorPoint = center.
@@ -99,8 +104,9 @@ - (void)reactSetFrame:(CGRect)frame
   }
 
   self.frame = frame;
+
   // TODO: why position matters? It's only produce bugs
-  //self.layer.position = position;
+  // self.layer.position = position;
   self.layer.bounds = bounds;
 }
 

React/Views/RCTView.h

@@ -54,6 +54,12 @@
  */
 @property (nonatomic, assign) BOOL removeClippedSubviews;
 
+/**
+ * Workaround on a lot of views with layers
+ */
+@property (nonatomic, assign) BOOL respondsToLiveResizing;
+
+
 /**
  * Hide subviews if they are outside the view bounds.
  * This is an optimisation used predominantly with RKScrollViews

React/Views/RCTView.m

@@ -530,6 +530,9 @@ - (BOOL)wantsUpdateLayer
 
 - (void)reactSetFrame:(CGRect)frame
 {
+  if (self.inLiveResize && !self.respondsToLiveResizing) {
+    return;
+  }
   // If frame is zero, or below the threshold where the border radii can
   // be rendered as a stretchable image, we'll need to re-render.
   // TODO: detect up-front if re-rendering is necessary

React/Views/RCTViewManager.m

@@ -130,6 +130,7 @@ - (void)checkLayerExists:(NSView *)view
 RCT_EXPORT_VIEW_PROPERTY(accessibilityLabel, NSString)
 RCT_EXPORT_VIEW_PROPERTY(accessibilityTraits, UIAccessibilityTraits)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, NSColor)
+RCT_EXPORT_VIEW_PROPERTY(respondsToLiveResizing, BOOL)
 RCT_REMAP_VIEW_PROPERTY(accessible, accessibilityElement, BOOL)
 RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
 RCT_REMAP_VIEW_PROPERTY(testRole, accessibilityRole, NSString)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-desktop",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "A framework for building native desktop apps using React",
   "license": "BSD-3-Clause",
   "repository": {