Skip to content

Commit

Permalink
✨ feat(common): upgrade inner shape to adopt g6 3.4
Browse files Browse the repository at this point in the history
  • Loading branch information
萌萌的老胖子 committed May 6, 2020
1 parent 10a7585 commit fe3893e
Show file tree
Hide file tree
Showing 8 changed files with 183 additions and 88 deletions.
53 changes: 38 additions & 15 deletions packages/graphin/src/shape/graph-studio/CircleNode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { G } from '@antv/g6/types/g';
import { Group, Shape } from '@antv/g-canvas';
import { INode } from '@antv/g6/lib/interface/item';
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) => {
export default (g6: typeof G6) => {
g6.registerNode('CircleNode', {
draw(cfg: G6Node, group: G.Group) {
draw(cfg: G6Node, group: Group) {
const hasLabel = cfg.label;
const innerNodeSize = cfg.style?.nodeSize || 48;
const innerSize = innerNodeSize > 28 ? innerNodeSize : 28;
Expand All @@ -23,6 +23,8 @@ export default (g6: any) => {
y: 0,
r: outerSize / 2,
},
draggable: true,
name: 'circle-floor',
});
group.addShape('circle', {
attrs: {
Expand All @@ -33,6 +35,8 @@ export default (g6: any) => {
fill: '#000',
opacity: 0.05,
},
draggable: true,
name: 'circle-selected',
});
group.addShape('circle', {
attrs: {
Expand All @@ -43,12 +47,16 @@ export default (g6: any) => {
stroke: cfg.style?.dark ? GREY.normal : color.normal,
lineWidth: 2,
},
name: 'circle-border',
draggable: true,
});
const inner = group.addGroup(
{
attrs: {
id: 'circle-inner-group',
},
draggable: true,
name: 'circle-inner-group',
// tslint:disable-next-line: align
},
{},
Expand All @@ -61,6 +69,8 @@ export default (g6: any) => {
r: innerSize / 2,
fill: cfg.style?.dark ? GREY.dark : color.dark,
},
draggable: true,
name: 'circle-inner',
});
inner.addShape('text', {
attrs: {
Expand All @@ -74,6 +84,8 @@ export default (g6: any) => {
fontFamily: cfg.style?.fontFamily || DEFAULT_ICON_FONT_FAMILY,
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
draggable: true,
name: 'circle-icon',
});
if (hasLabel) {
group.addShape('text', {
Expand All @@ -86,6 +98,8 @@ export default (g6: any) => {
textAlign: 'center',
fill: cfg.style?.dark ? '#8D93B0' : '#3B3B3B',
},
draggable: true,
name: 'circle-label',
});
}

Expand All @@ -96,6 +110,8 @@ export default (g6: any) => {
attrs: {
id: 'circle-children-group',
},
draggable: true,
name: 'circle-children-group',
// tslint:disable-next-line: align
},
{},
Expand All @@ -108,6 +124,8 @@ export default (g6: any) => {
r: 9,
fill: cfg.style?.dark ? '#1E202D' : color.dark,
},
draggable: true,
name: 'circle-children',
});
children.addShape('text', {
attrs: {
Expand All @@ -120,31 +138,35 @@ export default (g6: any) => {
textBaseline: 'middle',
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
draggable: true,
name: 'circle-children-icon',
});
return keyShape;
},
setState(name: EnumNodeAndEdgeStatus, value: string, node: G6.Node) {
setState(name: EnumNodeAndEdgeStatus, value: string, node: INode) {
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 circleBorder = container.get('children').find((item: Shape.Base) => item.attr().id === 'circle-border');
const circleSelected = container.get('children').find((item: Shape.Base) => 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');
.find((item: Shape.Base) => item.attr().id === 'circle-inner-group');
const circleInner = circleInnerGroup
.get('children')
.find((item: Shape.Base) => item.attr().id === 'circle-inner');
const circleIcon = circleInnerGroup.get('children').find((item: Shape.Base) => item.attr().id === 'circle-icon');
const circleLabel = container.get('children').find((item: Shape.Base) => item.attr().id === 'circle-label');
const circleChildrenGroup = container
.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children-group');
.find((item: Shape.Base) => item.attr().id === 'circle-children-group');
const circleChildren = circleChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children');
.find((item: Shape.Base) => item.attr().id === 'circle-children');
const circleChildrenIcon = circleChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'circle-children-icon');
.find((item: Shape.Base) => 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;
Expand Down Expand Up @@ -202,5 +224,6 @@ export default (g6: any) => {
if (circleChildren) circleChildren.attr(targetAttrs.children);
if (circleChildrenIcon) circleChildrenIcon.attr(targetAttrs.childrenIcon);
},
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
};
50 changes: 37 additions & 13 deletions packages/graphin/src/shape/graph-studio/HexagonNode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { G } from '@antv/g6/types/g';
import G6 from '@antv/g6';
import { Group, Shape } from '@antv/g-canvas';
import { INode } from '@antv/g6/lib/interface/item';
import { G6Node } from '../../types';
import { GREY, PRIMARY_NODE_COLOR, EnumNodeAndEdgeStatus, DEFAULT_ICON_FONT_FAMILY } from './constants';
import { normalizeColor } from './utils';
Expand All @@ -20,7 +20,7 @@ function makeHexagon(border: number) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default (g6: any) => {
g6.registerNode('HexagonNode', {
draw(cfg: G6Node, group: G.Group) {
draw(cfg: G6Node, group: Group) {
const hasLabel = cfg.label;
const innerNodeSize = cfg.style?.nodeSize || 48;
const innerSize = innerNodeSize > 28 ? innerNodeSize : 28;
Expand All @@ -34,6 +34,8 @@ export default (g6: any) => {
points: makeHexagon(outerSize),
// fill: '#10121A',
},
draggable: true,
name: 'hexagon-floor',
});
group.addShape('polygon', {
attrs: {
Expand All @@ -42,6 +44,8 @@ export default (g6: any) => {
stroke: cfg.style?.dark ? '#1E202D' : color.normal,
lineWidth: 2,
},
draggable: true,
name: 'hexagon-border',
});
const selected = group.addShape('polygon', {
attrs: {
Expand All @@ -50,6 +54,8 @@ export default (g6: any) => {
fill: '#FFF',
opacity: 0.15,
},
draggable: true,
name: 'hexagon-selected',
});
selected.translate(-5, -5);

Expand All @@ -58,6 +64,8 @@ export default (g6: any) => {
attrs: {
id: 'hexagon-inner-group',
},
draggable: true,
name: 'hexagon-inner-group',
// tslint:disable-next-line: align
},
{},
Expand All @@ -68,6 +76,8 @@ export default (g6: any) => {
points: makeHexagon(innerSize),
fill: cfg.style?.dark ? '#1E202D' : color.dark,
},
draggable: true,
name: 'hexagon-inner',
});
inner.translate((outerSize - innerSize) / 2, (outerSize - innerSize) / 2);

Expand All @@ -83,6 +93,8 @@ export default (g6: any) => {
fontFamily: cfg.style?.fontFamily || DEFAULT_ICON_FONT_FAMILY,
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
draggable: true,
name: 'hexagon-name',
});

if (hasLabel) {
Expand All @@ -96,6 +108,8 @@ export default (g6: any) => {
textAlign: 'center',
fill: cfg.style?.dark ? '#8D93B0' : '#3B3B3B',
},
draggable: true,
name: 'hexagon-label',
});
}

Expand All @@ -106,6 +120,8 @@ export default (g6: any) => {
attrs: {
id: 'hexagon-children-group',
},
draggable: true,
name: 'hexagon-children-group',
// tslint:disable-next-line: align
},
{},
Expand All @@ -116,6 +132,8 @@ export default (g6: any) => {
points: makeHexagon(16),
fill: cfg.style?.dark ? '#1E202D' : color.normal,
},
draggable: true,
name: 'hexagon-children',
});
children.addShape('text', {
attrs: {
Expand All @@ -128,33 +146,39 @@ export default (g6: any) => {
textBaseline: 'middle',
fill: cfg.style?.dark ? '#8D93B0' : '#FFFFFF',
},
draggable: true,
name: 'hexagon-children-icon',
});
children.translate(outerSize / 2 - 16 / 2, 0);
return keyShape;
},
setState(name: EnumNodeAndEdgeStatus, value: string, node: G6.Node) {
setState(name: EnumNodeAndEdgeStatus, value: string, node: INode) {
if (!name) return;
const data: G6Node = node.get('model');
const container = node.getContainer();
const hexagonBorder = container.get('children').find((item: G.Shape) => item.attr().id === 'hexagon-border');
const hexagonSelected = container.get('children').find((item: G.Shape) => item.attr().id === 'hexagon-selected');
const hexagonBorder = container.get('children').find((item: Shape.Base) => item.attr().id === 'hexagon-border');
const hexagonSelected = container
.get('children')
.find((item: Shape.Base) => item.attr().id === 'hexagon-selected');
const hexagonInnerGroup = container
.get('children')
.find((item: G.Shape) => item.attr().id === 'hexagon-inner-group');
.find((item: Shape.Base) => item.attr().id === 'hexagon-inner-group');
const hexagonInner = hexagonInnerGroup
.get('children')
.find((item: G.Shape) => item.attr().id === 'hexagon-inner');
const hexagonIcon = hexagonInnerGroup.get('children').find((item: G.Shape) => item.attr().id === 'hexagon-icon');
const hexagonLabel = container.get('children').find((item: G.Shape) => item.attr().id === 'hexagon-label');
.find((item: Shape.Base) => item.attr().id === 'hexagon-inner');
const hexagonIcon = hexagonInnerGroup
.get('children')
.find((item: Shape.Base) => item.attr().id === 'hexagon-icon');
const hexagonLabel = container.get('children').find((item: Shape.Base) => item.attr().id === 'hexagon-label');
const hexagonChildrenGroup = container
.get('children')
.find((item: G.Shape) => item.attr().id === 'hexagon-children-group');
.find((item: Shape.Base) => item.attr().id === 'hexagon-children-group');
const hexagonChildren = hexagonChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'hexagon-children');
.find((item: Shape.Base) => item.attr().id === 'hexagon-children');
const hexagonChildrenIcon = hexagonChildrenGroup
?.get('children')
.find((item: G.Shape) => item.attr().id === 'hexagon-children-icon');
.find((item: Shape.Base) => item.attr().id === 'hexagon-children-icon');

const color = data.style?.dark ? GREY : normalizeColor(data.style?.primaryColor || PRIMARY_NODE_COLOR);
const innerNodeSize = data.style?.nodeSize || 48;
Expand Down
34 changes: 20 additions & 14 deletions packages/graphin/src/shape/graph-studio/LineEdge.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { G } from '@antv/g6/types/g';
import G6 from '@antv/g6';
import { Group, Shape } from '@antv/g-canvas';
import { IEdge } from '@antv/g6/lib/interface/item';
import { G6Edge } from '../../types';
import { normalizeColor } from './utils';
import {
Expand All @@ -13,10 +13,10 @@ import {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default (g6: any) => {
g6.registerEdge('LineEdge', {
draw(cfg: G6Edge, group: G.Group) {
draw(cfg: G6Edge, group: Group) {
const hasLabel = cfg.label;
const { startPoint, endPoint } = cfg;
const d = (cfg.style?.line.width || 1) + 1;
const d = (cfg.style?.line?.width || 1) + 1;

const attrs = {
path: [
Expand All @@ -25,7 +25,7 @@ export default (g6: any) => {
],
};

const lineColor = cfg.style?.line.color ? normalizeColor(cfg.style?.line.color) : EDGE_LINE_DEFAULT_COLOR;
const lineColor = cfg.style?.line?.color ? normalizeColor(cfg.style?.line?.color) : EDGE_LINE_DEFAULT_COLOR;
const labelColor = cfg.style?.label?.color ? normalizeColor(cfg.style?.label?.color) : EDGE_LABEL_DEFAULT_COLOR;

group.addShape('path', {
Expand All @@ -36,6 +36,8 @@ export default (g6: any) => {
stroke: '#000',
opacity: 0.05,
},
draggable: true,
name: 'selected',
});

const key = group.addShape('path', {
Expand All @@ -44,13 +46,15 @@ export default (g6: any) => {
...attrs,
lineAppendWidth: 4,
stroke: cfg.style?.dark ? GREY.dark : lineColor.dark,
lineWidth: cfg.style?.dark ? 1 : cfg.style?.line.width || 1,
lineDash: cfg.style?.line.dash,
lineWidth: cfg.style?.dark ? 1 : cfg.style?.line?.width || 1,
lineDash: cfg.style?.line?.dash,
endArrow: {
d,
path: `M ${d},0 L -${d},-${d} L -${d},${d} Z`,
},
},
draggable: true,
name: 'main',
});

if (hasLabel) {
Expand All @@ -65,6 +69,8 @@ export default (g6: any) => {
fontFamily: cfg.style?.label?.family,
fill: cfg.style?.dark ? HIDDEN_LABEL_COLOR.normal : labelColor.dark,
},
draggable: true,
name: 'label',
});
label.rotate(
endPoint.x - startPoint.x === 0
Expand All @@ -76,24 +82,24 @@ export default (g6: any) => {
}
return key;
},
setState(name: EnumNodeAndEdgeStatus, value: string, edge: G6.Edge) {
setState(name: EnumNodeAndEdgeStatus, value: string, edge: IEdge) {
if (!name) return;
const data: G6Edge = edge.get('model');
const mainShape = edge
.getContainer()
.get('children')
.find((item: G.Shape) => item.attr().id === 'main');
.find((item: Shape.Base) => item.attr().id === 'main');
const selectedShape = edge
.getContainer()
.get('children')
.find((item: G.Shape) => item.attr().id === 'selected');
.find((item: Shape.Base) => item.attr().id === 'selected');
const textShape = edge
.getContainer()
.get('children')
.find((item: G.Shape) => item.attr().id === 'label');
const d = (data.style?.line.width || 1) + 1;
const basicLineWidth = data.style?.dark ? 1 : data.style?.line.width || 1;
const lineColor = data.style?.line.color ? normalizeColor(data.style?.line.color) : EDGE_LINE_DEFAULT_COLOR;
.find((item: Shape.Base) => item.attr().id === 'label');
const d = (data.style?.line?.width || 1) + 1;
const basicLineWidth = data.style?.dark ? 1 : data.style?.line?.width || 1;
const lineColor = data.style?.line?.color ? normalizeColor(data.style?.line?.color) : EDGE_LINE_DEFAULT_COLOR;
const labelColor = data.style?.label?.color ? normalizeColor(data.style?.label?.color) : EDGE_LABEL_DEFAULT_COLOR;

const targetAttrs = {
Expand Down
Loading

0 comments on commit fe3893e

Please sign in to comment.