layout.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  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. // Layout helpers for each component positioning
  41. import * as zrUtil from 'zrender/lib/core/util.js';
  42. import BoundingRect from 'zrender/lib/core/BoundingRect.js';
  43. import { parsePercent } from './number.js';
  44. import * as formatUtil from './format.js';
  45. var each = zrUtil.each;
  46. /**
  47. * @public
  48. */
  49. export var LOCATION_PARAMS = ['left', 'right', 'top', 'bottom', 'width', 'height'];
  50. /**
  51. * @public
  52. */
  53. export var HV_NAMES = [['width', 'left', 'right'], ['height', 'top', 'bottom']];
  54. function boxLayout(orient, group, gap, maxWidth, maxHeight) {
  55. var x = 0;
  56. var y = 0;
  57. if (maxWidth == null) {
  58. maxWidth = Infinity;
  59. }
  60. if (maxHeight == null) {
  61. maxHeight = Infinity;
  62. }
  63. var currentLineMaxSize = 0;
  64. group.eachChild(function (child, idx) {
  65. var rect = child.getBoundingRect();
  66. var nextChild = group.childAt(idx + 1);
  67. var nextChildRect = nextChild && nextChild.getBoundingRect();
  68. var nextX;
  69. var nextY;
  70. if (orient === 'horizontal') {
  71. var moveX = rect.width + (nextChildRect ? -nextChildRect.x + rect.x : 0);
  72. nextX = x + moveX;
  73. // Wrap when width exceeds maxWidth or meet a `newline` group
  74. // FIXME compare before adding gap?
  75. if (nextX > maxWidth || child.newline) {
  76. x = 0;
  77. nextX = moveX;
  78. y += currentLineMaxSize + gap;
  79. currentLineMaxSize = rect.height;
  80. } else {
  81. // FIXME: consider rect.y is not `0`?
  82. currentLineMaxSize = Math.max(currentLineMaxSize, rect.height);
  83. }
  84. } else {
  85. var moveY = rect.height + (nextChildRect ? -nextChildRect.y + rect.y : 0);
  86. nextY = y + moveY;
  87. // Wrap when width exceeds maxHeight or meet a `newline` group
  88. if (nextY > maxHeight || child.newline) {
  89. x += currentLineMaxSize + gap;
  90. y = 0;
  91. nextY = moveY;
  92. currentLineMaxSize = rect.width;
  93. } else {
  94. currentLineMaxSize = Math.max(currentLineMaxSize, rect.width);
  95. }
  96. }
  97. if (child.newline) {
  98. return;
  99. }
  100. child.x = x;
  101. child.y = y;
  102. child.markRedraw();
  103. orient === 'horizontal' ? x = nextX + gap : y = nextY + gap;
  104. });
  105. }
  106. /**
  107. * VBox or HBox layouting
  108. * @param {string} orient
  109. * @param {module:zrender/graphic/Group} group
  110. * @param {number} gap
  111. * @param {number} [width=Infinity]
  112. * @param {number} [height=Infinity]
  113. */
  114. export var box = boxLayout;
  115. /**
  116. * VBox layouting
  117. * @param {module:zrender/graphic/Group} group
  118. * @param {number} gap
  119. * @param {number} [width=Infinity]
  120. * @param {number} [height=Infinity]
  121. */
  122. export var vbox = zrUtil.curry(boxLayout, 'vertical');
  123. /**
  124. * HBox layouting
  125. * @param {module:zrender/graphic/Group} group
  126. * @param {number} gap
  127. * @param {number} [width=Infinity]
  128. * @param {number} [height=Infinity]
  129. */
  130. export var hbox = zrUtil.curry(boxLayout, 'horizontal');
  131. /**
  132. * If x or x2 is not specified or 'center' 'left' 'right',
  133. * the width would be as long as possible.
  134. * If y or y2 is not specified or 'middle' 'top' 'bottom',
  135. * the height would be as long as possible.
  136. */
  137. export function getAvailableSize(positionInfo, containerRect, margin) {
  138. var containerWidth = containerRect.width;
  139. var containerHeight = containerRect.height;
  140. var x = parsePercent(positionInfo.left, containerWidth);
  141. var y = parsePercent(positionInfo.top, containerHeight);
  142. var x2 = parsePercent(positionInfo.right, containerWidth);
  143. var y2 = parsePercent(positionInfo.bottom, containerHeight);
  144. (isNaN(x) || isNaN(parseFloat(positionInfo.left))) && (x = 0);
  145. (isNaN(x2) || isNaN(parseFloat(positionInfo.right))) && (x2 = containerWidth);
  146. (isNaN(y) || isNaN(parseFloat(positionInfo.top))) && (y = 0);
  147. (isNaN(y2) || isNaN(parseFloat(positionInfo.bottom))) && (y2 = containerHeight);
  148. margin = formatUtil.normalizeCssArray(margin || 0);
  149. return {
  150. width: Math.max(x2 - x - margin[1] - margin[3], 0),
  151. height: Math.max(y2 - y - margin[0] - margin[2], 0)
  152. };
  153. }
  154. /**
  155. * Parse position info.
  156. */
  157. export function getLayoutRect(positionInfo, containerRect, margin) {
  158. margin = formatUtil.normalizeCssArray(margin || 0);
  159. var containerWidth = containerRect.width;
  160. var containerHeight = containerRect.height;
  161. var left = parsePercent(positionInfo.left, containerWidth);
  162. var top = parsePercent(positionInfo.top, containerHeight);
  163. var right = parsePercent(positionInfo.right, containerWidth);
  164. var bottom = parsePercent(positionInfo.bottom, containerHeight);
  165. var width = parsePercent(positionInfo.width, containerWidth);
  166. var height = parsePercent(positionInfo.height, containerHeight);
  167. var verticalMargin = margin[2] + margin[0];
  168. var horizontalMargin = margin[1] + margin[3];
  169. var aspect = positionInfo.aspect;
  170. // If width is not specified, calculate width from left and right
  171. if (isNaN(width)) {
  172. width = containerWidth - right - horizontalMargin - left;
  173. }
  174. if (isNaN(height)) {
  175. height = containerHeight - bottom - verticalMargin - top;
  176. }
  177. if (aspect != null) {
  178. // If width and height are not given
  179. // 1. Graph should not exceeds the container
  180. // 2. Aspect must be keeped
  181. // 3. Graph should take the space as more as possible
  182. // FIXME
  183. // Margin is not considered, because there is no case that both
  184. // using margin and aspect so far.
  185. if (isNaN(width) && isNaN(height)) {
  186. if (aspect > containerWidth / containerHeight) {
  187. width = containerWidth * 0.8;
  188. } else {
  189. height = containerHeight * 0.8;
  190. }
  191. }
  192. // Calculate width or height with given aspect
  193. if (isNaN(width)) {
  194. width = aspect * height;
  195. }
  196. if (isNaN(height)) {
  197. height = width / aspect;
  198. }
  199. }
  200. // If left is not specified, calculate left from right and width
  201. if (isNaN(left)) {
  202. left = containerWidth - right - width - horizontalMargin;
  203. }
  204. if (isNaN(top)) {
  205. top = containerHeight - bottom - height - verticalMargin;
  206. }
  207. // Align left and top
  208. switch (positionInfo.left || positionInfo.right) {
  209. case 'center':
  210. left = containerWidth / 2 - width / 2 - margin[3];
  211. break;
  212. case 'right':
  213. left = containerWidth - width - horizontalMargin;
  214. break;
  215. }
  216. switch (positionInfo.top || positionInfo.bottom) {
  217. case 'middle':
  218. case 'center':
  219. top = containerHeight / 2 - height / 2 - margin[0];
  220. break;
  221. case 'bottom':
  222. top = containerHeight - height - verticalMargin;
  223. break;
  224. }
  225. // If something is wrong and left, top, width, height are calculated as NaN
  226. left = left || 0;
  227. top = top || 0;
  228. if (isNaN(width)) {
  229. // Width may be NaN if only one value is given except width
  230. width = containerWidth - horizontalMargin - left - (right || 0);
  231. }
  232. if (isNaN(height)) {
  233. // Height may be NaN if only one value is given except height
  234. height = containerHeight - verticalMargin - top - (bottom || 0);
  235. }
  236. var rect = new BoundingRect(left + margin[3], top + margin[0], width, height);
  237. rect.margin = margin;
  238. return rect;
  239. }
  240. /**
  241. * Position a zr element in viewport
  242. * Group position is specified by either
  243. * {left, top}, {right, bottom}
  244. * If all properties exists, right and bottom will be igonred.
  245. *
  246. * Logic:
  247. * 1. Scale (against origin point in parent coord)
  248. * 2. Rotate (against origin point in parent coord)
  249. * 3. Translate (with el.position by this method)
  250. * So this method only fixes the last step 'Translate', which does not affect
  251. * scaling and rotating.
  252. *
  253. * If be called repeatedly with the same input el, the same result will be gotten.
  254. *
  255. * Return true if the layout happened.
  256. *
  257. * @param el Should have `getBoundingRect` method.
  258. * @param positionInfo
  259. * @param positionInfo.left
  260. * @param positionInfo.top
  261. * @param positionInfo.right
  262. * @param positionInfo.bottom
  263. * @param positionInfo.width Only for opt.boundingModel: 'raw'
  264. * @param positionInfo.height Only for opt.boundingModel: 'raw'
  265. * @param containerRect
  266. * @param margin
  267. * @param opt
  268. * @param opt.hv Only horizontal or only vertical. Default to be [1, 1]
  269. * @param opt.boundingMode
  270. * Specify how to calculate boundingRect when locating.
  271. * 'all': Position the boundingRect that is transformed and uioned
  272. * both itself and its descendants.
  273. * This mode simplies confine the elements in the bounding
  274. * of their container (e.g., using 'right: 0').
  275. * 'raw': Position the boundingRect that is not transformed and only itself.
  276. * This mode is useful when you want a element can overflow its
  277. * container. (Consider a rotated circle needs to be located in a corner.)
  278. * In this mode positionInfo.width/height can only be number.
  279. */
  280. export function positionElement(el, positionInfo, containerRect, margin, opt, out) {
  281. var h = !opt || !opt.hv || opt.hv[0];
  282. var v = !opt || !opt.hv || opt.hv[1];
  283. var boundingMode = opt && opt.boundingMode || 'all';
  284. out = out || el;
  285. out.x = el.x;
  286. out.y = el.y;
  287. if (!h && !v) {
  288. return false;
  289. }
  290. var rect;
  291. if (boundingMode === 'raw') {
  292. rect = el.type === 'group' ? new BoundingRect(0, 0, +positionInfo.width || 0, +positionInfo.height || 0) : el.getBoundingRect();
  293. } else {
  294. rect = el.getBoundingRect();
  295. if (el.needLocalTransform()) {
  296. var transform = el.getLocalTransform();
  297. // Notice: raw rect may be inner object of el,
  298. // which should not be modified.
  299. rect = rect.clone();
  300. rect.applyTransform(transform);
  301. }
  302. }
  303. // The real width and height can not be specified but calculated by the given el.
  304. var layoutRect = getLayoutRect(zrUtil.defaults({
  305. width: rect.width,
  306. height: rect.height
  307. }, positionInfo), containerRect, margin);
  308. // Because 'tranlate' is the last step in transform
  309. // (see zrender/core/Transformable#getLocalTransform),
  310. // we can just only modify el.position to get final result.
  311. var dx = h ? layoutRect.x - rect.x : 0;
  312. var dy = v ? layoutRect.y - rect.y : 0;
  313. if (boundingMode === 'raw') {
  314. out.x = dx;
  315. out.y = dy;
  316. } else {
  317. out.x += dx;
  318. out.y += dy;
  319. }
  320. if (out === el) {
  321. el.markRedraw();
  322. }
  323. return true;
  324. }
  325. /**
  326. * @param option Contains some of the properties in HV_NAMES.
  327. * @param hvIdx 0: horizontal; 1: vertical.
  328. */
  329. export function sizeCalculable(option, hvIdx) {
  330. return option[HV_NAMES[hvIdx][0]] != null || option[HV_NAMES[hvIdx][1]] != null && option[HV_NAMES[hvIdx][2]] != null;
  331. }
  332. export function fetchLayoutMode(ins) {
  333. var layoutMode = ins.layoutMode || ins.constructor.layoutMode;
  334. return zrUtil.isObject(layoutMode) ? layoutMode : layoutMode ? {
  335. type: layoutMode
  336. } : null;
  337. }
  338. /**
  339. * Consider Case:
  340. * When default option has {left: 0, width: 100}, and we set {right: 0}
  341. * through setOption or media query, using normal zrUtil.merge will cause
  342. * {right: 0} does not take effect.
  343. *
  344. * @example
  345. * ComponentModel.extend({
  346. * init: function () {
  347. * ...
  348. * let inputPositionParams = layout.getLayoutParams(option);
  349. * this.mergeOption(inputPositionParams);
  350. * },
  351. * mergeOption: function (newOption) {
  352. * newOption && zrUtil.merge(thisOption, newOption, true);
  353. * layout.mergeLayoutParam(thisOption, newOption);
  354. * }
  355. * });
  356. *
  357. * @param targetOption
  358. * @param newOption
  359. * @param opt
  360. */
  361. export function mergeLayoutParam(targetOption, newOption, opt) {
  362. var ignoreSize = opt && opt.ignoreSize;
  363. !zrUtil.isArray(ignoreSize) && (ignoreSize = [ignoreSize, ignoreSize]);
  364. var hResult = merge(HV_NAMES[0], 0);
  365. var vResult = merge(HV_NAMES[1], 1);
  366. copy(HV_NAMES[0], targetOption, hResult);
  367. copy(HV_NAMES[1], targetOption, vResult);
  368. function merge(names, hvIdx) {
  369. var newParams = {};
  370. var newValueCount = 0;
  371. var merged = {};
  372. var mergedValueCount = 0;
  373. var enoughParamNumber = 2;
  374. each(names, function (name) {
  375. merged[name] = targetOption[name];
  376. });
  377. each(names, function (name) {
  378. // Consider case: newOption.width is null, which is
  379. // set by user for removing width setting.
  380. hasProp(newOption, name) && (newParams[name] = merged[name] = newOption[name]);
  381. hasValue(newParams, name) && newValueCount++;
  382. hasValue(merged, name) && mergedValueCount++;
  383. });
  384. if (ignoreSize[hvIdx]) {
  385. // Only one of left/right is premitted to exist.
  386. if (hasValue(newOption, names[1])) {
  387. merged[names[2]] = null;
  388. } else if (hasValue(newOption, names[2])) {
  389. merged[names[1]] = null;
  390. }
  391. return merged;
  392. }
  393. // Case: newOption: {width: ..., right: ...},
  394. // or targetOption: {right: ...} and newOption: {width: ...},
  395. // There is no conflict when merged only has params count
  396. // little than enoughParamNumber.
  397. if (mergedValueCount === enoughParamNumber || !newValueCount) {
  398. return merged;
  399. }
  400. // Case: newOption: {width: ..., right: ...},
  401. // Than we can make sure user only want those two, and ignore
  402. // all origin params in targetOption.
  403. else if (newValueCount >= enoughParamNumber) {
  404. return newParams;
  405. } else {
  406. // Chose another param from targetOption by priority.
  407. for (var i = 0; i < names.length; i++) {
  408. var name_1 = names[i];
  409. if (!hasProp(newParams, name_1) && hasProp(targetOption, name_1)) {
  410. newParams[name_1] = targetOption[name_1];
  411. break;
  412. }
  413. }
  414. return newParams;
  415. }
  416. }
  417. function hasProp(obj, name) {
  418. return obj.hasOwnProperty(name);
  419. }
  420. function hasValue(obj, name) {
  421. return obj[name] != null && obj[name] !== 'auto';
  422. }
  423. function copy(names, target, source) {
  424. each(names, function (name) {
  425. target[name] = source[name];
  426. });
  427. }
  428. }
  429. /**
  430. * Retrieve 'left', 'right', 'top', 'bottom', 'width', 'height' from object.
  431. */
  432. export function getLayoutParams(source) {
  433. return copyLayoutParams({}, source);
  434. }
  435. /**
  436. * Retrieve 'left', 'right', 'top', 'bottom', 'width', 'height' from object.
  437. * @param {Object} source
  438. * @return {Object} Result contains those props.
  439. */
  440. export function copyLayoutParams(target, source) {
  441. source && target && each(LOCATION_PARAMS, function (name) {
  442. source.hasOwnProperty(name) && (target[name] = source[name]);
  443. });
  444. return target;
  445. }