fix: 计算flex自动宽度、cp强制更新 #87

karasjs · Sep 24, 2020 · 08d2b0c · 08d2b0c
1 parent e5a95b8
commit 08d2b0c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/index.js b/index.js
@@ -13149,11 +13149,11 @@
             paddingLeft = currentStyle.paddingLeft,
             paddingTop = currentStyle.paddingTop,
             paddingRight = currentStyle.paddingRight,
-            paddingBottom = currentStyle.paddingBottom;
-        var borderTopWidth = computedStyle.borderTopWidth,
-            borderRightWidth = computedStyle.borderRightWidth,
-            borderBottomWidth = computedStyle.borderBottomWidth,
-            borderLeftWidth = computedStyle.borderLeftWidth;
+            paddingBottom = currentStyle.paddingBottom,
+            borderTopWidth = currentStyle.borderTopWidth,
+            borderRightWidth = currentStyle.borderRightWidth,
+            borderBottomWidth = currentStyle.borderBottomWidth,
+            borderLeftWidth = currentStyle.borderLeftWidth;
         var main = isDirectionRow ? width : height;
 
         if (main.unit === PX$5) {
@@ -13196,14 +13196,14 @@
         if (isDirectionRow) {
           var mp = this.__calMp(marginLeft, w) + this.__calMp(marginRight, w) + this.__calMp(paddingLeft, w) + this.__calMp(paddingRight, w);
 
-          var w2 = borderRightWidth + borderLeftWidth + mp;
+          var w2 = borderLeftWidth.value + borderRightWidth.value + mp;
           b += w2;
           max += w2;
           min += w2;
         } else {
           var _mp = this.__calMp(marginTop, w) + this.__calMp(marginBottom, w) + this.__calMp(paddingTop, w) + this.__calMp(paddingBottom, w);
 
-          var h2 = borderTopWidth + borderBottomWidth + _mp;
+          var h2 = borderTopWidth.value + borderBottomWidth.value + _mp;
           b += h2;
           max += h2;
           min += h2;
@@ -16312,7 +16312,8 @@
         }
 
         var task = this.task,
-            __reflowList = this.__reflowList; // 第一个添加延迟侦听，后续放队列等待一并执行
+            renderMode = this.renderMode,
+            ctx = this.ctx; // 第一个添加延迟侦听，后续放队列等待一并执行
 
         if (!task.length) {
           var clone;
@@ -16342,12 +16343,19 @@
 
                 if (len) {
                   updater.updateList.forEach(function (cp) {
-                    if (cp.shadowRoot) {
-                      __reflowList.push({
-                        node: cp.shadowRoot,
-                        lv: LAYOUT
-                      });
+                    var sr = cp.shadowRoot;
+
+                    if (sr instanceof Text) {
+                      sr.__computeMeasure(renderMode, ctx);
+                    } else {
+                      sr.__computeMeasure(renderMode, ctx, true);
                     }
+
+                    _this4.__addUpdate({
+                      node: sr,
+                      style: sr.currentStyle,
+                      focus: true
+                    });
                   });
 
                   _this4.refresh();

diff --git a/index.js.map b/index.js.map
diff --git a/src/node/Dom.js b/src/node/Dom.js
@@ -102,13 +102,11 @@ class Dom extends Xom {
       paddingTop,
       paddingRight,
       paddingBottom,
-    } = currentStyle;
-    let {
       borderTopWidth,
       borderRightWidth,
       borderBottomWidth,
       borderLeftWidth,
-    } = computedStyle;
+    } = currentStyle;
     let main = isDirectionRow ? width : height;
     if(main.unit === PX) {
       b = max = main.value;
@@ -148,7 +146,7 @@ class Dom extends Xom {
         + this.__calMp(marginRight, w)
         + this.__calMp(paddingLeft, w)
         + this.__calMp(paddingRight, w);
-      let w2 = borderRightWidth + borderLeftWidth + mp;
+      let w2 = borderLeftWidth.value + borderRightWidth.value + mp;
       b += w2;
       max += w2;
       min += w2;
@@ -158,7 +156,7 @@ class Dom extends Xom {
         + this.__calMp(marginBottom, w)
         + this.__calMp(paddingTop, w)
         + this.__calMp(paddingBottom, w);
-      let h2 = borderTopWidth + borderBottomWidth + mp;
+      let h2 = borderTopWidth.value + borderBottomWidth.value + mp;
       b += h2;
       max += h2;
       min += h2;

diff --git a/src/node/Root.js b/src/node/Root.js
@@ -1,4 +1,5 @@
 import Dom from './Dom';
+import Text from './Text';
 import Defs from './Defs';
 import mode from './mode';
 import builder from '../util/builder';
@@ -309,7 +310,7 @@ class Root extends Dom {
     if(!cb) {
       return;
     }
-    let { task, __reflowList } = this;
+    let { task, renderMode, ctx } = this;
     // 第一个添加延迟侦听，后续放队列等待一并执行
     if(!task.length) {
       let clone;
@@ -336,12 +337,18 @@ class Root extends Dom {
             let len = updater.updateList.length;
             if(len) {
               updater.updateList.forEach(cp => {
-                if(cp.shadowRoot) {
-                  __reflowList.push({
-                    node: cp.shadowRoot,
-                    lv: LAYOUT,
-                  });
+                let sr = cp.shadowRoot;
+                if(sr instanceof Text) {
+                  sr.__computeMeasure(renderMode, ctx);
                 }
+                else {
+                  sr.__computeMeasure(renderMode, ctx, true);
+                }
+                this.__addUpdate({
+                  node: sr,
+                  style: sr.currentStyle,
+                  focus: true,
+                });
               });
               this.refresh();
             }