listComponent.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. var _layout = require("../../util/layout");
  2. var getLayoutRect = _layout.getLayoutRect;
  3. var layoutBox = _layout.box;
  4. var positionElement = _layout.positionElement;
  5. var formatUtil = require("../../util/format");
  6. var graphic = require("../../util/graphic");
  7. /**
  8. * Layout list like component.
  9. * It will box layout each items in group of component and then position the whole group in the viewport
  10. * @param {module:zrender/group/Group} group
  11. * @param {module:echarts/model/Component} componentModel
  12. * @param {module:echarts/ExtensionAPI}
  13. */
  14. function layout(group, componentModel, api) {
  15. var boxLayoutParams = componentModel.getBoxLayoutParams();
  16. var padding = componentModel.get('padding');
  17. var viewportSize = {
  18. width: api.getWidth(),
  19. height: api.getHeight()
  20. };
  21. var rect = getLayoutRect(boxLayoutParams, viewportSize, padding);
  22. layoutBox(componentModel.get('orient'), group, componentModel.get('itemGap'), rect.width, rect.height);
  23. positionElement(group, boxLayoutParams, viewportSize, padding);
  24. }
  25. function makeBackground(rect, componentModel) {
  26. var padding = formatUtil.normalizeCssArray(componentModel.get('padding'));
  27. var style = componentModel.getItemStyle(['color', 'opacity']);
  28. style.fill = componentModel.get('backgroundColor');
  29. var rect = new graphic.Rect({
  30. shape: {
  31. x: rect.x - padding[3],
  32. y: rect.y - padding[0],
  33. width: rect.width + padding[1] + padding[3],
  34. height: rect.height + padding[0] + padding[2],
  35. r: componentModel.get('borderRadius')
  36. },
  37. style: style,
  38. silent: true,
  39. z2: -1
  40. }); // FIXME
  41. // `subPixelOptimizeRect` may bring some gap between edge of viewpart
  42. // and background rect when setting like `left: 0`, `top: 0`.
  43. // graphic.subPixelOptimizeRect(rect);
  44. return rect;
  45. }
  46. exports.layout = layout;
  47. exports.makeBackground = makeBackground;