0a5f6a8047
- Go backend (server/)
- Frontend (web/, server/static/)
- Database and deployment files
- Scripts and docs
Co-Authored-By: 狸花猫/Claude-Qwen3.6-Plus 🐾
846 lines
29 KiB
JavaScript
846 lines
29 KiB
JavaScript
"use strict";
|
||
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
exports.default = void 0;
|
||
var _domUtil = require("@antv/dom-util");
|
||
var _base = _interopRequireDefault(require("../base"));
|
||
var _util = require("@antv/util");
|
||
var _g6Core = require("@antv/g6-core");
|
||
var _gCanvas = require("@antv/g-canvas");
|
||
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
||
var __extends = void 0 && (void 0).__extends || function () {
|
||
var _extendStatics = function extendStatics(d, b) {
|
||
_extendStatics = Object.setPrototypeOf || {
|
||
__proto__: []
|
||
} instanceof Array && function (d, b) {
|
||
d.__proto__ = b;
|
||
} || function (d, b) {
|
||
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
|
||
};
|
||
return _extendStatics(d, b);
|
||
};
|
||
return function (d, b) {
|
||
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||
_extendStatics(d, b);
|
||
function __() {
|
||
this.constructor = d;
|
||
}
|
||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
};
|
||
}();
|
||
var __assign = void 0 && (void 0).__assign || function () {
|
||
__assign = Object.assign || function (t) {
|
||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||
s = arguments[i];
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||
}
|
||
return t;
|
||
};
|
||
return __assign.apply(this, arguments);
|
||
};
|
||
var ALLOW_EVENTS = ['click', 'mouseenter'];
|
||
var Legend = /** @class */function (_super) {
|
||
__extends(Legend, _super);
|
||
function Legend(config) {
|
||
return _super.call(this, config) || this;
|
||
}
|
||
Legend.prototype.getDefaultCfgs = function () {
|
||
return {
|
||
data: {},
|
||
position: 'top',
|
||
padding: 8,
|
||
margin: 8,
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
layout: 'horizontal',
|
||
flipPage: false,
|
||
containerStyle: {},
|
||
align: undefined,
|
||
horiSep: 8,
|
||
vertiSep: 8,
|
||
filter: {
|
||
enable: false,
|
||
trigger: 'click'
|
||
}
|
||
};
|
||
};
|
||
Legend.prototype.init = function () {
|
||
this.formatArray('padding');
|
||
this.formatArray('margin');
|
||
var filter = this.get('filter') || {};
|
||
var multiple = filter.multiple;
|
||
if (multiple && filter.trigger === 'mouseenter') this.set('multiple', false);
|
||
var align = this.get('align');
|
||
if (!align) {
|
||
var positions = this.get('position').split('-');
|
||
if (positions.includes('left')) align = 'left';
|
||
if (positions.includes('right')) align = 'right';else align = 'center';
|
||
this.set('align', align);
|
||
}
|
||
var graph = this.get('graph');
|
||
var graphContainer = graph.get('container');
|
||
var container = (0, _domUtil.createDom)("<div class='g6-legend-container' style=\"position: absolute;\"></div>");
|
||
graphContainer.appendChild(container);
|
||
this.set('container', container);
|
||
var size = this.render();
|
||
(0, _domUtil.modifyCSS)(container, this.getContainerPos(size));
|
||
this.bindEvents();
|
||
};
|
||
Legend.prototype.getContainerPos = function (size) {
|
||
if (size === void 0) {
|
||
size = [0, 0];
|
||
}
|
||
var self = this;
|
||
var graph = self.get('graph');
|
||
var offsetX = this.get('offsetX');
|
||
var offsetY = this.get('offsetY');
|
||
var margin = this.get('margin');
|
||
var positions = this.get('position').split('-');
|
||
var posIdxMap = {
|
||
'top': 0,
|
||
'right': 1,
|
||
'bottom': 2,
|
||
'left': 3
|
||
};
|
||
var x = 0,
|
||
y = 0;
|
||
var containerCSS = {
|
||
left: (graph.getWidth() - size[0]) / 2 + x,
|
||
top: (graph.getHeight() - size[1]) / 2 + y
|
||
};
|
||
positions.forEach(function (pos) {
|
||
var marginValue = margin[posIdxMap[pos]];
|
||
var key = pos;
|
||
switch (pos) {
|
||
case 'top':
|
||
marginValue += y;
|
||
break;
|
||
case 'left':
|
||
marginValue += x;
|
||
break;
|
||
case 'bottom':
|
||
marginValue = graph.getHeight() - size[1] - marginValue + y;
|
||
key = 'top';
|
||
break;
|
||
default:
|
||
marginValue = graph.getWidth() - size[0] - marginValue + x;
|
||
key = 'left';
|
||
break;
|
||
}
|
||
containerCSS[key] = marginValue;
|
||
});
|
||
containerCSS.top += offsetY + graph.getContainer().offsetTop;
|
||
containerCSS.left += offsetX + graph.getContainer().offsetLeft;
|
||
Object.keys(containerCSS).forEach(function (key) {
|
||
containerCSS[key] = "".concat(containerCSS[key], "px");
|
||
});
|
||
return containerCSS;
|
||
};
|
||
// class-methods-use-this
|
||
Legend.prototype.bindEvents = function () {
|
||
var self = this;
|
||
var filter = self.get('filter');
|
||
if (!filter || !filter.enable) return;
|
||
var trigger = filter.trigger || 'click';
|
||
if (!ALLOW_EVENTS.includes(trigger)) {
|
||
console.warn('Trigger for legend filterling must be \'click\' or \'mouseenter\', \'click\' will take effect by default.');
|
||
trigger = 'click';
|
||
}
|
||
var lc = self.get('legendCanvas');
|
||
if (trigger === 'mouseenter') {
|
||
lc.on('node-container:mouseenter', function (e) {
|
||
return self.filterData(e);
|
||
});
|
||
lc.on('node-container:mouseleave', function (e) {
|
||
self.clearFilter();
|
||
self.clearActiveLegend();
|
||
});
|
||
} else {
|
||
lc.on('node-container:click', function (e) {
|
||
return self.filterData(e);
|
||
});
|
||
lc.on('click', function (e) {
|
||
if (e.target && e.target.isCanvas && e.target.isCanvas()) {
|
||
self.clearFilter();
|
||
self.clearActiveLegend();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
/**
|
||
* 更新 legend 数据，开放给用户控制
|
||
* @param param
|
||
*/
|
||
Legend.prototype.changeData = function (data) {
|
||
this.set('data', data);
|
||
var size = this.render();
|
||
(0, _domUtil.modifyCSS)(this.get('container'), this.getContainerPos(size));
|
||
};
|
||
Legend.prototype.activateLegend = function (shape) {
|
||
var filter = this.get('filter');
|
||
var multiple = filter === null || filter === void 0 ? void 0 : filter.multiple;
|
||
if (!multiple) this.clearActiveLegend();
|
||
var shapeGroup = shape.get('parent');
|
||
// 若被高亮元素已经处于 active 状态，则取消它的 active 状态
|
||
// 并根据目前是否有其他 active 状态的元素决定是否要设置为 inactive 状态
|
||
if (shapeGroup.get('active')) {
|
||
shapeGroup.set('active', false);
|
||
if (this.findLegendItemsByState('active').length) shapeGroup.set('inactive', true);
|
||
} else {
|
||
shapeGroup.set('inactive', false);
|
||
shapeGroup.set('active', true);
|
||
}
|
||
// 当目前有元素为 active 状态时，将非 active 的元素设置为 inactive
|
||
if (this.findLegendItemsByState('active').length) {
|
||
this.findLegendItemsByState('active', 'all', false).forEach(function (subGroup) {
|
||
subGroup.set('inactive', true);
|
||
});
|
||
} else {
|
||
this.clearActiveLegend();
|
||
}
|
||
// 设置样式
|
||
var stateStyles = (filter === null || filter === void 0 ? void 0 : filter.legendStateStyles) || {};
|
||
var legendInactive = (stateStyles === null || stateStyles === void 0 ? void 0 : stateStyles.inactive) || {
|
||
opacity: 0.5,
|
||
'text-shape': {
|
||
opacity: 0.5
|
||
}
|
||
};
|
||
var legendTextInactive = legendInactive['text-shape'] || {};
|
||
this.findLegendItemsByState('inactive').forEach(function (subGroup) {
|
||
var _a = subGroup.get('children'),
|
||
keyShape = _a[0],
|
||
text = _a[1];
|
||
keyShape.attr(__assign(__assign({}, keyShape.get('oriAttrs')), legendInactive));
|
||
text.attr(__assign(__assign({}, text.get('oriAttrs')), legendTextInactive));
|
||
});
|
||
var legendActive = (stateStyles === null || stateStyles === void 0 ? void 0 : stateStyles.active) || {
|
||
stroke: '#000',
|
||
lineWidth: 2,
|
||
'text-shape': {
|
||
fontWeight: 'bold'
|
||
}
|
||
};
|
||
var legendTextActive = legendActive['text-shape'] || {};
|
||
this.findLegendItemsByState('active').forEach(function (subGroup) {
|
||
var _a = subGroup.get('children'),
|
||
keyShape = _a[0],
|
||
text = _a[1];
|
||
keyShape.attr(__assign(__assign({}, keyShape.get('oriAttrs')), legendActive));
|
||
text.attr(__assign(__assign({}, text.get('oriAttrs')), legendTextActive));
|
||
});
|
||
};
|
||
Legend.prototype.findLegendItemsByState = function (stateName, type, value) {
|
||
if (type === void 0) {
|
||
type = 'all';
|
||
}
|
||
if (value === void 0) {
|
||
value = true;
|
||
}
|
||
var group = this.get('legendCanvas').find(function (e) {
|
||
return e.get('name') === 'root';
|
||
});
|
||
var nodeGroup = group.find(function (e) {
|
||
return e.get('name') === 'node-group';
|
||
});
|
||
var edgeGroup = group.find(function (e) {
|
||
return e.get('name') === 'edge-group';
|
||
});
|
||
if (type === 'node') return nodeGroup.get('children').filter(function (g) {
|
||
return !!g.get(stateName) === value;
|
||
});
|
||
if (type === 'edge') return edgeGroup.get('children').filter(function (g) {
|
||
return !!g.get(stateName) === value;
|
||
});
|
||
return nodeGroup.get('children').filter(function (g) {
|
||
return !!g.get(stateName) === value;
|
||
}).concat(edgeGroup.get('children').filter(function (g) {
|
||
return !!g.get(stateName) === value;
|
||
}));
|
||
};
|
||
Legend.prototype.clearActiveLegend = function () {
|
||
var lg = this.get('legendCanvas');
|
||
var group = lg.find(function (e) {
|
||
return e.get('name') === 'root';
|
||
});
|
||
var groups = [group.find(function (e) {
|
||
return e.get('name') === 'node-group';
|
||
}), group.find(function (e) {
|
||
return e.get('name') === 'edge-group';
|
||
})];
|
||
groups.forEach(function (itemGroup) {
|
||
itemGroup.get('children').forEach(function (subGroup) {
|
||
subGroup.set('active', false);
|
||
subGroup.set('inactive', false);
|
||
var _a = subGroup.get('children'),
|
||
keyShape = _a[0],
|
||
text = _a[1];
|
||
keyShape.attr(keyShape.get('oriAttrs'));
|
||
text.attr(text.get('oriAttrs'));
|
||
});
|
||
});
|
||
};
|
||
/**
|
||
* 高亮和置灰图例，并过滤主图元素
|
||
* @param param
|
||
*/
|
||
Legend.prototype.filterData = function (e) {
|
||
var filter = this.get('filter');
|
||
var filterFunctions = filter === null || filter === void 0 ? void 0 : filter.filterFunctions;
|
||
if (!filter || !filterFunctions) return;
|
||
var lc = this.get('legendCanvas');
|
||
var graph = this.get('graph');
|
||
var activeState = filter.graphActiveState || 'active';
|
||
var inactiveState = filter.graphInactiveState || 'inactive';
|
||
var multiple = filter.multiple;
|
||
this.clearFilter();
|
||
if (!multiple) this.clearActiveLegend();
|
||
// 设置 legend 的高亮状态
|
||
this.activateLegend(e.target);
|
||
var group = lc.find(function (e) {
|
||
return e.get('name') === 'root';
|
||
});
|
||
var nodeGroup = group.find(function (e) {
|
||
return e.get('name') === 'node-group';
|
||
});
|
||
var edgeGroup = group.find(function (e) {
|
||
return e.get('name') === 'edge-group';
|
||
});
|
||
var activeNodeLegend = nodeGroup.get('children').filter(function (e) {
|
||
return e.get('active');
|
||
});
|
||
var activeEdgeLegend = edgeGroup.get('children').filter(function (e) {
|
||
return e.get('active');
|
||
});
|
||
var activeCount = 0;
|
||
var typeFuncs = ['getNodes', 'getEdges'];
|
||
typeFuncs.forEach(function (typeFunc) {
|
||
graph[typeFunc]().forEach(function (graphItem) {
|
||
var active = false;
|
||
var activeLegend = typeFunc === 'getNodes' ? activeNodeLegend : activeEdgeLegend;
|
||
activeLegend.forEach(function (itemGroup) {
|
||
var func = filterFunctions[itemGroup.get('id')];
|
||
active = active || func(graphItem.getModel());
|
||
});
|
||
if (active) {
|
||
graph.setItemState(graphItem, inactiveState, false);
|
||
graph.setItemState(graphItem, activeState, true);
|
||
activeCount++;
|
||
} else {
|
||
graph.setItemState(graphItem, activeState, false);
|
||
graph.setItemState(graphItem, inactiveState, true);
|
||
}
|
||
});
|
||
});
|
||
if (!activeCount) typeFuncs.forEach(function (typeFunc) {
|
||
graph[typeFunc]().forEach(function (graphItem) {
|
||
graph.clearItemStates(graphItem, [inactiveState]);
|
||
});
|
||
});
|
||
};
|
||
/**
|
||
* 清除主图相关状态
|
||
* @param param
|
||
*/
|
||
Legend.prototype.clearFilter = function () {
|
||
// 清除 legend 的高亮状态
|
||
var graph = this.get('graph');
|
||
var filter = this.get('filter');
|
||
if (!filter) return;
|
||
var activeState = filter.graphActiveState || 'active';
|
||
var inactiveState = filter.graphInactiveState || 'inactive';
|
||
graph.getNodes().forEach(function (node) {
|
||
graph.clearItemStates(node, [activeState, inactiveState]);
|
||
});
|
||
graph.getEdges().forEach(function (edge) {
|
||
graph.clearItemStates(edge, [activeState, inactiveState]);
|
||
});
|
||
};
|
||
/**
|
||
* 渲染 legend 图
|
||
* @param param
|
||
*/
|
||
Legend.prototype.render = function () {
|
||
var _this = this;
|
||
this.processData();
|
||
var lc = this.get('legendCanvas');
|
||
if (!lc) {
|
||
lc = new _gCanvas.Canvas({
|
||
container: this.get('container'),
|
||
width: 200,
|
||
height: 200
|
||
});
|
||
} else {
|
||
lc.clear();
|
||
}
|
||
var group = lc.addGroup({
|
||
name: 'root'
|
||
});
|
||
var nodeGroup = group.addGroup({
|
||
name: 'node-group'
|
||
});
|
||
var edgeGroup = group.addGroup({
|
||
name: 'edge-group'
|
||
});
|
||
this.set('legendCanvas', lc);
|
||
var itemsData = this.get('itemsData');
|
||
var itemTypes = ['nodes', 'edges'];
|
||
var itemGroup = [nodeGroup, edgeGroup];
|
||
itemTypes.forEach(function (itemType, i) {
|
||
itemsData[itemType].forEach(function (data) {
|
||
var _a;
|
||
var subGroup = itemGroup[i].addGroup({
|
||
id: data.id,
|
||
name: 'node-container'
|
||
});
|
||
var attrs;
|
||
var shapeType = data.type;
|
||
var _b = _this.getShapeSize(data),
|
||
width = _b.width,
|
||
height = _b.height,
|
||
r = _b.r;
|
||
var style = _this.getStyle(itemType.substr(0, 4), data);
|
||
switch (data.type) {
|
||
case 'circle':
|
||
attrs = {
|
||
r: r,
|
||
x: 0,
|
||
y: 0
|
||
};
|
||
break;
|
||
case 'rect':
|
||
attrs = {
|
||
width: width,
|
||
height: height,
|
||
x: -width / 2,
|
||
y: -height / 2
|
||
};
|
||
break;
|
||
case 'ellipse':
|
||
attrs = {
|
||
rx: width,
|
||
ry: height,
|
||
x: 0,
|
||
y: 0
|
||
};
|
||
shapeType = 'ellipse';
|
||
break;
|
||
case 'line':
|
||
attrs = {
|
||
x1: -width / 2,
|
||
y1: 0,
|
||
x2: width / 2,
|
||
y2: 0
|
||
};
|
||
shapeType = 'line';
|
||
break;
|
||
case 'quadratic':
|
||
attrs = {
|
||
path: [['M', -width / 2, 0], ['Q', 0, width / 2, width / 2, 0]]
|
||
};
|
||
shapeType = 'path';
|
||
break;
|
||
case 'cubic':
|
||
attrs = {
|
||
path: [['M', -width / 2, 0], ['C', -width / 6, width / 2, width / 6, -width / 2, width / 2, 0]]
|
||
};
|
||
shapeType = 'path';
|
||
break;
|
||
case 'diamond':
|
||
attrs = {
|
||
path: [['M', 0, -height], ['L', width, 0], ['L', 0, height], ['L', -width, 0], ['Z']]
|
||
};
|
||
shapeType = 'path';
|
||
break;
|
||
case 'triangle':
|
||
attrs = {
|
||
path: [['M', -width, height], ['L', 0, -height], ['L', width, height], ['Z']]
|
||
};
|
||
shapeType = 'path';
|
||
break;
|
||
case 'star':
|
||
attrs = {
|
||
path: _g6Core.Util.getStarPath(r * 3, r * 1.2)
|
||
};
|
||
shapeType = 'path';
|
||
break;
|
||
default:
|
||
attrs = {
|
||
r: r,
|
||
x: 0,
|
||
y: 0
|
||
};
|
||
break;
|
||
}
|
||
var keyShape = subGroup.addShape(shapeType, {
|
||
attrs: __assign(__assign({}, attrs), style),
|
||
name: "".concat(data.type, "-node-keyShape"),
|
||
oriAttrs: __assign({
|
||
opacity: 1
|
||
}, style)
|
||
});
|
||
if (data.label) {
|
||
var keyShapeBBox = keyShape.getBBox();
|
||
var labelStyle = ((_a = data.labelCfg) === null || _a === void 0 ? void 0 : _a.style) || {};
|
||
var attrs_1 = __assign({
|
||
textAlign: 'begin',
|
||
fontSize: 12,
|
||
textBaseline: 'middle',
|
||
fill: '#000',
|
||
opacity: 1,
|
||
fontWeight: 'normal'
|
||
}, labelStyle);
|
||
subGroup.addShape('text', {
|
||
attrs: __assign({
|
||
x: keyShapeBBox.maxX + 4,
|
||
y: 0,
|
||
text: data.label
|
||
}, attrs_1),
|
||
className: 'legend-label',
|
||
name: "".concat(data.type, "-node-text"),
|
||
oriAttrs: attrs_1
|
||
});
|
||
}
|
||
});
|
||
});
|
||
var padding = this.get('padding');
|
||
var titleShape;
|
||
var titleGroup = group.find(function (e) {
|
||
return e.get('name') === 'title-container';
|
||
});
|
||
var titleGroupBBox = {
|
||
height: 0,
|
||
maxY: 0,
|
||
width: 0
|
||
};
|
||
if (this.get('title')) {
|
||
if (!titleGroup) {
|
||
titleGroup = group.addGroup({
|
||
name: 'title-container'
|
||
});
|
||
}
|
||
var defaultTitleStyle = {
|
||
fontSize: 20,
|
||
fontFamily: 'Arial',
|
||
fontWeight: 300,
|
||
textBaseline: 'top',
|
||
textAlign: 'center',
|
||
fill: "#000",
|
||
x: 0,
|
||
y: padding[0]
|
||
};
|
||
var titleConfig = this.get('titleConfig') || {};
|
||
var style = Object.assign(defaultTitleStyle, titleConfig.style || {});
|
||
titleShape = titleGroup.addShape('text', {
|
||
attrs: __assign({
|
||
text: this.get('title')
|
||
}, style)
|
||
});
|
||
titleGroupBBox = titleGroup.getCanvasBBox();
|
||
titleGroup.setMatrix([1, 0, 0, 0, 1, 0, titleConfig.offsetX, titleConfig.offsetY, 1]);
|
||
}
|
||
this.layoutItems();
|
||
var lcBBox = group.getCanvasBBox();
|
||
var nodeGroupBBox = nodeGroup.getCanvasBBox();
|
||
// 若有图形超过边界的情况，平移回来
|
||
var nodeGroupBeginX = nodeGroupBBox.minX < 0 ? Math.abs(nodeGroupBBox.minX) + padding[3] : padding[3];
|
||
var nodeGroupBeginY = titleGroupBBox.maxY < nodeGroupBBox.minY ? Math.abs(titleGroupBBox.maxY - nodeGroupBBox.minY) + padding[0] : titleGroupBBox.maxY + padding[0];
|
||
var nodeGroupMatrix = [1, 0, 0, 0, 1, 0, nodeGroupBeginX, nodeGroupBeginY, 1];
|
||
nodeGroup.setMatrix(nodeGroupMatrix);
|
||
lcBBox = group.getCanvasBBox();
|
||
var size = [lcBBox.minX + lcBBox.width + padding[1], lcBBox.minY + lcBBox.height + padding[2]];
|
||
// 根据 size 和 titleConfig 调整 title 位置，再调整 nodeGroup 位置
|
||
if (titleShape) {
|
||
var titleConfig = __assign({
|
||
position: 'center',
|
||
offsetX: 0,
|
||
offsetY: 0
|
||
}, this.get('titleConfig'));
|
||
titleGroupBBox = titleGroup.getCanvasBBox();
|
||
var titleGroupMatrix = titleGroup.getMatrix() || [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
if (titleConfig.position === 'center') {
|
||
titleGroupMatrix[6] = size[0] / 2 + titleConfig.offsetX;
|
||
} else if (titleConfig.position === 'right') {
|
||
titleGroupMatrix[6] = size[0] - padding[3] + titleConfig.offsetX;
|
||
titleShape.attr({
|
||
textAlign: 'right'
|
||
});
|
||
} else {
|
||
titleGroupMatrix[6] = padding[3] + titleConfig.offsetX;
|
||
titleShape.attr({
|
||
textAlign: 'left'
|
||
});
|
||
}
|
||
titleGroup.setMatrix(titleGroupMatrix);
|
||
titleGroupBBox = titleGroup.getCanvasBBox();
|
||
// 若有图形超过边界的情况，平移回来
|
||
nodeGroupBeginX = nodeGroupBBox.minX < 0 ? Math.abs(nodeGroupBBox.minX) + padding[3] : padding[3];
|
||
nodeGroupBeginY = nodeGroupBBox.minY < titleGroupBBox.maxY ? Math.abs(titleGroupBBox.maxY - nodeGroupBBox.minY) + padding[0] : titleGroupBBox.maxY + padding[0];
|
||
nodeGroupMatrix = [1, 0, 0, 0, 1, 0, nodeGroupBeginX, nodeGroupBeginY, 1];
|
||
nodeGroup.setMatrix(nodeGroupMatrix);
|
||
var edgeGroupMatrix_1 = [1, 0, 0, 0, 1, 0, nodeGroupBeginX, nodeGroupBeginY, 1];
|
||
if (this.get('layout') === 'vertical') edgeGroupMatrix_1[6] += nodeGroupBBox.maxX + this.get('horiSep');else edgeGroupMatrix_1[7] += nodeGroupBBox.maxY + this.get('vertiSep');
|
||
edgeGroup.setMatrix(edgeGroupMatrix_1);
|
||
} else {
|
||
// 没有 title，也需要平移 edgeGroup
|
||
nodeGroupBBox = nodeGroup.getCanvasBBox();
|
||
var edgeGroupMatrix_2 = [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
if (this.get('layout') === 'vertical') edgeGroupMatrix_2[6] += nodeGroupMatrix[6] + nodeGroupBBox.maxX + this.get('horiSep');else edgeGroupMatrix_2[7] += nodeGroupMatrix[7] + nodeGroupBBox.maxY + this.get('vertiSep');
|
||
edgeGroup.setMatrix(edgeGroupMatrix_2);
|
||
}
|
||
lcBBox = group.getCanvasBBox();
|
||
nodeGroupBBox = nodeGroup.getCanvasBBox();
|
||
nodeGroupMatrix = nodeGroup.getMatrix() || [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
var edgeGroupMatrix = edgeGroup.getMatrix() || [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
var edgeGroupBBox = edgeGroup.getCanvasBBox();
|
||
size = [Math.max(nodeGroupBBox.width + nodeGroupMatrix[6], edgeGroupBBox.width + edgeGroupMatrix[6]) + padding[1], Math.max(nodeGroupBBox.height + nodeGroupMatrix[7], edgeGroupBBox.height + edgeGroupMatrix[7]) + padding[2]];
|
||
lc.changeSize(size[0], size[1]);
|
||
// 更新容器背景样式
|
||
var containerStyle = this.get('containerStyle');
|
||
var viewportMatrix = group.getMatrix() || [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
var beginPos = _g6Core.Util.invertMatrix({
|
||
x: 0,
|
||
y: 0
|
||
}, viewportMatrix);
|
||
var backRect = group.addShape('rect', {
|
||
attrs: __assign({
|
||
x: beginPos.x + (containerStyle.lineWidth || 1),
|
||
y: beginPos.y + (containerStyle.lineWidth || 1),
|
||
width: size[0] - 2 * (containerStyle.lineWidth || 1),
|
||
height: size[1] - 2 * (containerStyle.lineWidth || 1),
|
||
fill: "#f00",
|
||
stroke: '#000',
|
||
lineWidth: 1,
|
||
opacity: 0.5
|
||
}, containerStyle),
|
||
name: 'legend-back-rect',
|
||
capture: false
|
||
});
|
||
backRect.toBack();
|
||
return size;
|
||
};
|
||
Legend.prototype.layoutItems = function () {
|
||
var lc = this.get('legendCanvas');
|
||
var horiSep = this.get('horiSep');
|
||
var vertiSep = this.get('vertiSep');
|
||
var layout = this.get('layout');
|
||
var align = this.get('align');
|
||
var begin = [0, 0];
|
||
var group = lc.find(function (e) {
|
||
return e.get('name') === 'root';
|
||
});
|
||
var nodeGroup = group.find(function (e) {
|
||
return e.get('name') === 'node-group';
|
||
});
|
||
var edgeGroup = group.find(function (e) {
|
||
return e.get('name') === 'edge-group';
|
||
});
|
||
var nodeLegendSize = {
|
||
min: 0,
|
||
max: -Infinity
|
||
};
|
||
var rowMaxY = -Infinity;
|
||
nodeGroup.get('children').forEach(function (cNodeGroup, i) {
|
||
if (i === 0) nodeLegendSize.min = begin[0];
|
||
var keyShape = cNodeGroup.get('children')[0];
|
||
var bbox = cNodeGroup.getCanvasBBox();
|
||
var _a = keyShape.getBBox(),
|
||
keyShapeWidth = _a.width,
|
||
keyShapeHeight = _a.height;
|
||
var curHeight = 0,
|
||
x = 0,
|
||
y = 0;
|
||
if (layout === 'vertical') {
|
||
x = begin[1];
|
||
y = begin[0] + keyShapeWidth / 2;
|
||
begin[0] = y + bbox.height + vertiSep;
|
||
curHeight = bbox.maxX + x + keyShapeWidth / 2;
|
||
} else {
|
||
x = begin[0] + keyShapeWidth / 2;
|
||
y = begin[1];
|
||
begin[0] = x + bbox.width + horiSep;
|
||
curHeight = bbox.maxY + y + keyShapeHeight / 2;
|
||
}
|
||
if (begin[0] > nodeLegendSize.max) nodeLegendSize.max = begin[0];
|
||
if (curHeight > rowMaxY) rowMaxY = curHeight;
|
||
cNodeGroup.setMatrix([1, 0, 0, 0, 1, 0, x, y, 1]);
|
||
});
|
||
var nw = nodeLegendSize.max - nodeLegendSize.min;
|
||
var edgeLegendSize = {
|
||
min: 0,
|
||
max: -Infinity
|
||
};
|
||
var nodeGroupBBox = nodeGroup.getCanvasBBox();
|
||
begin[0] = 0;
|
||
begin[1] = layout === 'vertical' ? nodeGroupBBox.maxX + horiSep : nodeGroupBBox.maxY + vertiSep;
|
||
edgeGroup.get('children').forEach(function (subGroup, i) {
|
||
if (i === 0) edgeLegendSize.min = begin[0];
|
||
var keyShape = subGroup.get('children')[0];
|
||
var bbox = subGroup.getCanvasBBox();
|
||
var _a = keyShape.getBBox(),
|
||
keyShapeWidth = _a.width,
|
||
keyShapeHeight = _a.height;
|
||
var x = 0,
|
||
y = 0;
|
||
if (layout === 'vertical') {
|
||
x = begin[1];
|
||
y = begin[0];
|
||
begin[0] = y + bbox.height + vertiSep;
|
||
subGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, y + keyShapeHeight / 2, 1]);
|
||
} else {
|
||
x = begin[0];
|
||
y = begin[1];
|
||
begin[0] = x + bbox.width + horiSep;
|
||
subGroup.setMatrix([1, 0, 0, 0, 1, 0, x + keyShapeWidth / 2, 0, 1]);
|
||
}
|
||
if (begin[0] > edgeLegendSize.max) edgeLegendSize.max = begin[0];
|
||
});
|
||
var ew = edgeLegendSize.max - edgeLegendSize.min;
|
||
if (align && align !== '' && align !== 'left') {
|
||
var widthDiff = nw - ew;
|
||
var movement_1 = align === 'center' ? Math.abs(widthDiff) / 2 : Math.abs(widthDiff);
|
||
var shouldAdjustGroup = widthDiff < 0 ? nodeGroup : edgeGroup;
|
||
shouldAdjustGroup.get('children').forEach(function (subGroup) {
|
||
var matrix = subGroup.getMatrix() || [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||
if (layout === 'vertical') matrix[7] += movement_1;else matrix[6] += movement_1;
|
||
subGroup.setMatrix(matrix);
|
||
});
|
||
}
|
||
};
|
||
Legend.prototype.processData = function () {
|
||
var data = this.get('data');
|
||
var itemsData = {
|
||
nodes: [],
|
||
edges: []
|
||
};
|
||
if (data.nodes) {
|
||
data.nodes.sort(function (a, b) {
|
||
return a.order - b.order;
|
||
});
|
||
data.nodes.forEach(function (node) {
|
||
var _a, _b, _c, _d, _e;
|
||
var size = node.size || [((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || ((_b = node.style) === null || _b === void 0 ? void 0 : _b.r) || 8, ((_c = node.style) === null || _c === void 0 ? void 0 : _c.height) || ((_d = node.style) === null || _d === void 0 ? void 0 : _d.r) || 8];
|
||
var labelStyle = ((_e = node.labelCfg) === null || _e === void 0 ? void 0 : _e.style) || {};
|
||
itemsData.nodes.push({
|
||
id: node.id || (0, _util.uniqueId)(),
|
||
type: node.type || 'circle',
|
||
style: __assign({}, node.style),
|
||
order: node.order,
|
||
label: node.label,
|
||
itemType: 'node',
|
||
size: size,
|
||
labelCfg: {
|
||
position: 'right',
|
||
style: __assign({
|
||
fontFamily: "Arial"
|
||
}, labelStyle)
|
||
}
|
||
});
|
||
});
|
||
}
|
||
if (data.edges) {
|
||
data.edges.sort(function (a, b) {
|
||
return a.order - b.order;
|
||
});
|
||
data.edges.forEach(function (edge) {
|
||
var _a, _b;
|
||
var type = edge.type || 'line';
|
||
if (edge.type === 'cubic-horizontal') type = 'cubic';
|
||
var labelStyle = ((_a = edge.labelCfg) === null || _a === void 0 ? void 0 : _a.style) || {};
|
||
var size = edge.size || [((_b = edge.style) === null || _b === void 0 ? void 0 : _b.width) || 8, 1];
|
||
itemsData.edges.push({
|
||
id: edge.id || (0, _util.uniqueId)(),
|
||
type: type,
|
||
size: size,
|
||
style: __assign({
|
||
lineWidth: (0, _util.isArray)(size) ? size[1] : 1
|
||
}, edge.style),
|
||
order: edge.order,
|
||
label: edge.label,
|
||
itemType: 'edge',
|
||
labelCfg: {
|
||
position: 'right',
|
||
style: __assign({
|
||
fontFamily: "Arial"
|
||
}, labelStyle)
|
||
}
|
||
});
|
||
});
|
||
}
|
||
this.set('itemsData', itemsData);
|
||
};
|
||
Legend.prototype.getContainer = function () {
|
||
return this.get('container');
|
||
};
|
||
Legend.prototype.formatArray = function (key) {
|
||
var value = this.get(key);
|
||
if ((0, _util.isNumber)(value)) this.set(key, [value, value, value, value]);else if ((0, _util.isArray)(value)) {
|
||
switch (value.length) {
|
||
case 0:
|
||
this.set(key, [0, 0, 0, 0]);
|
||
break;
|
||
case 1:
|
||
this.set(key, [value[0], value[0], value[0], value[0]]);
|
||
break;
|
||
case 2:
|
||
this.set(key, [value[0], value[1], value[0], value[1]]);
|
||
break;
|
||
case 3:
|
||
this.set(key, [value[0], value[1], value[2], value[1]]);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
return this.get(key);
|
||
};
|
||
Legend.prototype.getShapeSize = function (data) {
|
||
var width, height, r;
|
||
if (data.size) {
|
||
if ((0, _util.isArray)(data.size)) {
|
||
width = data.size[0];
|
||
height = data.size[1] || data.size[0];
|
||
r = data.size[0] / 2;
|
||
} else if ((0, _util.isNumber)(data.size)) {
|
||
width = data.size;
|
||
height = data.size;
|
||
r = data.size / 2;
|
||
}
|
||
}
|
||
if (data.style) {
|
||
if (data.style.width) width = data.style.width;
|
||
if (data.style.height) height = data.style.height;
|
||
if (data.style.r) r = data.style.r;
|
||
}
|
||
if (!r) r = 5;
|
||
if (!width) width = r;
|
||
if (!height) height = r;
|
||
return {
|
||
width: width,
|
||
height: height,
|
||
r: r
|
||
};
|
||
};
|
||
Legend.prototype.getStyle = function (type, data) {
|
||
var defaultStyle = type === 'node' ? {
|
||
fill: '#ccc',
|
||
lineWidth: 0
|
||
} : {
|
||
stroke: '#000',
|
||
lineWidth: 1
|
||
};
|
||
return __assign(__assign({}, defaultStyle), data.style || {});
|
||
};
|
||
Legend.prototype.destroy = function () {
|
||
var lc = this.get('legendCanvas');
|
||
lc === null || lc === void 0 ? void 0 : lc.destroy();
|
||
var graph = this.get('graph');
|
||
var graphContainer = graph.get('container');
|
||
var container = this.get('container');
|
||
graphContainer.removeChild(container);
|
||
};
|
||
return Legend;
|
||
}(_base.default);
|
||
var _default = exports.default = Legend; |