labelStyle.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  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 ZRText from 'zrender/lib/graphic/Text.js';
  41. import { isFunction, retrieve2, extend, keys, trim } from 'zrender/lib/core/util.js';
  42. import { SPECIAL_STATES, DISPLAY_STATES } from '../util/states.js';
  43. import { deprecateReplaceLog } from '../util/log.js';
  44. import { makeInner, interpolateRawValues } from '../util/model.js';
  45. import { initProps, updateProps } from '../util/graphic.js';
  46. var EMPTY_OBJ = {};
  47. export function setLabelText(label, labelTexts) {
  48. for (var i = 0; i < SPECIAL_STATES.length; i++) {
  49. var stateName = SPECIAL_STATES[i];
  50. var text = labelTexts[stateName];
  51. var state = label.ensureState(stateName);
  52. state.style = state.style || {};
  53. state.style.text = text;
  54. }
  55. var oldStates = label.currentStates.slice();
  56. label.clearStates(true);
  57. label.setStyle({
  58. text: labelTexts.normal
  59. });
  60. label.useStates(oldStates, true);
  61. }
  62. function getLabelText(opt, stateModels, interpolatedValue) {
  63. var labelFetcher = opt.labelFetcher;
  64. var labelDataIndex = opt.labelDataIndex;
  65. var labelDimIndex = opt.labelDimIndex;
  66. var normalModel = stateModels.normal;
  67. var baseText;
  68. if (labelFetcher) {
  69. baseText = labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex, normalModel && normalModel.get('formatter'), interpolatedValue != null ? {
  70. interpolatedValue: interpolatedValue
  71. } : null);
  72. }
  73. if (baseText == null) {
  74. baseText = isFunction(opt.defaultText) ? opt.defaultText(labelDataIndex, opt, interpolatedValue) : opt.defaultText;
  75. }
  76. var statesText = {
  77. normal: baseText
  78. };
  79. for (var i = 0; i < SPECIAL_STATES.length; i++) {
  80. var stateName = SPECIAL_STATES[i];
  81. var stateModel = stateModels[stateName];
  82. statesText[stateName] = retrieve2(labelFetcher ? labelFetcher.getFormattedLabel(labelDataIndex, stateName, null, labelDimIndex, stateModel && stateModel.get('formatter')) : null, baseText);
  83. }
  84. return statesText;
  85. }
  86. function setLabelStyle(targetEl, labelStatesModels, opt, stateSpecified
  87. // TODO specified position?
  88. ) {
  89. opt = opt || EMPTY_OBJ;
  90. var isSetOnText = targetEl instanceof ZRText;
  91. var needsCreateText = false;
  92. for (var i = 0; i < DISPLAY_STATES.length; i++) {
  93. var stateModel = labelStatesModels[DISPLAY_STATES[i]];
  94. if (stateModel && stateModel.getShallow('show')) {
  95. needsCreateText = true;
  96. break;
  97. }
  98. }
  99. var textContent = isSetOnText ? targetEl : targetEl.getTextContent();
  100. if (needsCreateText) {
  101. if (!isSetOnText) {
  102. // Reuse the previous
  103. if (!textContent) {
  104. textContent = new ZRText();
  105. targetEl.setTextContent(textContent);
  106. }
  107. // Use same state proxy
  108. if (targetEl.stateProxy) {
  109. textContent.stateProxy = targetEl.stateProxy;
  110. }
  111. }
  112. var labelStatesTexts = getLabelText(opt, labelStatesModels);
  113. var normalModel = labelStatesModels.normal;
  114. var showNormal = !!normalModel.getShallow('show');
  115. var normalStyle = createTextStyle(normalModel, stateSpecified && stateSpecified.normal, opt, false, !isSetOnText);
  116. normalStyle.text = labelStatesTexts.normal;
  117. if (!isSetOnText) {
  118. // Always create new
  119. targetEl.setTextConfig(createTextConfig(normalModel, opt, false));
  120. }
  121. for (var i = 0; i < SPECIAL_STATES.length; i++) {
  122. var stateName = SPECIAL_STATES[i];
  123. var stateModel = labelStatesModels[stateName];
  124. if (stateModel) {
  125. var stateObj = textContent.ensureState(stateName);
  126. var stateShow = !!retrieve2(stateModel.getShallow('show'), showNormal);
  127. if (stateShow !== showNormal) {
  128. stateObj.ignore = !stateShow;
  129. }
  130. stateObj.style = createTextStyle(stateModel, stateSpecified && stateSpecified[stateName], opt, true, !isSetOnText);
  131. stateObj.style.text = labelStatesTexts[stateName];
  132. if (!isSetOnText) {
  133. var targetElEmphasisState = targetEl.ensureState(stateName);
  134. targetElEmphasisState.textConfig = createTextConfig(stateModel, opt, true);
  135. }
  136. }
  137. }
  138. // PENDING: if there is many requirements that emphasis position
  139. // need to be different from normal position, we might consider
  140. // auto silent is those cases.
  141. textContent.silent = !!normalModel.getShallow('silent');
  142. // Keep x and y
  143. if (textContent.style.x != null) {
  144. normalStyle.x = textContent.style.x;
  145. }
  146. if (textContent.style.y != null) {
  147. normalStyle.y = textContent.style.y;
  148. }
  149. textContent.ignore = !showNormal;
  150. // Always create new style.
  151. textContent.useStyle(normalStyle);
  152. textContent.dirty();
  153. if (opt.enableTextSetter) {
  154. labelInner(textContent).setLabelText = function (interpolatedValue) {
  155. var labelStatesTexts = getLabelText(opt, labelStatesModels, interpolatedValue);
  156. setLabelText(textContent, labelStatesTexts);
  157. };
  158. }
  159. } else if (textContent) {
  160. // Not display rich text.
  161. textContent.ignore = true;
  162. }
  163. targetEl.dirty();
  164. }
  165. export { setLabelStyle };
  166. export function getLabelStatesModels(itemModel, labelName) {
  167. labelName = labelName || 'label';
  168. var statesModels = {
  169. normal: itemModel.getModel(labelName)
  170. };
  171. for (var i = 0; i < SPECIAL_STATES.length; i++) {
  172. var stateName = SPECIAL_STATES[i];
  173. statesModels[stateName] = itemModel.getModel([stateName, labelName]);
  174. }
  175. return statesModels;
  176. }
  177. /**
  178. * Set basic textStyle properties.
  179. */
  180. export function createTextStyle(textStyleModel, specifiedTextStyle,
  181. // Fixed style in the code. Can't be set by model.
  182. opt, isNotNormal, isAttached // If text is attached on an element. If so, auto color will handling in zrender.
  183. ) {
  184. var textStyle = {};
  185. setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttached);
  186. specifiedTextStyle && extend(textStyle, specifiedTextStyle);
  187. // textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
  188. return textStyle;
  189. }
  190. export function createTextConfig(textStyleModel, opt, isNotNormal) {
  191. opt = opt || {};
  192. var textConfig = {};
  193. var labelPosition;
  194. var labelRotate = textStyleModel.getShallow('rotate');
  195. var labelDistance = retrieve2(textStyleModel.getShallow('distance'), isNotNormal ? null : 5);
  196. var labelOffset = textStyleModel.getShallow('offset');
  197. labelPosition = textStyleModel.getShallow('position') || (isNotNormal ? null : 'inside');
  198. // 'outside' is not a valid zr textPostion value, but used
  199. // in bar series, and magric type should be considered.
  200. labelPosition === 'outside' && (labelPosition = opt.defaultOutsidePosition || 'top');
  201. if (labelPosition != null) {
  202. textConfig.position = labelPosition;
  203. }
  204. if (labelOffset != null) {
  205. textConfig.offset = labelOffset;
  206. }
  207. if (labelRotate != null) {
  208. labelRotate *= Math.PI / 180;
  209. textConfig.rotation = labelRotate;
  210. }
  211. if (labelDistance != null) {
  212. textConfig.distance = labelDistance;
  213. }
  214. // fill and auto is determined by the color of path fill if it's not specified by developers.
  215. textConfig.outsideFill = textStyleModel.get('color') === 'inherit' ? opt.inheritColor || null : 'auto';
  216. return textConfig;
  217. }
  218. /**
  219. * The uniform entry of set text style, that is, retrieve style definitions
  220. * from `model` and set to `textStyle` object.
  221. *
  222. * Never in merge mode, but in overwrite mode, that is, all of the text style
  223. * properties will be set. (Consider the states of normal and emphasis and
  224. * default value can be adopted, merge would make the logic too complicated
  225. * to manage.)
  226. */
  227. function setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttached) {
  228. // Consider there will be abnormal when merge hover style to normal style if given default value.
  229. opt = opt || EMPTY_OBJ;
  230. var ecModel = textStyleModel.ecModel;
  231. var globalTextStyle = ecModel && ecModel.option.textStyle;
  232. // Consider case:
  233. // {
  234. // data: [{
  235. // value: 12,
  236. // label: {
  237. // rich: {
  238. // // no 'a' here but using parent 'a'.
  239. // }
  240. // }
  241. // }],
  242. // rich: {
  243. // a: { ... }
  244. // }
  245. // }
  246. var richItemNames = getRichItemNames(textStyleModel);
  247. var richResult;
  248. if (richItemNames) {
  249. richResult = {};
  250. for (var name_1 in richItemNames) {
  251. if (richItemNames.hasOwnProperty(name_1)) {
  252. // Cascade is supported in rich.
  253. var richTextStyle = textStyleModel.getModel(['rich', name_1]);
  254. // In rich, never `disableBox`.
  255. // FIXME: consider `label: {formatter: '{a|xx}', color: 'blue', rich: {a: {}}}`,
  256. // the default color `'blue'` will not be adopted if no color declared in `rich`.
  257. // That might confuses users. So probably we should put `textStyleModel` as the
  258. // root ancestor of the `richTextStyle`. But that would be a break change.
  259. setTokenTextStyle(richResult[name_1] = {}, richTextStyle, globalTextStyle, opt, isNotNormal, isAttached, false, true);
  260. }
  261. }
  262. }
  263. if (richResult) {
  264. textStyle.rich = richResult;
  265. }
  266. var overflow = textStyleModel.get('overflow');
  267. if (overflow) {
  268. textStyle.overflow = overflow;
  269. }
  270. var margin = textStyleModel.get('minMargin');
  271. if (margin != null) {
  272. textStyle.margin = margin;
  273. }
  274. setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false);
  275. }
  276. // Consider case:
  277. // {
  278. // data: [{
  279. // value: 12,
  280. // label: {
  281. // rich: {
  282. // // no 'a' here but using parent 'a'.
  283. // }
  284. // }
  285. // }],
  286. // rich: {
  287. // a: { ... }
  288. // }
  289. // }
  290. // TODO TextStyleModel
  291. function getRichItemNames(textStyleModel) {
  292. // Use object to remove duplicated names.
  293. var richItemNameMap;
  294. while (textStyleModel && textStyleModel !== textStyleModel.ecModel) {
  295. var rich = (textStyleModel.option || EMPTY_OBJ).rich;
  296. if (rich) {
  297. richItemNameMap = richItemNameMap || {};
  298. var richKeys = keys(rich);
  299. for (var i = 0; i < richKeys.length; i++) {
  300. var richKey = richKeys[i];
  301. richItemNameMap[richKey] = 1;
  302. }
  303. }
  304. textStyleModel = textStyleModel.parentModel;
  305. }
  306. return richItemNameMap;
  307. }
  308. var TEXT_PROPS_WITH_GLOBAL = ['fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'];
  309. var TEXT_PROPS_SELF = ['align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign', 'ellipsis'];
  310. var TEXT_PROPS_BOX = ['padding', 'borderWidth', 'borderRadius', 'borderDashOffset', 'backgroundColor', 'borderColor', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'];
  311. function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, isBlock, inRich) {
  312. // In merge mode, default value should not be given.
  313. globalTextStyle = !isNotNormal && globalTextStyle || EMPTY_OBJ;
  314. var inheritColor = opt && opt.inheritColor;
  315. var fillColor = textStyleModel.getShallow('color');
  316. var strokeColor = textStyleModel.getShallow('textBorderColor');
  317. var opacity = retrieve2(textStyleModel.getShallow('opacity'), globalTextStyle.opacity);
  318. if (fillColor === 'inherit' || fillColor === 'auto') {
  319. if (process.env.NODE_ENV !== 'production') {
  320. if (fillColor === 'auto') {
  321. deprecateReplaceLog('color: \'auto\'', 'color: \'inherit\'');
  322. }
  323. }
  324. if (inheritColor) {
  325. fillColor = inheritColor;
  326. } else {
  327. fillColor = null;
  328. }
  329. }
  330. if (strokeColor === 'inherit' || strokeColor === 'auto') {
  331. if (process.env.NODE_ENV !== 'production') {
  332. if (strokeColor === 'auto') {
  333. deprecateReplaceLog('color: \'auto\'', 'color: \'inherit\'');
  334. }
  335. }
  336. if (inheritColor) {
  337. strokeColor = inheritColor;
  338. } else {
  339. strokeColor = null;
  340. }
  341. }
  342. if (!isAttached) {
  343. // Only use default global textStyle.color if text is individual.
  344. // Otherwise it will use the strategy of attached text color because text may be on a path.
  345. fillColor = fillColor || globalTextStyle.color;
  346. strokeColor = strokeColor || globalTextStyle.textBorderColor;
  347. }
  348. if (fillColor != null) {
  349. textStyle.fill = fillColor;
  350. }
  351. if (strokeColor != null) {
  352. textStyle.stroke = strokeColor;
  353. }
  354. var textBorderWidth = retrieve2(textStyleModel.getShallow('textBorderWidth'), globalTextStyle.textBorderWidth);
  355. if (textBorderWidth != null) {
  356. textStyle.lineWidth = textBorderWidth;
  357. }
  358. var textBorderType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType);
  359. if (textBorderType != null) {
  360. textStyle.lineDash = textBorderType;
  361. }
  362. var textBorderDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset);
  363. if (textBorderDashOffset != null) {
  364. textStyle.lineDashOffset = textBorderDashOffset;
  365. }
  366. if (!isNotNormal && opacity == null && !inRich) {
  367. opacity = opt && opt.defaultOpacity;
  368. }
  369. if (opacity != null) {
  370. textStyle.opacity = opacity;
  371. }
  372. // TODO
  373. if (!isNotNormal && !isAttached) {
  374. // Set default finally.
  375. if (textStyle.fill == null && opt.inheritColor) {
  376. textStyle.fill = opt.inheritColor;
  377. }
  378. }
  379. // Do not use `getFont` here, because merge should be supported, where
  380. // part of these properties may be changed in emphasis style, and the
  381. // others should remain their original value got from normal style.
  382. for (var i = 0; i < TEXT_PROPS_WITH_GLOBAL.length; i++) {
  383. var key = TEXT_PROPS_WITH_GLOBAL[i];
  384. var val = retrieve2(textStyleModel.getShallow(key), globalTextStyle[key]);
  385. if (val != null) {
  386. textStyle[key] = val;
  387. }
  388. }
  389. for (var i = 0; i < TEXT_PROPS_SELF.length; i++) {
  390. var key = TEXT_PROPS_SELF[i];
  391. var val = textStyleModel.getShallow(key);
  392. if (val != null) {
  393. textStyle[key] = val;
  394. }
  395. }
  396. if (textStyle.verticalAlign == null) {
  397. var baseline = textStyleModel.getShallow('baseline');
  398. if (baseline != null) {
  399. textStyle.verticalAlign = baseline;
  400. }
  401. }
  402. if (!isBlock || !opt.disableBox) {
  403. for (var i = 0; i < TEXT_PROPS_BOX.length; i++) {
  404. var key = TEXT_PROPS_BOX[i];
  405. var val = textStyleModel.getShallow(key);
  406. if (val != null) {
  407. textStyle[key] = val;
  408. }
  409. }
  410. var borderType = textStyleModel.getShallow('borderType');
  411. if (borderType != null) {
  412. textStyle.borderDash = borderType;
  413. }
  414. if ((textStyle.backgroundColor === 'auto' || textStyle.backgroundColor === 'inherit') && inheritColor) {
  415. if (process.env.NODE_ENV !== 'production') {
  416. if (textStyle.backgroundColor === 'auto') {
  417. deprecateReplaceLog('backgroundColor: \'auto\'', 'backgroundColor: \'inherit\'');
  418. }
  419. }
  420. textStyle.backgroundColor = inheritColor;
  421. }
  422. if ((textStyle.borderColor === 'auto' || textStyle.borderColor === 'inherit') && inheritColor) {
  423. if (process.env.NODE_ENV !== 'production') {
  424. if (textStyle.borderColor === 'auto') {
  425. deprecateReplaceLog('borderColor: \'auto\'', 'borderColor: \'inherit\'');
  426. }
  427. }
  428. textStyle.borderColor = inheritColor;
  429. }
  430. }
  431. }
  432. export function getFont(opt, ecModel) {
  433. var gTextStyleModel = ecModel && ecModel.getModel('textStyle');
  434. return trim([
  435. // FIXME in node-canvas fontWeight is before fontStyle
  436. opt.fontStyle || gTextStyleModel && gTextStyleModel.getShallow('fontStyle') || '', opt.fontWeight || gTextStyleModel && gTextStyleModel.getShallow('fontWeight') || '', (opt.fontSize || gTextStyleModel && gTextStyleModel.getShallow('fontSize') || 12) + 'px', opt.fontFamily || gTextStyleModel && gTextStyleModel.getShallow('fontFamily') || 'sans-serif'].join(' '));
  437. }
  438. export var labelInner = makeInner();
  439. export function setLabelValueAnimation(label, labelStatesModels, value, getDefaultText) {
  440. if (!label) {
  441. return;
  442. }
  443. var obj = labelInner(label);
  444. obj.prevValue = obj.value;
  445. obj.value = value;
  446. var normalLabelModel = labelStatesModels.normal;
  447. obj.valueAnimation = normalLabelModel.get('valueAnimation');
  448. if (obj.valueAnimation) {
  449. obj.precision = normalLabelModel.get('precision');
  450. obj.defaultInterpolatedText = getDefaultText;
  451. obj.statesModels = labelStatesModels;
  452. }
  453. }
  454. export function animateLabelValue(textEl, dataIndex, data, animatableModel, labelFetcher) {
  455. var labelInnerStore = labelInner(textEl);
  456. if (!labelInnerStore.valueAnimation || labelInnerStore.prevValue === labelInnerStore.value) {
  457. // Value not changed, no new label animation
  458. return;
  459. }
  460. var defaultInterpolatedText = labelInnerStore.defaultInterpolatedText;
  461. // Consider the case that being animating, do not use the `obj.value`,
  462. // Otherwise it will jump to the `obj.value` when this new animation started.
  463. var currValue = retrieve2(labelInnerStore.interpolatedValue, labelInnerStore.prevValue);
  464. var targetValue = labelInnerStore.value;
  465. function during(percent) {
  466. var interpolated = interpolateRawValues(data, labelInnerStore.precision, currValue, targetValue, percent);
  467. labelInnerStore.interpolatedValue = percent === 1 ? null : interpolated;
  468. var labelText = getLabelText({
  469. labelDataIndex: dataIndex,
  470. labelFetcher: labelFetcher,
  471. defaultText: defaultInterpolatedText ? defaultInterpolatedText(interpolated) : interpolated + ''
  472. }, labelInnerStore.statesModels, interpolated);
  473. setLabelText(textEl, labelText);
  474. }
  475. textEl.percent = 0;
  476. (labelInnerStore.prevValue == null ? initProps : updateProps)(textEl, {
  477. // percent is used to prevent animation from being aborted #15916
  478. percent: 1
  479. }, animatableModel, dataIndex, null, during);
  480. }