sun-card-design 1.1.16 → 1.1.18

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

@@ -1,229 +1,316 @@
 import { __extends } from "./sun-card-design-mobile.es1717.js";
-import { each, curry, isString, bind, isFunction } from "./sun-card-design-mobile.es922.js";
-import { getBoundingRect } from "./sun-card-design-mobile.es2114.js";
-import { createIcon, setTooltipConfig } from "./sun-card-design-mobile.es1756.js";
-import { enterEmphasis, leaveEmphasis } from "./sun-card-design-mobile.es1728.js";
-import Model from "./sun-card-design-mobile.es1757.js";
-import DataDiffer from "./sun-card-design-mobile.es1955.js";
-import { layout, makeBackground } from "./sun-card-design-mobile.es2115.js";
+import { createHashMap, each, assert, indexOf, extend, hasOwn, retrieve2, isFunction, keys } from "./sun-card-design-mobile.es922.js";
+import Displayable from "./sun-card-design-mobile.es1774.js";
+import { convertOptionIdName, makeInner } from "./sun-card-design-mobile.es1729.js";
+import { setTooltipConfig, getShapeClass } from "./sun-card-design-mobile.es1757.js";
+import { positionElement, LOCATION_PARAMS } from "./sun-card-design-mobile.es1759.js";
+import { parsePercent } from "./sun-card-design-mobile.es1976.js";
 import ComponentView from "./sun-card-design-mobile.es918.js";
-import { getFeature, ToolboxFeature } from "./sun-card-design-mobile.es1897.js";
-import { getUID } from "./sun-card-design-mobile.es1753.js";
-import ZRText from "./sun-card-design-mobile.es1917.js";
-import { getFont } from "./sun-card-design-mobile.es1915.js";
-var ToolboxView = (
+import { getECData } from "./sun-card-design-mobile.es1727.js";
+import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from "./sun-card-design-mobile.es2089.js";
+import { applyUpdateTransition, updateLeaveTo, isTransitionAll, applyLeaveTransition } from "./sun-card-design-mobile.es2090.js";
+import { updateProps } from "./sun-card-design-mobile.es1751.js";
+import { stopPreviousKeyframeAnimationAndRestore, applyKeyframeAnimation } from "./sun-card-design-mobile.es2091.js";
+import ZRText from "./sun-card-design-mobile.es1920.js";
+import ZRImage from "./sun-card-design-mobile.es1749.js";
+import Group from "./sun-card-design-mobile.es1753.js";
+var nonShapeGraphicElements = {
+  // Reserved but not supported in graphic component.
+  path: null,
+  compoundPath: null,
+  // Supported in graphic component.
+  group: Group,
+  image: ZRImage,
+  text: ZRText
+};
+var inner = makeInner();
+var GraphicComponentView = (
   /** @class */
   (function(_super) {
-    __extends(ToolboxView2, _super);
-    function ToolboxView2() {
-      return _super !== null && _super.apply(this, arguments) || this;
+    __extends(GraphicComponentView2, _super);
+    function GraphicComponentView2() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+      _this.type = GraphicComponentView2.type;
+      return _this;
     }
-    ToolboxView2.prototype.render = function(toolboxModel, ecModel, api, payload) {
-      var group = this.group;
-      group.removeAll();
-      if (!toolboxModel.get("show")) {
+    GraphicComponentView2.prototype.init = function() {
+      this._elMap = createHashMap();
+    };
+    GraphicComponentView2.prototype.render = function(graphicModel, ecModel, api) {
+      if (graphicModel !== this._lastGraphicModel) {
+        this._clear();
+      }
+      this._lastGraphicModel = graphicModel;
+      this._updateElements(graphicModel);
+      this._relocate(graphicModel, api);
+    };
+    GraphicComponentView2.prototype._updateElements = function(graphicModel) {
+      var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
+      if (!elOptionsToUpdate) {
         return;
       }
-      var itemSize = +toolboxModel.get("itemSize");
-      var isVertical = toolboxModel.get("orient") === "vertical";
-      var featureOpts = toolboxModel.get("feature") || {};
-      var features = this._features || (this._features = {});
-      var featureNames = [];
-      each(featureOpts, function(opt, name) {
-        featureNames.push(name);
-      });
-      new DataDiffer(this._featureNames || [], featureNames).add(processFeature).update(processFeature).remove(curry(processFeature, null)).execute();
-      this._featureNames = featureNames;
-      function processFeature(newIndex, oldIndex) {
-        var featureName = featureNames[newIndex];
-        var oldName = featureNames[oldIndex];
-        var featureOpt = featureOpts[featureName];
-        var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
-        var feature;
-        if (payload && payload.newTitle != null && payload.featureName === featureName) {
-          featureOpt.title = payload.newTitle;
+      var elMap = this._elMap;
+      var rootGroup = this.group;
+      var globalZ = graphicModel.get("z");
+      var globalZLevel = graphicModel.get("zlevel");
+      each(elOptionsToUpdate, function(elOption) {
+        var id = convertOptionIdName(elOption.id, null);
+        var elExisting = id != null ? elMap.get(id) : null;
+        var parentId = convertOptionIdName(elOption.parentId, null);
+        var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
+        var elType = elOption.type;
+        var elOptionStyle = elOption.style;
+        if (elType === "text" && elOptionStyle) {
+          if (elOption.hv && elOption.hv[1]) {
+            elOptionStyle.textVerticalAlign = elOptionStyle.textBaseline = elOptionStyle.verticalAlign = elOptionStyle.align = null;
+          }
         }
-        if (featureName && !oldName) {
-          if (isUserFeatureName(featureName)) {
-            feature = {
-              onclick: featureModel.option.onclick,
-              featureName
-            };
-          } else {
-            var Feature = getFeature(featureName);
-            if (!Feature) {
-              return;
-            }
-            feature = new Feature();
+        var textContentOption = elOption.textContent;
+        var textConfig = elOption.textConfig;
+        if (elOptionStyle && isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption)) {
+          var convertResult = convertFromEC4CompatibleStyle(elOptionStyle, elType, true);
+          if (!textConfig && convertResult.textConfig) {
+            textConfig = elOption.textConfig = convertResult.textConfig;
           }
-          features[featureName] = feature;
-        } else {
-          feature = features[oldName];
-          if (!feature) {
-            return;
+          if (!textContentOption && convertResult.textContent) {
+            textContentOption = convertResult.textContent;
           }
         }
-        feature.uid = getUID("toolbox-feature");
-        feature.model = featureModel;
-        feature.ecModel = ecModel;
-        feature.api = api;
-        var isToolboxFeature = feature instanceof ToolboxFeature;
-        if (!featureName && oldName) {
-          isToolboxFeature && feature.dispose && feature.dispose(ecModel, api);
-          return;
-        }
-        if (!featureModel.get("show") || isToolboxFeature && feature.unusable) {
-          isToolboxFeature && feature.remove && feature.remove(ecModel, api);
-          return;
+        var elOptionCleaned = getCleanedElOption(elOption);
+        if (process.env.NODE_ENV !== "production") {
+          elExisting && assert(targetElParent === elExisting.parent, "Changing parent is not supported.");
         }
-        createIconPaths(featureModel, feature, featureName);
-        featureModel.setIconStatus = function(iconName, status) {
-          var option = this.option;
-          var iconPaths = this.iconPaths;
-          option.iconStatus = option.iconStatus || {};
-          option.iconStatus[iconName] = status;
-          if (iconPaths[iconName]) {
-            (status === "emphasis" ? enterEmphasis : leaveEmphasis)(iconPaths[iconName]);
+        var $action = elOption.$action || "merge";
+        var isMerge = $action === "merge";
+        var isReplace = $action === "replace";
+        if (isMerge) {
+          var isInit = !elExisting;
+          var el_1 = elExisting;
+          if (isInit) {
+            el_1 = createEl(id, targetElParent, elOption.type, elMap);
+          } else {
+            el_1 && (inner(el_1).isNew = false);
+            stopPreviousKeyframeAnimationAndRestore(el_1);
           }
-        };
-        if (feature instanceof ToolboxFeature) {
-          if (feature.render) {
-            feature.render(featureModel, ecModel, api, payload);
+          if (el_1) {
+            applyUpdateTransition(el_1, elOptionCleaned, graphicModel, {
+              isInit
+            });
+            updateCommonAttrs(el_1, elOption, globalZ, globalZLevel);
           }
+        } else if (isReplace) {
+          removeEl(elExisting, elOption, elMap, graphicModel);
+          var el_2 = createEl(id, targetElParent, elOption.type, elMap);
+          if (el_2) {
+            applyUpdateTransition(el_2, elOptionCleaned, graphicModel, {
+              isInit: true
+            });
+            updateCommonAttrs(el_2, elOption, globalZ, globalZLevel);
+          }
+        } else if ($action === "remove") {
+          updateLeaveTo(elExisting, elOption);
+          removeEl(elExisting, elOption, elMap, graphicModel);
         }
-      }
-      function createIconPaths(featureModel, feature, featureName) {
-        var iconStyleModel = featureModel.getModel("iconStyle");
-        var iconStyleEmphasisModel = featureModel.getModel(["emphasis", "iconStyle"]);
-        var icons = feature instanceof ToolboxFeature && feature.getIcons ? feature.getIcons() : featureModel.get("icon");
-        var titles = featureModel.get("title") || {};
-        var iconsMap;
-        var titlesMap;
-        if (isString(icons)) {
-          iconsMap = {};
-          iconsMap[featureName] = icons;
-        } else {
-          iconsMap = icons;
-        }
-        if (isString(titles)) {
-          titlesMap = {};
-          titlesMap[featureName] = titles;
-        } else {
-          titlesMap = titles;
+        var el = elMap.get(id);
+        if (el && textContentOption) {
+          if (isMerge) {
+            var textContentExisting = el.getTextContent();
+            textContentExisting ? textContentExisting.attr(textContentOption) : el.setTextContent(new ZRText(textContentOption));
+          } else if (isReplace) {
+            el.setTextContent(new ZRText(textContentOption));
+          }
         }
-        var iconPaths = featureModel.iconPaths = {};
-        each(iconsMap, function(iconStr, iconName) {
-          var path = createIcon(iconStr, {}, {
-            x: -itemSize / 2,
-            y: -itemSize / 2,
-            width: itemSize,
-            height: itemSize
-          });
-          path.setStyle(iconStyleModel.getItemStyle());
-          var pathEmphasisState = path.ensureState("emphasis");
-          pathEmphasisState.style = iconStyleEmphasisModel.getItemStyle();
-          var textContent = new ZRText({
-            style: {
-              text: titlesMap[iconName],
-              align: iconStyleEmphasisModel.get("textAlign"),
-              borderRadius: iconStyleEmphasisModel.get("textBorderRadius"),
-              padding: iconStyleEmphasisModel.get("textPadding"),
-              fill: null,
-              font: getFont({
-                fontStyle: iconStyleEmphasisModel.get("textFontStyle"),
-                fontFamily: iconStyleEmphasisModel.get("textFontFamily"),
-                fontSize: iconStyleEmphasisModel.get("textFontSize"),
-                fontWeight: iconStyleEmphasisModel.get("textFontWeight")
-              }, ecModel)
-            },
-            ignore: true
-          });
-          path.setTextContent(textContent);
-          setTooltipConfig({
-            el: path,
-            componentModel: toolboxModel,
-            itemName: iconName,
-            formatterParamsExtra: {
-              title: titlesMap[iconName]
+        if (el) {
+          var clipPathOption = elOption.clipPath;
+          if (clipPathOption) {
+            var clipPathType = clipPathOption.type;
+            var clipPath = void 0;
+            var isInit = false;
+            if (isMerge) {
+              var oldClipPath = el.getClipPath();
+              isInit = !oldClipPath || inner(oldClipPath).type !== clipPathType;
+              clipPath = isInit ? newEl(clipPathType) : oldClipPath;
+            } else if (isReplace) {
+              isInit = true;
+              clipPath = newEl(clipPathType);
             }
-          });
-          path.__title = titlesMap[iconName];
-          path.on("mouseover", function() {
-            var hoverStyle = iconStyleEmphasisModel.getItemStyle();
-            var defaultTextPosition = isVertical ? toolboxModel.get("right") == null && toolboxModel.get("left") !== "right" ? "right" : "left" : toolboxModel.get("bottom") == null && toolboxModel.get("top") !== "bottom" ? "bottom" : "top";
-            textContent.setStyle({
-              fill: iconStyleEmphasisModel.get("textFill") || hoverStyle.fill || hoverStyle.stroke || "#000",
-              backgroundColor: iconStyleEmphasisModel.get("textBackgroundColor")
-            });
-            path.setTextConfig({
-              position: iconStyleEmphasisModel.get("textPosition") || defaultTextPosition
+            el.setClipPath(clipPath);
+            applyUpdateTransition(clipPath, clipPathOption, graphicModel, {
+              isInit
             });
-            textContent.ignore = !toolboxModel.get("showTitle");
-            api.enterEmphasis(this);
-          }).on("mouseout", function() {
-            if (featureModel.get(["iconStatus", iconName]) !== "emphasis") {
-              api.leaveEmphasis(this);
-            }
-            textContent.hide();
-          });
-          (featureModel.get(["iconStatus", iconName]) === "emphasis" ? enterEmphasis : leaveEmphasis)(path);
-          group.add(path);
-          path.on("click", bind(feature.onclick, feature, ecModel, api, iconName));
-          iconPaths[iconName] = path;
-        });
-      }
-      layout(group, toolboxModel, api);
-      group.add(makeBackground(group.getBoundingRect(), toolboxModel));
-      isVertical || group.eachChild(function(icon) {
-        var titleText = icon.__title;
-        var emphasisState = icon.ensureState("emphasis");
-        var emphasisTextConfig = emphasisState.textConfig || (emphasisState.textConfig = {});
-        var textContent = icon.getTextContent();
-        var emphasisTextState = textContent && textContent.ensureState("emphasis");
-        if (emphasisTextState && !isFunction(emphasisTextState) && titleText) {
-          var emphasisTextStyle = emphasisTextState.style || (emphasisTextState.style = {});
-          var rect = getBoundingRect(titleText, ZRText.makeFont(emphasisTextStyle));
-          var offsetX = icon.x + group.x;
-          var offsetY = icon.y + group.y + itemSize;
-          var needPutOnTop = false;
-          if (offsetY + rect.height > api.getHeight()) {
-            emphasisTextConfig.position = "top";
-            needPutOnTop = true;
-          }
-          var topOffset = needPutOnTop ? -5 - rect.height : itemSize + 10;
-          if (offsetX + rect.width / 2 > api.getWidth()) {
-            emphasisTextConfig.position = ["100%", topOffset];
-            emphasisTextStyle.align = "right";
-          } else if (offsetX - rect.width / 2 < 0) {
-            emphasisTextConfig.position = [0, topOffset];
-            emphasisTextStyle.align = "left";
+            applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
           }
+          var elInner = inner(el);
+          el.setTextConfig(textConfig);
+          elInner.option = elOption;
+          setEventData(el, graphicModel, elOption);
+          setTooltipConfig({
+            el,
+            componentModel: graphicModel,
+            itemName: el.name,
+            itemTooltipOption: elOption.tooltip
+          });
+          applyKeyframeAnimation(el, elOption.keyframeAnimation, graphicModel);
         }
       });
     };
-    ToolboxView2.prototype.updateView = function(toolboxModel, ecModel, api, payload) {
-      each(this._features, function(feature) {
-        feature instanceof ToolboxFeature && feature.updateView && feature.updateView(feature.model, ecModel, api, payload);
-      });
+    GraphicComponentView2.prototype._relocate = function(graphicModel, api) {
+      var elOptions = graphicModel.option.elements;
+      var rootGroup = this.group;
+      var elMap = this._elMap;
+      var apiWidth = api.getWidth();
+      var apiHeight = api.getHeight();
+      var xy = ["x", "y"];
+      for (var i = 0; i < elOptions.length; i++) {
+        var elOption = elOptions[i];
+        var id = convertOptionIdName(elOption.id, null);
+        var el = id != null ? elMap.get(id) : null;
+        if (!el || !el.isGroup) {
+          continue;
+        }
+        var parentEl = el.parent;
+        var isParentRoot = parentEl === rootGroup;
+        var elInner = inner(el);
+        var parentElInner = inner(parentEl);
+        elInner.width = parsePercent(elInner.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
+        elInner.height = parsePercent(elInner.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
+      }
+      for (var i = elOptions.length - 1; i >= 0; i--) {
+        var elOption = elOptions[i];
+        var id = convertOptionIdName(elOption.id, null);
+        var el = id != null ? elMap.get(id) : null;
+        if (!el) {
+          continue;
+        }
+        var parentEl = el.parent;
+        var parentElInner = inner(parentEl);
+        var containerInfo = parentEl === rootGroup ? {
+          width: apiWidth,
+          height: apiHeight
+        } : {
+          width: parentElInner.width,
+          height: parentElInner.height
+        };
+        var layoutPos = {};
+        var layouted = positionElement(el, elOption, containerInfo, null, {
+          hv: elOption.hv,
+          boundingMode: elOption.bounding
+        }, layoutPos);
+        if (!inner(el).isNew && layouted) {
+          var transition = elOption.transition;
+          var animatePos = {};
+          for (var k = 0; k < xy.length; k++) {
+            var key = xy[k];
+            var val = layoutPos[key];
+            if (transition && (isTransitionAll(transition) || indexOf(transition, key) >= 0)) {
+              animatePos[key] = val;
+            } else {
+              el[key] = val;
+            }
+          }
+          updateProps(el, animatePos, graphicModel, 0);
+        } else {
+          el.attr(layoutPos);
+        }
+      }
     };
-    ToolboxView2.prototype.remove = function(ecModel, api) {
-      each(this._features, function(feature) {
-        feature instanceof ToolboxFeature && feature.remove && feature.remove(ecModel, api);
+    GraphicComponentView2.prototype._clear = function() {
+      var _this = this;
+      var elMap = this._elMap;
+      elMap.each(function(el) {
+        removeEl(el, inner(el).option, elMap, _this._lastGraphicModel);
       });
-      this.group.removeAll();
+      this._elMap = createHashMap();
     };
-    ToolboxView2.prototype.dispose = function(ecModel, api) {
-      each(this._features, function(feature) {
-        feature instanceof ToolboxFeature && feature.dispose && feature.dispose(ecModel, api);
-      });
+    GraphicComponentView2.prototype.dispose = function() {
+      this._clear();
     };
-    ToolboxView2.type = "toolbox";
-    return ToolboxView2;
+    GraphicComponentView2.type = "graphic";
+    return GraphicComponentView2;
   })(ComponentView)
 );
-function isUserFeatureName(featureName) {
-  return featureName.indexOf("my") === 0;
+function newEl(graphicType) {
+  if (process.env.NODE_ENV !== "production") {
+    assert(graphicType, "graphic type MUST be set");
+  }
+  var Clz = hasOwn(nonShapeGraphicElements, graphicType) ? nonShapeGraphicElements[graphicType] : getShapeClass(graphicType);
+  if (process.env.NODE_ENV !== "production") {
+    assert(Clz, "graphic type " + graphicType + " can not be found");
+  }
+  var el = new Clz({});
+  inner(el).type = graphicType;
+  return el;
+}
+function createEl(id, targetElParent, graphicType, elMap) {
+  var el = newEl(graphicType);
+  targetElParent.add(el);
+  elMap.set(id, el);
+  inner(el).id = id;
+  inner(el).isNew = true;
+  return el;
+}
+function removeEl(elExisting, elOption, elMap, graphicModel) {
+  var existElParent = elExisting && elExisting.parent;
+  if (existElParent) {
+    elExisting.type === "group" && elExisting.traverse(function(el) {
+      removeEl(el, elOption, elMap, graphicModel);
+    });
+    applyLeaveTransition(elExisting, elOption, graphicModel);
+    elMap.removeKey(inner(elExisting).id);
+  }
+}
+function updateCommonAttrs(el, elOption, defaultZ, defaultZlevel) {
+  if (!el.isGroup) {
+    each([
+      ["cursor", Displayable.prototype.cursor],
+      // We should not support configure z and zlevel in the element level.
+      // But seems we didn't limit it previously. So here still use it to avoid breaking.
+      ["zlevel", defaultZlevel || 0],
+      ["z", defaultZ || 0],
+      // z2 must not be null/undefined, otherwise sort error may occur.
+      ["z2", 0]
+    ], function(item) {
+      var prop = item[0];
+      if (hasOwn(elOption, prop)) {
+        el[prop] = retrieve2(elOption[prop], item[1]);
+      } else if (el[prop] == null) {
+        el[prop] = item[1];
+      }
+    });
+  }
+  each(keys(elOption), function(key) {
+    if (key.indexOf("on") === 0) {
+      var val = elOption[key];
+      el[key] = isFunction(val) ? val : null;
+    }
+  });
+  if (hasOwn(elOption, "draggable")) {
+    el.draggable = elOption.draggable;
+  }
+  elOption.name != null && (el.name = elOption.name);
+  elOption.id != null && (el.id = elOption.id);
+}
+function getCleanedElOption(elOption) {
+  elOption = extend({}, elOption);
+  each(["id", "parentId", "$action", "hv", "bounding", "textContent", "clipPath"].concat(LOCATION_PARAMS), function(name) {
+    delete elOption[name];
+  });
+  return elOption;
+}
+function setEventData(el, graphicModel, elOption) {
+  var eventData = getECData(el).eventData;
+  if (!el.silent && !el.ignore && !eventData) {
+    eventData = getECData(el).eventData = {
+      componentType: "graphic",
+      componentIndex: graphicModel.componentIndex,
+      name: el.name
+    };
+  }
+  if (eventData) {
+    eventData.info = elOption.info;
+  }
 }
 export {
-  ToolboxView as default
+  GraphicComponentView,
+  inner
 };

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

@@ -1,20 +1,11 @@
-var ToolboxFeature = (
-  /** @class */
-  /* @__PURE__ */ (function() {
-    function ToolboxFeature2() {
-    }
-    return ToolboxFeature2;
-  })()
-);
-var features = {};
-function registerFeature(name, ctor) {
-  features[name] = ctor;
-}
-function getFeature(name) {
-  return features[name];
+import SelectDataZoomModel from "./sun-card-design-mobile.es2117.js";
+import SelectDataZoomView from "./sun-card-design-mobile.es2118.js";
+import installCommon from "./sun-card-design-mobile.es1944.js";
+function install(registers) {
+  registers.registerComponentModel(SelectDataZoomModel);
+  registers.registerComponentView(SelectDataZoomView);
+  installCommon(registers);
 }
 export {
-  ToolboxFeature,
-  getFeature,
-  registerFeature
+  install
 };