mirror of
https://gitee.com/antv/g6.git
synced 2024-11-29 18:28:19 +08:00
fix: core package export Arrow
This commit is contained in:
baizn
Moyee
parent
28d88377a1
commit
7cc5fab959
@ -18,11 +18,13 @@ const registerCombo = Shape.registerCombo;
|
||||
const registerBehavior = Behavior.registerBehavior;
|
||||
|
||||
export {
|
||||
Arrow,
|
||||
Shape,
|
||||
Node,
|
||||
Edge,
|
||||
Combo,
|
||||
Hull,
|
||||
Marker,
|
||||
registerNode,
|
||||
registerCombo,
|
||||
AbstractGraph,
|
||||
|
||||
@ -765,30 +765,6 @@ export interface BubblesetCfg {
|
||||
|
||||
export type TimeBarType = 'trend' | 'simple' | 'tick';
|
||||
|
||||
export type WaterMarkerConfig = Partial<{
|
||||
// 水印 canvas 容器的宽高
|
||||
width: number;
|
||||
height: number;
|
||||
compatible: boolean;
|
||||
text: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
lineHeight?: number;
|
||||
rotate?: number;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fill?: string;
|
||||
baseline?: string;
|
||||
};
|
||||
image: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
// 图片的宽高
|
||||
width?: number;
|
||||
height: number;
|
||||
rotate?: number;
|
||||
};
|
||||
}>;
|
||||
export interface HullCfg {
|
||||
id: string;
|
||||
members?: Item[] | string[]; // 节点实例或节点 Id 数组
|
||||
|
||||
@ -1,479 +1,479 @@
|
||||
// import { mix, isString } from '@antv/util';
|
||||
// import { IGroup, IShape } from '@antv/g-base';
|
||||
// import { registerNode, Item, NodeConfig, ShapeStyle, ShapeOptions, Global } from '@antv/g6';
|
||||
import { mix, isString } from '@antv/util';
|
||||
import { IGroup, IShape } from '@antv/g-base';
|
||||
import { registerNode, Item, NodeConfig, ShapeStyle, ShapeOptions, Global } from '@antv/g6';
|
||||
|
||||
// registerNode(
|
||||
// 'modelRect',
|
||||
// {
|
||||
// // 自定义节点时的配置
|
||||
// options: {
|
||||
// size: [185, 70],
|
||||
// style: {
|
||||
// radius: 5,
|
||||
// stroke: '#69c0ff',
|
||||
// fill: '#ffffff',
|
||||
// lineWidth: Global.defaultNode.style.lineWidth,
|
||||
// fillOpacity: 1,
|
||||
// },
|
||||
// // 文本样式配置
|
||||
// labelCfg: {
|
||||
// style: {
|
||||
// fill: '#595959',
|
||||
// fontSize: 14,
|
||||
// },
|
||||
// offset: 30, // 距离左侧的 offset，没有设置 y 轴上移动的配置
|
||||
// },
|
||||
// descriptionCfg: {
|
||||
// style: {
|
||||
// fontSize: 12,
|
||||
// fill: '#bfbfbf',
|
||||
// },
|
||||
// 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(cfg: NodeConfig, group: IGroup): IShape {
|
||||
// const { preRect = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
// const style = this.getShapeStyle!(cfg);
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
// const height = size[1];
|
||||
registerNode(
|
||||
'modelRect',
|
||||
{
|
||||
// 自定义节点时的配置
|
||||
options: {
|
||||
size: [185, 70],
|
||||
style: {
|
||||
radius: 5,
|
||||
stroke: '#69c0ff',
|
||||
fill: '#ffffff',
|
||||
lineWidth: Global.defaultNode.style.lineWidth,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
// 文本样式配置
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: '#595959',
|
||||
fontSize: 14,
|
||||
},
|
||||
offset: 30, // 距离左侧的 offset，没有设置 y 轴上移动的配置
|
||||
},
|
||||
descriptionCfg: {
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#bfbfbf',
|
||||
},
|
||||
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(cfg: NodeConfig, group: IGroup): IShape {
|
||||
const { preRect = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
const style = this.getShapeStyle!(cfg);
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
const height = size[1];
|
||||
|
||||
// const keyShape = group.addShape('rect', {
|
||||
// attrs: style,
|
||||
// className: `${this.type}-keyShape`,
|
||||
// name: `${this.type}-keyShape`,
|
||||
// draggable: true,
|
||||
// });
|
||||
const keyShape = group.addShape('rect', {
|
||||
attrs: style,
|
||||
className: `${this.type}-keyShape`,
|
||||
name: `${this.type}-keyShape`,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
// const { show: preRectShow, ...preRectStyle } = preRect;
|
||||
// if (preRectShow) {
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: -width / 2,
|
||||
// y: -height / 2,
|
||||
// height,
|
||||
// ...preRectStyle,
|
||||
// },
|
||||
// className: 'pre-rect',
|
||||
// name: 'pre-rect',
|
||||
// draggable: true,
|
||||
// });
|
||||
// }
|
||||
const { show: preRectShow, ...preRectStyle } = preRect;
|
||||
if (preRectShow) {
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: -width / 2,
|
||||
y: -height / 2,
|
||||
height,
|
||||
...preRectStyle,
|
||||
},
|
||||
className: 'pre-rect',
|
||||
name: 'pre-rect',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
// (this as any).drawLogoIcon(cfg, group);
|
||||
(this as any).drawLogoIcon(cfg, group);
|
||||
|
||||
// (this as any).drawStateIcon(cfg, group);
|
||||
(this as any).drawStateIcon(cfg, group);
|
||||
|
||||
// (this as any).drawLinkPoints(cfg, group);
|
||||
// return keyShape;
|
||||
// },
|
||||
// /**
|
||||
// * 绘制模型矩形左边的logo图标
|
||||
// * @param {Object} cfg 数据配置项
|
||||
// * @param {Group} group Group实例
|
||||
// */
|
||||
// drawLogoIcon(cfg: NodeConfig, group: IGroup) {
|
||||
// const { logoIcon = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
(this as any).drawLinkPoints(cfg, group);
|
||||
return keyShape;
|
||||
},
|
||||
/**
|
||||
* 绘制模型矩形左边的logo图标
|
||||
* @param {Object} cfg 数据配置项
|
||||
* @param {Group} group Group实例
|
||||
*/
|
||||
drawLogoIcon(cfg: NodeConfig, group: IGroup) {
|
||||
const { logoIcon = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
|
||||
// if (logoIcon.show) {
|
||||
// const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
|
||||
// group.addShape('image', {
|
||||
// attrs: {
|
||||
// ...logoIconStyle,
|
||||
// x: x || -width / 2 + (w as number) + (offset as number),
|
||||
// y: y || -(h as number) / 2,
|
||||
// width: w,
|
||||
// height: h,
|
||||
// },
|
||||
// className: 'rect-logo-icon',
|
||||
// name: 'rect-logo-icon',
|
||||
// draggable: true,
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// /**
|
||||
// * 绘制模型矩形右边的状态图标
|
||||
// * @param {Object} cfg 数据配置项
|
||||
// * @param {Group} group Group实例
|
||||
// */
|
||||
// drawStateIcon(cfg: NodeConfig, group: IGroup) {
|
||||
// const { stateIcon = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
if (logoIcon.show) {
|
||||
const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
|
||||
group.addShape('image', {
|
||||
attrs: {
|
||||
...logoIconStyle,
|
||||
x: x || -width / 2 + (w as number) + (offset as number),
|
||||
y: y || -(h as number) / 2,
|
||||
width: w,
|
||||
height: h,
|
||||
},
|
||||
className: 'rect-logo-icon',
|
||||
name: 'rect-logo-icon',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 绘制模型矩形右边的状态图标
|
||||
* @param {Object} cfg 数据配置项
|
||||
* @param {Group} group Group实例
|
||||
*/
|
||||
drawStateIcon(cfg: NodeConfig, group: IGroup) {
|
||||
const { stateIcon = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
|
||||
// if (stateIcon.show) {
|
||||
// const { width: w, height: h, x, y, offset, ...iconStyle } = stateIcon;
|
||||
// group.addShape('image', {
|
||||
// attrs: {
|
||||
// ...iconStyle,
|
||||
// x: x || width / 2 - (w as number) + (offset as number),
|
||||
// y: y || -(h as number) / 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(cfg: NodeConfig, group: IGroup) {
|
||||
// const { linkPoints = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
if (stateIcon.show) {
|
||||
const { width: w, height: h, x, y, offset, ...iconStyle } = stateIcon;
|
||||
group.addShape('image', {
|
||||
attrs: {
|
||||
...iconStyle,
|
||||
x: x || width / 2 - (w as number) + (offset as number),
|
||||
y: y || -(h as number) / 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(cfg: NodeConfig, group: IGroup) {
|
||||
const { linkPoints = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
|
||||
// const { top, left, right, bottom, size: markSize, r: markR, ...markStyle } = linkPoints;
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
// const height = size[1];
|
||||
// if (left) {
|
||||
// // left circle
|
||||
// group.addShape('circle', {
|
||||
// attrs: {
|
||||
// ...markStyle,
|
||||
// x: -width / 2,
|
||||
// y: 0,
|
||||
// r: markSize / 2 || markR || 5,
|
||||
// },
|
||||
// className: 'link-point-left',
|
||||
// name: 'link-point-left',
|
||||
// isAnchorPoint: true,
|
||||
// });
|
||||
// }
|
||||
const { top, left, right, bottom, size: markSize, r: markR, ...markStyle } = linkPoints;
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
const height = size[1];
|
||||
if (left) {
|
||||
// left circle
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
...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.addShape('circle', {
|
||||
// attrs: {
|
||||
// ...markStyle,
|
||||
// x: width / 2,
|
||||
// y: 0,
|
||||
// r: markSize / 2 || markR || 5,
|
||||
// },
|
||||
// className: 'link-point-right',
|
||||
// name: 'link-point-right',
|
||||
// isAnchorPoint: true,
|
||||
// });
|
||||
// }
|
||||
if (right) {
|
||||
// right circle
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
...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.addShape('circle', {
|
||||
// attrs: {
|
||||
// ...markStyle,
|
||||
// x: 0,
|
||||
// y: -height / 2,
|
||||
// r: markSize / 2 || markR || 5,
|
||||
// },
|
||||
// className: 'link-point-top',
|
||||
// name: 'link-point-top',
|
||||
// isAnchorPoint: true,
|
||||
// });
|
||||
// }
|
||||
if (top) {
|
||||
// top circle
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
...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.addShape('circle', {
|
||||
// attrs: {
|
||||
// ...markStyle,
|
||||
// x: 0,
|
||||
// y: height / 2,
|
||||
// r: markSize / 2 || markR || 5,
|
||||
// },
|
||||
// className: 'link-point-bottom',
|
||||
// name: 'link-point-bottom',
|
||||
// isAnchorPoint: true,
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// drawLabel(cfg: NodeConfig, group: IGroup): IShape {
|
||||
// const { labelCfg = {}, logoIcon = {}, descriptionCfg = {} } = this.getOptions(
|
||||
// cfg,
|
||||
// ) as NodeConfig;
|
||||
if (bottom) {
|
||||
// bottom circle
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
...markStyle,
|
||||
x: 0,
|
||||
y: height / 2,
|
||||
r: markSize / 2 || markR || 5,
|
||||
},
|
||||
className: 'link-point-bottom',
|
||||
name: 'link-point-bottom',
|
||||
isAnchorPoint: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
drawLabel(cfg: NodeConfig, group: IGroup): IShape {
|
||||
const { labelCfg = {}, logoIcon = {}, descriptionCfg = {} } = this.getOptions(
|
||||
cfg,
|
||||
) as NodeConfig;
|
||||
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
|
||||
// let label = null;
|
||||
let label = null;
|
||||
|
||||
// const { show, width: w } = logoIcon;
|
||||
// let offsetX = -width / 2 + labelCfg.offset;
|
||||
const { show, width: w } = logoIcon;
|
||||
let offsetX = -width / 2 + labelCfg.offset;
|
||||
|
||||
// if (show) {
|
||||
// offsetX = -width / 2 + (w as number) + labelCfg.offset;
|
||||
// }
|
||||
if (show) {
|
||||
offsetX = -width / 2 + (w as number) + labelCfg.offset;
|
||||
}
|
||||
|
||||
// const { style: fontStyle } = labelCfg;
|
||||
// const { style: descriptionStyle, paddingTop: descriptionPaddingTop } = descriptionCfg;
|
||||
// if (isString(cfg.description)) {
|
||||
// label = group.addShape('text', {
|
||||
// attrs: {
|
||||
// ...fontStyle,
|
||||
// x: offsetX,
|
||||
// y: -5,
|
||||
// text: cfg.label,
|
||||
// },
|
||||
// className: 'text-shape',
|
||||
// name: 'text-shape',
|
||||
// draggable: true,
|
||||
// });
|
||||
const { style: fontStyle } = labelCfg;
|
||||
const { style: descriptionStyle, paddingTop: descriptionPaddingTop } = descriptionCfg;
|
||||
if (isString(cfg.description)) {
|
||||
label = group.addShape('text', {
|
||||
attrs: {
|
||||
...fontStyle,
|
||||
x: offsetX,
|
||||
y: -5,
|
||||
text: cfg.label,
|
||||
},
|
||||
className: 'text-shape',
|
||||
name: 'text-shape',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
// group.addShape('text', {
|
||||
// attrs: {
|
||||
// ...descriptionStyle,
|
||||
// x: offsetX,
|
||||
// y: 17 + ((descriptionPaddingTop as any) || 0),
|
||||
// text: cfg.description,
|
||||
// },
|
||||
// className: 'rect-description',
|
||||
// name: 'rect-description',
|
||||
// draggable: true,
|
||||
// });
|
||||
// } else {
|
||||
// label = group.addShape('text', {
|
||||
// attrs: {
|
||||
// ...fontStyle,
|
||||
// x: offsetX,
|
||||
// y: 7,
|
||||
// text: cfg.label,
|
||||
// },
|
||||
// draggable: true,
|
||||
// });
|
||||
// }
|
||||
// return label;
|
||||
// },
|
||||
// /**
|
||||
// * 获取节点的样式，供基于该节点自定义时使用
|
||||
// * @param {Object} cfg 节点数据模型
|
||||
// * @return {Object} 节点的样式
|
||||
// */
|
||||
// getShapeStyle(cfg: NodeConfig) {
|
||||
// const { style: defaultStyle } = this.getOptions(cfg) as NodeConfig;
|
||||
// const strokeStyle: ShapeStyle = {
|
||||
// stroke: cfg.color,
|
||||
// };
|
||||
// // 如果设置了color，则覆盖默认的stroke属性
|
||||
// const style: ShapeStyle = mix({}, defaultStyle, strokeStyle);
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = style.width || size[0];
|
||||
// const height = style.height || size[1];
|
||||
// const styles = {
|
||||
// x: -width / 2,
|
||||
// y: -height / 2,
|
||||
// width,
|
||||
// height,
|
||||
// ...style,
|
||||
// };
|
||||
// return styles;
|
||||
// },
|
||||
// update(cfg: NodeConfig, item: Item) {
|
||||
// const { style = {}, labelCfg = {}, descriptionCfg = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
// const size = (this as ShapeOptions).getSize!(cfg);
|
||||
// const width = size[0];
|
||||
// const height = size[1];
|
||||
// const keyShape = item.get('keyShape');
|
||||
// keyShape.attr({
|
||||
// ...style,
|
||||
// x: -width / 2,
|
||||
// y: -height / 2,
|
||||
// width,
|
||||
// height,
|
||||
// });
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
...descriptionStyle,
|
||||
x: offsetX,
|
||||
y: 17 + ((descriptionPaddingTop as any) || 0),
|
||||
text: cfg.description,
|
||||
},
|
||||
className: 'rect-description',
|
||||
name: 'rect-description',
|
||||
draggable: true,
|
||||
});
|
||||
} else {
|
||||
label = group.addShape('text', {
|
||||
attrs: {
|
||||
...fontStyle,
|
||||
x: offsetX,
|
||||
y: 7,
|
||||
text: cfg.label,
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
return label;
|
||||
},
|
||||
/**
|
||||
* 获取节点的样式，供基于该节点自定义时使用
|
||||
* @param {Object} cfg 节点数据模型
|
||||
* @return {Object} 节点的样式
|
||||
*/
|
||||
getShapeStyle(cfg: NodeConfig) {
|
||||
const { style: defaultStyle } = this.getOptions(cfg) as NodeConfig;
|
||||
const strokeStyle: ShapeStyle = {
|
||||
stroke: cfg.color,
|
||||
};
|
||||
// 如果设置了color，则覆盖默认的stroke属性
|
||||
const style: ShapeStyle = mix({}, defaultStyle, strokeStyle);
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = style.width || size[0];
|
||||
const height = style.height || size[1];
|
||||
const styles = {
|
||||
x: -width / 2,
|
||||
y: -height / 2,
|
||||
width,
|
||||
height,
|
||||
...style,
|
||||
};
|
||||
return styles;
|
||||
},
|
||||
update(cfg: NodeConfig, item: Item) {
|
||||
const { style = {}, labelCfg = {}, descriptionCfg = {} } = this.getOptions(cfg) as NodeConfig;
|
||||
const size = (this as ShapeOptions).getSize!(cfg);
|
||||
const width = size[0];
|
||||
const height = size[1];
|
||||
const keyShape = item.get('keyShape');
|
||||
keyShape.attr({
|
||||
...style,
|
||||
x: -width / 2,
|
||||
y: -height / 2,
|
||||
width,
|
||||
height,
|
||||
});
|
||||
|
||||
// const group = item.getContainer();
|
||||
const group = item.getContainer();
|
||||
|
||||
// const logoIconShape = group.find((element) => element.get('className') === 'rect-logo-icon');
|
||||
// const currentLogoIconAttr = logoIconShape ? logoIconShape.attr() : {};
|
||||
const logoIconShape = group.find((element) => element.get('className') === 'rect-logo-icon');
|
||||
const currentLogoIconAttr = logoIconShape ? logoIconShape.attr() : {};
|
||||
|
||||
// const logoIcon = mix({}, currentLogoIconAttr, cfg.logoIcon);
|
||||
const logoIcon = mix({}, currentLogoIconAttr, cfg.logoIcon);
|
||||
|
||||
// let { width: w } = logoIcon;
|
||||
// if (w === undefined) {
|
||||
// w = (this as any).options.logoIcon.width;
|
||||
// }
|
||||
// const show = cfg.logoIcon ? cfg.logoIcon.show : undefined;
|
||||
let { width: w } = logoIcon;
|
||||
if (w === undefined) {
|
||||
w = (this as any).options.logoIcon.width;
|
||||
}
|
||||
const show = cfg.logoIcon ? cfg.logoIcon.show : undefined;
|
||||
|
||||
// const { offset } = labelCfg;
|
||||
// let offsetX = -width / 2 + w + offset;
|
||||
const { offset } = labelCfg;
|
||||
let offsetX = -width / 2 + w + offset;
|
||||
|
||||
// if (!show && show !== undefined) {
|
||||
// offsetX = -width / 2 + offset;
|
||||
// }
|
||||
if (!show && show !== undefined) {
|
||||
offsetX = -width / 2 + offset;
|
||||
}
|
||||
|
||||
// const label = group.find((element) => element.get('className') === 'node-label');
|
||||
// const description = group.find((element) => element.get('className') === 'rect-description');
|
||||
// if (cfg.label) {
|
||||
// if (!label) {
|
||||
// group.addShape('text', {
|
||||
// attrs: {
|
||||
// ...labelCfg.style,
|
||||
// x: offsetX,
|
||||
// y: cfg.description ? -5 : 7,
|
||||
// text: cfg.label,
|
||||
// },
|
||||
// className: 'node-label',
|
||||
// name: 'node-label',
|
||||
// draggable: true,
|
||||
// });
|
||||
// } else {
|
||||
// const cfgStyle = cfg.labelCfg ? cfg.labelCfg.style : {};
|
||||
// const labelStyle = mix({}, label.attr(), cfgStyle);
|
||||
// if (cfg.label) labelStyle.text = cfg.label;
|
||||
// labelStyle.x = offsetX;
|
||||
// if (isString(cfg.description)) labelStyle.y = -5;
|
||||
// if (description) {
|
||||
// description.resetMatrix();
|
||||
// description.attr({
|
||||
// x: offsetX,
|
||||
// });
|
||||
// }
|
||||
// label.resetMatrix();
|
||||
// label.attr(labelStyle);
|
||||
// }
|
||||
// }
|
||||
// if (isString(cfg.description)) {
|
||||
// const { paddingTop } = descriptionCfg;
|
||||
// if (!description) {
|
||||
// group.addShape('text', {
|
||||
// attrs: {
|
||||
// ...descriptionCfg.style,
|
||||
// x: offsetX,
|
||||
// y: 17 + ((paddingTop as any) || 0),
|
||||
// text: cfg.description,
|
||||
// },
|
||||
// className: 'rect-description',
|
||||
// name: 'rect-description',
|
||||
// draggable: true,
|
||||
// });
|
||||
// } else {
|
||||
// const cfgStyle = cfg.descriptionCfg ? cfg.descriptionCfg.style : {};
|
||||
// const descriptionStyle = mix({}, description.attr(), cfgStyle);
|
||||
// if (isString(cfg.description)) descriptionStyle.text = cfg.description;
|
||||
// descriptionStyle.x = offsetX;
|
||||
// description.resetMatrix();
|
||||
// description.attr({
|
||||
// ...descriptionStyle,
|
||||
// y: 17 + ((paddingTop as any) || 0),
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
const label = group.find((element) => element.get('className') === 'node-label');
|
||||
const description = group.find((element) => element.get('className') === 'rect-description');
|
||||
if (cfg.label) {
|
||||
if (!label) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
...labelCfg.style,
|
||||
x: offsetX,
|
||||
y: cfg.description ? -5 : 7,
|
||||
text: cfg.label,
|
||||
},
|
||||
className: 'node-label',
|
||||
name: 'node-label',
|
||||
draggable: true,
|
||||
});
|
||||
} else {
|
||||
const cfgStyle = cfg.labelCfg ? cfg.labelCfg.style : {};
|
||||
const labelStyle = mix({}, label.attr(), cfgStyle);
|
||||
if (cfg.label) labelStyle.text = cfg.label;
|
||||
labelStyle.x = offsetX;
|
||||
if (isString(cfg.description)) labelStyle.y = -5;
|
||||
if (description) {
|
||||
description.resetMatrix();
|
||||
description.attr({
|
||||
x: offsetX,
|
||||
});
|
||||
}
|
||||
label.resetMatrix();
|
||||
label.attr(labelStyle);
|
||||
}
|
||||
}
|
||||
if (isString(cfg.description)) {
|
||||
const { paddingTop } = descriptionCfg;
|
||||
if (!description) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
...descriptionCfg.style,
|
||||
x: offsetX,
|
||||
y: 17 + ((paddingTop as any) || 0),
|
||||
text: cfg.description,
|
||||
},
|
||||
className: 'rect-description',
|
||||
name: 'rect-description',
|
||||
draggable: true,
|
||||
});
|
||||
} else {
|
||||
const cfgStyle = cfg.descriptionCfg ? cfg.descriptionCfg.style : {};
|
||||
const descriptionStyle = mix({}, description.attr(), cfgStyle);
|
||||
if (isString(cfg.description)) descriptionStyle.text = cfg.description;
|
||||
descriptionStyle.x = offsetX;
|
||||
description.resetMatrix();
|
||||
description.attr({
|
||||
...descriptionStyle,
|
||||
y: 17 + ((paddingTop as any) || 0),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// const preRectShape = group.find((element) => element.get('className') === 'pre-rect');
|
||||
// if (preRectShape) {
|
||||
// const preRect = mix({}, preRectShape.attr(), cfg.preRect);
|
||||
// preRectShape.attr({
|
||||
// ...preRect,
|
||||
// x: -width / 2,
|
||||
// y: -height / 2,
|
||||
// height,
|
||||
// });
|
||||
// }
|
||||
const preRectShape = group.find((element) => element.get('className') === 'pre-rect');
|
||||
if (preRectShape) {
|
||||
const preRect = mix({}, 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: logoW, height: h, x, y, offset: logoOffset, ...logoIconStyle } = logoIcon;
|
||||
// logoIconShape.attr({
|
||||
// ...logoIconStyle,
|
||||
// x: x || -width / 2 + logoW + logoOffset,
|
||||
// y: y || -h / 2,
|
||||
// width: logoW,
|
||||
// height: h,
|
||||
// });
|
||||
// }
|
||||
// } else if (show) {
|
||||
// (this as any).drawLogoIcon(cfg, group);
|
||||
// }
|
||||
if (logoIconShape) {
|
||||
if (!show && show !== undefined) {
|
||||
logoIconShape.remove();
|
||||
} else {
|
||||
const { width: logoW, height: h, x, y, offset: logoOffset, ...logoIconStyle } = logoIcon;
|
||||
logoIconShape.attr({
|
||||
...logoIconStyle,
|
||||
x: x || -width / 2 + logoW + logoOffset,
|
||||
y: y || -h / 2,
|
||||
width: logoW,
|
||||
height: h,
|
||||
});
|
||||
}
|
||||
} else if (show) {
|
||||
(this as any).drawLogoIcon(cfg, group);
|
||||
}
|
||||
|
||||
// const stateIconShape = group.find(
|
||||
// (element) => element.get('className') === 'rect-state-icon',
|
||||
// );
|
||||
// const currentStateIconAttr = stateIconShape ? stateIconShape.attr() : {};
|
||||
// const stateIcon = mix({}, currentStateIconAttr, cfg.stateIcon);
|
||||
// if (stateIconShape) {
|
||||
// if (!stateIcon.show && stateIcon.show !== undefined) {
|
||||
// stateIconShape.remove();
|
||||
// }
|
||||
// const {
|
||||
// width: stateW,
|
||||
// height: h,
|
||||
// x,
|
||||
// y,
|
||||
// offset: stateOffset,
|
||||
// ...stateIconStyle
|
||||
// } = stateIcon;
|
||||
// stateIconShape.attr({
|
||||
// ...stateIconStyle,
|
||||
// x: x || width / 2 - stateW + stateOffset,
|
||||
// y: y || -h / 2,
|
||||
// width: stateW,
|
||||
// height: h,
|
||||
// });
|
||||
// } else if (stateIcon.show) {
|
||||
// (this as any).drawStateIcon(cfg, group);
|
||||
// }
|
||||
const stateIconShape = group.find(
|
||||
(element) => element.get('className') === 'rect-state-icon',
|
||||
);
|
||||
const currentStateIconAttr = stateIconShape ? stateIconShape.attr() : {};
|
||||
const stateIcon = mix({}, currentStateIconAttr, cfg.stateIcon);
|
||||
if (stateIconShape) {
|
||||
if (!stateIcon.show && stateIcon.show !== undefined) {
|
||||
stateIconShape.remove();
|
||||
}
|
||||
const {
|
||||
width: stateW,
|
||||
height: h,
|
||||
x,
|
||||
y,
|
||||
offset: stateOffset,
|
||||
...stateIconStyle
|
||||
} = stateIcon;
|
||||
stateIconShape.attr({
|
||||
...stateIconStyle,
|
||||
x: x || width / 2 - stateW + stateOffset,
|
||||
y: y || -h / 2,
|
||||
width: stateW,
|
||||
height: h,
|
||||
});
|
||||
} else if (stateIcon.show) {
|
||||
(this as any).drawStateIcon(cfg, group);
|
||||
}
|
||||
|
||||
// (this as any).updateLinkPoints(cfg, group);
|
||||
// },
|
||||
// },
|
||||
// 'single-node',
|
||||
// );
|
||||
(this as any).updateLinkPoints(cfg, group);
|
||||
},
|
||||
},
|
||||
'single-node',
|
||||
);
|
||||
|
||||
@ -52,15 +52,7 @@ export default {
|
||||
if (!this.shouldUpdate(e, collapsed)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.onChange(item, collapsed);
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
'G6 自 3.0.4 版本支持直接从 item.getModel() 获取源数据(临时通知，将在3.2.0版本中清除)',
|
||||
err,
|
||||
);
|
||||
}
|
||||
this.onChange(item, collapsed);
|
||||
this.graph.layout();
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import { registerBehavior, registerCombo, registerEdge, registerNode } from '@antv/g6-core';
|
||||
import {
|
||||
registerBehavior,
|
||||
registerCombo,
|
||||
registerEdge,
|
||||
registerNode,
|
||||
Arrow,
|
||||
Marker,
|
||||
} from '@antv/g6-core';
|
||||
import Graph from './graph/graph';
|
||||
import TreeGraph from './graph/tree-graph';
|
||||
// import Shape, { Arrow, Marker } from './element';
|
||||
import { Layout, registerLayout } from './layout';
|
||||
import Global from './global';
|
||||
import Util from './util';
|
||||
@ -23,30 +29,28 @@ const ImageMinimap = Plugin.ImageMinimap;
|
||||
const EdgeFilterLens = Plugin.EdgeFilterLens;
|
||||
|
||||
export * from '@antv/g6-core';
|
||||
export { IGraph } from './interface/graph';
|
||||
export * from './types';
|
||||
export * from './interface/graph';
|
||||
|
||||
export {
|
||||
// registerNode,
|
||||
// registerCombo,
|
||||
Graph,
|
||||
TreeGraph,
|
||||
Util,
|
||||
// registerEdge,
|
||||
Layout,
|
||||
Global,
|
||||
// registerLayout,
|
||||
Minimap,
|
||||
Grid,
|
||||
Bundling,
|
||||
Menu,
|
||||
Fisheye,
|
||||
// registerBehavior,
|
||||
Algorithm,
|
||||
ToolBar,
|
||||
Tooltip,
|
||||
TimeBar,
|
||||
ImageMinimap,
|
||||
EdgeFilterLens,
|
||||
Arrow,
|
||||
Marker,
|
||||
};
|
||||
|
||||
export default {
|
||||
@ -72,6 +76,6 @@ export default {
|
||||
ImageMinimap,
|
||||
EdgeFilterLens,
|
||||
Algorithm,
|
||||
// Arrow,
|
||||
// Marker,
|
||||
Arrow,
|
||||
Marker,
|
||||
};
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
import { IAbstractGraph, IG6GraphEvent, IShapeBase, Item, ShapeStyle } from '@antv/g6-core';
|
||||
import {
|
||||
IAbstractGraph,
|
||||
IG6GraphEvent,
|
||||
IShapeBase,
|
||||
Item,
|
||||
ShapeStyle,
|
||||
TreeGraphData,
|
||||
} from '@antv/g6-core';
|
||||
import { Event as GraphEvent, ICanvas } from '@antv/g-base';
|
||||
import { PluginBase } from '@antv/g6-plugins';
|
||||
|
||||
import { WaterMarkerConfig, TreeGraphData } from '../types';
|
||||
import { WaterMarkerConfig } from '../types';
|
||||
|
||||
export type DataUrlType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/bmp';
|
||||
|
||||
@ -124,30 +131,3 @@ export interface ITreeGraph extends IGraph {
|
||||
*/
|
||||
isLayoutAnimating(): boolean;
|
||||
}
|
||||
|
||||
export class G6GraphEvent extends GraphEvent implements IG6GraphEvent {
|
||||
public item: Item;
|
||||
|
||||
public canvasX: number;
|
||||
|
||||
public canvasY: number;
|
||||
|
||||
public clientX: number;
|
||||
|
||||
public clientY: number;
|
||||
|
||||
public wheelDelta: number;
|
||||
|
||||
public detail: number;
|
||||
|
||||
public target!: IShapeBase & ICanvas;
|
||||
|
||||
constructor(type: string, event: IG6GraphEvent) {
|
||||
super(type, event);
|
||||
this.item = event.item;
|
||||
this.canvasX = event.canvasX;
|
||||
this.canvasY = event.canvasY;
|
||||
this.wheelDelta = event.wheelDelta;
|
||||
this.detail = event.detail;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
import { ShapeStyle, ModelConfig, StateStyles } from '@antv/g6-core';
|
||||
|
||||
/* eslint @typescript-eslint/no-use-before-define: 0 */
|
||||
|
||||
export type TimeBarType = 'trend' | 'simple' | 'tick';
|
||||
|
||||
export type WaterMarkerConfig = Partial<{
|
||||
// 水印 canvas 容器的宽高
|
||||
width: number;
|
||||
@ -28,22 +23,3 @@ export type WaterMarkerConfig = Partial<{
|
||||
rotate?: number;
|
||||
};
|
||||
}>;
|
||||
|
||||
export interface TreeGraphData {
|
||||
id: string;
|
||||
label?: string;
|
||||
x?: number;
|
||||
y?: number;
|
||||
children?: TreeGraphData[];
|
||||
data?: ModelConfig;
|
||||
side?: 'left' | 'right';
|
||||
depth?: number;
|
||||
collapsed?: boolean;
|
||||
style?:
|
||||
| ShapeStyle
|
||||
| {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
stateStyles?: StateStyles;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
43
packages/site/.eslintrc.js
Normal file
43
packages/site/.eslintrc.js
Normal file
@ -0,0 +1,43 @@
|
||||
module.exports = {
|
||||
extends: [require.resolve('@umijs/fabric/dist/eslint')],
|
||||
globals: {
|
||||
$: true,
|
||||
_: true,
|
||||
},
|
||||
rules: {
|
||||
'no-bitwise': 0,
|
||||
'import/order': 0,
|
||||
'no-plusplus': 0,
|
||||
'no-console': ['error', { allow: ['warn', 'error'] }],
|
||||
'operator-assignment': 0,
|
||||
'consistent-return': 0,
|
||||
'lines-between-class-members': 0,
|
||||
'class-methods-use-this': 0,
|
||||
'lines-between-class-members': 0,
|
||||
'no-multi-assign': 0,
|
||||
'no-continue': 0,
|
||||
'no-underscore-dangle': 0,
|
||||
'no-useless-constructor': 0,
|
||||
'prefer-destructuring': 0,
|
||||
'guard-for-in': 0,
|
||||
'no-restricted-globals': 0,
|
||||
'max-classes-per-file': 0,
|
||||
// 后面需要去掉
|
||||
'no-restricted-syntax': 0,
|
||||
'prefer-spread': 0,
|
||||
'@typescript-eslint/camelcase': 0,
|
||||
'no-loop-func': 0,
|
||||
'@typescript-eslint/no-loop-func': 0,
|
||||
'@typescript-eslint/no-redeclare': 0,
|
||||
'@typescript-eslint/no-shadow': 0,
|
||||
'@typescript-eslint/no-unused-vars': 0,
|
||||
'no-param-reassign': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'no-unused-expressions': 0,
|
||||
'dot-notation': 0,
|
||||
'array-callback-return': 0,
|
||||
'one-var': 0,
|
||||
'no-lonely-if': 0,
|
||||
'no-sequences': 0
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user