LegendView.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  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 { parse, stringify } from 'zrender/lib/tool/color.js';
  43. import * as graphic from '../../util/graphic.js';
  44. import { enableHoverEmphasis } from '../../util/states.js';
  45. import { setLabelStyle, createTextStyle } from '../../label/labelStyle.js';
  46. import { makeBackground } from '../helper/listComponent.js';
  47. import * as layoutUtil from '../../util/layout.js';
  48. import ComponentView from '../../view/Component.js';
  49. import { createSymbol } from '../../util/symbol.js';
  50. import { createOrUpdatePatternFromDecal } from '../../util/decal.js';
  51. var curry = zrUtil.curry;
  52. var each = zrUtil.each;
  53. var Group = graphic.Group;
  54. var LegendView =
  55. /** @class */
  56. function (_super) {
  57. __extends(LegendView, _super);
  58. function LegendView() {
  59. var _this = _super !== null && _super.apply(this, arguments) || this;
  60. _this.type = LegendView.type;
  61. _this.newlineDisabled = false;
  62. return _this;
  63. }
  64. LegendView.prototype.init = function () {
  65. this.group.add(this._contentGroup = new Group());
  66. this.group.add(this._selectorGroup = new Group());
  67. this._isFirstRender = true;
  68. };
  69. /**
  70. * @protected
  71. */
  72. LegendView.prototype.getContentGroup = function () {
  73. return this._contentGroup;
  74. };
  75. /**
  76. * @protected
  77. */
  78. LegendView.prototype.getSelectorGroup = function () {
  79. return this._selectorGroup;
  80. };
  81. /**
  82. * @override
  83. */
  84. LegendView.prototype.render = function (legendModel, ecModel, api) {
  85. var isFirstRender = this._isFirstRender;
  86. this._isFirstRender = false;
  87. this.resetInner();
  88. if (!legendModel.get('show', true)) {
  89. return;
  90. }
  91. var itemAlign = legendModel.get('align');
  92. var orient = legendModel.get('orient');
  93. if (!itemAlign || itemAlign === 'auto') {
  94. itemAlign = legendModel.get('left') === 'right' && orient === 'vertical' ? 'right' : 'left';
  95. } // selector has been normalized to an array in model
  96. var selector = legendModel.get('selector', true);
  97. var selectorPosition = legendModel.get('selectorPosition', true);
  98. if (selector && (!selectorPosition || selectorPosition === 'auto')) {
  99. selectorPosition = orient === 'horizontal' ? 'end' : 'start';
  100. }
  101. this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition); // Perform layout.
  102. var positionInfo = legendModel.getBoxLayoutParams();
  103. var viewportSize = {
  104. width: api.getWidth(),
  105. height: api.getHeight()
  106. };
  107. var padding = legendModel.get('padding');
  108. var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);
  109. var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition); // Place mainGroup, based on the calculated `mainRect`.
  110. var layoutRect = layoutUtil.getLayoutRect(zrUtil.defaults({
  111. width: mainRect.width,
  112. height: mainRect.height
  113. }, positionInfo), viewportSize, padding);
  114. this.group.x = layoutRect.x - mainRect.x;
  115. this.group.y = layoutRect.y - mainRect.y;
  116. this.group.markRedraw(); // Render background after group is layout.
  117. this.group.add(this._backgroundEl = makeBackground(mainRect, legendModel));
  118. };
  119. LegendView.prototype.resetInner = function () {
  120. this.getContentGroup().removeAll();
  121. this._backgroundEl && this.group.remove(this._backgroundEl);
  122. this.getSelectorGroup().removeAll();
  123. };
  124. LegendView.prototype.renderInner = function (itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
  125. var contentGroup = this.getContentGroup();
  126. var legendDrawnMap = zrUtil.createHashMap();
  127. var selectMode = legendModel.get('selectedMode');
  128. var excludeSeriesId = [];
  129. ecModel.eachRawSeries(function (seriesModel) {
  130. !seriesModel.get('legendHoverLink') && excludeSeriesId.push(seriesModel.id);
  131. });
  132. each(legendModel.getData(), function (legendItemModel, dataIndex) {
  133. var name = legendItemModel.get('name'); // Use empty string or \n as a newline string
  134. if (!this.newlineDisabled && (name === '' || name === '\n')) {
  135. var g = new Group(); // @ts-ignore
  136. g.newline = true;
  137. contentGroup.add(g);
  138. return;
  139. } // Representitive series.
  140. var seriesModel = ecModel.getSeriesByName(name)[0];
  141. if (legendDrawnMap.get(name)) {
  142. // Have been drawed
  143. return;
  144. } // Legend to control series.
  145. if (seriesModel) {
  146. var data = seriesModel.getData();
  147. var lineVisualStyle = data.getVisual('legendLineStyle') || {};
  148. var legendIcon = data.getVisual('legendIcon');
  149. /**
  150. * `data.getVisual('style')` may be the color from the register
  151. * in series. For example, for line series,
  152. */
  153. var style = data.getVisual('style');
  154. var itemGroup = this._createItem(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, style, legendIcon, selectMode, api);
  155. itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
  156. legendDrawnMap.set(name, true);
  157. } else {
  158. // Legend to control data. In pie and funnel.
  159. ecModel.eachRawSeries(function (seriesModel) {
  160. // In case multiple series has same data name
  161. if (legendDrawnMap.get(name)) {
  162. return;
  163. }
  164. if (seriesModel.legendVisualProvider) {
  165. var provider = seriesModel.legendVisualProvider;
  166. if (!provider.containName(name)) {
  167. return;
  168. }
  169. var idx = provider.indexOfName(name);
  170. var style = provider.getItemVisual(idx, 'style');
  171. var legendIcon = provider.getItemVisual(idx, 'legendIcon');
  172. var colorArr = parse(style.fill); // Color may be set to transparent in visualMap when data is out of range.
  173. // Do not show nothing.
  174. if (colorArr && colorArr[3] === 0) {
  175. colorArr[3] = 0.2; // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
  176. style = zrUtil.extend(zrUtil.extend({}, style), {
  177. fill: stringify(colorArr, 'rgba')
  178. });
  179. }
  180. var itemGroup = this._createItem(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, {}, style, legendIcon, selectMode, api); // FIXME: consider different series has items with the same name.
  181. itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId)) // Should not specify the series name, consider legend controls
  182. // more than one pie series.
  183. .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
  184. legendDrawnMap.set(name, true);
  185. }
  186. }, this);
  187. }
  188. if (process.env.NODE_ENV !== 'production') {
  189. if (!legendDrawnMap.get(name)) {
  190. console.warn(name + ' series not exists. Legend data should be same with series name or data name.');
  191. }
  192. }
  193. }, this);
  194. if (selector) {
  195. this._createSelector(selector, legendModel, api, orient, selectorPosition);
  196. }
  197. };
  198. LegendView.prototype._createSelector = function (selector, legendModel, api, orient, selectorPosition) {
  199. var selectorGroup = this.getSelectorGroup();
  200. each(selector, function createSelectorButton(selectorItem) {
  201. var type = selectorItem.type;
  202. var labelText = new graphic.Text({
  203. style: {
  204. x: 0,
  205. y: 0,
  206. align: 'center',
  207. verticalAlign: 'middle'
  208. },
  209. onclick: function () {
  210. api.dispatchAction({
  211. type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect'
  212. });
  213. }
  214. });
  215. selectorGroup.add(labelText);
  216. var labelModel = legendModel.getModel('selectorLabel');
  217. var emphasisLabelModel = legendModel.getModel(['emphasis', 'selectorLabel']);
  218. setLabelStyle(labelText, {
  219. normal: labelModel,
  220. emphasis: emphasisLabelModel
  221. }, {
  222. defaultText: selectorItem.title
  223. });
  224. enableHoverEmphasis(labelText);
  225. });
  226. };
  227. LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) {
  228. var drawType = seriesModel.visualDrawType;
  229. var itemWidth = legendModel.get('itemWidth');
  230. var itemHeight = legendModel.get('itemHeight');
  231. var isSelected = legendModel.isSelected(name);
  232. var iconRotate = legendItemModel.get('symbolRotate');
  233. var symbolKeepAspect = legendItemModel.get('symbolKeepAspect');
  234. var legendIconType = legendItemModel.get('icon');
  235. legendIcon = legendIconType || legendIcon || 'roundRect';
  236. var style = getLegendStyle(legendIcon, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api);
  237. var itemGroup = new Group();
  238. var textStyleModel = legendItemModel.getModel('textStyle');
  239. if (zrUtil.isFunction(seriesModel.getLegendIcon) && (!legendIconType || legendIconType === 'inherit')) {
  240. // Series has specific way to define legend icon
  241. itemGroup.add(seriesModel.getLegendIcon({
  242. itemWidth: itemWidth,
  243. itemHeight: itemHeight,
  244. icon: legendIcon,
  245. iconRotate: iconRotate,
  246. itemStyle: style.itemStyle,
  247. lineStyle: style.lineStyle,
  248. symbolKeepAspect: symbolKeepAspect
  249. }));
  250. } else {
  251. // Use default legend icon policy for most series
  252. var rotate = legendIconType === 'inherit' && seriesModel.getData().getVisual('symbol') ? iconRotate === 'inherit' ? seriesModel.getData().getVisual('symbolRotate') : iconRotate : 0; // No rotation for no icon
  253. itemGroup.add(getDefaultLegendIcon({
  254. itemWidth: itemWidth,
  255. itemHeight: itemHeight,
  256. icon: legendIcon,
  257. iconRotate: rotate,
  258. itemStyle: style.itemStyle,
  259. lineStyle: style.lineStyle,
  260. symbolKeepAspect: symbolKeepAspect
  261. }));
  262. }
  263. var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
  264. var textAlign = itemAlign;
  265. var formatter = legendModel.get('formatter');
  266. var content = name;
  267. if (zrUtil.isString(formatter) && formatter) {
  268. content = formatter.replace('{name}', name != null ? name : '');
  269. } else if (zrUtil.isFunction(formatter)) {
  270. content = formatter(name);
  271. }
  272. var inactiveColor = legendItemModel.get('inactiveColor');
  273. itemGroup.add(new graphic.Text({
  274. style: createTextStyle(textStyleModel, {
  275. text: content,
  276. x: textX,
  277. y: itemHeight / 2,
  278. fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
  279. align: textAlign,
  280. verticalAlign: 'middle'
  281. })
  282. })); // Add a invisible rect to increase the area of mouse hover
  283. var hitRect = new graphic.Rect({
  284. shape: itemGroup.getBoundingRect(),
  285. invisible: true
  286. });
  287. var tooltipModel = legendItemModel.getModel('tooltip');
  288. if (tooltipModel.get('show')) {
  289. graphic.setTooltipConfig({
  290. el: hitRect,
  291. componentModel: legendModel,
  292. itemName: name,
  293. itemTooltipOption: tooltipModel.option
  294. });
  295. }
  296. itemGroup.add(hitRect);
  297. itemGroup.eachChild(function (child) {
  298. child.silent = true;
  299. });
  300. hitRect.silent = !selectMode;
  301. this.getContentGroup().add(itemGroup);
  302. enableHoverEmphasis(itemGroup); // @ts-ignore
  303. itemGroup.__legendDataIndex = dataIndex;
  304. return itemGroup;
  305. };
  306. LegendView.prototype.layoutInner = function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
  307. var contentGroup = this.getContentGroup();
  308. var selectorGroup = this.getSelectorGroup(); // Place items in contentGroup.
  309. layoutUtil.box(legendModel.get('orient'), contentGroup, legendModel.get('itemGap'), maxSize.width, maxSize.height);
  310. var contentRect = contentGroup.getBoundingRect();
  311. var contentPos = [-contentRect.x, -contentRect.y];
  312. selectorGroup.markRedraw();
  313. contentGroup.markRedraw();
  314. if (selector) {
  315. // Place buttons in selectorGroup
  316. layoutUtil.box( // Buttons in selectorGroup always layout horizontally
  317. 'horizontal', selectorGroup, legendModel.get('selectorItemGap', true));
  318. var selectorRect = selectorGroup.getBoundingRect();
  319. var selectorPos = [-selectorRect.x, -selectorRect.y];
  320. var selectorButtonGap = legendModel.get('selectorButtonGap', true);
  321. var orientIdx = legendModel.getOrient().index;
  322. var wh = orientIdx === 0 ? 'width' : 'height';
  323. var hw = orientIdx === 0 ? 'height' : 'width';
  324. var yx = orientIdx === 0 ? 'y' : 'x';
  325. if (selectorPosition === 'end') {
  326. selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap;
  327. } else {
  328. contentPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
  329. } //Always align selector to content as 'middle'
  330. selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
  331. selectorGroup.x = selectorPos[0];
  332. selectorGroup.y = selectorPos[1];
  333. contentGroup.x = contentPos[0];
  334. contentGroup.y = contentPos[1];
  335. var mainRect = {
  336. x: 0,
  337. y: 0
  338. };
  339. mainRect[wh] = contentRect[wh] + selectorButtonGap + selectorRect[wh];
  340. mainRect[hw] = Math.max(contentRect[hw], selectorRect[hw]);
  341. mainRect[yx] = Math.min(0, selectorRect[yx] + selectorPos[1 - orientIdx]);
  342. return mainRect;
  343. } else {
  344. contentGroup.x = contentPos[0];
  345. contentGroup.y = contentPos[1];
  346. return this.group.getBoundingRect();
  347. }
  348. };
  349. /**
  350. * @protected
  351. */
  352. LegendView.prototype.remove = function () {
  353. this.getContentGroup().removeAll();
  354. this._isFirstRender = true;
  355. };
  356. LegendView.type = 'legend.plain';
  357. return LegendView;
  358. }(ComponentView);
  359. function getLegendStyle(iconType, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api) {
  360. /**
  361. * Use series style if is inherit;
  362. * elsewise, use legend style
  363. */
  364. function handleCommonProps(style, visualStyle) {
  365. // If lineStyle.width is 'auto', it is set to be 2 if series has border
  366. if (style.lineWidth === 'auto') {
  367. style.lineWidth = visualStyle.lineWidth > 0 ? 2 : 0;
  368. }
  369. each(style, function (propVal, propName) {
  370. style[propName] === 'inherit' && (style[propName] = visualStyle[propName]);
  371. });
  372. } // itemStyle
  373. var itemStyleModel = legendItemModel.getModel('itemStyle');
  374. var itemStyle = itemStyleModel.getItemStyle();
  375. var iconBrushType = iconType.lastIndexOf('empty', 0) === 0 ? 'fill' : 'stroke';
  376. var decalStyle = itemStyleModel.getShallow('decal');
  377. itemStyle.decal = !decalStyle || decalStyle === 'inherit' ? itemVisualStyle.decal : createOrUpdatePatternFromDecal(decalStyle, api);
  378. if (itemStyle.fill === 'inherit') {
  379. /**
  380. * Series with visualDrawType as 'stroke' should have
  381. * series stroke as legend fill
  382. */
  383. itemStyle.fill = itemVisualStyle[drawType];
  384. }
  385. if (itemStyle.stroke === 'inherit') {
  386. /**
  387. * icon type with "emptyXXX" should use fill color
  388. * in visual style
  389. */
  390. itemStyle.stroke = itemVisualStyle[iconBrushType];
  391. }
  392. if (itemStyle.opacity === 'inherit') {
  393. /**
  394. * Use lineStyle.opacity if drawType is stroke
  395. */
  396. itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity;
  397. }
  398. handleCommonProps(itemStyle, itemVisualStyle); // lineStyle
  399. var legendLineModel = legendItemModel.getModel('lineStyle');
  400. var lineStyle = legendLineModel.getLineStyle();
  401. handleCommonProps(lineStyle, lineVisualStyle); // Fix auto color to real color
  402. itemStyle.fill === 'auto' && (itemStyle.fill = itemVisualStyle.fill);
  403. itemStyle.stroke === 'auto' && (itemStyle.stroke = itemVisualStyle.fill);
  404. lineStyle.stroke === 'auto' && (lineStyle.stroke = itemVisualStyle.fill);
  405. if (!isSelected) {
  406. var borderWidth = legendItemModel.get('inactiveBorderWidth');
  407. /**
  408. * Since stroke is set to be inactiveBorderColor, it may occur that
  409. * there is no border in series but border in legend, so we need to
  410. * use border only when series has border if is set to be auto
  411. */
  412. var visualHasBorder = itemStyle[iconBrushType];
  413. itemStyle.lineWidth = borderWidth === 'auto' ? itemVisualStyle.lineWidth > 0 && visualHasBorder ? 2 : 0 : itemStyle.lineWidth;
  414. itemStyle.fill = legendItemModel.get('inactiveColor');
  415. itemStyle.stroke = legendItemModel.get('inactiveBorderColor');
  416. lineStyle.stroke = legendLineModel.get('inactiveColor');
  417. lineStyle.lineWidth = legendLineModel.get('inactiveWidth');
  418. }
  419. return {
  420. itemStyle: itemStyle,
  421. lineStyle: lineStyle
  422. };
  423. }
  424. function getDefaultLegendIcon(opt) {
  425. var symboType = opt.icon || 'roundRect';
  426. var icon = createSymbol(symboType, 0, 0, opt.itemWidth, opt.itemHeight, opt.itemStyle.fill, opt.symbolKeepAspect);
  427. icon.setStyle(opt.itemStyle);
  428. icon.rotation = (opt.iconRotate || 0) * Math.PI / 180;
  429. icon.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
  430. if (symboType.indexOf('empty') > -1) {
  431. icon.style.stroke = icon.style.fill;
  432. icon.style.fill = '#fff';
  433. icon.style.lineWidth = 2;
  434. }
  435. return icon;
  436. }
  437. function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
  438. // downplay before unselect
  439. dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
  440. api.dispatchAction({
  441. type: 'legendToggleSelect',
  442. name: seriesName != null ? seriesName : dataName
  443. }); // highlight after select
  444. // TODO higlight immediately may cause animation loss.
  445. dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
  446. }
  447. function isUseHoverLayer(api) {
  448. var list = api.getZr().storage.getDisplayList();
  449. var emphasisState;
  450. var i = 0;
  451. var len = list.length;
  452. while (i < len && !(emphasisState = list[i].states.emphasis)) {
  453. i++;
  454. }
  455. return emphasisState && emphasisState.hoverLayer;
  456. }
  457. function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {
  458. // If element hover will move to a hoverLayer.
  459. if (!isUseHoverLayer(api)) {
  460. api.dispatchAction({
  461. type: 'highlight',
  462. seriesName: seriesName,
  463. name: dataName,
  464. excludeSeriesId: excludeSeriesId
  465. });
  466. }
  467. }
  468. function dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId) {
  469. // If element hover will move to a hoverLayer.
  470. if (!isUseHoverLayer(api)) {
  471. api.dispatchAction({
  472. type: 'downplay',
  473. seriesName: seriesName,
  474. name: dataName,
  475. excludeSeriesId: excludeSeriesId
  476. });
  477. }
  478. }
  479. export default LegendView;