524 lines
17 KiB
JavaScript
524 lines
17 KiB
JavaScript
"use strict";
|
|
|
|
var _tslib = require("tslib");
|
|
var _util = require("@antv/util");
|
|
var _g6Core = require("@antv/g6-core");
|
|
(0, _g6Core.registerNode)('modelRect', {
|
|
// 自定义节点时的配置
|
|
options: {
|
|
size: [185, 70],
|
|
style: {
|
|
radius: 5,
|
|
stroke: '#69c0ff',
|
|
fill: '#ffffff',
|
|
lineWidth: _g6Core.BaseGlobal.defaultNode.style.lineWidth,
|
|
fillOpacity: 1
|
|
},
|
|
// 文本样式配置
|
|
labelCfg: {
|
|
style: {
|
|
fill: '#595959',
|
|
fontSize: 14,
|
|
fontFamily: _g6Core.BaseGlobal.windowFontFamily
|
|
},
|
|
offset: 30 // 距离左侧的 offset，没有设置 y 轴上移动的配置
|
|
},
|
|
descriptionCfg: {
|
|
style: {
|
|
fontSize: 12,
|
|
fill: '#bfbfbf',
|
|
fontFamily: _g6Core.BaseGlobal.windowFontFamily
|
|
},
|
|
paddingTop: 0
|
|
},
|
|
preRect: {
|
|
show: true,
|
|
width: 4,
|
|
fill: '#40a9ff',
|
|
radius: 2
|
|
},
|
|
// 节点上左右上下四个方向上的链接circle配置
|
|
linkPoints: {
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
// circle的大小
|
|
size: 10,
|
|
lineWidth: 1,
|
|
fill: '#72CC4A',
|
|
stroke: '#72CC4A'
|
|
},
|
|
// 节点中icon配置
|
|
logoIcon: {
|
|
// 是否显示icon，值为 false 则不渲染icon
|
|
show: true,
|
|
x: 0,
|
|
y: 0,
|
|
// icon的地址，字符串类型
|
|
img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
|
|
width: 16,
|
|
height: 16,
|
|
// 用于调整图标的左右位置
|
|
offset: 0
|
|
},
|
|
// 节点中表示状态的icon配置
|
|
stateIcon: {
|
|
// 是否显示icon，值为 false 则不渲染icon
|
|
show: true,
|
|
x: 0,
|
|
y: 0,
|
|
// icon的地址，字符串类型
|
|
img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
|
|
width: 16,
|
|
height: 16,
|
|
// 用于调整图标的左右位置
|
|
offset: -5
|
|
},
|
|
// 连接点，默认为左右
|
|
// anchorPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }]
|
|
anchorPoints: [[0, 0.5], [1, 0.5]]
|
|
},
|
|
shapeType: 'modelRect',
|
|
drawShape: function drawShape(cfg, group) {
|
|
var _a = (this.mergeStyle || this.getOptions(cfg)).preRect,
|
|
preRect = _a === void 0 ? {} : _a;
|
|
var style = this.getShapeStyle(cfg);
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
var height = size[1];
|
|
var keyShape = group.addShape('rect', {
|
|
attrs: style,
|
|
className: "".concat(this.type, "-keyShape"),
|
|
name: "".concat(this.type, "-keyShape"),
|
|
draggable: true
|
|
});
|
|
group['shapeMap']["".concat(this.type, "-keyShape")] = keyShape;
|
|
var preRectShow = preRect.show,
|
|
preRectStyle = (0, _tslib.__rest)(preRect, ["show"]);
|
|
if (preRectShow) {
|
|
group['shapeMap']['pre-rect'] = group.addShape('rect', {
|
|
attrs: (0, _tslib.__assign)({
|
|
x: -width / 2,
|
|
y: -height / 2,
|
|
height: height
|
|
}, preRectStyle),
|
|
className: 'pre-rect',
|
|
name: 'pre-rect',
|
|
draggable: true
|
|
});
|
|
}
|
|
this.drawLogoIcon(cfg, group);
|
|
this.drawStateIcon(cfg, group);
|
|
this.drawLinkPoints(cfg, group);
|
|
return keyShape;
|
|
},
|
|
/**
|
|
* 绘制模型矩形左边的logo图标
|
|
* @param {Object} cfg 数据配置项
|
|
* @param {Group} group Group实例
|
|
*/
|
|
drawLogoIcon: function drawLogoIcon(cfg, group) {
|
|
var _a = (this.mergeStyle || this.getOptions(cfg)).logoIcon,
|
|
logoIcon = _a === void 0 ? {} : _a;
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
if (logoIcon.show) {
|
|
var w = logoIcon.width,
|
|
h = logoIcon.height,
|
|
x = logoIcon.x,
|
|
y = logoIcon.y,
|
|
offset = logoIcon.offset,
|
|
text = logoIcon.text,
|
|
logoIconStyle = (0, _tslib.__rest)(logoIcon, ["width", "height", "x", "y", "offset", "text"]);
|
|
if (text) {
|
|
group['shapeMap']['rect-logo-icon'] = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)({
|
|
x: 0,
|
|
y: 0,
|
|
fontSize: 12,
|
|
fill: '#000',
|
|
stroke: '#000',
|
|
textBaseline: 'middle',
|
|
textAlign: 'center'
|
|
}, logoIconStyle),
|
|
className: 'rect-logo-icon',
|
|
name: 'rect-logo-icon',
|
|
draggable: true
|
|
});
|
|
} else {
|
|
group['shapeMap']['rect-logo-icon'] = group.addShape('image', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, logoIconStyle), {
|
|
x: x || -width / 2 + w + offset,
|
|
y: y || -h / 2,
|
|
width: w,
|
|
height: h
|
|
}),
|
|
className: 'rect-logo-icon',
|
|
name: 'rect-logo-icon',
|
|
draggable: true
|
|
});
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 绘制模型矩形右边的状态图标
|
|
* @param {Object} cfg 数据配置项
|
|
* @param {Group} group Group实例
|
|
*/
|
|
drawStateIcon: function drawStateIcon(cfg, group) {
|
|
var _a = (this.mergeStyle || this.getOptions(cfg)).stateIcon,
|
|
stateIcon = _a === void 0 ? {} : _a;
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
if (stateIcon.show) {
|
|
var w = stateIcon.width,
|
|
h = stateIcon.height,
|
|
x = stateIcon.x,
|
|
y = stateIcon.y,
|
|
offset = stateIcon.offset,
|
|
text = stateIcon.text,
|
|
iconStyle = (0, _tslib.__rest)(stateIcon, ["width", "height", "x", "y", "offset", "text"]);
|
|
if (text) {
|
|
group['shapeMap']['rect-state-icon'] = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)({
|
|
x: 0,
|
|
y: 0,
|
|
fontSize: 12,
|
|
fill: '#000',
|
|
stroke: '#000',
|
|
textBaseline: 'middle',
|
|
textAlign: 'center'
|
|
}, iconStyle),
|
|
className: 'rect-state-icon',
|
|
name: 'rect-state-icon',
|
|
draggable: true
|
|
});
|
|
} else {
|
|
group['shapeMap']['rect-state-icon'] = group.addShape('image', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, iconStyle), {
|
|
x: x || width / 2 - w + offset,
|
|
y: y || -h / 2,
|
|
width: w,
|
|
height: h
|
|
}),
|
|
className: 'rect-state-icon',
|
|
name: 'rect-state-icon',
|
|
draggable: true
|
|
});
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 绘制节点上的LinkPoints
|
|
* @param {Object} cfg data数据配置项
|
|
* @param {Group} group Group实例
|
|
*/
|
|
drawLinkPoints: function drawLinkPoints(cfg, group) {
|
|
var _a = (this.mergeStyle || this.getOptions(cfg)).linkPoints,
|
|
linkPoints = _a === void 0 ? {} : _a;
|
|
var top = linkPoints.top,
|
|
left = linkPoints.left,
|
|
right = linkPoints.right,
|
|
bottom = linkPoints.bottom,
|
|
markSize = linkPoints.size,
|
|
markR = linkPoints.r,
|
|
markStyle = (0, _tslib.__rest)(linkPoints, ["top", "left", "right", "bottom", "size", "r"]);
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
var height = size[1];
|
|
if (left) {
|
|
// left circle
|
|
group['shapeMap']['link-point-left'] = group.addShape('circle', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), {
|
|
x: -width / 2,
|
|
y: 0,
|
|
r: markSize / 2 || markR || 5
|
|
}),
|
|
className: 'link-point-left',
|
|
name: 'link-point-left',
|
|
isAnchorPoint: true
|
|
});
|
|
}
|
|
if (right) {
|
|
// right circle
|
|
group['shapeMap']['link-point-right'] = group.addShape('circle', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), {
|
|
x: width / 2,
|
|
y: 0,
|
|
r: markSize / 2 || markR || 5
|
|
}),
|
|
className: 'link-point-right',
|
|
name: 'link-point-right',
|
|
isAnchorPoint: true
|
|
});
|
|
}
|
|
if (top) {
|
|
// top circle
|
|
group['shapeMap']['link-point-top'] = group.addShape('circle', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), {
|
|
x: 0,
|
|
y: -height / 2,
|
|
r: markSize / 2 || markR || 5
|
|
}),
|
|
className: 'link-point-top',
|
|
name: 'link-point-top',
|
|
isAnchorPoint: true
|
|
});
|
|
}
|
|
if (bottom) {
|
|
// bottom circle
|
|
group['shapeMap']['link-point-bottom'] = group.addShape('circle', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), {
|
|
x: 0,
|
|
y: height / 2,
|
|
r: markSize / 2 || markR || 5
|
|
}),
|
|
className: 'link-point-bottom',
|
|
name: 'link-point-bottom',
|
|
isAnchorPoint: true
|
|
});
|
|
}
|
|
},
|
|
drawLabel: function drawLabel(cfg, group) {
|
|
var _a = this.getOptions(cfg),
|
|
_b = _a.labelCfg,
|
|
labelCfg = _b === void 0 ? {} : _b,
|
|
_c = _a.logoIcon,
|
|
logoIcon = _c === void 0 ? {} : _c,
|
|
_d = _a.descriptionCfg,
|
|
descriptionCfg = _d === void 0 ? {} : _d;
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
var label = null;
|
|
var show = logoIcon.show,
|
|
w = logoIcon.width;
|
|
var offsetX = -width / 2 + labelCfg.offset;
|
|
if (show) {
|
|
offsetX = -width / 2 + w + labelCfg.offset;
|
|
}
|
|
var fontStyle = labelCfg.style;
|
|
var descriptionStyle = descriptionCfg.style,
|
|
descriptionPaddingTop = descriptionCfg.paddingTop;
|
|
if ((0, _util.isString)(cfg.description)) {
|
|
label = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, fontStyle), {
|
|
x: offsetX,
|
|
y: -5,
|
|
text: cfg.label
|
|
}),
|
|
className: 'text-shape',
|
|
name: 'text-shape',
|
|
draggable: true,
|
|
labelRelated: true
|
|
});
|
|
group['shapeMap']['text-shape'] = label;
|
|
group['shapeMap']['rect-description'] = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, descriptionStyle), {
|
|
x: offsetX,
|
|
y: 17 + (descriptionPaddingTop || 0),
|
|
text: cfg.description
|
|
}),
|
|
className: 'rect-description',
|
|
name: 'rect-description',
|
|
draggable: true,
|
|
labelRelated: true
|
|
});
|
|
} else {
|
|
label = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, fontStyle), {
|
|
x: offsetX,
|
|
y: 7,
|
|
text: cfg.label
|
|
}),
|
|
className: 'text-shape',
|
|
name: 'text-shape',
|
|
draggable: true,
|
|
labelRelated: true
|
|
});
|
|
group['shapeMap']['text-shape'] = label;
|
|
}
|
|
return label;
|
|
},
|
|
/**
|
|
* 获取节点的样式，供基于该节点自定义时使用
|
|
* @param {Object} cfg 节点数据模型
|
|
* @return {Object} 节点的样式
|
|
*/
|
|
getShapeStyle: function getShapeStyle(cfg) {
|
|
var defaultStyle = (this.mergeStyle || this.getOptions(cfg)).style;
|
|
var strokeStyle = {
|
|
stroke: cfg.color
|
|
};
|
|
// 如果设置了color，则覆盖默认的stroke属性
|
|
var style = (0, _util.mix)({}, defaultStyle, strokeStyle);
|
|
var size = this.getSize(cfg);
|
|
var width = style.width || size[0];
|
|
var height = style.height || size[1];
|
|
var styles = (0, _tslib.__assign)({
|
|
x: -width / 2,
|
|
y: -height / 2,
|
|
width: width,
|
|
height: height
|
|
}, style);
|
|
return styles;
|
|
},
|
|
update: function update(cfg, item) {
|
|
var _a = this.mergeStyle || this.getOptions(cfg),
|
|
_b = _a.style,
|
|
style = _b === void 0 ? {} : _b,
|
|
_c = _a.labelCfg,
|
|
labelCfg = _c === void 0 ? {} : _c,
|
|
_d = _a.descriptionCfg,
|
|
descriptionCfg = _d === void 0 ? {} : _d;
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
var height = size[1];
|
|
var keyShape = item.get('keyShape');
|
|
keyShape.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, style), {
|
|
x: -width / 2,
|
|
y: -height / 2,
|
|
width: width,
|
|
height: height
|
|
}));
|
|
var group = item.getContainer();
|
|
var logoIconShape = group['shapeMap']['rect-logo-icon'] || group.find(function (element) {
|
|
return element.get('className') === 'rect-logo-icon';
|
|
});
|
|
var currentLogoIconAttr = logoIconShape ? logoIconShape.attr() : {};
|
|
var logoIcon = (0, _util.mix)({}, currentLogoIconAttr, cfg.logoIcon);
|
|
var w = logoIcon.width;
|
|
if (w === undefined) {
|
|
w = this.options.logoIcon.width;
|
|
}
|
|
var show = cfg.logoIcon ? cfg.logoIcon.show : undefined;
|
|
var offset = labelCfg.offset;
|
|
var offsetX = -width / 2 + w + offset;
|
|
if (!show && show !== undefined) {
|
|
offsetX = -width / 2 + offset;
|
|
}
|
|
var label = group['shapeMap']['node-label'] || group.find(function (element) {
|
|
return element.get('className') === 'node-label';
|
|
});
|
|
var description = group['shapeMap']['rect-description'] || group.find(function (element) {
|
|
return element.get('className') === 'rect-description';
|
|
});
|
|
if (cfg.label) {
|
|
if (!label) {
|
|
group['shapeMap']['node-label'] = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, labelCfg.style), {
|
|
x: offsetX,
|
|
y: cfg.description ? -5 : 7,
|
|
text: cfg.label
|
|
}),
|
|
className: 'node-label',
|
|
name: 'node-label',
|
|
draggable: true,
|
|
labelRelated: true
|
|
});
|
|
} else {
|
|
var cfgStyle = cfg.labelCfg ? cfg.labelCfg.style : {};
|
|
var labelStyle = (0, _util.mix)({}, label.attr(), cfgStyle);
|
|
if (cfg.label) labelStyle.text = cfg.label;
|
|
labelStyle.x = offsetX;
|
|
if ((0, _util.isString)(cfg.description)) labelStyle.y = -5;
|
|
if (description) {
|
|
description.resetMatrix();
|
|
description.attr({
|
|
x: offsetX
|
|
});
|
|
}
|
|
label.resetMatrix();
|
|
label.attr(labelStyle);
|
|
}
|
|
}
|
|
if ((0, _util.isString)(cfg.description)) {
|
|
var paddingTop = descriptionCfg.paddingTop;
|
|
if (!description) {
|
|
group['shapeMap']['rect-description'] = group.addShape('text', {
|
|
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, descriptionCfg.style), {
|
|
x: offsetX,
|
|
y: 17 + (paddingTop || 0),
|
|
text: cfg.description
|
|
}),
|
|
className: 'rect-description',
|
|
name: 'rect-description',
|
|
draggable: true,
|
|
labelRelated: true
|
|
});
|
|
} else {
|
|
var cfgStyle = cfg.descriptionCfg ? cfg.descriptionCfg.style : {};
|
|
var descriptionStyle = (0, _util.mix)({}, description.attr(), cfgStyle);
|
|
if ((0, _util.isString)(cfg.description)) descriptionStyle.text = cfg.description;
|
|
descriptionStyle.x = offsetX;
|
|
description.resetMatrix();
|
|
description.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, descriptionStyle), {
|
|
y: 17 + (paddingTop || 0)
|
|
}));
|
|
}
|
|
}
|
|
var preRectShape = group['shapeMap']['pre-rect'] || group.find(function (element) {
|
|
return element.get('className') === 'pre-rect';
|
|
});
|
|
if (preRectShape && !preRectShape.destroyed) {
|
|
var preRect = (0, _util.mix)({}, preRectShape.attr(), cfg.preRect);
|
|
preRectShape.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, preRect), {
|
|
x: -width / 2,
|
|
y: -height / 2,
|
|
height: height
|
|
}));
|
|
}
|
|
if (logoIconShape && !logoIconShape.destroyed) {
|
|
if (!show && show !== undefined) {
|
|
logoIconShape.remove();
|
|
delete group['shapeMap']['pre-rect'];
|
|
} else {
|
|
var logoW = logoIcon.width,
|
|
h = logoIcon.height,
|
|
x = logoIcon.x,
|
|
y = logoIcon.y,
|
|
logoOffset = logoIcon.offset,
|
|
logoIconStyle = (0, _tslib.__rest)(logoIcon, ["width", "height", "x", "y", "offset"]);
|
|
logoIconShape.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, logoIconStyle), {
|
|
x: x || -width / 2 + logoW + logoOffset,
|
|
y: y || -h / 2,
|
|
width: logoW,
|
|
height: h
|
|
}));
|
|
}
|
|
} else if (show) {
|
|
this.drawLogoIcon(cfg, group);
|
|
}
|
|
var stateIconShape = group['shapeMap']['rect-state-icon'] || group.find(function (element) {
|
|
return element.get('className') === 'rect-state-icon';
|
|
});
|
|
var currentStateIconAttr = stateIconShape ? stateIconShape.attr() : {};
|
|
var stateIcon = (0, _util.mix)({}, currentStateIconAttr, cfg.stateIcon);
|
|
if (stateIconShape) {
|
|
if (!stateIcon.show && stateIcon.show !== undefined) {
|
|
stateIconShape.remove();
|
|
delete group['shapeMap']['rect-state-icon'];
|
|
}
|
|
var stateW = stateIcon.width,
|
|
h = stateIcon.height,
|
|
x = stateIcon.x,
|
|
y = stateIcon.y,
|
|
stateOffset = stateIcon.offset,
|
|
stateIconStyle = (0, _tslib.__rest)(stateIcon, ["width", "height", "x", "y", "offset"]);
|
|
stateIconShape.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, stateIconStyle), {
|
|
x: x || width / 2 - stateW + stateOffset,
|
|
y: y || -h / 2,
|
|
width: stateW,
|
|
height: h
|
|
}));
|
|
} else if (stateIcon.show) {
|
|
this.drawStateIcon(cfg, group);
|
|
}
|
|
this.updateLinkPoints(cfg, group);
|
|
},
|
|
getOptions: function getOptions(cfg, updateType) {
|
|
if (updateType === 'move') return cfg;
|
|
// different from baseShape, the config should be mixed when the updateType is not 'move'
|
|
return (0, _util.deepMix)({}, this.options, this.getCustomConfig(cfg) || {}, cfg);
|
|
}
|
|
}, 'single-node'); |