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