GraphicView.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import * as zrUtil from 'zrender/lib/core/util.js';
  42. import Displayable from 'zrender/lib/graphic/Displayable.js';
  43. import * as modelUtil from '../../util/model.js';
  44. import * as graphicUtil from '../../util/graphic.js';
  45. import * as layoutUtil from '../../util/layout.js';
  46. import { parsePercent } from '../../util/number.js';
  47. import ComponentView from '../../view/Component.js';
  48. import { getECData } from '../../util/innerStore.js';
  49. import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat.js';
  50. import { applyLeaveTransition, applyUpdateTransition, isTransitionAll, updateLeaveTo } from '../../animation/customGraphicTransition.js';
  51. import { updateProps } from '../../animation/basicTrasition.js';
  52. import { applyKeyframeAnimation, stopPreviousKeyframeAnimationAndRestore } from '../../animation/customGraphicKeyframeAnimation.js';
  53. var nonShapeGraphicElements = {
  54. // Reserved but not supported in graphic component.
  55. path: null,
  56. compoundPath: null,
  57. // Supported in graphic component.
  58. group: graphicUtil.Group,
  59. image: graphicUtil.Image,
  60. text: graphicUtil.Text
  61. };
  62. export var inner = modelUtil.makeInner(); // ------------------------
  63. // View
  64. // ------------------------
  65. var GraphicComponentView =
  66. /** @class */
  67. function (_super) {
  68. __extends(GraphicComponentView, _super);
  69. function GraphicComponentView() {
  70. var _this = _super !== null && _super.apply(this, arguments) || this;
  71. _this.type = GraphicComponentView.type;
  72. return _this;
  73. }
  74. GraphicComponentView.prototype.init = function () {
  75. this._elMap = zrUtil.createHashMap();
  76. };
  77. GraphicComponentView.prototype.render = function (graphicModel, ecModel, api) {
  78. // Having leveraged between use cases and algorithm complexity, a very
  79. // simple layout mechanism is used:
  80. // The size(width/height) can be determined by itself or its parent (not
  81. // implemented yet), but can not by its children. (Top-down travel)
  82. // The location(x/y) can be determined by the bounding rect of itself
  83. // (can including its descendants or not) and the size of its parent.
  84. // (Bottom-up travel)
  85. // When `chart.clear()` or `chart.setOption({...}, true)` with the same id,
  86. // view will be reused.
  87. if (graphicModel !== this._lastGraphicModel) {
  88. this._clear();
  89. }
  90. this._lastGraphicModel = graphicModel;
  91. this._updateElements(graphicModel);
  92. this._relocate(graphicModel, api);
  93. };
  94. /**
  95. * Update graphic elements.
  96. */
  97. GraphicComponentView.prototype._updateElements = function (graphicModel) {
  98. var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
  99. if (!elOptionsToUpdate) {
  100. return;
  101. }
  102. var elMap = this._elMap;
  103. var rootGroup = this.group;
  104. var globalZ = graphicModel.get('z');
  105. var globalZLevel = graphicModel.get('zlevel'); // Top-down tranverse to assign graphic settings to each elements.
  106. zrUtil.each(elOptionsToUpdate, function (elOption) {
  107. var id = modelUtil.convertOptionIdName(elOption.id, null);
  108. var elExisting = id != null ? elMap.get(id) : null;
  109. var parentId = modelUtil.convertOptionIdName(elOption.parentId, null);
  110. var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
  111. var elType = elOption.type;
  112. var elOptionStyle = elOption.style;
  113. if (elType === 'text' && elOptionStyle) {
  114. // In top/bottom mode, textVerticalAlign should not be used, which cause
  115. // inaccurately locating.
  116. if (elOption.hv && elOption.hv[1]) {
  117. elOptionStyle.textVerticalAlign = elOptionStyle.textBaseline = elOptionStyle.verticalAlign = elOptionStyle.align = null;
  118. }
  119. }
  120. var textContentOption = elOption.textContent;
  121. var textConfig = elOption.textConfig;
  122. if (elOptionStyle && isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption)) {
  123. var convertResult = convertFromEC4CompatibleStyle(elOptionStyle, elType, true);
  124. if (!textConfig && convertResult.textConfig) {
  125. textConfig = elOption.textConfig = convertResult.textConfig;
  126. }
  127. if (!textContentOption && convertResult.textContent) {
  128. textContentOption = convertResult.textContent;
  129. }
  130. } // Remove unnecessary props to avoid potential problems.
  131. var elOptionCleaned = getCleanedElOption(elOption); // For simple, do not support parent change, otherwise reorder is needed.
  132. if (process.env.NODE_ENV !== 'production') {
  133. elExisting && zrUtil.assert(targetElParent === elExisting.parent, 'Changing parent is not supported.');
  134. }
  135. var $action = elOption.$action || 'merge';
  136. var isMerge = $action === 'merge';
  137. var isReplace = $action === 'replace';
  138. if (isMerge) {
  139. var isInit = !elExisting;
  140. var el_1 = elExisting;
  141. if (isInit) {
  142. el_1 = createEl(id, targetElParent, elOption.type, elMap);
  143. } else {
  144. el_1 && (inner(el_1).isNew = false); // Stop and restore before update any other attributes.
  145. stopPreviousKeyframeAnimationAndRestore(el_1);
  146. }
  147. if (el_1) {
  148. applyUpdateTransition(el_1, elOptionCleaned, graphicModel, {
  149. isInit: isInit
  150. });
  151. updateCommonAttrs(el_1, elOption, globalZ, globalZLevel);
  152. }
  153. } else if (isReplace) {
  154. removeEl(elExisting, elOption, elMap, graphicModel);
  155. var el_2 = createEl(id, targetElParent, elOption.type, elMap);
  156. if (el_2) {
  157. applyUpdateTransition(el_2, elOptionCleaned, graphicModel, {
  158. isInit: true
  159. });
  160. updateCommonAttrs(el_2, elOption, globalZ, globalZLevel);
  161. }
  162. } else if ($action === 'remove') {
  163. updateLeaveTo(elExisting, elOption);
  164. removeEl(elExisting, elOption, elMap, graphicModel);
  165. }
  166. var el = elMap.get(id);
  167. if (el && textContentOption) {
  168. if (isMerge) {
  169. var textContentExisting = el.getTextContent();
  170. textContentExisting ? textContentExisting.attr(textContentOption) : el.setTextContent(new graphicUtil.Text(textContentOption));
  171. } else if (isReplace) {
  172. el.setTextContent(new graphicUtil.Text(textContentOption));
  173. }
  174. }
  175. if (el) {
  176. var clipPathOption = elOption.clipPath;
  177. if (clipPathOption) {
  178. var clipPathType = clipPathOption.type;
  179. var clipPath = void 0;
  180. var isInit = false;
  181. if (isMerge) {
  182. var oldClipPath = el.getClipPath();
  183. isInit = !oldClipPath || inner(oldClipPath).type !== clipPathType;
  184. clipPath = isInit ? newEl(clipPathType) : oldClipPath;
  185. } else if (isReplace) {
  186. isInit = true;
  187. clipPath = newEl(clipPathType);
  188. }
  189. el.setClipPath(clipPath);
  190. applyUpdateTransition(clipPath, clipPathOption, graphicModel, {
  191. isInit: isInit
  192. });
  193. applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
  194. }
  195. var elInner = inner(el);
  196. el.setTextConfig(textConfig);
  197. elInner.option = elOption;
  198. setEventData(el, graphicModel, elOption);
  199. graphicUtil.setTooltipConfig({
  200. el: el,
  201. componentModel: graphicModel,
  202. itemName: el.name,
  203. itemTooltipOption: elOption.tooltip
  204. });
  205. applyKeyframeAnimation(el, elOption.keyframeAnimation, graphicModel);
  206. }
  207. });
  208. };
  209. /**
  210. * Locate graphic elements.
  211. */
  212. GraphicComponentView.prototype._relocate = function (graphicModel, api) {
  213. var elOptions = graphicModel.option.elements;
  214. var rootGroup = this.group;
  215. var elMap = this._elMap;
  216. var apiWidth = api.getWidth();
  217. var apiHeight = api.getHeight();
  218. var xy = ['x', 'y']; // Top-down to calculate percentage width/height of group
  219. for (var i = 0; i < elOptions.length; i++) {
  220. var elOption = elOptions[i];
  221. var id = modelUtil.convertOptionIdName(elOption.id, null);
  222. var el = id != null ? elMap.get(id) : null;
  223. if (!el || !el.isGroup) {
  224. continue;
  225. }
  226. var parentEl = el.parent;
  227. var isParentRoot = parentEl === rootGroup; // Like 'position:absolut' in css, default 0.
  228. var elInner = inner(el);
  229. var parentElInner = inner(parentEl);
  230. elInner.width = parsePercent(elInner.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
  231. elInner.height = parsePercent(elInner.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
  232. } // Bottom-up tranvese all elements (consider ec resize) to locate elements.
  233. for (var i = elOptions.length - 1; i >= 0; i--) {
  234. var elOption = elOptions[i];
  235. var id = modelUtil.convertOptionIdName(elOption.id, null);
  236. var el = id != null ? elMap.get(id) : null;
  237. if (!el) {
  238. continue;
  239. }
  240. var parentEl = el.parent;
  241. var parentElInner = inner(parentEl);
  242. var containerInfo = parentEl === rootGroup ? {
  243. width: apiWidth,
  244. height: apiHeight
  245. } : {
  246. width: parentElInner.width,
  247. height: parentElInner.height
  248. }; // PENDING
  249. // Currently, when `bounding: 'all'`, the union bounding rect of the group
  250. // does not include the rect of [0, 0, group.width, group.height], which
  251. // is probably weird for users. Should we make a break change for it?
  252. var layoutPos = {};
  253. var layouted = layoutUtil.positionElement(el, elOption, containerInfo, null, {
  254. hv: elOption.hv,
  255. boundingMode: elOption.bounding
  256. }, layoutPos);
  257. if (!inner(el).isNew && layouted) {
  258. var transition = elOption.transition;
  259. var animatePos = {};
  260. for (var k = 0; k < xy.length; k++) {
  261. var key = xy[k];
  262. var val = layoutPos[key];
  263. if (transition && (isTransitionAll(transition) || zrUtil.indexOf(transition, key) >= 0)) {
  264. animatePos[key] = val;
  265. } else {
  266. el[key] = val;
  267. }
  268. }
  269. updateProps(el, animatePos, graphicModel, 0);
  270. } else {
  271. el.attr(layoutPos);
  272. }
  273. }
  274. };
  275. /**
  276. * Clear all elements.
  277. */
  278. GraphicComponentView.prototype._clear = function () {
  279. var _this = this;
  280. var elMap = this._elMap;
  281. elMap.each(function (el) {
  282. removeEl(el, inner(el).option, elMap, _this._lastGraphicModel);
  283. });
  284. this._elMap = zrUtil.createHashMap();
  285. };
  286. GraphicComponentView.prototype.dispose = function () {
  287. this._clear();
  288. };
  289. GraphicComponentView.type = 'graphic';
  290. return GraphicComponentView;
  291. }(ComponentView);
  292. export { GraphicComponentView };
  293. function newEl(graphicType) {
  294. if (process.env.NODE_ENV !== 'production') {
  295. zrUtil.assert(graphicType, 'graphic type MUST be set');
  296. }
  297. var Clz = zrUtil.hasOwn(nonShapeGraphicElements, graphicType) // Those graphic elements are not shapes. They should not be
  298. // overwritten by users, so do them first.
  299. ? nonShapeGraphicElements[graphicType] : graphicUtil.getShapeClass(graphicType);
  300. if (process.env.NODE_ENV !== 'production') {
  301. zrUtil.assert(Clz, "graphic type " + graphicType + " can not be found");
  302. }
  303. var el = new Clz({});
  304. inner(el).type = graphicType;
  305. return el;
  306. }
  307. function createEl(id, targetElParent, graphicType, elMap) {
  308. var el = newEl(graphicType);
  309. targetElParent.add(el);
  310. elMap.set(id, el);
  311. inner(el).id = id;
  312. inner(el).isNew = true;
  313. return el;
  314. }
  315. function removeEl(elExisting, elOption, elMap, graphicModel) {
  316. var existElParent = elExisting && elExisting.parent;
  317. if (existElParent) {
  318. elExisting.type === 'group' && elExisting.traverse(function (el) {
  319. removeEl(el, elOption, elMap, graphicModel);
  320. });
  321. applyLeaveTransition(elExisting, elOption, graphicModel);
  322. elMap.removeKey(inner(elExisting).id);
  323. }
  324. }
  325. function updateCommonAttrs(el, elOption, defaultZ, defaultZlevel) {
  326. if (!el.isGroup) {
  327. zrUtil.each([['cursor', Displayable.prototype.cursor], // We should not support configure z and zlevel in the element level.
  328. // But seems we didn't limit it previously. So here still use it to avoid breaking.
  329. ['zlevel', defaultZlevel || 0], ['z', defaultZ || 0], // z2 must not be null/undefined, otherwise sort error may occur.
  330. ['z2', 0]], function (item) {
  331. var prop = item[0];
  332. if (zrUtil.hasOwn(elOption, prop)) {
  333. el[prop] = zrUtil.retrieve2(elOption[prop], item[1]);
  334. } else if (el[prop] == null) {
  335. el[prop] = item[1];
  336. }
  337. });
  338. }
  339. zrUtil.each(zrUtil.keys(elOption), function (key) {
  340. // Assign event handlers.
  341. // PENDING: should enumerate all event names or use pattern matching?
  342. if (key.indexOf('on') === 0) {
  343. var val = elOption[key];
  344. el[key] = zrUtil.isFunction(val) ? val : null;
  345. }
  346. });
  347. if (zrUtil.hasOwn(elOption, 'draggable')) {
  348. el.draggable = elOption.draggable;
  349. } // Other attributes
  350. elOption.name != null && (el.name = elOption.name);
  351. elOption.id != null && (el.id = elOption.id);
  352. } // Remove unnecessary props to avoid potential problems.
  353. function getCleanedElOption(elOption) {
  354. elOption = zrUtil.extend({}, elOption);
  355. zrUtil.each(['id', 'parentId', '$action', 'hv', 'bounding', 'textContent', 'clipPath'].concat(layoutUtil.LOCATION_PARAMS), function (name) {
  356. delete elOption[name];
  357. });
  358. return elOption;
  359. }
  360. function setEventData(el, graphicModel, elOption) {
  361. var eventData = getECData(el).eventData; // Simple optimize for large amount of elements that no need event.
  362. if (!el.silent && !el.ignore && !eventData) {
  363. eventData = getECData(el).eventData = {
  364. componentType: 'graphic',
  365. componentIndex: graphicModel.componentIndex,
  366. name: el.name
  367. };
  368. } // `elOption.info` enables user to mount some info on
  369. // elements and use them in event handlers.
  370. if (eventData) {
  371. eventData.info = elOption.info;
  372. }
  373. }