feat: reflow的情况 #262

karasjs · Feb 13, 2023 · 9bf0a3e · 9bf0a3e
1 parent bfb57d0
commit 9bf0a3e
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 7 deletions.
diff --git a/index.js b/index.js
@@ -619,11 +619,21 @@
       key: "__offsetX",
       value: function __offsetX(diff) {
         this.__x += diff;
+        var wn = this.__wasmNode;
+
+        if (wn) {
+          wn.offset_x(diff);
+        }
       }
     }, {
       key: "__offsetY",
       value: function __offsetY(diff) {
         this.__y += diff;
+        var wn = this.__wasmNode;
+
+        if (wn) {
+          wn.offset_y(diff);
+        }
       }
     }, {
       key: "__destroy",
@@ -16479,6 +16489,42 @@
       value: function update_style(k, v, u) {
         wasm.node_update_style(this.ptr, k, v, u);
       }
+      /**
+       * @param {number} v
+       */
+
+    }, {
+      key: "offset_x",
+      value: function offset_x(v) {
+        wasm.node_offset_x(this.ptr, v);
+      }
+      /**
+       * @param {number} v
+       */
+
+    }, {
+      key: "offset_y",
+      value: function offset_y(v) {
+        wasm.node_offset_y(this.ptr, v);
+      }
+      /**
+       * @param {number} v
+       */
+
+    }, {
+      key: "resize_x",
+      value: function resize_x(v) {
+        wasm.node_resize_x(this.ptr, v);
+      }
+      /**
+       * @param {number} v
+       */
+
+    }, {
+      key: "resize_y",
+      value: function resize_y(v) {
+        wasm.node_resize_y(this.ptr, v);
+      }
     }], [{
       key: "__wrap",
       value: function __wrap(ptr) {
@@ -21438,19 +21484,18 @@
 
         this.__calStyle(REFLOW$3, currentStyle, computedStyle, cacheStyle);
 
-        this.__calPerspective(currentStyle, computedStyle, cacheStyle); // 每次reflow重新传matrix到wasm
+        this.__calPerspective(currentStyle, computedStyle, cacheStyle); // 每次reflow传数据到wasm
 
 
         this.__wasmStyle(currentStyle);
-      } // 传递matrix相关样式到wasm中计算
+      } // 传递transform/opacity相关样式到wasm中计算
 
     }, {
       key: "__wasmStyle",
       value: function __wasmStyle(currentStyle) {
         var wn = this.__wasmNode;
 
         if (wn) {
-          currentStyle = currentStyle || this.__currentStyle;
           wn.set_style(this.__x1, this.__y1, this.__offsetWidth, this.__offsetHeight, currentStyle[TRANSLATE_X].v, currentStyle[TRANSLATE_Y].v, currentStyle[TRANSLATE_Z].v, currentStyle[ROTATE_X].v, currentStyle[ROTATE_Y].v, currentStyle[ROTATE_Z].v, currentStyle[ROTATE_3D][0], currentStyle[ROTATE_3D][1], currentStyle[ROTATE_3D][2], currentStyle[ROTATE_3D][3].v, currentStyle[SCALE_X].v, currentStyle[SCALE_Y].v, currentStyle[SCALE_Z].v, currentStyle[SKEW_X].v, currentStyle[SKEW_Y].v, currentStyle[OPACITY$3], currentStyle[TRANSFORM_ORIGIN$2][0].v, currentStyle[TRANSFORM_ORIGIN$2][1].v, currentStyle[TRANSLATE_X].u, currentStyle[TRANSLATE_Y].u, currentStyle[TRANSLATE_Z].u, currentStyle[TRANSFORM_ORIGIN$2][0].u, currentStyle[TRANSFORM_ORIGIN$2][1].u);
         }
       }
@@ -23973,6 +24018,12 @@
           }
         }
 
+        var wn = this.__wasmNode;
+
+        if (wn) {
+          wn.resize_x(diff);
+        }
+
         this.clearCache();
       }
     }, {
@@ -24005,6 +24056,12 @@
           }
         }
 
+        var wn = this.__wasmNode;
+
+        if (wn) {
+          wn.resize_y(diff);
+        }
+
         this.clearCache();
       }
     }, {

diff --git a/index.js.map b/index.js.map
diff --git a/karas_bg.wasm b/karas_bg.wasm
diff --git a/src/node/Node.js b/src/node/Node.js
@@ -37,10 +37,18 @@ class Node {
 
   __offsetX(diff) {
     this.__x += diff;
+    let wn = this.__wasmNode;
+    if(wn) {
+      wn.offset_x(diff);
+    }
   }
 
   __offsetY(diff) {
     this.__y += diff;
+    let wn = this.__wasmNode;
+    if(wn) {
+      wn.offset_y(diff);
+    }
   }
 
   __destroy() {

diff --git a/src/node/Xom.js b/src/node/Xom.js
@@ -780,15 +780,14 @@ class Xom extends Node {
     let cacheStyle = this.__cacheStyle;
     this.__calStyle(REFLOW, currentStyle, computedStyle, cacheStyle);
     this.__calPerspective(currentStyle, computedStyle, cacheStyle);
-    // 每次reflow重新传matrix到wasm
+    // 每次reflow传数据到wasm
     this.__wasmStyle(currentStyle);
   }
 
-  // 传递matrix相关样式到wasm中计算
+  // 传递transform/opacity相关样式到wasm中计算
   __wasmStyle(currentStyle) {
     let wn = this.__wasmNode;
     if(wn) {
-      currentStyle = currentStyle || this.__currentStyle;
       wn.set_style(this.__x1, this.__y1, this.__offsetWidth, this.__offsetHeight,
         currentStyle[TRANSLATE_X].v, currentStyle[TRANSLATE_Y].v, currentStyle[TRANSLATE_Z].v,
         currentStyle[ROTATE_X].v, currentStyle[ROTATE_Y].v, currentStyle[ROTATE_Z].v,
@@ -3073,6 +3072,10 @@ class Xom extends Node {
         this.__layoutStyle(lv);
       }
     }
+    let wn = this.__wasmNode;
+    if(wn) {
+      wn.resize_x(diff);
+    }
     this.clearCache();
   }
 
@@ -3098,6 +3101,10 @@ class Xom extends Node {
         this.__layoutStyle(lv);
       }
     }
+    let wn = this.__wasmNode;
+    if(wn) {
+      wn.resize_y(diff);
+    }
     this.clearCache();
   }
 

diff --git a/src/wasm/index.js b/src/wasm/index.js
@@ -753,6 +753,30 @@ export class Node {
   update_style(k, v, u) {
     wasm.node_update_style(this.ptr, k, v, u);
   }
+  /**
+   * @param {number} v
+   */
+  offset_x(v) {
+    wasm.node_offset_x(this.ptr, v);
+  }
+  /**
+   * @param {number} v
+   */
+  offset_y(v) {
+    wasm.node_offset_y(this.ptr, v);
+  }
+  /**
+   * @param {number} v
+   */
+  resize_x(v) {
+    wasm.node_resize_x(this.ptr, v);
+  }
+  /**
+   * @param {number} v
+   */
+  resize_y(v) {
+    wasm.node_resize_y(this.ptr, v);
+  }
 }
 /**
  */

diff --git a/test/group1/wasm-reflow/index.html b/test/group1/wasm-reflow/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
+  <title>test</title>
+</head>
+<body>
+<div id="test"></div>
+<input id="base64" type="text" value=""/>
+<script src="../../../index.js"></script>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/test/group1/wasm-reflow/script.jsx b/test/group1/wasm-reflow/script.jsx
@@ -0,0 +1,21 @@
+karas.wasm.init('../../../karas_bg.wasm', function() {
+  let o = karas.render(
+    <webgl width="360" height="360">
+      <div style={{
+        width: 50,
+        height: 50,
+        background: '#F00',
+        translateX: '100%',
+        translateY: '100%',
+      }}/>
+    </webgl>,
+    '#test'
+  );
+  o.children[0].updateStyle({
+    width: 100,
+    height: 100,
+  }, function() {
+    let input = document.querySelector('#base64');
+    input.value = document.querySelector('canvas').toDataURL();
+  });
+});
diff --git a/test/group1/wasm-reflow/test.js b/test/group1/wasm-reflow/test.js
@@ -0,0 +1,13 @@
+let path = require('path');
+let fs = require('fs');
+
+module.exports = {
+  'init': function(browser) {
+    browser
+      .url('file://' + path.join(__dirname, 'index.html'))
+      .waitForElementVisible('body', 1000)
+      .pause(20)
+      .assert.value('input', '')
+      .end();
+  }
+};