Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
update(cfg: NodeConfig, item: Item) {
const group = item.getContainer();
const { style: defaultStyle } = this.options;
const size = this.getSize(cfg);
// 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。
const strokeStyle = {
stroke: cfg.color,
x: -size[0] / 2,
y: -size[1] / 2,
width: size[0],
height: size[1]
};
// 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。
const keyShape = item.get('keyShape');
const style = deepMix({}, defaultStyle, keyShape.attr(), strokeStyle, cfg.style);
this.updateShape(cfg, item, style, false);
this.updateLinkPoints(cfg, group);
}
}, 'single-node');
public setGroupStyle(keyShape: ShapeBase, style: string | object) {
if (!keyShape || keyShape.get('destroyed')) {
return;
}
let styles = {};
const { hover: hoverStyle, default: defaultStyle } = this.styles;
if (isString(style)) {
if (style === 'default') {
styles = deepMix({}, defaultStyle);
} else if (style === 'hover') {
styles = deepMix({}, hoverStyle);
}
} else {
styles = deepMix({}, defaultStyle, style);
}
// tslint:disable-next-line:forin
for (const s in styles) {
keyShape.attr(s, styles[s]);
}
}
getShapeStyle(cfg: NodeConfig): ShapeStyle {
const { style: defaultStyle } = this.options;
const strokeStyle = {
stroke: cfg.color
};
// 如果设置了color,则覆盖默认的stroke属性
const style = deepMix({}, defaultStyle, strokeStyle, cfg.style);
const size = this.getSize(cfg);
const r = size[0] / 2;
const styles = Object.assign({}, {
x: 0,
y: 0,
r
}, style);
return styles;
},
update(cfg: NodeConfig, item: Item) {
update(cfg: NodeConfig, item: Item) {
const group = item.getContainer();
const { style: defaultStyle } = this.options;
const path = this.getPath(cfg);
// 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。
const strokeStyle = {
stroke: cfg.color,
path
};
// 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。
const keyShape = item.get('keyShape');
const style = deepMix({}, defaultStyle, keyShape.attr(), strokeStyle, cfg.style);
this.updateShape(cfg, item, style, true);
this.updateLinkPoints(cfg, group);
},
/**
updateIcon(cfg, item) {
const group = item.getContainer();
const { icon: defaultIcon } = this.options;
const icon = deepMix({}, defaultIcon, cfg.icon);
const { show } = cfg.icon ? cfg.icon : { show: undefined };
const iconShape = group.find(element => { return element.get('className') === `${this.type}-icon`})
if (iconShape) { // 若原先存在 icon
if (show || show === undefined) { // 若传入 show: true, 或没有设置,则更新原有的 icon 样式
const iconConfig = deepMix({}, defaultIcon, iconShape.attr(), cfg.icon);
const { width: w, height: h } = iconConfig;
iconShape.attr({
...iconConfig,
x: -w / 2,
y: -h / 2
});
} else { // 若传入了 show: false 则删除原先的 icon
iconShape.remove();
}
} else if (show) { // 如果原先不存在 icon,但传入了 show: true,则新增 icon
const { width: w, height: h } = icon;
drawShape(cfg: NodeConfig, group: GGroup): IShape {
const { preRect: defaultPreRect } = this.options;
const style = this.getShapeStyle(cfg);
const size = this.getSize(cfg);
const width = size[0];
const height = size[1];
const keyShape = group.addShape('rect', {
attrs: style
});
const preRect = deepMix({}, defaultPreRect, cfg.preRect);
const { show: preRectShow, ...preRectStyle } = preRect;
if (preRectShow) {
group.addShape('rect', {
attrs: {
x: -width / 2,
y: -height / 2,
height,
...preRectStyle
},
className: 'pre-rect'
});
}
this.drawLogoIcon(cfg, group);
this.drawStateIcon(cfg, group);
} else {
const cfgStyle = cfg.descriptionCfg ? cfg.descriptionCfg.style : {};
const descriptionStyle = deepMix({}, description.attr(), cfgStyle);
if (cfg.description) descriptionStyle.text = cfg.description;
descriptionStyle.x = offsetX;
description.resetMatrix()
description.attr({
...descriptionStyle,
y: 17 + paddingTop,
})
}
}
const preRectShape = group.find(element => { return element.get('className') === 'pre-rect'})
if (preRectShape) {
const preRect = deepMix({}, preRectShape.attr(), cfg.preRect);
preRectShape.attr({
...preRect,
x: -width / 2,
y: -height / 2,
height
});
}
if (logoIconShape) {
if (!show && show !== undefined) {
logoIconShape.remove();
} else {
const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
logoIconShape.attr({
...logoIconStyle,
x: x || -width / 2 + w + offset,
drawShape(cfg: NodeConfig, group: GGroup): IShape {
const { icon: defaultIcon } = this.options;
const style = this.getShapeStyle(cfg);
const icon = deepMix({}, defaultIcon, cfg.icon);
const keyShape = group.addShape('path', {
attrs: style
});
const { width: w, height: h, show } = icon;
if (show) {
const image = group.addShape('image', {
attrs: {
x: -w / 2,
y: -h / 2,
...icon
},
className: 'diamond-icon'
});
} else {
const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
logoIconShape.attr({
...logoIconStyle,
x: x || -width / 2 + w + offset,
y: y || -h / 2,
width: w,
height: h
});
}
} else if (show) {
this.drawLogoIcon(cfg, group);
}
const stateIconShape = group.find(element => { return element.get('className') === 'rect-state-icon'})
const stateIcon = deepMix({}, stateIconShape.attr(), cfg.stateIcon);
if (stateIconShape) {
if (!stateIcon.show && stateIcon.show !== undefined) {
stateIconShape.remove();
}
const { width: w, height: h, x, y, offset, ...stateIconStyle } = stateIcon;
stateIconShape.attr({
...stateIconStyle,
x: x || width / 2 - w + offset,
y: y || -h / 2,
width: w,
height: h
});
} else if (stateIcon.show) {
this.drawStateIcon(cfg, group);
}