Skip to content

Commit

Permalink
✨ feat(common): new node/edge shape
Browse files Browse the repository at this point in the history
  • Loading branch information
萌萌的老胖子 committed Mar 25, 2020
1 parent c85e620 commit 6b0cb8b
Show file tree
Hide file tree
Showing 10 changed files with 728 additions and 16 deletions.
2 changes: 1 addition & 1 deletion lerna.json
View file
Expand Up @@ -2,6 +2,6 @@
"packages": [
"packages/*"
],
"npmClient": "tnpm",
"npmClient": "yarn",
"version": "0.0.0"
}
10 changes: 2 additions & 8 deletions packages/graphin/src/controller/layout/dataChecking.ts
View file
Expand Up @@ -58,14 +58,8 @@ const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
.map((edge) => {
const { source, target, shape, style } = edge;
return {
shape: shape || source === target ? 'loop' : 'LineEdge',
style: style || {
endArrow: true,
stroke: '#ddd',
cursor: 'pointer',
lineWidth: 1.5,
lineAppendWidth: 10, // 添加hover上去的宽度,
},
shape: shape || source === target ? 'loop' : 'CanonicalLineEdge',
style,
loopCfg: {
position: 'top',
dist: 20,
Expand Down
24 changes: 23 additions & 1 deletion packages/graphin/src/controller/register.ts
View file
Expand Up @@ -6,13 +6,29 @@ import compiler from '../shape/render/compiler';
import CircleNode from '../shape/render/CircleNode';

import RegisterLineEdge from '../shape/g6/LineEdge';
import RegisterCanonicalLineEdge from '../shape/graph-studio/LineEdge';
import RegisterCanonicalCircleNode from '../shape/graph-studio/CircleNode';
import RegisterCanonicalRectNode from '../shape/graph-studio/RectNode';
import graphinHighlight from '../behaviors/graphin-highlight';
import { registerFontFamily } from '../icons/iconFont';
import { BehaviorModeItem } from './init';

const defaultRegister = {
nodeShape: () => {
return [];
return [
{
name: 'CanonicalCircleNode',
register: () => {
RegisterCanonicalCircleNode(G6);
},
},
{
name: 'CanonicalRectNode',
register: () => {
RegisterCanonicalRectNode(G6);
},
},
];
},
edgeShape: () => {
return [
Expand All @@ -22,6 +38,12 @@ const defaultRegister = {
RegisterLineEdge(G6);
},
},
{
name: 'CanonicalLineEdge',
register: () => {
RegisterCanonicalLineEdge(G6);
},
},
];
},
behavior: () => {
Expand Down
206 changes: 206 additions & 0 deletions packages/graphin/src/shape/graph-studio/CircleNode.ts
View file
@@ -0,0 +1,206 @@
import { G } from '@antv/g6/types/g';
import G6 from '@antv/g6';
import { G6Node } from '../../types';
import { GREY, PRIMARY_NODE_COLOR, EnumNodeAndEdgeStatus, DEFAULT_ICON_FONT_FAMILY } from './constants';
import { normalizeColor } from './utils';
import iconFont from '../../icons/iconFont';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default (g6: any) => {
g6.registerNode('CanonicalCircleNode', {
draw(cfg: G6Node, group: G.Group) {
const hasLabel = cfg.label;
const innerNodeSize = cfg.style?.nodeSize || 48;
const innerSize = innerNodeSize > 28 ? innerNodeSize : 28;
const outerSize = innerSize + 4;

const color = cfg.style?.dark ? GREY : normalizeColor(cfg.style?.primaryColor || PRIMARY_NODE_COLOR);

const keyShape = group.addShape('circle', {
attrs: {
id: 'circle-floor',
x: 0,
y: 0,
r: outerSize / 2,
},
});
group.addShape('circle', {
attrs: {
id: 'circle-selected',
x: 0,
y: 0,
r: 0,
fill: '#000',
opacity: 0.05,
},
});
group.addShape('circle', {
attrs: {
id: 'circle-border',
x: 0,
y: 0,
r: outerSize / 2,
stroke: cfg.style?.dark ? GREY.normal : color.normal,
lineWidth: 2,
},
});
const inner = group.addGroup(
{
attrs: {
id: 'circle-inner-group',
},
// tslint:disable-next-line: align
},
{},
);
inner.addShape('circle', {
attrs: {
id: 'circle-inner',
x: 0,
y: 0,
r: innerSize / 2,
fill: cfg.style?.dark ? GREY.dark : color.dark,
},
});
inner.addShape('text', {
attrs: {
id: 'circle-icon',
x: 0,
y: 0,
text: iconFont(cfg.style?.icon || cfg.data.type || '', cfg.style?.fontFamily! || DEFAULT_ICON_FONT_FAMILY),
fontSize: 20,
textAlign: 'center',
textBaseline: 'middle',
fontFamily: cfg.style?.fontFamily || DEFAULT_ICON_FONT_FAMILY,
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
});
if (hasLabel) {
group.addShape('text', {
attrs: {
id: 'circle-label',
x: 0,
y: outerSize / 2 + 8,
fontSize: 12,
text: cfg.label,
textAlign: 'center',
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
});
}

if (!cfg.degree) return keyShape;

const children = group.addGroup(
{
attrs: {
id: 'circle-children-group',
},
// tslint:disable-next-line: align
},
{},
);
children.addShape('circle', {
attrs: {
id: 'circle-children',
x: outerSize / 2 - 9,
y: -outerSize / 2 + 9,
r: 9,
fill: cfg.style?.dark ? '#1E202D' : color.dark,
},
});
children.addShape('text', {
attrs: {
id: 'circle-children-icon',
x: outerSize / 2 - 9,
y: -outerSize / 2 + 9,
text: cfg.degree > 100 ? '99+' : cfg.degree,
fontSize: 10,
textAlign: 'center',
textBaseline: 'middle',
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
});
return keyShape;
},
setState(name: EnumNodeAndEdgeStatus, value: string, node: G6.Node) {
if (!name) return;
const data: G6Node = node.get('model');
const container = node.getContainer();
// const circleFloor = container.get('children').find(node => node.attr().id === 'circle-floor');
const circleBorder = container.get('children').find((item: G.Shape) => item.attr().id === 'circle-border');
const circleSelected = container.get('children').find((item: G.Shape) => item.attr().id === 'circle-selected');
const circleInnerGroup = container
.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-inner-group');
const circleInner = circleInnerGroup.get('children').find((item: G.Shape) => item.attr().id === 'circle-inner');
const circleIcon = circleInnerGroup.get('children').find((item: G.Shape) => item.attr().id === 'circle-icon');
const circleLabel = container.get('children').find((item: G.Shape) => item.attr().id === 'circle-label');
const circleChildrenGroup = container
.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children-group');
const circleChildren = circleChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children');
const circleChildrenIcon = circleChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children-icon');

const color = data.style?.dark ? GREY : normalizeColor(data.style?.primaryColor || PRIMARY_NODE_COLOR);
const innerNodeSize = data.style?.nodeSize || 48;
const innerSize = innerNodeSize > 28 ? innerNodeSize : 28;
const outerSize = innerSize + 4;

const targetAttrs = {
border: {
stroke: data.style?.dark ? '#1E202D' : color.normal,
lineWidth: 2,
},
selected: {
r: 0,
},
inner: {
fill: data.style?.dark ? '#1E202D' : color.dark,
},
icon: {
fill: data.style?.dark ? '#8D93B0' : '#FFFFFF',
},
label: {
fill: data.style?.dark ? '#8D93B0' : '#FFFFFF',
},
children: {
fill: data.style?.dark ? '#1E202D' : color.normal,
},
childrenIcon: {
fill: data.style?.dark ? '#8D93B0' : '#FFFFFF',
},
};

if (name === EnumNodeAndEdgeStatus.SELECTED && value) {
targetAttrs.border.lineWidth = 5;
targetAttrs.selected.r = outerSize / 2 + 10;
}

if (name === EnumNodeAndEdgeStatus.LIGHT && value) {
targetAttrs.selected.r = outerSize / 2 + 10;
}

if (name === EnumNodeAndEdgeStatus.DARK && value) {
targetAttrs.border.stroke = '#1E202D';
targetAttrs.inner.fill = '#1E202D';
targetAttrs.icon.fill = '#8D93B0';
targetAttrs.label.fill = '#8D93B0';
targetAttrs.children.fill = '#1E202D';
targetAttrs.childrenIcon.fill = '#8D93B0';
}

circleBorder.attr(targetAttrs.border);
circleSelected.attr(targetAttrs.selected);
circleInner.attr(targetAttrs.inner);
circleIcon.attr(targetAttrs.icon);
if (circleLabel) circleLabel.attr(targetAttrs.label);
if (circleChildren) circleChildren.attr(targetAttrs.children);
if (circleChildrenIcon) circleChildrenIcon.attr(targetAttrs.childrenIcon);
},
});
};

0 comments on commit 6b0cb8b

Please sign in to comment.