195 lines
6.1 KiB
JavaScript
195 lines
6.1 KiB
JavaScript
|
|
||
|
/*
|
||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||
|
* or more contributor license agreements. See the NOTICE file
|
||
|
* distributed with this work for additional information
|
||
|
* regarding copyright ownership. The ASF licenses this file
|
||
|
* to you under the Apache License, Version 2.0 (the
|
||
|
* "License"); you may not use this file except in compliance
|
||
|
* with the License. You may obtain a copy of the License at
|
||
|
*
|
||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||
|
*
|
||
|
* Unless required by applicable law or agreed to in writing,
|
||
|
* software distributed under the License is distributed on an
|
||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
|
* KIND, either express or implied. See the License for the
|
||
|
* specific language governing permissions and limitations
|
||
|
* under the License.
|
||
|
*/
|
||
|
|
||
|
var graphic = require("../../util/graphic");
|
||
|
|
||
|
var layout = require("../../util/layout");
|
||
|
|
||
|
var zrUtil = require("zrender/lib/core/util");
|
||
|
|
||
|
var _treeHelper = require("../helper/treeHelper");
|
||
|
|
||
|
var wrapTreePathInfo = _treeHelper.wrapTreePathInfo;
|
||
|
|
||
|
/*
|
||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||
|
* or more contributor license agreements. See the NOTICE file
|
||
|
* distributed with this work for additional information
|
||
|
* regarding copyright ownership. The ASF licenses this file
|
||
|
* to you under the Apache License, Version 2.0 (the
|
||
|
* "License"); you may not use this file except in compliance
|
||
|
* with the License. You may obtain a copy of the License at
|
||
|
*
|
||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||
|
*
|
||
|
* Unless required by applicable law or agreed to in writing,
|
||
|
* software distributed under the License is distributed on an
|
||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
|
* KIND, either express or implied. See the License for the
|
||
|
* specific language governing permissions and limitations
|
||
|
* under the License.
|
||
|
*/
|
||
|
var TEXT_PADDING = 8;
|
||
|
var ITEM_GAP = 8;
|
||
|
var ARRAY_LENGTH = 5;
|
||
|
|
||
|
function Breadcrumb(containerGroup) {
|
||
|
/**
|
||
|
* @private
|
||
|
* @type {module:zrender/container/Group}
|
||
|
*/
|
||
|
this.group = new graphic.Group();
|
||
|
containerGroup.add(this.group);
|
||
|
}
|
||
|
|
||
|
Breadcrumb.prototype = {
|
||
|
constructor: Breadcrumb,
|
||
|
render: function (seriesModel, api, targetNode, onSelect) {
|
||
|
var model = seriesModel.getModel('breadcrumb');
|
||
|
var thisGroup = this.group;
|
||
|
thisGroup.removeAll();
|
||
|
|
||
|
if (!model.get('show') || !targetNode) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var normalStyleModel = model.getModel('itemStyle'); // var emphasisStyleModel = model.getModel('emphasis.itemStyle');
|
||
|
|
||
|
var textStyleModel = normalStyleModel.getModel('textStyle');
|
||
|
var layoutParam = {
|
||
|
pos: {
|
||
|
left: model.get('left'),
|
||
|
right: model.get('right'),
|
||
|
top: model.get('top'),
|
||
|
bottom: model.get('bottom')
|
||
|
},
|
||
|
box: {
|
||
|
width: api.getWidth(),
|
||
|
height: api.getHeight()
|
||
|
},
|
||
|
emptyItemWidth: model.get('emptyItemWidth'),
|
||
|
totalWidth: 0,
|
||
|
renderList: []
|
||
|
};
|
||
|
|
||
|
this._prepare(targetNode, layoutParam, textStyleModel);
|
||
|
|
||
|
this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect);
|
||
|
|
||
|
layout.positionElement(thisGroup, layoutParam.pos, layoutParam.box);
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Prepare render list and total width
|
||
|
* @private
|
||
|
*/
|
||
|
_prepare: function (targetNode, layoutParam, textStyleModel) {
|
||
|
for (var node = targetNode; node; node = node.parentNode) {
|
||
|
var text = node.getModel().get('name');
|
||
|
var textRect = textStyleModel.getTextRect(text);
|
||
|
var itemWidth = Math.max(textRect.width + TEXT_PADDING * 2, layoutParam.emptyItemWidth);
|
||
|
layoutParam.totalWidth += itemWidth + ITEM_GAP;
|
||
|
layoutParam.renderList.push({
|
||
|
node: node,
|
||
|
text: text,
|
||
|
width: itemWidth
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* @private
|
||
|
*/
|
||
|
_renderContent: function (seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect) {
|
||
|
// Start rendering.
|
||
|
var lastX = 0;
|
||
|
var emptyItemWidth = layoutParam.emptyItemWidth;
|
||
|
var height = seriesModel.get('breadcrumb.height');
|
||
|
var availableSize = layout.getAvailableSize(layoutParam.pos, layoutParam.box);
|
||
|
var totalWidth = layoutParam.totalWidth;
|
||
|
var renderList = layoutParam.renderList;
|
||
|
|
||
|
for (var i = renderList.length - 1; i >= 0; i--) {
|
||
|
var item = renderList[i];
|
||
|
var itemNode = item.node;
|
||
|
var itemWidth = item.width;
|
||
|
var text = item.text; // Hdie text and shorten width if necessary.
|
||
|
|
||
|
if (totalWidth > availableSize.width) {
|
||
|
totalWidth -= itemWidth - emptyItemWidth;
|
||
|
itemWidth = emptyItemWidth;
|
||
|
text = null;
|
||
|
}
|
||
|
|
||
|
var el = new graphic.Polygon({
|
||
|
shape: {
|
||
|
points: makeItemPoints(lastX, 0, itemWidth, height, i === renderList.length - 1, i === 0)
|
||
|
},
|
||
|
style: zrUtil.defaults(normalStyleModel.getItemStyle(), {
|
||
|
lineJoin: 'bevel',
|
||
|
text: text,
|
||
|
textFill: textStyleModel.getTextColor(),
|
||
|
textFont: textStyleModel.getFont()
|
||
|
}),
|
||
|
z: 10,
|
||
|
onclick: zrUtil.curry(onSelect, itemNode)
|
||
|
});
|
||
|
this.group.add(el);
|
||
|
packEventData(el, seriesModel, itemNode);
|
||
|
lastX += itemWidth + ITEM_GAP;
|
||
|
}
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* @override
|
||
|
*/
|
||
|
remove: function () {
|
||
|
this.group.removeAll();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
function makeItemPoints(x, y, itemWidth, itemHeight, head, tail) {
|
||
|
var points = [[head ? x : x - ARRAY_LENGTH, y], [x + itemWidth, y], [x + itemWidth, y + itemHeight], [head ? x : x - ARRAY_LENGTH, y + itemHeight]];
|
||
|
!tail && points.splice(2, 0, [x + itemWidth + ARRAY_LENGTH, y + itemHeight / 2]);
|
||
|
!head && points.push([x, y + itemHeight / 2]);
|
||
|
return points;
|
||
|
} // Package custom mouse event.
|
||
|
|
||
|
|
||
|
function packEventData(el, seriesModel, itemNode) {
|
||
|
el.eventData = {
|
||
|
componentType: 'series',
|
||
|
componentSubType: 'treemap',
|
||
|
componentIndex: seriesModel.componentIndex,
|
||
|
seriesIndex: seriesModel.componentIndex,
|
||
|
seriesName: seriesModel.name,
|
||
|
seriesType: 'treemap',
|
||
|
selfType: 'breadcrumb',
|
||
|
// Distinguish with click event on treemap node.
|
||
|
nodeData: {
|
||
|
dataIndex: itemNode && itemNode.dataIndex,
|
||
|
name: itemNode && itemNode.name
|
||
|
},
|
||
|
treePathInfo: itemNode && wrapTreePathInfo(itemNode, seriesModel)
|
||
|
};
|
||
|
}
|
||
|
|
||
|
var _default = Breadcrumb;
|
||
|
module.exports = _default;
|