office-viewer 0.3.11 → 0.3.13

package/esm/node_modules/echarts/lib/component/geo/install.js

@@ -0,0 +1,101 @@
+import GeoModel from '../../coord/geo/GeoModel.js';
+import geoCreator from '../../coord/geo/geoCreator.js';
+import { each } from '../../../../zrender/lib/core/util.js';
+import { updateCenterAndZoom } from '../../action/roamHelper.js';
+import GeoView from './GeoView.js';
+import geoSourceManager from '../../coord/geo/geoSourceManager.js';
+
+function registerMap(mapName, geoJson, specialAreas) {
+  geoSourceManager.registerMap(mapName, geoJson, specialAreas);
+}
+function install(registers) {
+  registers.registerCoordinateSystem('geo', geoCreator);
+  registers.registerComponentModel(GeoModel);
+  registers.registerComponentView(GeoView);
+  registers.registerImpl('registerMap', registerMap);
+  registers.registerImpl('getMap', function (mapName) {
+    return geoSourceManager.getMapForUser(mapName);
+  });
+  function makeAction(method, actionInfo) {
+    actionInfo.update = 'geo:updateSelectStatus';
+    registers.registerAction(actionInfo, function (payload, ecModel) {
+      var selected = {};
+      var allSelected = [];
+      ecModel.eachComponent({
+        mainType: 'geo',
+        query: payload
+      }, function (geoModel) {
+        geoModel[method](payload.name);
+        var geo = geoModel.coordinateSystem;
+        each(geo.regions, function (region) {
+          selected[region.name] = geoModel.isSelected(region.name) || false;
+        });
+        // Notice: there might be duplicated name in different regions.
+        var names = [];
+        each(selected, function (v, name) {
+          selected[name] && names.push(name);
+        });
+        allSelected.push({
+          geoIndex: geoModel.componentIndex,
+          // Use singular, the same naming convention as the event `selectchanged`.
+          name: names
+        });
+      });
+      return {
+        selected: selected,
+        allSelected: allSelected,
+        name: payload.name
+      };
+    });
+  }
+  makeAction('toggleSelected', {
+    type: 'geoToggleSelect',
+    event: 'geoselectchanged'
+  });
+  makeAction('select', {
+    type: 'geoSelect',
+    event: 'geoselected'
+  });
+  makeAction('unSelect', {
+    type: 'geoUnSelect',
+    event: 'geounselected'
+  });
+  /**
+   * @payload
+   * @property {string} [componentType=series]
+   * @property {number} [dx]
+   * @property {number} [dy]
+   * @property {number} [zoom]
+   * @property {number} [originX]
+   * @property {number} [originY]
+   */
+  registers.registerAction({
+    type: 'geoRoam',
+    event: 'geoRoam',
+    update: 'updateTransform'
+  }, function (payload, ecModel, api) {
+    var componentType = payload.componentType || 'series';
+    ecModel.eachComponent({
+      mainType: componentType,
+      query: payload
+    }, function (componentModel) {
+      var geo = componentModel.coordinateSystem;
+      if (geo.type !== 'geo') {
+        return;
+      }
+      var res = updateCenterAndZoom(geo, payload, componentModel.get('scaleLimit'), api);
+      componentModel.setCenter && componentModel.setCenter(res.center);
+      componentModel.setZoom && componentModel.setZoom(res.zoom);
+      // All map series with same `map` use the same geo coordinate system
+      // So the center and zoom must be in sync. Include the series not selected by legend
+      if (componentType === 'series') {
+        each(componentModel.seriesGroup, function (seriesModel) {
+          seriesModel.setCenter(res.center);
+          seriesModel.setZoom(res.zoom);
+        });
+      }
+    });
+  });
+}
+
+export { install };

package/esm/node_modules/echarts/lib/component/graphic/GraphicModel.js

@@ -0,0 +1,203 @@
+import { __extends } from 'tslib';
+import { each, assert, isObject, filter, extend, merge } from '../../../../zrender/lib/core/util.js';
+import { mappingToExists } from '../../util/model.js';
+import ComponentModel from '../../model/Component.js';
+import { mergeLayoutParam, copyLayoutParams } from '../../util/layout.js';
+
+function setKeyInfoToNewElOption(resultItem, newElOption) {
+  var existElOption = resultItem.existing;
+  // Set id and type after id assigned.
+  newElOption.id = resultItem.keyInfo.id;
+  !newElOption.type && existElOption && (newElOption.type = existElOption.type);
+  // Set parent id if not specified
+  if (newElOption.parentId == null) {
+    var newElParentOption = newElOption.parentOption;
+    if (newElParentOption) {
+      newElOption.parentId = newElParentOption.id;
+    } else if (existElOption) {
+      newElOption.parentId = existElOption.parentId;
+    }
+  }
+  // Clear
+  newElOption.parentOption = null;
+}
+function isSetLoc(obj, props) {
+  var isSet;
+  each(props, function (prop) {
+    obj[prop] != null && obj[prop] !== 'auto' && (isSet = true);
+  });
+  return isSet;
+}
+function mergeNewElOptionToExist(existList, index, newElOption) {
+  // Update existing options, for `getOption` feature.
+  var newElOptCopy = extend({}, newElOption);
+  var existElOption = existList[index];
+  var $action = newElOption.$action || 'merge';
+  if ($action === 'merge') {
+    if (existElOption) {
+      if (process.env.NODE_ENV !== 'production') {
+        var newType = newElOption.type;
+        assert(!newType || existElOption.type === newType, 'Please set $action: "replace" to change `type`');
+      }
+      // We can ensure that newElOptCopy and existElOption are not
+      // the same object, so `merge` will not change newElOptCopy.
+      merge(existElOption, newElOptCopy, true);
+      // Rigid body, use ignoreSize.
+      mergeLayoutParam(existElOption, newElOptCopy, {
+        ignoreSize: true
+      });
+      // Will be used in render.
+      copyLayoutParams(newElOption, existElOption);
+      // Copy transition info to new option so it can be used in the transition.
+      // DO IT AFTER merge
+      copyTransitionInfo(newElOption, existElOption);
+      copyTransitionInfo(newElOption, existElOption, 'shape');
+      copyTransitionInfo(newElOption, existElOption, 'style');
+      copyTransitionInfo(newElOption, existElOption, 'extra');
+      // Copy clipPath
+      newElOption.clipPath = existElOption.clipPath;
+    } else {
+      existList[index] = newElOptCopy;
+    }
+  } else if ($action === 'replace') {
+    existList[index] = newElOptCopy;
+  } else if ($action === 'remove') {
+    // null will be cleaned later.
+    existElOption && (existList[index] = null);
+  }
+}
+var TRANSITION_PROPS_TO_COPY = ['transition', 'enterFrom', 'leaveTo'];
+var ROOT_TRANSITION_PROPS_TO_COPY = TRANSITION_PROPS_TO_COPY.concat(['enterAnimation', 'updateAnimation', 'leaveAnimation']);
+function copyTransitionInfo(target, source, targetProp) {
+  if (targetProp) {
+    if (!target[targetProp] && source[targetProp]) {
+      // TODO avoid creating this empty object when there is no transition configuration.
+      target[targetProp] = {};
+    }
+    target = target[targetProp];
+    source = source[targetProp];
+  }
+  if (!target || !source) {
+    return;
+  }
+  var props = targetProp ? TRANSITION_PROPS_TO_COPY : ROOT_TRANSITION_PROPS_TO_COPY;
+  for (var i = 0; i < props.length; i++) {
+    var prop = props[i];
+    if (target[prop] == null && source[prop] != null) {
+      target[prop] = source[prop];
+    }
+  }
+}
+function setLayoutInfoToExist(existItem, newElOption) {
+  if (!existItem) {
+    return;
+  }
+  existItem.hv = newElOption.hv = [
+  // Rigid body, don't care about `width`.
+  isSetLoc(newElOption, ['left', 'right']),
+  // Rigid body, don't care about `height`.
+  isSetLoc(newElOption, ['top', 'bottom'])];
+  // Give default group size. Otherwise layout error may occur.
+  if (existItem.type === 'group') {
+    var existingGroupOpt = existItem;
+    var newGroupOpt = newElOption;
+    existingGroupOpt.width == null && (existingGroupOpt.width = newGroupOpt.width = 0);
+    existingGroupOpt.height == null && (existingGroupOpt.height = newGroupOpt.height = 0);
+  }
+}
+var GraphicComponentModel = /** @class */function (_super) {
+  __extends(GraphicComponentModel, _super);
+  function GraphicComponentModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = GraphicComponentModel.type;
+    _this.preventAutoZ = true;
+    return _this;
+  }
+  GraphicComponentModel.prototype.mergeOption = function (option, ecModel) {
+    // Prevent default merge to elements
+    var elements = this.option.elements;
+    this.option.elements = null;
+    _super.prototype.mergeOption.call(this, option, ecModel);
+    this.option.elements = elements;
+  };
+  GraphicComponentModel.prototype.optionUpdated = function (newOption, isInit) {
+    var thisOption = this.option;
+    var newList = (isInit ? thisOption : newOption).elements;
+    var existList = thisOption.elements = isInit ? [] : thisOption.elements;
+    var flattenedList = [];
+    this._flatten(newList, flattenedList, null);
+    var mappingResult = mappingToExists(existList, flattenedList, 'normalMerge');
+    // Clear elOptionsToUpdate
+    var elOptionsToUpdate = this._elOptionsToUpdate = [];
+    each(mappingResult, function (resultItem, index) {
+      var newElOption = resultItem.newOption;
+      if (process.env.NODE_ENV !== 'production') {
+        assert(isObject(newElOption) || resultItem.existing, 'Empty graphic option definition');
+      }
+      if (!newElOption) {
+        return;
+      }
+      elOptionsToUpdate.push(newElOption);
+      setKeyInfoToNewElOption(resultItem, newElOption);
+      mergeNewElOptionToExist(existList, index, newElOption);
+      setLayoutInfoToExist(existList[index], newElOption);
+    }, this);
+    // Clean
+    thisOption.elements = filter(existList, function (item) {
+      // $action should be volatile, otherwise option gotten from
+      // `getOption` will contain unexpected $action.
+      item && delete item.$action;
+      return item != null;
+    });
+  };
+  /**
+   * Convert
+   * [{
+   *  type: 'group',
+   *  id: 'xx',
+   *  children: [{type: 'circle'}, {type: 'polygon'}]
+   * }]
+   * to
+   * [
+   *  {type: 'group', id: 'xx'},
+   *  {type: 'circle', parentId: 'xx'},
+   *  {type: 'polygon', parentId: 'xx'}
+   * ]
+   */
+  GraphicComponentModel.prototype._flatten = function (optionList, result, parentOption) {
+    each(optionList, function (option) {
+      if (!option) {
+        return;
+      }
+      if (parentOption) {
+        option.parentOption = parentOption;
+      }
+      result.push(option);
+      var children = option.children;
+      // here we don't judge if option.type is `group`
+      // when new option doesn't provide `type`, it will cause that the children can't be updated.
+      if (children && children.length) {
+        this._flatten(children, result, option);
+      }
+      // Deleting for JSON output, and for not affecting group creation.
+      delete option.children;
+    }, this);
+  };
+  // FIXME
+  // Pass to view using payload? setOption has a payload?
+  GraphicComponentModel.prototype.useElOptionsToUpdate = function () {
+    var els = this._elOptionsToUpdate;
+    // Clear to avoid render duplicately when zooming.
+    this._elOptionsToUpdate = null;
+    return els;
+  };
+  GraphicComponentModel.type = 'graphic';
+  GraphicComponentModel.defaultOption = {
+    elements: []
+    // parentId: null
+  };
+
+  return GraphicComponentModel;
+}(ComponentModel);
+
+export { GraphicComponentModel, setKeyInfoToNewElOption };

package/esm/node_modules/echarts/lib/component/graphic/GraphicView.js

@@ -0,0 +1,353 @@
+import { __extends } from 'tslib';
+import { createHashMap, each, assert, indexOf, hasOwn, retrieve2, isFunction, keys, extend } from '../../../../zrender/lib/core/util.js';
+import Displayable from '../../../../zrender/lib/graphic/Displayable.js';
+import { convertOptionIdName, makeInner } from '../../util/model.js';
+import { setTooltipConfig, getShapeClass } from '../../util/graphic.js';
+import { positionElement, LOCATION_PARAMS } from '../../util/layout.js';
+import { parsePercent } from '../../util/number.js';
+import ComponentView from '../../view/Component.js';
+import { getECData } from '../../util/innerStore.js';
+import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat.js';
+import { applyUpdateTransition, updateLeaveTo, isTransitionAll, applyLeaveTransition } from '../../animation/customGraphicTransition.js';
+import { updateProps } from '../../animation/basicTransition.js';
+import { stopPreviousKeyframeAnimationAndRestore, applyKeyframeAnimation } from '../../animation/customGraphicKeyframeAnimation.js';
+import ZRText from '../../../../zrender/lib/graphic/Text.js';
+import Group from '../../../../zrender/lib/graphic/Group.js';
+import ZRImage from '../../../../zrender/lib/graphic/Image.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();
+// ------------------------
+// View
+// ------------------------
+var GraphicComponentView = /** @class */function (_super) {
+  __extends(GraphicComponentView, _super);
+  function GraphicComponentView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = GraphicComponentView.type;
+    return _this;
+  }
+  GraphicComponentView.prototype.init = function () {
+    this._elMap = createHashMap();
+  };
+  GraphicComponentView.prototype.render = function (graphicModel, ecModel, api) {
+    // Having leveraged between use cases and algorithm complexity, a very
+    // simple layout mechanism is used:
+    // The size(width/height) can be determined by itself or its parent (not
+    // implemented yet), but can not by its children. (Top-down travel)
+    // The location(x/y) can be determined by the bounding rect of itself
+    // (can including its descendants or not) and the size of its parent.
+    // (Bottom-up travel)
+    // When `chart.clear()` or `chart.setOption({...}, true)` with the same id,
+    // view will be reused.
+    if (graphicModel !== this._lastGraphicModel) {
+      this._clear();
+    }
+    this._lastGraphicModel = graphicModel;
+    this._updateElements(graphicModel);
+    this._relocate(graphicModel, api);
+  };
+  /**
+   * Update graphic elements.
+   */
+  GraphicComponentView.prototype._updateElements = function (graphicModel) {
+    var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
+    if (!elOptionsToUpdate) {
+      return;
+    }
+    var elMap = this._elMap;
+    var rootGroup = this.group;
+    var globalZ = graphicModel.get('z');
+    var globalZLevel = graphicModel.get('zlevel');
+    // Top-down tranverse to assign graphic settings to each elements.
+    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) {
+        // In top/bottom mode, textVerticalAlign should not be used, which cause
+        // inaccurately locating.
+        if (elOption.hv && elOption.hv[1]) {
+          elOptionStyle.textVerticalAlign = elOptionStyle.textBaseline = elOptionStyle.verticalAlign = elOptionStyle.align = null;
+        }
+      }
+      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;
+        }
+        if (!textContentOption && convertResult.textContent) {
+          textContentOption = convertResult.textContent;
+        }
+      }
+      // Remove unnecessary props to avoid potential problems.
+      var elOptionCleaned = getCleanedElOption(elOption);
+      // For simple, do not support parent change, otherwise reorder is needed.
+      if (process.env.NODE_ENV !== 'production') {
+        elExisting && assert(targetElParent === elExisting.parent, 'Changing parent is not supported.');
+      }
+      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);
+          // Stop and restore before update any other attributes.
+          stopPreviousKeyframeAnimationAndRestore(el_1);
+        }
+        if (el_1) {
+          applyUpdateTransition(el_1, elOptionCleaned, graphicModel, {
+            isInit: 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);
+      }
+      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));
+        }
+      }
+      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);
+          }
+          el.setClipPath(clipPath);
+          applyUpdateTransition(clipPath, clipPathOption, graphicModel, {
+            isInit: isInit
+          });
+          applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
+        }
+        var elInner = inner(el);
+        el.setTextConfig(textConfig);
+        elInner.option = elOption;
+        setEventData(el, graphicModel, elOption);
+        setTooltipConfig({
+          el: el,
+          componentModel: graphicModel,
+          itemName: el.name,
+          itemTooltipOption: elOption.tooltip
+        });
+        applyKeyframeAnimation(el, elOption.keyframeAnimation, graphicModel);
+      }
+    });
+  };
+  /**
+   * Locate graphic elements.
+   */
+  GraphicComponentView.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'];
+    // Top-down to calculate percentage width/height of group
+    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;
+      // Like 'position:absolut' in css, default 0.
+      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;
+    }
+    // Bottom-up tranvese all elements (consider ec resize) to locate elements.
+    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
+      };
+      // PENDING
+      // Currently, when `bounding: 'all'`, the union bounding rect of the group
+      // does not include the rect of [0, 0, group.width, group.height], which
+      // is probably weird for users. Should we make a break change for it?
+      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);
+      }
+    }
+  };
+  /**
+   * Clear all elements.
+   */
+  GraphicComponentView.prototype._clear = function () {
+    var _this = this;
+    var elMap = this._elMap;
+    elMap.each(function (el) {
+      removeEl(el, inner(el).option, elMap, _this._lastGraphicModel);
+    });
+    this._elMap = createHashMap();
+  };
+  GraphicComponentView.prototype.dispose = function () {
+    this._clear();
+  };
+  GraphicComponentView.type = 'graphic';
+  return GraphicComponentView;
+}(ComponentView);
+function newEl(graphicType) {
+  if (process.env.NODE_ENV !== 'production') {
+    assert(graphicType, 'graphic type MUST be set');
+  }
+  var Clz = hasOwn(nonShapeGraphicElements, graphicType)
+  // Those graphic elements are not shapes. They should not be
+  // overwritten by users, so do them first.
+  ? 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) {
+    // Assign event handlers.
+    // PENDING: should enumerate all event names or use pattern matching?
+    if (key.indexOf('on') === 0) {
+      var val = elOption[key];
+      el[key] = isFunction(val) ? val : null;
+    }
+  });
+  if (hasOwn(elOption, 'draggable')) {
+    el.draggable = elOption.draggable;
+  }
+  // Other attributes
+  elOption.name != null && (el.name = elOption.name);
+  elOption.id != null && (el.id = elOption.id);
+}
+// Remove unnecessary props to avoid potential problems.
+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;
+  // Simple optimize for large amount of elements that no need event.
+  if (!el.silent && !el.ignore && !eventData) {
+    eventData = getECData(el).eventData = {
+      componentType: 'graphic',
+      componentIndex: graphicModel.componentIndex,
+      name: el.name
+    };
+  }
+  // `elOption.info` enables user to mount some info on
+  // elements and use them in event handlers.
+  if (eventData) {
+    eventData.info = elOption.info;
+  }
+}
+
+export { GraphicComponentView, inner };

package/esm/node_modules/echarts/lib/component/graphic/install.js

@@ -0,0 +1,34 @@
+import { isArray } from '../../../../zrender/lib/core/util.js';
+import { GraphicComponentModel } from './GraphicModel.js';
+import { GraphicComponentView } from './GraphicView.js';
+
+function install(registers) {
+  registers.registerComponentModel(GraphicComponentModel);
+  registers.registerComponentView(GraphicComponentView);
+  registers.registerPreprocessor(function (option) {
+    var graphicOption = option.graphic;
+    // Convert
+    // {graphic: [{left: 10, type: 'circle'}, ...]}
+    // or
+    // {graphic: {left: 10, type: 'circle'}}
+    // to
+    // {graphic: [{elements: [{left: 10, type: 'circle'}, ...]}]}
+    if (isArray(graphicOption)) {
+      if (!graphicOption[0] || !graphicOption[0].elements) {
+        option.graphic = [{
+          elements: graphicOption
+        }];
+      } else {
+        // Only one graphic instance can be instantiated. (We don't
+        // want that too many views are created in echarts._viewMap.)
+        option.graphic = [option.graphic[0]];
+      }
+    } else if (graphicOption && !graphicOption.elements) {
+      option.graphic = [{
+        elements: [graphicOption]
+      }];
+    }
+  });
+}
+
+export { install };