PictorialBarView.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
  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 * as graphic from '../../util/graphic.js';
  43. import { toggleHoverEmphasis } from '../../util/states.js';
  44. import { createSymbol, normalizeSymbolOffset } from '../../util/symbol.js';
  45. import { parsePercent, isNumeric } from '../../util/number.js';
  46. import ChartView from '../../view/Chart.js';
  47. import { getDefaultLabel } from '../helper/labelHelper.js';
  48. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  49. import ZRImage from 'zrender/lib/graphic/Image.js';
  50. import { getECData } from '../../util/innerStore.js';
  51. import { createClipPath } from '../helper/createClipPathFromCoordSys.js';
  52. var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'];
  53. // index: +isHorizontal
  54. var LAYOUT_ATTRS = [{
  55. xy: 'x',
  56. wh: 'width',
  57. index: 0,
  58. posDesc: ['left', 'right']
  59. }, {
  60. xy: 'y',
  61. wh: 'height',
  62. index: 1,
  63. posDesc: ['top', 'bottom']
  64. }];
  65. var pathForLineWidth = new graphic.Circle();
  66. var PictorialBarView = /** @class */function (_super) {
  67. __extends(PictorialBarView, _super);
  68. function PictorialBarView() {
  69. var _this = _super !== null && _super.apply(this, arguments) || this;
  70. _this.type = PictorialBarView.type;
  71. return _this;
  72. }
  73. PictorialBarView.prototype.render = function (seriesModel, ecModel, api) {
  74. var group = this.group;
  75. var data = seriesModel.getData();
  76. var oldData = this._data;
  77. var cartesian = seriesModel.coordinateSystem;
  78. var baseAxis = cartesian.getBaseAxis();
  79. var isHorizontal = baseAxis.isHorizontal();
  80. var coordSysRect = cartesian.master.getRect();
  81. var opt = {
  82. ecSize: {
  83. width: api.getWidth(),
  84. height: api.getHeight()
  85. },
  86. seriesModel: seriesModel,
  87. coordSys: cartesian,
  88. coordSysExtent: [[coordSysRect.x, coordSysRect.x + coordSysRect.width], [coordSysRect.y, coordSysRect.y + coordSysRect.height]],
  89. isHorizontal: isHorizontal,
  90. valueDim: LAYOUT_ATTRS[+isHorizontal],
  91. categoryDim: LAYOUT_ATTRS[1 - +isHorizontal]
  92. };
  93. data.diff(oldData).add(function (dataIndex) {
  94. if (!data.hasValue(dataIndex)) {
  95. return;
  96. }
  97. var itemModel = getItemModel(data, dataIndex);
  98. var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
  99. var bar = createBar(data, opt, symbolMeta);
  100. data.setItemGraphicEl(dataIndex, bar);
  101. group.add(bar);
  102. updateCommon(bar, opt, symbolMeta);
  103. }).update(function (newIndex, oldIndex) {
  104. var bar = oldData.getItemGraphicEl(oldIndex);
  105. if (!data.hasValue(newIndex)) {
  106. group.remove(bar);
  107. return;
  108. }
  109. var itemModel = getItemModel(data, newIndex);
  110. var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
  111. var pictorialShapeStr = getShapeStr(data, symbolMeta);
  112. if (bar && pictorialShapeStr !== bar.__pictorialShapeStr) {
  113. group.remove(bar);
  114. data.setItemGraphicEl(newIndex, null);
  115. bar = null;
  116. }
  117. if (bar) {
  118. updateBar(bar, opt, symbolMeta);
  119. } else {
  120. bar = createBar(data, opt, symbolMeta, true);
  121. }
  122. data.setItemGraphicEl(newIndex, bar);
  123. bar.__pictorialSymbolMeta = symbolMeta;
  124. // Add back
  125. group.add(bar);
  126. updateCommon(bar, opt, symbolMeta);
  127. }).remove(function (dataIndex) {
  128. var bar = oldData.getItemGraphicEl(dataIndex);
  129. bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
  130. }).execute();
  131. // Do clipping
  132. var clipPath = seriesModel.get('clip', true) ? createClipPath(seriesModel.coordinateSystem, false, seriesModel) : null;
  133. if (clipPath) {
  134. group.setClipPath(clipPath);
  135. } else {
  136. group.removeClipPath();
  137. }
  138. this._data = data;
  139. return this.group;
  140. };
  141. PictorialBarView.prototype.remove = function (ecModel, api) {
  142. var group = this.group;
  143. var data = this._data;
  144. if (ecModel.get('animation')) {
  145. if (data) {
  146. data.eachItemGraphicEl(function (bar) {
  147. removeBar(data, getECData(bar).dataIndex, ecModel, bar);
  148. });
  149. }
  150. } else {
  151. group.removeAll();
  152. }
  153. };
  154. PictorialBarView.type = 'pictorialBar';
  155. return PictorialBarView;
  156. }(ChartView);
  157. // Set or calculate default value about symbol, and calculate layout info.
  158. function getSymbolMeta(data, dataIndex, itemModel, opt) {
  159. var layout = data.getItemLayout(dataIndex);
  160. var symbolRepeat = itemModel.get('symbolRepeat');
  161. var symbolClip = itemModel.get('symbolClip');
  162. var symbolPosition = itemModel.get('symbolPosition') || 'start';
  163. var symbolRotate = itemModel.get('symbolRotate');
  164. var rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
  165. var symbolPatternSize = itemModel.get('symbolPatternSize') || 2;
  166. var isAnimationEnabled = itemModel.isAnimationEnabled();
  167. var symbolMeta = {
  168. dataIndex: dataIndex,
  169. layout: layout,
  170. itemModel: itemModel,
  171. symbolType: data.getItemVisual(dataIndex, 'symbol') || 'circle',
  172. style: data.getItemVisual(dataIndex, 'style'),
  173. symbolClip: symbolClip,
  174. symbolRepeat: symbolRepeat,
  175. symbolRepeatDirection: itemModel.get('symbolRepeatDirection'),
  176. symbolPatternSize: symbolPatternSize,
  177. rotation: rotation,
  178. animationModel: isAnimationEnabled ? itemModel : null,
  179. hoverScale: isAnimationEnabled && itemModel.get(['emphasis', 'scale']),
  180. z2: itemModel.getShallow('z', true) || 0
  181. };
  182. prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
  183. prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, symbolMeta.boundingLength, symbolMeta.pxSign, symbolPatternSize, opt, symbolMeta);
  184. prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
  185. var symbolSize = symbolMeta.symbolSize;
  186. var symbolOffset = normalizeSymbolOffset(itemModel.get('symbolOffset'), symbolSize);
  187. prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength, opt, symbolMeta);
  188. return symbolMeta;
  189. }
  190. // bar length can be negative.
  191. function prepareBarLength(itemModel, symbolRepeat, layout, opt, outputSymbolMeta) {
  192. var valueDim = opt.valueDim;
  193. var symbolBoundingData = itemModel.get('symbolBoundingData');
  194. var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
  195. var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
  196. var pxSignIdx = 1 - +(layout[valueDim.wh] <= 0);
  197. var boundingLength;
  198. if (zrUtil.isArray(symbolBoundingData)) {
  199. var symbolBoundingExtent = [convertToCoordOnAxis(valueAxis, symbolBoundingData[0]) - zeroPx, convertToCoordOnAxis(valueAxis, symbolBoundingData[1]) - zeroPx];
  200. symbolBoundingExtent[1] < symbolBoundingExtent[0] && symbolBoundingExtent.reverse();
  201. boundingLength = symbolBoundingExtent[pxSignIdx];
  202. } else if (symbolBoundingData != null) {
  203. boundingLength = convertToCoordOnAxis(valueAxis, symbolBoundingData) - zeroPx;
  204. } else if (symbolRepeat) {
  205. boundingLength = opt.coordSysExtent[valueDim.index][pxSignIdx] - zeroPx;
  206. } else {
  207. boundingLength = layout[valueDim.wh];
  208. }
  209. outputSymbolMeta.boundingLength = boundingLength;
  210. if (symbolRepeat) {
  211. outputSymbolMeta.repeatCutLength = layout[valueDim.wh];
  212. }
  213. // if 'pxSign' means sign of pixel, it can't be zero, or symbolScale will be zero
  214. // and when borderWidth be settled, the actual linewidth will be NaN
  215. var isXAxis = valueDim.xy === 'x';
  216. var isInverse = valueAxis.inverse;
  217. outputSymbolMeta.pxSign = isXAxis && !isInverse || !isXAxis && isInverse ? boundingLength >= 0 ? 1 : -1 : boundingLength > 0 ? 1 : -1;
  218. }
  219. function convertToCoordOnAxis(axis, value) {
  220. return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
  221. }
  222. // Support ['100%', '100%']
  223. function prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength, pxSign, symbolPatternSize, opt, outputSymbolMeta) {
  224. var valueDim = opt.valueDim;
  225. var categoryDim = opt.categoryDim;
  226. var categorySize = Math.abs(layout[categoryDim.wh]);
  227. var symbolSize = data.getItemVisual(dataIndex, 'symbolSize');
  228. var parsedSymbolSize;
  229. if (zrUtil.isArray(symbolSize)) {
  230. parsedSymbolSize = symbolSize.slice();
  231. } else {
  232. if (symbolSize == null) {
  233. // will parse to number below
  234. parsedSymbolSize = ['100%', '100%'];
  235. } else {
  236. parsedSymbolSize = [symbolSize, symbolSize];
  237. }
  238. }
  239. // Note: percentage symbolSize (like '100%') do not consider lineWidth, because it is
  240. // to complicated to calculate real percent value if considering scaled lineWidth.
  241. // So the actual size will bigger than layout size if lineWidth is bigger than zero,
  242. // which can be tolerated in pictorial chart.
  243. parsedSymbolSize[categoryDim.index] = parsePercent(parsedSymbolSize[categoryDim.index], categorySize);
  244. parsedSymbolSize[valueDim.index] = parsePercent(parsedSymbolSize[valueDim.index], symbolRepeat ? categorySize : Math.abs(boundingLength));
  245. outputSymbolMeta.symbolSize = parsedSymbolSize;
  246. // If x or y is less than zero, show reversed shape.
  247. var symbolScale = outputSymbolMeta.symbolScale = [parsedSymbolSize[0] / symbolPatternSize, parsedSymbolSize[1] / symbolPatternSize];
  248. // Follow convention, 'right' and 'top' is the normal scale.
  249. symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
  250. }
  251. function prepareLineWidth(itemModel, symbolScale, rotation, opt, outputSymbolMeta) {
  252. // In symbols are drawn with scale, so do not need to care about the case that width
  253. // or height are too small. But symbol use strokeNoScale, where acture lineWidth should
  254. // be calculated.
  255. var valueLineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
  256. if (valueLineWidth) {
  257. pathForLineWidth.attr({
  258. scaleX: symbolScale[0],
  259. scaleY: symbolScale[1],
  260. rotation: rotation
  261. });
  262. pathForLineWidth.updateTransform();
  263. valueLineWidth /= pathForLineWidth.getLineScale();
  264. valueLineWidth *= symbolScale[opt.valueDim.index];
  265. }
  266. outputSymbolMeta.valueLineWidth = valueLineWidth || 0;
  267. }
  268. function prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, outputSymbolMeta) {
  269. var categoryDim = opt.categoryDim;
  270. var valueDim = opt.valueDim;
  271. var pxSign = outputSymbolMeta.pxSign;
  272. var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
  273. var pathLen = unitLength;
  274. // Note: rotation will not effect the layout of symbols, because user may
  275. // want symbols to rotate on its center, which should not be translated
  276. // when rotating.
  277. if (symbolRepeat) {
  278. var absBoundingLength = Math.abs(boundingLength);
  279. var symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
  280. var hasEndGap = false;
  281. if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
  282. hasEndGap = true;
  283. symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
  284. }
  285. var symbolMarginNumeric = parsePercent(symbolMargin, symbolSize[valueDim.index]);
  286. var uLenWithMargin = Math.max(unitLength + symbolMarginNumeric * 2, 0);
  287. // When symbol margin is less than 0, margin at both ends will be subtracted
  288. // to ensure that all of the symbols will not be overflow the given area.
  289. var endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
  290. // Both final repeatTimes and final symbolMarginNumeric area calculated based on
  291. // boundingLength.
  292. var repeatSpecified = isNumeric(symbolRepeat);
  293. var repeatTimes = repeatSpecified ? symbolRepeat : toIntTimes((absBoundingLength + endFix) / uLenWithMargin);
  294. // Adjust calculate margin, to ensure each symbol is displayed
  295. // entirely in the given layout area.
  296. var mDiff = absBoundingLength - repeatTimes * unitLength;
  297. symbolMarginNumeric = mDiff / 2 / (hasEndGap ? repeatTimes : Math.max(repeatTimes - 1, 1));
  298. uLenWithMargin = unitLength + symbolMarginNumeric * 2;
  299. endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
  300. // Update repeatTimes when not all symbol will be shown.
  301. if (!repeatSpecified && symbolRepeat !== 'fixed') {
  302. repeatTimes = repeatCutLength ? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin) : 0;
  303. }
  304. pathLen = repeatTimes * uLenWithMargin - endFix;
  305. outputSymbolMeta.repeatTimes = repeatTimes;
  306. outputSymbolMeta.symbolMargin = symbolMarginNumeric;
  307. }
  308. var sizeFix = pxSign * (pathLen / 2);
  309. var pathPosition = outputSymbolMeta.pathPosition = [];
  310. pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
  311. pathPosition[valueDim.index] = symbolPosition === 'start' ? sizeFix : symbolPosition === 'end' ? boundingLength - sizeFix : boundingLength / 2; // 'center'
  312. if (symbolOffset) {
  313. pathPosition[0] += symbolOffset[0];
  314. pathPosition[1] += symbolOffset[1];
  315. }
  316. var bundlePosition = outputSymbolMeta.bundlePosition = [];
  317. bundlePosition[categoryDim.index] = layout[categoryDim.xy];
  318. bundlePosition[valueDim.index] = layout[valueDim.xy];
  319. var barRectShape = outputSymbolMeta.barRectShape = zrUtil.extend({}, layout);
  320. barRectShape[valueDim.wh] = pxSign * Math.max(Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix));
  321. barRectShape[categoryDim.wh] = layout[categoryDim.wh];
  322. var clipShape = outputSymbolMeta.clipShape = {};
  323. // Consider that symbol may be overflow layout rect.
  324. clipShape[categoryDim.xy] = -layout[categoryDim.xy];
  325. clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
  326. clipShape[valueDim.xy] = 0;
  327. clipShape[valueDim.wh] = layout[valueDim.wh];
  328. }
  329. function createPath(symbolMeta) {
  330. var symbolPatternSize = symbolMeta.symbolPatternSize;
  331. var path = createSymbol(
  332. // Consider texture img, make a big size.
  333. symbolMeta.symbolType, -symbolPatternSize / 2, -symbolPatternSize / 2, symbolPatternSize, symbolPatternSize);
  334. path.attr({
  335. culling: true
  336. });
  337. path.type !== 'image' && path.setStyle({
  338. strokeNoScale: true
  339. });
  340. return path;
  341. }
  342. function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
  343. var bundle = bar.__pictorialBundle;
  344. var symbolSize = symbolMeta.symbolSize;
  345. var valueLineWidth = symbolMeta.valueLineWidth;
  346. var pathPosition = symbolMeta.pathPosition;
  347. var valueDim = opt.valueDim;
  348. var repeatTimes = symbolMeta.repeatTimes || 0;
  349. var index = 0;
  350. var unit = symbolSize[opt.valueDim.index] + valueLineWidth + symbolMeta.symbolMargin * 2;
  351. eachPath(bar, function (path) {
  352. path.__pictorialAnimationIndex = index;
  353. path.__pictorialRepeatTimes = repeatTimes;
  354. if (index < repeatTimes) {
  355. updateAttr(path, null, makeTarget(index), symbolMeta, isUpdate);
  356. } else {
  357. updateAttr(path, null, {
  358. scaleX: 0,
  359. scaleY: 0
  360. }, symbolMeta, isUpdate, function () {
  361. bundle.remove(path);
  362. });
  363. }
  364. // updateHoverAnimation(path, symbolMeta);
  365. index++;
  366. });
  367. for (; index < repeatTimes; index++) {
  368. var path = createPath(symbolMeta);
  369. path.__pictorialAnimationIndex = index;
  370. path.__pictorialRepeatTimes = repeatTimes;
  371. bundle.add(path);
  372. var target = makeTarget(index);
  373. updateAttr(path, {
  374. x: target.x,
  375. y: target.y,
  376. scaleX: 0,
  377. scaleY: 0
  378. }, {
  379. scaleX: target.scaleX,
  380. scaleY: target.scaleY,
  381. rotation: target.rotation
  382. }, symbolMeta, isUpdate);
  383. }
  384. function makeTarget(index) {
  385. var position = pathPosition.slice();
  386. // (start && pxSign > 0) || (end && pxSign < 0): i = repeatTimes - index
  387. // Otherwise: i = index;
  388. var pxSign = symbolMeta.pxSign;
  389. var i = index;
  390. if (symbolMeta.symbolRepeatDirection === 'start' ? pxSign > 0 : pxSign < 0) {
  391. i = repeatTimes - 1 - index;
  392. }
  393. position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
  394. return {
  395. x: position[0],
  396. y: position[1],
  397. scaleX: symbolMeta.symbolScale[0],
  398. scaleY: symbolMeta.symbolScale[1],
  399. rotation: symbolMeta.rotation
  400. };
  401. }
  402. }
  403. function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
  404. var bundle = bar.__pictorialBundle;
  405. var mainPath = bar.__pictorialMainPath;
  406. if (!mainPath) {
  407. mainPath = bar.__pictorialMainPath = createPath(symbolMeta);
  408. bundle.add(mainPath);
  409. updateAttr(mainPath, {
  410. x: symbolMeta.pathPosition[0],
  411. y: symbolMeta.pathPosition[1],
  412. scaleX: 0,
  413. scaleY: 0,
  414. rotation: symbolMeta.rotation
  415. }, {
  416. scaleX: symbolMeta.symbolScale[0],
  417. scaleY: symbolMeta.symbolScale[1]
  418. }, symbolMeta, isUpdate);
  419. } else {
  420. updateAttr(mainPath, null, {
  421. x: symbolMeta.pathPosition[0],
  422. y: symbolMeta.pathPosition[1],
  423. scaleX: symbolMeta.symbolScale[0],
  424. scaleY: symbolMeta.symbolScale[1],
  425. rotation: symbolMeta.rotation
  426. }, symbolMeta, isUpdate);
  427. }
  428. }
  429. // bar rect is used for label.
  430. function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
  431. var rectShape = zrUtil.extend({}, symbolMeta.barRectShape);
  432. var barRect = bar.__pictorialBarRect;
  433. if (!barRect) {
  434. barRect = bar.__pictorialBarRect = new graphic.Rect({
  435. z2: 2,
  436. shape: rectShape,
  437. silent: true,
  438. style: {
  439. stroke: 'transparent',
  440. fill: 'transparent',
  441. lineWidth: 0
  442. }
  443. });
  444. barRect.disableMorphing = true;
  445. bar.add(barRect);
  446. } else {
  447. updateAttr(barRect, null, {
  448. shape: rectShape
  449. }, symbolMeta, isUpdate);
  450. }
  451. }
  452. function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
  453. // If not clip, symbol will be remove and rebuilt.
  454. if (symbolMeta.symbolClip) {
  455. var clipPath = bar.__pictorialClipPath;
  456. var clipShape = zrUtil.extend({}, symbolMeta.clipShape);
  457. var valueDim = opt.valueDim;
  458. var animationModel = symbolMeta.animationModel;
  459. var dataIndex = symbolMeta.dataIndex;
  460. if (clipPath) {
  461. graphic.updateProps(clipPath, {
  462. shape: clipShape
  463. }, animationModel, dataIndex);
  464. } else {
  465. clipShape[valueDim.wh] = 0;
  466. clipPath = new graphic.Rect({
  467. shape: clipShape
  468. });
  469. bar.__pictorialBundle.setClipPath(clipPath);
  470. bar.__pictorialClipPath = clipPath;
  471. var target = {};
  472. target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
  473. graphic[isUpdate ? 'updateProps' : 'initProps'](clipPath, {
  474. shape: target
  475. }, animationModel, dataIndex);
  476. }
  477. }
  478. }
  479. function getItemModel(data, dataIndex) {
  480. var itemModel = data.getItemModel(dataIndex);
  481. itemModel.getAnimationDelayParams = getAnimationDelayParams;
  482. itemModel.isAnimationEnabled = isAnimationEnabled;
  483. return itemModel;
  484. }
  485. function getAnimationDelayParams(path) {
  486. // The order is the same as the z-order, see `symbolRepeatDiretion`.
  487. return {
  488. index: path.__pictorialAnimationIndex,
  489. count: path.__pictorialRepeatTimes
  490. };
  491. }
  492. function isAnimationEnabled() {
  493. // `animation` prop can be set on itemModel in pictorial bar chart.
  494. return this.parentModel.isAnimationEnabled() && !!this.getShallow('animation');
  495. }
  496. function createBar(data, opt, symbolMeta, isUpdate) {
  497. // bar is the main element for each data.
  498. var bar = new graphic.Group();
  499. // bundle is used for location and clip.
  500. var bundle = new graphic.Group();
  501. bar.add(bundle);
  502. bar.__pictorialBundle = bundle;
  503. bundle.x = symbolMeta.bundlePosition[0];
  504. bundle.y = symbolMeta.bundlePosition[1];
  505. if (symbolMeta.symbolRepeat) {
  506. createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
  507. } else {
  508. createOrUpdateSingleSymbol(bar, opt, symbolMeta);
  509. }
  510. createOrUpdateBarRect(bar, symbolMeta, isUpdate);
  511. createOrUpdateClip(bar, opt, symbolMeta, isUpdate);
  512. bar.__pictorialShapeStr = getShapeStr(data, symbolMeta);
  513. bar.__pictorialSymbolMeta = symbolMeta;
  514. return bar;
  515. }
  516. function updateBar(bar, opt, symbolMeta) {
  517. var animationModel = symbolMeta.animationModel;
  518. var dataIndex = symbolMeta.dataIndex;
  519. var bundle = bar.__pictorialBundle;
  520. graphic.updateProps(bundle, {
  521. x: symbolMeta.bundlePosition[0],
  522. y: symbolMeta.bundlePosition[1]
  523. }, animationModel, dataIndex);
  524. if (symbolMeta.symbolRepeat) {
  525. createOrUpdateRepeatSymbols(bar, opt, symbolMeta, true);
  526. } else {
  527. createOrUpdateSingleSymbol(bar, opt, symbolMeta, true);
  528. }
  529. createOrUpdateBarRect(bar, symbolMeta, true);
  530. createOrUpdateClip(bar, opt, symbolMeta, true);
  531. }
  532. function removeBar(data, dataIndex, animationModel, bar) {
  533. // Not show text when animating
  534. var labelRect = bar.__pictorialBarRect;
  535. labelRect && labelRect.removeTextContent();
  536. var paths = [];
  537. eachPath(bar, function (path) {
  538. paths.push(path);
  539. });
  540. bar.__pictorialMainPath && paths.push(bar.__pictorialMainPath);
  541. // I do not find proper remove animation for clip yet.
  542. bar.__pictorialClipPath && (animationModel = null);
  543. zrUtil.each(paths, function (path) {
  544. graphic.removeElement(path, {
  545. scaleX: 0,
  546. scaleY: 0
  547. }, animationModel, dataIndex, function () {
  548. bar.parent && bar.parent.remove(bar);
  549. });
  550. });
  551. data.setItemGraphicEl(dataIndex, null);
  552. }
  553. function getShapeStr(data, symbolMeta) {
  554. return [data.getItemVisual(symbolMeta.dataIndex, 'symbol') || 'none', !!symbolMeta.symbolRepeat, !!symbolMeta.symbolClip].join(':');
  555. }
  556. function eachPath(bar, cb, context) {
  557. // Do not use Group#eachChild, because it do not support remove.
  558. zrUtil.each(bar.__pictorialBundle.children(), function (el) {
  559. el !== bar.__pictorialBarRect && cb.call(context, el);
  560. });
  561. }
  562. function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
  563. immediateAttrs && el.attr(immediateAttrs);
  564. // when symbolCip used, only clip path has init animation, otherwise it would be weird effect.
  565. if (symbolMeta.symbolClip && !isUpdate) {
  566. animationAttrs && el.attr(animationAttrs);
  567. } else {
  568. animationAttrs && graphic[isUpdate ? 'updateProps' : 'initProps'](el, animationAttrs, symbolMeta.animationModel, symbolMeta.dataIndex, cb);
  569. }
  570. }
  571. function updateCommon(bar, opt, symbolMeta) {
  572. var dataIndex = symbolMeta.dataIndex;
  573. var itemModel = symbolMeta.itemModel;
  574. // Color must be excluded.
  575. // Because symbol provide setColor individually to set fill and stroke
  576. var emphasisModel = itemModel.getModel('emphasis');
  577. var emphasisStyle = emphasisModel.getModel('itemStyle').getItemStyle();
  578. var blurStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
  579. var selectStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
  580. var cursorStyle = itemModel.getShallow('cursor');
  581. var focus = emphasisModel.get('focus');
  582. var blurScope = emphasisModel.get('blurScope');
  583. var hoverScale = emphasisModel.get('scale');
  584. eachPath(bar, function (path) {
  585. if (path instanceof ZRImage) {
  586. var pathStyle = path.style;
  587. path.useStyle(zrUtil.extend({
  588. // TODO other properties like dx, dy ?
  589. image: pathStyle.image,
  590. x: pathStyle.x,
  591. y: pathStyle.y,
  592. width: pathStyle.width,
  593. height: pathStyle.height
  594. }, symbolMeta.style));
  595. } else {
  596. path.useStyle(symbolMeta.style);
  597. }
  598. var emphasisState = path.ensureState('emphasis');
  599. emphasisState.style = emphasisStyle;
  600. if (hoverScale) {
  601. // NOTE: Must after scale is set after updateAttr
  602. emphasisState.scaleX = path.scaleX * 1.1;
  603. emphasisState.scaleY = path.scaleY * 1.1;
  604. }
  605. path.ensureState('blur').style = blurStyle;
  606. path.ensureState('select').style = selectStyle;
  607. cursorStyle && (path.cursor = cursorStyle);
  608. path.z2 = symbolMeta.z2;
  609. });
  610. var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
  611. var barRect = bar.__pictorialBarRect;
  612. barRect.ignoreClip = true;
  613. setLabelStyle(barRect, getLabelStatesModels(itemModel), {
  614. labelFetcher: opt.seriesModel,
  615. labelDataIndex: dataIndex,
  616. defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
  617. inheritColor: symbolMeta.style.fill,
  618. defaultOpacity: symbolMeta.style.opacity,
  619. defaultOutsidePosition: barPositionOutside
  620. });
  621. toggleHoverEmphasis(bar, focus, blurScope, emphasisModel.get('disabled'));
  622. }
  623. function toIntTimes(times) {
  624. var roundedTimes = Math.round(times);
  625. // Escapse accurate error
  626. return Math.abs(times - roundedTimes) < 1e-4 ? roundedTimes : Math.ceil(times);
  627. }
  628. export default PictorialBarView;