"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.legend = legend; var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); var _updater = require("../class/updater.class"); var _util = require("@jiaminghi/c-render/lib/plugin/util"); var _config = require("../config"); var _util2 = require("../util"); function legend(chart) { var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var legend = option.legend; if (legend) { legend = (0, _util2.deepMerge)((0, _util.deepClone)(_config.legendConfig, true), legend); legend = initLegendData(legend); legend = filterInvalidData(legend, option, chart); legend = calcLegendTextWidth(legend, chart); legend = calcLegendPosition(legend, chart); legend = [legend]; } else { legend = []; } (0, _updater.doUpdate)({ chart: chart, series: legend, key: 'legendIcon', getGraphConfig: getIconConfig }); (0, _updater.doUpdate)({ chart: chart, series: legend, key: 'legendText', getGraphConfig: getTextConfig }); } function initLegendData(legend) { var data = legend.data; legend.data = data.map(function (item) { var itemType = (0, _typeof2["default"])(item); if (itemType === 'string') { return { name: item }; } else if (itemType === 'object') { return item; } return { name: '' }; }); return legend; } function filterInvalidData(legend, option, chart) { var series = option.series; var legendStatus = chart.legendStatus; var data = legend.data.filter(function (item) { var name = item.name; var result = series.find(function (_ref) { var sn = _ref.name; return name === sn; }); if (!result) return false; if (!item.color) item.color = result.color; if (!item.icon) item.icon = result.type; return item; }); if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true); data.forEach(function (item, i) { return item.status = legendStatus[i]; }); legend.data = data; chart.legendStatus = legendStatus; return legend; } function calcLegendTextWidth(legend, chart) { var ctx = chart.render.ctx; var data = legend.data, textStyle = legend.textStyle, textUnselectedStyle = legend.textUnselectedStyle; data.forEach(function (item) { var status = item.status, name = item.name; item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle); }); return legend; } function getTextWidth(ctx, text, style) { ctx.font = getFontConfig(style); return ctx.measureText(text).width; } function getFontConfig(style) { var fontFamily = style.fontFamily, fontSize = style.fontSize; return "".concat(fontSize, "px ").concat(fontFamily); } function calcLegendPosition(legend, chart) { var orient = legend.orient; if (orient === 'vertical') { calcVerticalPosition(legend, chart); } else { calcHorizontalPosition(legend, chart); } return legend; } function calcHorizontalPosition(legend, chart) { var iconHeight = legend.iconHeight, itemGap = legend.itemGap; var lines = calcDefaultHorizontalPosition(legend, chart); var xOffsets = lines.map(function (line) { return getHorizontalXOffset(line, legend, chart); }); var yOffset = getHorizontalYOffset(legend, chart); var align = { textAlign: 'left', textBaseline: 'middle' }; lines.forEach(function (line, i) { return line.forEach(function (item) { var iconPosition = item.iconPosition, textPosition = item.textPosition; var xOffset = xOffsets[i]; var realYOffset = yOffset + i * (itemGap + iconHeight); item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset]); item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset]); item.align = align; }); }); } function calcDefaultHorizontalPosition(legend, chart) { var data = legend.data, iconWidth = legend.iconWidth; var w = chart.render.area[0]; var startIndex = 0; var lines = [[]]; data.forEach(function (item, i) { var beforeWidth = getBeforeWidth(startIndex, i, legend); var endXPos = beforeWidth + iconWidth + 5 + item.textWidth; if (endXPos >= w) { startIndex = i; beforeWidth = getBeforeWidth(startIndex, i, legend); lines.push([]); } item.iconPosition = [beforeWidth, 0]; item.textPosition = [beforeWidth + iconWidth + 5, 0]; lines.slice(-1)[0].push(item); }); return lines; } function getBeforeWidth(startIndex, currentIndex, legend) { var data = legend.data, iconWidth = legend.iconWidth, itemGap = legend.itemGap; var beforeItem = data.slice(startIndex, currentIndex); return (0, _util2.mulAdd)(beforeItem.map(function (_ref2) { var textWidth = _ref2.textWidth; return textWidth; })) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth); } function getHorizontalXOffset(data, legend, chart) { var left = legend.left, right = legend.right, iconWidth = legend.iconWidth, itemGap = legend.itemGap; var w = chart.render.area[0]; var dataNum = data.length; var allWidth = (0, _util2.mulAdd)(data.map(function (_ref3) { var textWidth = _ref3.textWidth; return textWidth; })) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap; var horizontal = [left, right].findIndex(function (pos) { return pos !== 'auto'; }); if (horizontal === -1) { return (w - allWidth) / 2; } else if (horizontal === 0) { if (typeof left === 'number') return left; return parseInt(left) / 100 * w; } else { if (typeof right !== 'number') right = parseInt(right) / 100 * w; return w - (allWidth + right); } } function getHorizontalYOffset(legend, chart) { var top = legend.top, bottom = legend.bottom, iconHeight = legend.iconHeight; var h = chart.render.area[1]; var vertical = [top, bottom].findIndex(function (pos) { return pos !== 'auto'; }); var halfIconHeight = iconHeight / 2; if (vertical === -1) { var _chart$gridArea = chart.gridArea, y = _chart$gridArea.y, height = _chart$gridArea.h; return y + height + 45 - halfIconHeight; } else if (vertical === 0) { if (typeof top === 'number') return top - halfIconHeight; return parseInt(top) / 100 * h - halfIconHeight; } else { if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h; return h - bottom - halfIconHeight; } } function mergeOffset(_ref4, _ref5) { var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2), x = _ref6[0], y = _ref6[1]; var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2), ox = _ref7[0], oy = _ref7[1]; return [x + ox, y + oy]; } function calcVerticalPosition(legend, chart) { var _getVerticalXOffset = getVerticalXOffset(legend, chart), _getVerticalXOffset2 = (0, _slicedToArray2["default"])(_getVerticalXOffset, 2), isRight = _getVerticalXOffset2[0], xOffset = _getVerticalXOffset2[1]; var yOffset = getVerticalYOffset(legend, chart); calcDefaultVerticalPosition(legend, isRight); var align = { textAlign: 'left', textBaseline: 'middle' }; legend.data.forEach(function (item) { var textPosition = item.textPosition, iconPosition = item.iconPosition; item.textPosition = mergeOffset(textPosition, [xOffset, yOffset]); item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset]); item.align = align; }); } function getVerticalXOffset(legend, chart) { var left = legend.left, right = legend.right; var w = chart.render.area[0]; var horizontal = [left, right].findIndex(function (pos) { return pos !== 'auto'; }); if (horizontal === -1) { return [true, w - 10]; } else { var offset = [left, right][horizontal]; if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w; return [Boolean(horizontal), offset]; } } function getVerticalYOffset(legend, chart) { var iconHeight = legend.iconHeight, itemGap = legend.itemGap, data = legend.data, top = legend.top, bottom = legend.bottom; var h = chart.render.area[1]; var dataNum = data.length; var allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap; var vertical = [top, bottom].findIndex(function (pos) { return pos !== 'auto'; }); if (vertical === -1) { return (h - allHeight) / 2; } else { var offset = [top, bottom][vertical]; if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h; if (vertical === 1) offset = h - offset - allHeight; return offset; } } function calcDefaultVerticalPosition(legend, isRight) { var data = legend.data, iconWidth = legend.iconWidth, iconHeight = legend.iconHeight, itemGap = legend.itemGap; var halfIconHeight = iconHeight / 2; data.forEach(function (item, i) { var textWidth = item.textWidth; var yPos = (iconHeight + itemGap) * i + halfIconHeight; var iconXPos = isRight ? 0 - iconWidth : 0; var textXpos = isRight ? iconXPos - 5 - textWidth : iconWidth + 5; item.iconPosition = [iconXPos, yPos]; item.textPosition = [textXpos, yPos]; }); } function getIconConfig(legendItem, updater) { var data = legendItem.data, selectAble = legendItem.selectAble, animationCurve = legendItem.animationCurve, animationFrame = legendItem.animationFrame, rLevel = legendItem.rLevel; return data.map(function (item, i) { return (0, _defineProperty2["default"])({ name: item.icon === 'line' ? 'lineIcon' : 'rect', index: rLevel, visible: legendItem.show, hover: selectAble, click: selectAble, animationCurve: animationCurve, animationFrame: animationFrame, shape: getIconShape(legendItem, i), style: getIconStyle(legendItem, i) }, "click", createClickCallBack(legendItem, i, updater)); }); } function getIconShape(legendItem, i) { var data = legendItem.data, iconWidth = legendItem.iconWidth, iconHeight = legendItem.iconHeight; var _data$i$iconPosition = (0, _slicedToArray2["default"])(data[i].iconPosition, 2), x = _data$i$iconPosition[0], y = _data$i$iconPosition[1]; var halfIconHeight = iconHeight / 2; return { x: x, y: y - halfIconHeight, w: iconWidth, h: iconHeight }; } function getIconStyle(legendItem, i) { var data = legendItem.data, iconStyle = legendItem.iconStyle, iconUnselectedStyle = legendItem.iconUnselectedStyle; var _data$i = data[i], status = _data$i.status, color = _data$i.color; var style = status ? iconStyle : iconUnselectedStyle; return (0, _util2.deepMerge)({ fill: color }, style); } function getTextConfig(legendItem, updater) { var data = legendItem.data, selectAble = legendItem.selectAble, animationCurve = legendItem.animationCurve, animationFrame = legendItem.animationFrame, rLevel = legendItem.rLevel; return data.map(function (foo, i) { return { name: 'text', index: rLevel, visible: legendItem.show, hover: selectAble, animationCurve: animationCurve, animationFrame: animationFrame, hoverRect: getTextHoverRect(legendItem, i), shape: getTextShape(legendItem, i), style: getTextStyle(legendItem, i), click: createClickCallBack(legendItem, i, updater) }; }); } function getTextShape(legendItem, i) { var _legendItem$data$i = legendItem.data[i], textPosition = _legendItem$data$i.textPosition, name = _legendItem$data$i.name; return { content: name, position: textPosition }; } function getTextStyle(legendItem, i) { var textStyle = legendItem.textStyle, textUnselectedStyle = legendItem.textUnselectedStyle; var _legendItem$data$i2 = legendItem.data[i], status = _legendItem$data$i2.status, align = _legendItem$data$i2.align; var style = status ? textStyle : textUnselectedStyle; return (0, _util2.deepMerge)((0, _util.deepClone)(style, true), align); } function getTextHoverRect(legendItem, i) { var textStyle = legendItem.textStyle, textUnselectedStyle = legendItem.textUnselectedStyle; var _legendItem$data$i3 = legendItem.data[i], status = _legendItem$data$i3.status, _legendItem$data$i3$t = (0, _slicedToArray2["default"])(_legendItem$data$i3.textPosition, 2), x = _legendItem$data$i3$t[0], y = _legendItem$data$i3$t[1], textWidth = _legendItem$data$i3.textWidth; var style = status ? textStyle : textUnselectedStyle; var fontSize = style.fontSize; return [x, y - fontSize / 2, textWidth, fontSize]; } function createClickCallBack(legendItem, index, updater) { var name = legendItem.data[index].name; return function () { var _updater$chart = updater.chart, legendStatus = _updater$chart.legendStatus, option = _updater$chart.option; var status = !legendStatus[index]; var change = option.series.find(function (_ref9) { var sn = _ref9.name; return sn === name; }); change.show = status; legendStatus[index] = status; updater.chart.setOption(option); }; }