"use strict"; var Util = require('../util/common'); var _require = require('../graphic/index'), Group = _require.Group; var Marker = require('./marker'); var MARKER_RADIUS = 3; var List = /*#__PURE__*/function () { var _proto = List.prototype; _proto.getDefaultCfg = function getDefaultCfg() { return { showTitle: false, /** * title string * @type {?String} */ title: null, /** * items array * @type {?Array} */ items: null, /** * offset between title and items * @type {Number} */ titleGap: 12, /** * offset between each item * @type {Number} */ itemGap: 10, /** * the offset between each item in vertical direaction * @type {Number} */ itemMarginBottom: 12, /** * the formatter for item text * @type {[type]} */ itemFormatter: null, itemWidth: null, /** * offset between marker and text * @type {Number} */ wordSpace: 6, x: 0, y: 0, layout: 'horizontal', /** * the join string of `name` and `value` * @type {String} */ joinString: ': ' }; }; function List(cfg) { Util.deepMix(this, this.getDefaultCfg(), cfg); this._init(); this._renderTitle(); this._renderItems(); } _proto._init = function _init() { var container = new Group({ zIndex: this.zIndex || 0 }); this.container = container; var wrapper = container.addGroup(); this.wrapper = wrapper; var itemsGroup = wrapper.addGroup({ className: 'itemsGroup' }); this.itemsGroup = itemsGroup; if (this.parent) { this.parent.add(container); } }; _proto._renderTitle = function _renderTitle(title) { title = title || this.title; var titleShape = this.titleShape; var titleHeight = 0; if (this.showTitle && title) { if (titleShape && !titleShape.get('destroyed')) { titleShape.attr('text', title); } else { var wrapper = this.wrapper, titleStyle = this.titleStyle; titleShape = wrapper.addShape('text', { className: 'title', attrs: Util.mix({ x: 0, y: 0, text: title }, titleStyle) }); this.titleShape = titleShape; } titleHeight = titleShape.getBBox().height + this.titleGap; } this._titleHeight = titleHeight; }; _proto._renderItems = function _renderItems(items) { var self = this; items = items || self.items; if (!items) { return; } if (self.reversed) { items.reverse(); } Util.each(items, function (item, index) { self._addItem(item, index); }); if (items.length > 1) { this._adjustItems(); } this._renderBackground(); }; _proto._renderBackground = function _renderBackground() { var background = this.background; if (background) { var container = this.container; var wrapper = this.wrapper; var _wrapper$getBBox = wrapper.getBBox(), minX = _wrapper$getBBox.minX, minY = _wrapper$getBBox.minY, width = _wrapper$getBBox.width, height = _wrapper$getBBox.height; var padding = background.padding || [0, 0, 0, 0]; padding = Util.parsePadding(padding); var attrs = Util.mix({ x: minX - padding[3], y: minY - padding[0], width: width + padding[1] + padding[3], height: height + padding[0] + padding[2] }, background); var backShape = this.backShape; if (backShape) { backShape.attr(attrs); } else { backShape = container.addShape('Rect', { zIndex: -1, attrs: attrs }); } this.backShape = backShape; container.sort(); } }; _proto._addItem = function _addItem(item) { var itemsGroup = this.itemsGroup; var itemGroup = itemsGroup.addGroup({ name: item.name, value: item.value, dataValue: item.dataValue, checked: item.checked }); var unCheckStyle = this.unCheckStyle, unCheckColor = this.unCheckColor, nameStyle = this.nameStyle, valueStyle = this.valueStyle, wordSpace = this.wordSpace; var marker = item.marker, value = item.value; var startX = 0; if (unCheckColor) { unCheckStyle.fill = unCheckColor; } if (marker) { var radius = marker.radius || MARKER_RADIUS; var markerAttrs = Util.mix({ x: radius, y: this._titleHeight }, marker); if (item.checked === false) { Util.mix(markerAttrs, unCheckStyle); } var markerShape = new Marker({ className: 'item-marker', attrs: markerAttrs }); itemGroup.add(markerShape); startX += markerShape.getBBox().width + wordSpace; } var nameText; var name = item.name; if (name) { var joinString = this.joinString || ''; name = value ? name + joinString : name; nameText = itemGroup.addShape('text', { className: 'name', attrs: Util.mix({ x: startX, y: this._titleHeight, text: this._formatItemValue(name) }, nameStyle, item.checked === false ? unCheckStyle : null) }); } if (value) { var valueX = startX; if (nameText) { valueX += nameText.getBBox().width; } itemGroup.addShape('text', { className: 'value', attrs: Util.mix({ x: valueX, y: this._titleHeight, text: value }, valueStyle, item.checked === false ? unCheckStyle : null) }); } return itemGroup; }; _proto._formatItemValue = function _formatItemValue(value) { var formatter = this.itemFormatter; if (formatter) { value = formatter.call(this, value); } return value; }; _proto._getMaxItemWidth = function _getMaxItemWidth() { var width; var itemWidth = this.itemWidth; if (Util.isNumber(itemWidth) || Util.isNil(itemWidth)) { return itemWidth; } if (itemWidth === 'auto') { var itemsGroup = this.itemsGroup; var children = itemsGroup.get('children'); var count = children.length; var maxItemWidth = 0; for (var i = 0; i < count; i++) { var _children$i$getBBox = children[i].getBBox(), _width = _children$i$getBBox.width; maxItemWidth = Math.max(maxItemWidth, _width); } var maxLength = this.maxLength; var itemGap = this.itemGap; var twoAvgWidth = (maxLength - itemGap) / 2; var threeAvgWidth = (maxLength - itemGap * 2) / 3; if (count === 2) { width = Math.max(maxItemWidth, twoAvgWidth); } else { // 1. max <= 3Avg, 3Avg // 2. 3Avg < max && max < 2avg, 2avg // 3. max > 2avg, max, one column if (maxItemWidth <= threeAvgWidth) { width = threeAvgWidth; } else if (maxItemWidth <= twoAvgWidth) { width = twoAvgWidth; } else { width = maxItemWidth; } } return width; } }; _proto._adjustHorizontal = function _adjustHorizontal() { var maxLength = this.maxLength, itemsGroup = this.itemsGroup; var children = itemsGroup.get('children'); var itemGap = this.itemGap, itemMarginBottom = this.itemMarginBottom; var titleHeight = this._titleHeight; var row = 0; var rowWidth = 0; var width; var height; var itemWidth = this._getMaxItemWidth(); var legendHitBoxes = []; for (var i = 0, len = children.length; i < len; i++) { var child = children[i]; var box = child.getBBox(); var childHeight = box.height; var childWidth = box.width; width = itemWidth || childWidth; height = childHeight + itemMarginBottom; if (width - (maxLength - rowWidth) > 0.0001) { row++; rowWidth = 0; } child.moveTo(rowWidth, row * height); legendHitBoxes.push({ x: rowWidth, y: row * height + titleHeight - childHeight / 2, width: childWidth * 1.375, height: childHeight * 1.375 }); rowWidth += width + itemGap; } this.legendHitBoxes = legendHitBoxes; return; }; _proto._adjustVertical = function _adjustVertical() { var maxLength = this.maxLength, itemsGroup = this.itemsGroup; var itemGap = this.itemGap, itemMarginBottom = this.itemMarginBottom, itemWidth = this.itemWidth; var titleHeight = this._titleHeight; var children = itemsGroup.get('children'); var colHeight = 0; var width; var height; var maxItemWidth = 0; var totalWidth = 0; var legendHitBoxes = []; for (var i = 0, length = children.length; i < length; i++) { var child = children[i]; var bbox = child.getBBox(); width = bbox.width; height = bbox.height; if (Util.isNumber(itemWidth)) { maxItemWidth = itemWidth + itemGap; } else if (width > maxItemWidth) { maxItemWidth = width + itemGap; } if (maxLength - colHeight < height) { colHeight = 0; totalWidth += maxItemWidth; child.moveTo(totalWidth, 0); legendHitBoxes.push({ x: totalWidth, y: titleHeight - height / 2, width: width * 1.375, height: height * 1.375 }); } else { child.moveTo(totalWidth, colHeight); legendHitBoxes.push({ x: totalWidth, y: colHeight - height / 2 + titleHeight, width: width * 1.375, height: height * 1.375 }); } colHeight += height + itemMarginBottom; } this.legendHitBoxes = legendHitBoxes; return; }; _proto._adjustItems = function _adjustItems() { var layout = this.layout; if (layout === 'horizontal') { this._adjustHorizontal(); } else { this._adjustVertical(); } }; _proto.moveTo = function moveTo(x, y) { this.x = x; this.y = y; var container = this.container; container && container.moveTo(x, y); return this; }; _proto.setItems = function setItems(items) { this.clearItems(); this._renderItems(items); }; _proto.setTitle = function setTitle(title) { this._renderTitle(title); }; _proto.clearItems = function clearItems() { var itemsGroup = this.itemsGroup; itemsGroup.clear(); }; _proto.getWidth = function getWidth() { var container = this.container; var bbox = container.getBBox(); return bbox.width; }; _proto.getHeight = function getHeight() { var container = this.container; var bbox = container.getBBox(); return bbox.height; }; _proto.show = function show() { var container = this.container; container.show(); }; _proto.hide = function hide() { var container = this.container; container.hide(); }; _proto.clear = function clear() { var container = this.container; container.clear(); container.remove(true); }; return List; }(); module.exports = List;