sun-card-design 1.1.17 → 1.1.18

package/dist/mobile/sun-card-design-mobile.es2168.js

@@ -1,187 +1,73 @@
-var easingFuncs = {
-  linear: function(k) {
-    return k;
-  },
-  quadraticIn: function(k) {
-    return k * k;
-  },
-  quadraticOut: function(k) {
-    return k * (2 - k);
-  },
-  quadraticInOut: function(k) {
-    if ((k *= 2) < 1) {
-      return 0.5 * k * k;
-    }
-    return -0.5 * (--k * (k - 2) - 1);
-  },
-  cubicIn: function(k) {
-    return k * k * k;
-  },
-  cubicOut: function(k) {
-    return --k * k * k + 1;
-  },
-  cubicInOut: function(k) {
-    if ((k *= 2) < 1) {
-      return 0.5 * k * k * k;
-    }
-    return 0.5 * ((k -= 2) * k * k + 2);
-  },
-  quarticIn: function(k) {
-    return k * k * k * k;
-  },
-  quarticOut: function(k) {
-    return 1 - --k * k * k * k;
-  },
-  quarticInOut: function(k) {
-    if ((k *= 2) < 1) {
-      return 0.5 * k * k * k * k;
-    }
-    return -0.5 * ((k -= 2) * k * k * k - 2);
-  },
-  quinticIn: function(k) {
-    return k * k * k * k * k;
-  },
-  quinticOut: function(k) {
-    return --k * k * k * k * k + 1;
-  },
-  quinticInOut: function(k) {
-    if ((k *= 2) < 1) {
-      return 0.5 * k * k * k * k * k;
-    }
-    return 0.5 * ((k -= 2) * k * k * k * k + 2);
-  },
-  sinusoidalIn: function(k) {
-    return 1 - Math.cos(k * Math.PI / 2);
-  },
-  sinusoidalOut: function(k) {
-    return Math.sin(k * Math.PI / 2);
-  },
-  sinusoidalInOut: function(k) {
-    return 0.5 * (1 - Math.cos(Math.PI * k));
-  },
-  exponentialIn: function(k) {
-    return k === 0 ? 0 : Math.pow(1024, k - 1);
-  },
-  exponentialOut: function(k) {
-    return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
-  },
-  exponentialInOut: function(k) {
-    if (k === 0) {
-      return 0;
-    }
-    if (k === 1) {
-      return 1;
-    }
-    if ((k *= 2) < 1) {
-      return 0.5 * Math.pow(1024, k - 1);
-    }
-    return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
-  },
-  circularIn: function(k) {
-    return 1 - Math.sqrt(1 - k * k);
-  },
-  circularOut: function(k) {
-    return Math.sqrt(1 - --k * k);
-  },
-  circularInOut: function(k) {
-    if ((k *= 2) < 1) {
-      return -0.5 * (Math.sqrt(1 - k * k) - 1);
-    }
-    return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
-  },
-  elasticIn: function(k) {
-    var s;
-    var a = 0.1;
-    var p = 0.4;
-    if (k === 0) {
-      return 0;
-    }
-    if (k === 1) {
-      return 1;
-    }
-    if (!a || a < 1) {
-      a = 1;
-      s = p / 4;
-    } else {
-      s = p * Math.asin(1 / a) / (2 * Math.PI);
-    }
-    return -(a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
-  },
-  elasticOut: function(k) {
-    var s;
-    var a = 0.1;
-    var p = 0.4;
-    if (k === 0) {
-      return 0;
-    }
-    if (k === 1) {
-      return 1;
-    }
-    if (!a || a < 1) {
-      a = 1;
-      s = p / 4;
-    } else {
-      s = p * Math.asin(1 / a) / (2 * Math.PI);
-    }
-    return a * Math.pow(2, -10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1;
-  },
-  elasticInOut: function(k) {
-    var s;
-    var a = 0.1;
-    var p = 0.4;
-    if (k === 0) {
-      return 0;
-    }
-    if (k === 1) {
-      return 1;
-    }
-    if (!a || a < 1) {
-      a = 1;
-      s = p / 4;
-    } else {
-      s = p * Math.asin(1 / a) / (2 * Math.PI);
-    }
-    if ((k *= 2) < 1) {
-      return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
-    }
-    return a * Math.pow(2, -10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
-  },
-  backIn: function(k) {
-    var s = 1.70158;
-    return k * k * ((s + 1) * k - s);
-  },
-  backOut: function(k) {
-    var s = 1.70158;
-    return --k * k * ((s + 1) * k + s) + 1;
-  },
-  backInOut: function(k) {
-    var s = 1.70158 * 1.525;
-    if ((k *= 2) < 1) {
-      return 0.5 * (k * k * ((s + 1) * k - s));
-    }
-    return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
-  },
-  bounceIn: function(k) {
-    return 1 - easingFuncs.bounceOut(1 - k);
-  },
-  bounceOut: function(k) {
-    if (k < 1 / 2.75) {
-      return 7.5625 * k * k;
-    } else if (k < 2 / 2.75) {
-      return 7.5625 * (k -= 1.5 / 2.75) * k + 0.75;
-    } else if (k < 2.5 / 2.75) {
-      return 7.5625 * (k -= 2.25 / 2.75) * k + 0.9375;
-    } else {
-      return 7.5625 * (k -= 2.625 / 2.75) * k + 0.984375;
-    }
-  },
-  bounceInOut: function(k) {
-    if (k < 0.5) {
-      return easingFuncs.bounceIn(k * 2) * 0.5;
+import { DEFAULT_PATH_STYLE } from "./sun-card-design-mobile.es1750.js";
+import ZRImage from "./sun-card-design-mobile.es1749.js";
+import { getLineDash } from "./sun-card-design-mobile.es1983.js";
+import { map } from "./sun-card-design-mobile.es922.js";
+import { normalizeColor } from "./sun-card-design-mobile.es2021.js";
+var NONE = "none";
+var mathRound = Math.round;
+function pathHasFill(style) {
+  var fill = style.fill;
+  return fill != null && fill !== NONE;
+}
+function pathHasStroke(style) {
+  var stroke = style.stroke;
+  return stroke != null && stroke !== NONE;
+}
+var strokeProps = ["lineCap", "miterLimit", "lineJoin"];
+var svgStrokeProps = map(strokeProps, function(prop) {
+  return "stroke-" + prop.toLowerCase();
+});
+function mapStyleToAttrs(updateAttr, style, el, forceUpdate) {
+  var opacity = style.opacity == null ? 1 : style.opacity;
+  if (el instanceof ZRImage) {
+    updateAttr("opacity", opacity);
+    return;
+  }
+  if (pathHasFill(style)) {
+    var fill = normalizeColor(style.fill);
+    updateAttr("fill", fill.color);
+    var fillOpacity = style.fillOpacity != null ? style.fillOpacity * fill.opacity * opacity : fill.opacity * opacity;
+    if (fillOpacity < 1) {
+      updateAttr("fill-opacity", fillOpacity);
+    }
+  } else {
+    updateAttr("fill", NONE);
+  }
+  if (pathHasStroke(style)) {
+    var stroke = normalizeColor(style.stroke);
+    updateAttr("stroke", stroke.color);
+    var strokeScale = style.strokeNoScale ? el.getLineScale() : 1;
+    var strokeWidth = strokeScale ? (style.lineWidth || 0) / strokeScale : 0;
+    var strokeOpacity = style.strokeOpacity != null ? style.strokeOpacity * stroke.opacity * opacity : stroke.opacity * opacity;
+    var strokeFirst = style.strokeFirst;
+    if (strokeWidth !== 1) {
+      updateAttr("stroke-width", strokeWidth);
+    }
+    if (strokeFirst) {
+      updateAttr("paint-order", strokeFirst ? "stroke" : "fill");
+    }
+    if (strokeOpacity < 1) {
+      updateAttr("stroke-opacity", strokeOpacity);
+    }
+    if (style.lineDash) {
+      var _a = getLineDash(el), lineDash = _a[0], lineDashOffset = _a[1];
+      if (lineDash) {
+        lineDashOffset = mathRound(lineDashOffset || 0);
+        updateAttr("stroke-dasharray", lineDash.join(","));
+        if (lineDashOffset || forceUpdate) {
+          updateAttr("stroke-dashoffset", lineDashOffset);
+        }
+      }
+    }
+    for (var i = 0; i < strokeProps.length; i++) {
+      var propName = strokeProps[i];
+      if (style[propName] !== DEFAULT_PATH_STYLE[propName]) {
+        var val = style[propName] || DEFAULT_PATH_STYLE[propName];
+        val && updateAttr(svgStrokeProps[i], val);
+      }
     }
-    return easingFuncs.bounceOut(k * 2 - 1) * 0.5 + 0.5;
   }
-};
+}
 export {
-  easingFuncs as default
+  mapStyleToAttrs as default
 };

package/dist/mobile/sun-card-design-mobile.es2169.js

@@ -1,23 +1,275 @@
-import { cubicRootAt, cubicAt } from "./sun-card-design-mobile.es2164.js";
-import { trim } from "./sun-card-design-mobile.es922.js";
-var regexp = /cubic-bezier\(([0-9,\.e ]+)\)/;
-function createCubicEasingFunc(cubicEasingStr) {
-  var cubic = cubicEasingStr && regexp.exec(cubicEasingStr);
-  if (cubic) {
-    var points = cubic[1].split(",");
-    var a_1 = +trim(points[0]);
-    var b_1 = +trim(points[1]);
-    var c_1 = +trim(points[2]);
-    var d_1 = +trim(points[3]);
-    if (isNaN(a_1 + b_1 + c_1 + d_1)) {
+import { copyTransform } from "./sun-card-design-mobile.es1985.js";
+import { createBrushScope } from "./sun-card-design-mobile.es2020.js";
+import SVGPathRebuilder from "./sun-card-design-mobile.es2167.js";
+import PathProxy from "./sun-card-design-mobile.es1979.js";
+import { getSRTTransformString, getPathPrecision } from "./sun-card-design-mobile.es2021.js";
+import { each, keys, isString, extend, filter, isNumber } from "./sun-card-design-mobile.es922.js";
+import CompoundPath from "./sun-card-design-mobile.es2002.js";
+import { createCubicEasingFunc } from "./sun-card-design-mobile.es2174.js";
+import { getClassId } from "./sun-card-design-mobile.es2201.js";
+var EASING_MAP = {
+  cubicIn: "0.32,0,0.67,0",
+  cubicOut: "0.33,1,0.68,1",
+  cubicInOut: "0.65,0,0.35,1",
+  quadraticIn: "0.11,0,0.5,0",
+  quadraticOut: "0.5,1,0.89,1",
+  quadraticInOut: "0.45,0,0.55,1",
+  quarticIn: "0.5,0,0.75,0",
+  quarticOut: "0.25,1,0.5,1",
+  quarticInOut: "0.76,0,0.24,1",
+  quinticIn: "0.64,0,0.78,0",
+  quinticOut: "0.22,1,0.36,1",
+  quinticInOut: "0.83,0,0.17,1",
+  sinusoidalIn: "0.12,0,0.39,0",
+  sinusoidalOut: "0.61,1,0.88,1",
+  sinusoidalInOut: "0.37,0,0.63,1",
+  exponentialIn: "0.7,0,0.84,0",
+  exponentialOut: "0.16,1,0.3,1",
+  exponentialInOut: "0.87,0,0.13,1",
+  circularIn: "0.55,0,1,0.45",
+  circularOut: "0,0.55,0.45,1",
+  circularInOut: "0.85,0,0.15,1"
+};
+var transformOriginKey = "transform-origin";
+function buildPathString(el, kfShape, path) {
+  var shape = extend({}, el.shape);
+  extend(shape, kfShape);
+  el.buildPath(path, shape);
+  var svgPathBuilder = new SVGPathRebuilder();
+  svgPathBuilder.reset(getPathPrecision(el));
+  path.rebuildPath(svgPathBuilder, 1);
+  svgPathBuilder.generateStr();
+  return svgPathBuilder.getStr();
+}
+function setTransformOrigin(target, transform) {
+  var originX = transform.originX, originY = transform.originY;
+  if (originX || originY) {
+    target[transformOriginKey] = originX + "px " + originY + "px";
+  }
+}
+var ANIMATE_STYLE_MAP = {
+  fill: "fill",
+  opacity: "opacity",
+  lineWidth: "stroke-width",
+  lineDashOffset: "stroke-dashoffset"
+};
+function addAnimation(cssAnim, scope) {
+  var animationName = scope.zrId + "-ani-" + scope.cssAnimIdx++;
+  scope.cssAnims[animationName] = cssAnim;
+  return animationName;
+}
+function createCompoundPathCSSAnimation(el, attrs, scope) {
+  var paths = el.shape.paths;
+  var composedAnim = {};
+  var cssAnimationCfg;
+  var cssAnimationName;
+  each(paths, function(path) {
+    var subScope = createBrushScope(scope.zrId);
+    subScope.animation = true;
+    createCSSAnimation(path, {}, subScope, true);
+    var cssAnims = subScope.cssAnims;
+    var cssNodes = subScope.cssNodes;
+    var animNames = keys(cssAnims);
+    var len = animNames.length;
+    if (!len) {
       return;
     }
-    var roots_1 = [];
-    return function(p) {
-      return p <= 0 ? 0 : p >= 1 ? 1 : cubicRootAt(0, a_1, c_1, 1, p, roots_1) && cubicAt(0, b_1, d_1, 1, roots_1[0]);
+    cssAnimationName = animNames[len - 1];
+    var lastAnim = cssAnims[cssAnimationName];
+    for (var percent in lastAnim) {
+      var kf = lastAnim[percent];
+      composedAnim[percent] = composedAnim[percent] || { d: "" };
+      composedAnim[percent].d += kf.d || "";
+    }
+    for (var className in cssNodes) {
+      var val = cssNodes[className].animation;
+      if (val.indexOf(cssAnimationName) >= 0) {
+        cssAnimationCfg = val;
+      }
+    }
+  });
+  if (!cssAnimationCfg) {
+    return;
+  }
+  attrs.d = false;
+  var animationName = addAnimation(composedAnim, scope);
+  return cssAnimationCfg.replace(cssAnimationName, animationName);
+}
+function getEasingFunc(easing) {
+  return isString(easing) ? EASING_MAP[easing] ? "cubic-bezier(" + EASING_MAP[easing] + ")" : createCubicEasingFunc(easing) ? easing : "" : "";
+}
+function createCSSAnimation(el, attrs, scope, onlyShape) {
+  var animators = el.animators;
+  var len = animators.length;
+  var cssAnimations = [];
+  if (el instanceof CompoundPath) {
+    var animationCfg = createCompoundPathCSSAnimation(el, attrs, scope);
+    if (animationCfg) {
+      cssAnimations.push(animationCfg);
+    } else if (!len) {
+      return;
+    }
+  } else if (!len) {
+    return;
+  }
+  var groupAnimators = {};
+  for (var i = 0; i < len; i++) {
+    var animator = animators[i];
+    var cfgArr = [animator.getMaxTime() / 1e3 + "s"];
+    var easing = getEasingFunc(animator.getClip().easing);
+    var delay = animator.getDelay();
+    if (easing) {
+      cfgArr.push(easing);
+    } else {
+      cfgArr.push("linear");
+    }
+    if (delay) {
+      cfgArr.push(delay / 1e3 + "s");
+    }
+    if (animator.getLoop()) {
+      cfgArr.push("infinite");
+    }
+    var cfg = cfgArr.join(" ");
+    groupAnimators[cfg] = groupAnimators[cfg] || [cfg, []];
+    groupAnimators[cfg][1].push(animator);
+  }
+  function createSingleCSSAnimation(groupAnimator) {
+    var animators2 = groupAnimator[1];
+    var len2 = animators2.length;
+    var transformKfs = {};
+    var shapeKfs = {};
+    var finalKfs = {};
+    var animationTimingFunctionAttrName = "animation-timing-function";
+    function saveAnimatorTrackToCssKfs(animator3, cssKfs, toCssAttrName) {
+      var tracks = animator3.getTracks();
+      var maxTime = animator3.getMaxTime();
+      for (var k = 0; k < tracks.length; k++) {
+        var track = tracks[k];
+        if (track.needsAnimate()) {
+          var kfs = track.keyframes;
+          var attrName = track.propName;
+          toCssAttrName && (attrName = toCssAttrName(attrName));
+          if (attrName) {
+            for (var i3 = 0; i3 < kfs.length; i3++) {
+              var kf = kfs[i3];
+              var percent2 = Math.round(kf.time / maxTime * 100) + "%";
+              var kfEasing = getEasingFunc(kf.easing);
+              var rawValue = kf.rawValue;
+              if (isString(rawValue) || isNumber(rawValue)) {
+                cssKfs[percent2] = cssKfs[percent2] || {};
+                cssKfs[percent2][attrName] = kf.rawValue;
+                if (kfEasing) {
+                  cssKfs[percent2][animationTimingFunctionAttrName] = kfEasing;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    for (var i2 = 0; i2 < len2; i2++) {
+      var animator2 = animators2[i2];
+      var targetProp = animator2.targetName;
+      if (!targetProp) {
+        !onlyShape && saveAnimatorTrackToCssKfs(animator2, transformKfs);
+      } else if (targetProp === "shape") {
+        saveAnimatorTrackToCssKfs(animator2, shapeKfs);
+      }
+    }
+    for (var percent in transformKfs) {
+      var transform = {};
+      copyTransform(transform, el);
+      extend(transform, transformKfs[percent]);
+      var str = getSRTTransformString(transform);
+      var timingFunction = transformKfs[percent][animationTimingFunctionAttrName];
+      finalKfs[percent] = str ? {
+        transform: str
+      } : {};
+      setTransformOrigin(finalKfs[percent], transform);
+      if (timingFunction) {
+        finalKfs[percent][animationTimingFunctionAttrName] = timingFunction;
+      }
+    }
+    var path;
+    var canAnimateShape = true;
+    for (var percent in shapeKfs) {
+      finalKfs[percent] = finalKfs[percent] || {};
+      var isFirst = !path;
+      var timingFunction = shapeKfs[percent][animationTimingFunctionAttrName];
+      if (isFirst) {
+        path = new PathProxy();
+      }
+      var len_1 = path.len();
+      path.reset();
+      finalKfs[percent].d = buildPathString(el, shapeKfs[percent], path);
+      var newLen = path.len();
+      if (!isFirst && len_1 !== newLen) {
+        canAnimateShape = false;
+        break;
+      }
+      if (timingFunction) {
+        finalKfs[percent][animationTimingFunctionAttrName] = timingFunction;
+      }
+    }
+    if (!canAnimateShape) {
+      for (var percent in finalKfs) {
+        delete finalKfs[percent].d;
+      }
+    }
+    if (!onlyShape) {
+      for (var i2 = 0; i2 < len2; i2++) {
+        var animator2 = animators2[i2];
+        var targetProp = animator2.targetName;
+        if (targetProp === "style") {
+          saveAnimatorTrackToCssKfs(animator2, finalKfs, function(propName) {
+            return ANIMATE_STYLE_MAP[propName];
+          });
+        }
+      }
+    }
+    var percents = keys(finalKfs);
+    var allTransformOriginSame = true;
+    var transformOrigin;
+    for (var i2 = 1; i2 < percents.length; i2++) {
+      var p0 = percents[i2 - 1];
+      var p1 = percents[i2];
+      if (finalKfs[p0][transformOriginKey] !== finalKfs[p1][transformOriginKey]) {
+        allTransformOriginSame = false;
+        break;
+      }
+      transformOrigin = finalKfs[p0][transformOriginKey];
+    }
+    if (allTransformOriginSame && transformOrigin) {
+      for (var percent in finalKfs) {
+        if (finalKfs[percent][transformOriginKey]) {
+          delete finalKfs[percent][transformOriginKey];
+        }
+      }
+      attrs[transformOriginKey] = transformOrigin;
+    }
+    if (filter(percents, function(percent2) {
+      return keys(finalKfs[percent2]).length > 0;
+    }).length) {
+      var animationName = addAnimation(finalKfs, scope);
+      return animationName + " " + groupAnimator[0] + " both";
+    }
+  }
+  for (var key in groupAnimators) {
+    var animationCfg = createSingleCSSAnimation(groupAnimators[key]);
+    if (animationCfg) {
+      cssAnimations.push(animationCfg);
+    }
+  }
+  if (cssAnimations.length) {
+    var className = scope.zrId + "-cls-" + getClassId();
+    scope.cssNodes["." + className] = {
+      animation: cssAnimations.join(",")
     };
+    attrs["class"] = className;
   }
 }
 export {
-  createCubicEasingFunc
+  ANIMATE_STYLE_MAP,
+  EASING_MAP,
+  createCSSAnimation
 };