feat/test: boxShadow/lineGroup #84 #86

src/animate/Animation.js

@@ -202,6 +202,12 @@ function equalStyle(k, a, b, target) {
     || LENGTH_HASH.hasOwnProperty(k) || EXPAND_HASH.hasOwnProperty(k)) {
     return a.value === b.value && a.unit === b.unit;
   }
+  else if(k === 'boxShadow') {
+    if(a === null) {
+      return a === b;
+    }
+    return equalArr(a, b);
+  }
   else if(RADIUS_HASH.hasOwnProperty(k)) {
     return a[0].value === b[0].value && a[0].unit === b[0].unit
       && a[1].value === b[1].value && a[1].unit === b[1].unit;
@@ -451,6 +457,25 @@ function calDiff(prev, next, k, target) {
       res.v = v;
     }
   }
+  else if(k === 'boxShadow') {
+    res.v = [];
+    for(let i = 0, len = Math.min(p.length, n.length); i < len; i++) {
+      let a = p[i];
+      let b = n[i];
+      let v = [];
+      // x/y/blur/spread
+      for(let j = 0; j < 4; j++) {
+        v.push(b[j] - a[j]);
+      }
+      // rgba
+      let c = [];
+      for(let j = 0; j < 4; j++) {
+        c.push(b[4][j] - a[4][j]);
+      }
+      v.push(c);
+      res.v.push(v);
+    }
+  }
   else if(EXPAND_HASH.hasOwnProperty(k)) {
     if(p.unit === n.unit) {
       let v = n.value - p.value;
@@ -934,6 +959,18 @@ function calIntermediateStyle(frame, percent, target) {
         st[1].value += v[1] * percent;
       }
     }
+    else if(k === 'boxShadow') {
+      for(let i = 0, len = Math.min(st.length, v.length); i < len; i++) {
+        // x/y/blur/spread
+        for(let j = 0; j < 4; j++) {
+          st[i][j] += v[i][j] * percent;
+        }
+        // rgba
+        for(let j = 0; j < 4; j++) {
+          st[i][4][j] += v[i][4][j] * percent;
+        }
+      }
+    }
     else if(GRADIENT_HASH.hasOwnProperty(k)) {
       if(GRADIENT_TYPE.hasOwnProperty(st.k)) {
         for(let i = 0, len = Math.min(st.v.length, v.length); i < len; i++) {

src/node/Dom.js

@@ -244,7 +244,7 @@ class Dom extends Xom {
                 lineGroup.verticalAlign();
               }
               x = data.x;
-              y += lineGroup.height;
+              y += lineGroup.height + lineGroup.marginBottom;
               item.__layout({
                 x: data.x,
                 y,
@@ -269,7 +269,7 @@ class Dom extends Xom {
           if(lineGroup.size) {
             lineGroups.push(lineGroup);
             lineGroup.verticalAlign();
-            y += lineGroup.height;
+            y += lineGroup.height + lineGroup.marginBottom;
             lineGroup = new LineGroup(data.x, y);
             if(isVirtual) {
               maxW = Math.max(maxW, cw);
@@ -324,7 +324,7 @@ class Dom extends Xom {
             lineGroups.push(lineGroup);
             lineGroup.verticalAlign();
             x = data.x;
-            y += lineGroup.height;
+            y += lineGroup.height + lineGroup.marginBottom;
             item.__layout({
               x: data.x,
               y,
@@ -355,7 +355,7 @@ class Dom extends Xom {
       else {
         maxW = Math.max(maxW, cw);
       }
-      y += lineGroup.height;
+      y += lineGroup.height + lineGroup.marginBottom;
     }
     this.__width = fixedWidth || !isVirtual ? w : maxW;
     this.__height = fixedHeight ? h : y - data.y;

src/node/LineGroup.js

@@ -72,6 +72,22 @@ class LineGroup {
   get size() {
     return this.__list.length;
   }
+
+  get marginTop() {
+    let n = 0;
+    this.list.forEach(item => {
+      n = Math.max(n, item.computedStyle.marginTop);
+    });
+    return n;
+  }
+
+  get marginBottom() {
+    let n = 0;
+    this.list.forEach(item => {
+      n = Math.max(n, item.computedStyle.marginBottom);
+    });
+    return n;
+  }
 }
 
 export default LineGroup;

src/node/Xom.js

@@ -1081,22 +1081,7 @@ class Xom extends Node {
     }
     if(__cacheStyle.boxShadow === undefined) {
       __cacheStyle.boxShadow = true;
-      computedStyle.boxShadow = [];
-      (currentStyle.boxShadow || []).forEach(item => {
-        let temp = [];
-        for(let i = 0; i < 4; i++) {
-          let o = item[i];
-          if(!o) {
-            temp.push(0);
-          }
-          else {
-            temp.push(o.value);
-          }
-        }
-        temp.push(item[4].value);
-        temp.push(item[5]);
-        computedStyle.boxShadow.push(temp);
-      });
+      computedStyle.boxShadow = currentStyle.boxShadow;
     }
     // 这些直接赋值的不需要再算缓存
     [

src/style/css.js

@@ -878,18 +878,15 @@ function normalize(style, reset = []) {
         let res = [boxShadow[1], boxShadow[2], boxShadow[3] || 0, boxShadow[4] || 0, boxShadow[5] || '#000', boxShadow[6] || 'outset'];
         for(let i = 0; i < 4; i++) {
           calUnit(res, i, res[i]);
-          // x/y可以负，blur和spread不行
+          // x/y可以负，blur和spread不行，没有继承且只有px无需保存单位
           if(i > 1 && res[i].value < 0) {
-            res[i].value = 0;
+            res[i] = 0;
           }
           if(res[i].unit === NUMBER) {
-            res[i].unit = PX;
+            res[i] = res[i].value;
           }
         }
-        res[4] = {
-          value: rgba2int(res[4]),
-          unit: RGBA,
-        };
+        res[4] = rgba2int(res[4]);
         style.boxShadow.push(res);
       }
     });

src/util/diff.js

@@ -40,12 +40,12 @@ function diffDef(elem, od, nd) {
       elem.setAttribute('id', nd.uuid);
     }
     let op = {};
-    for(let i = 0, len = od.props.length; i < len; i++) {
+    for(let i = 0, len = (od.props || []).length; i < len; i++) {
       let prop = od.props[i];
       let [k, v] = prop;
       op[k] = v;
     }
-    for(let i = 0, len = nd.props.length; i < len; i++) {
+    for(let i = 0, len = (nd.props || []).length; i < len; i++) {
       let prop = nd.props[i];
       let [k, v] = prop;
       // 已有不等更新，没有添加
@@ -331,12 +331,12 @@ function diffItemSelf(elem, ovd, nvd) {
     return;
   }
   let op = {};
-  for(let i = 0, len = ovd.props.length; i < len; i++) {
+  for(let i = 0, len = (ovd.props || []).length; i < len; i++) {
     let prop = ovd.props[i];
     let [k, v] = prop;
     op[k] = v;
   }
-  for(let i = 0, len = nvd.props.length; i < len; i++) {
+  for(let i = 0, len = (nvd.props || []).length; i < len; i++) {
     let prop = nvd.props[i];
     let [k, v] = prop;
     // 已有不等更新，没有添加

test/animate-box-shadow-svg/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>

test/animate-box-shadow-svg/script.jsx

@@ -0,0 +1,22 @@
+let o = karas.render(
+  <svg width="360" height="360">
+    <span ref="t">123</span>
+  </svg>,
+  '#test'
+);
+let t = o.ref.t;
+let animation = t.animate([
+  {
+    boxShadow: '0 0 0 0 #F00',
+  },
+  {
+    boxShadow: '1 1 1 1 #00F',
+  }
+], {
+  duration: 200,
+  fill: 'forwards',
+});
+animation.on(karas.Event.FINISH, () => {
+  let input = document.querySelector('input');
+  input.value = JSON.stringify(o.virtualDom);
+});