feat(ios): optimize scale factor and demo

examples/hippy-react-demo/src/components/ListView/index.jsx

@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
   separatorLine: {
     marginLeft: 12,
     marginRight: 12,
-    height: 0.5,
+    height: 1,
     backgroundColor: '#e5e5e5',
   },
   loading: {

ios/sdk/component/view/HippyShadowView.mm

@@ -375,7 +375,7 @@ - (instancetype)init {
 
         _hippySubviews = [NSMutableArray array];
 
-        _nodeRef = MTTNodeNew();
+        _nodeRef = MTTNodeNewWithScaleFactor([UIScreen mainScreen].scale);
     }
     return self;
 }

ios/sdk/layout/MTTLayout.cpp

@@ -23,6 +23,10 @@ MTTNodeRef MTTNodeNew() {
   return new MTTNode();
 }
 
+MTTNodeRef MTTNodeNewWithScaleFactor(float scaleFactor) {
+  return new MTTNode(scaleFactor);
+}
+
 void MTTNodeFree(MTTNodeRef node) {
   if (node == nullptr)
     return;

ios/sdk/layout/MTTLayout.h

@@ -24,6 +24,7 @@
 #include "MTTNode.h"
 
 MTTNodeRef MTTNodeNew();
+MTTNodeRef MTTNodeNewWithScaleFactor(float scaleFactor);
 void MTTNodeFree(MTTNodeRef node);
 void MTTNodeFreeRecursive(MTTNodeRef node);
 

ios/sdk/layout/MTTNode.cpp

@@ -68,6 +68,16 @@ MTTNode::MTTNode() {
 
   initLayoutResult();
   inInitailState = true;
+  scaleFactor = 1.f;
+}
+
+MTTNode::MTTNode(float sf):scaleFactor(sf) {
+  context = nullptr;
+  parent = nullptr;
+  measure = nullptr;
+  dirtiedFunc = nullptr;
+  initLayoutResult();
+  inInitailState = true;
 }
 
 MTTNode::~MTTNode() {
@@ -597,7 +607,7 @@ void MTTNode::layout(float parentWidth,
   // node 's layout is complete
   // convert its and its descendants position and size to a integer value.
 #ifndef ANDROID
-  convertLayoutResult(0.0f, 0.0f);  // layout result convert has been taken in
+  convertLayoutResult(0.0f, 0.0f, scaleFactor);  // layout result convert has been taken in
                                     // java . 3.8.2018. ianwang..
 #endif
 
@@ -1512,7 +1522,7 @@ void MTTNode::calculateFixedItemPosition(MTTNodeRef item, FlexDirection axis) {
 // offset for example: if parent's Fraction offset is 0.3 and current child
 // offset is 0.4 then the child's absolute offset  is 0.7. if use roundf ,
 // roundf(0.7) == 1 so we need absLeft, absTop  parameter
-void MTTNode::convertLayoutResult(float absLeft, float absTop) {
+void MTTNode::convertLayoutResult(float absLeft, float absTop, float scaleFactor) {
   if (!hasNewLayout()) {
     return;
   }
@@ -1524,8 +1534,8 @@ void MTTNode::convertLayoutResult(float absLeft, float absTop) {
   absLeft += left;
   absTop += top;
   bool isTextNode = style.nodeType == NodeTypeText;
-  result.position[CSSLeft] = MTTRoundValueToPixelGrid(left, false, isTextNode);
-  result.position[CSSTop] = MTTRoundValueToPixelGrid(top, false, isTextNode);
+  result.position[CSSLeft] = MTTRoundValueToPixelGrid(left, scaleFactor, false, isTextNode);
+  result.position[CSSTop] = MTTRoundValueToPixelGrid(top, scaleFactor, false, isTextNode);
 
   const bool hasFractionalWidth =
       !FloatIsEqual(fmodf(width, 1.0), 0) && !FloatIsEqual(fmodf(width, 1.0), 1.0);
@@ -1534,16 +1544,16 @@ void MTTNode::convertLayoutResult(float absLeft, float absTop) {
 
   const float absRight = absLeft + width;
   const float absBottom = absTop + height;
-  result.dim[DimWidth] = MTTRoundValueToPixelGrid(absRight, (isTextNode && hasFractionalWidth),
+  result.dim[DimWidth] = MTTRoundValueToPixelGrid(absRight, scaleFactor, (isTextNode && hasFractionalWidth),
                                                  (isTextNode && !hasFractionalWidth)) -
-                         MTTRoundValueToPixelGrid(absLeft, false, isTextNode);
+                         MTTRoundValueToPixelGrid(absLeft, scaleFactor, false, isTextNode);
 
-  result.dim[DimHeight] = MTTRoundValueToPixelGrid(absBottom, (isTextNode && hasFractionalHeight),
+  result.dim[DimHeight] = MTTRoundValueToPixelGrid(absBottom, scaleFactor, (isTextNode && hasFractionalHeight),
                                                   (isTextNode && !hasFractionalHeight)) -
-                          MTTRoundValueToPixelGrid(absTop, false, isTextNode);
+                          MTTRoundValueToPixelGrid(absTop, scaleFactor, false, isTextNode);
   std::vector<MTTNodeRef>& items = children;
   for (size_t i = 0; i < items.size(); i++) {
     MTTNodeRef item = items[i];
-    item->convertLayoutResult(absLeft, absTop);
+    item->convertLayoutResult(absLeft, absTop, scaleFactor);
   }
 }

ios/sdk/layout/MTTNode.h

@@ -38,6 +38,7 @@ typedef void (*MTTDirtiedFunc)(MTTNodeRef node);
 class MTTNode {
  public:
   MTTNode();
+  MTTNode(float sf);
   virtual ~MTTNode();
   void initLayoutResult();
   bool reset();
@@ -102,6 +103,12 @@ class MTTNode {
   void setLayoutDirection(MTTDirection direction);
   MTTDirection getLayoutDirection();
   FlexAlign getNodeAlign(MTTNodeRef item);
+  void setScaleFactor(float sf) {
+    scaleFactor = sf;
+  };
+  float getScaleFactor() {
+    return scaleFactor;
+  }
 
  protected:
   MTTDirection resolveDirection(MTTDirection parentDirection);
@@ -135,7 +142,7 @@ class MTTNode {
   void layoutFixedItems(MTTSizeMode measureMode, void *layoutContext);
   void calculateFixedItemPosition(MTTNodeRef item, FlexDirection axis);
 
-  void convertLayoutResult(float absLeft, float absTop);
+  void convertLayoutResult(float absLeft, float absTop, float scaleFactor);
 
  public:
   MTTStyle style;
@@ -155,6 +162,7 @@ class MTTNode {
   MTTLayoutCache layoutCache;
   // layout result is in initial state or not
   bool inInitailState;
+  float scaleFactor;
 #ifdef LAYOUT_TIME_ANALYZE
   int fetchCount;
 #endif

ios/sdk/layout/MTTUtil.cpp

@@ -91,23 +91,27 @@ bool MTTSizeIsEqualInScale(MTTSize a, MTTSize b, float scale) {
          FloatIsEqualInScale(a.height, b.height, scale);
 }
 
-float MTTRoundValueToPixelGrid(float value, bool forceCeil, bool forceFloor) {
-  float fractial = fmodf(value, 1.0);
+float MTTRoundValueToPixelGrid(float value, float scaleFactor, bool forceCeil, bool forceFloor) {
+  float scaleValue = value * scaleFactor;
+  float fractial = fmodf(scaleValue, 1.0);
+  if (fractial < 0) {
+    ++fractial;
+  }
+
   if (FloatIsEqual(fractial, 0)) {
     // First we check if the value is already rounded
-    value = value - fractial;
+    scaleValue = scaleValue - fractial;
   } else if (FloatIsEqual(fractial, 1.0)) {
-    value = value - fractial + 1.0;
+    scaleValue = scaleValue - fractial + 1.0;
   } else if (forceCeil) {
     // Next we check if we need to use forced rounding
-    value = value - fractial + 1.0f;
+    scaleValue = scaleValue - fractial + 1.0f;
   } else if (forceFloor) {
-    value = value - fractial;
+    scaleValue = scaleValue - fractial;
   } else {
     // Finally we just round the value
-    value = roundf(value);
-    // value = value - fractial +
-    //   (fractial > 0.5f || FloatIsEqual(fractial, 0.5f) ? 1.0f : 0.0f);
+    scaleValue = scaleValue - fractial +
+      (fractial > 0.5f || FloatIsEqual(fractial, 0.5f) ? 1.0f : 0.0f);
   }
-  return value;
+  return scaleValue / scaleFactor;
 }

ios/sdk/layout/MTTUtil.h

@@ -58,4 +58,4 @@ bool FloatIsEqual(const float a, const float b);
 bool FloatIsEqualInScale(float a, float b, float scale);
 bool MTTSizeIsEqual(MTTSize a, MTTSize b);
 bool MTTSizeIsEqualInScale(MTTSize a, MTTSize b, float scale);
-float MTTRoundValueToPixelGrid(float value, bool forceCeil, bool forceFloor);
+float MTTRoundValueToPixelGrid(float value, float scaleValue, bool forceCeil, bool forceFloor);