mirror of
https://gitee.com/antv/g6.git
synced 2024-12-01 19:28:39 +08:00
Revert "V5 donut"
This commit is contained in:
Yanyan Wang
GitHub
parent
b9fee4d5ed
commit
4cbdce93fa
49
.github/workflows/build.yml
vendored
49
.github/workflows/build.yml
vendored
@ -1,22 +1,49 @@
|
||||
name: build
|
||||
|
||||
on: [push]
|
||||
on: [push, pull_request]
|
||||
|
||||
concurrency:
|
||||
group: ${{github.workflow}}-${{github.event_name}}-${{github.ref}}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: macOS-latest
|
||||
lint:
|
||||
runs-on: macos-latest
|
||||
if: "!contains(github.event.head_commit.message, '[skip ci]')"
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16]
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2.3.4
|
||||
|
||||
- name: Setup Node.js environment
|
||||
uses: actions/setup-node@v2.1.5
|
||||
- uses: actions/checkout@v3
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
node-version: '14'
|
||||
version: 8.0
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
cache: 'pnpm'
|
||||
|
||||
# postInstall will build the product
|
||||
- name: Install dependencies and Build the product
|
||||
run: pnpm install
|
||||
|
||||
- name: Run CI
|
||||
run: |
|
||||
cd packages/g6
|
||||
npm install
|
||||
npm run ci
|
||||
npm run ci
|
||||
|
||||
- name: Workflow failed alert
|
||||
if: ${{ failure() }}
|
||||
uses: actions-cool/maintain-one-comment@main
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
你好, @${{ github.event.pull_request.user.login }} CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复
|
||||
|
||||
Hello, @${{ github.event.pull_request.user.login }} CI run failed, please click the [Details] button for detailed log information and fix it.
|
||||
<!-- Created by actions-cool/maintain-one-comment -->
|
||||
emojis: 'eyes'
|
||||
body-include: '<!-- Created by actions-cool/maintain-one-comment -->'
|
||||
|
||||
8
.npmrc
Normal file
8
.npmrc
Normal file
@ -0,0 +1,8 @@
|
||||
# https://github.com/Automattic/node-canvas/issues/2186
|
||||
canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
|
||||
|
||||
# 修改仓库镜像（中国镜像）
|
||||
registry=https://registry.npmmirror.com
|
||||
# pnpm
|
||||
auto-install-peers=true
|
||||
git-checks=false
|
||||
11
.prettierrc
Normal file
11
.prettierrc
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
"options": { "parser": "json" }
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -140,12 +140,13 @@ const graph = new G6.Graph({
|
||||
## 开发 (5.0 Alpha)
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
|
||||
$ pnpm install
|
||||
|
||||
# 从项目根目录进入到 g6 包文件目录下
|
||||
$ cd packages/g6
|
||||
|
||||
# 安装依赖
|
||||
$ npm install
|
||||
|
||||
# 构建
|
||||
$ npm run build
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.8.8",
|
||||
"@types/jest": "^29.5.1",
|
||||
"@commitlint/cli": "^17.5.0",
|
||||
"@commitlint/config-conventional": "^17.4.4",
|
||||
@ -15,5 +16,10 @@
|
||||
"vite": "^4.2.1",
|
||||
"stats.js": "^0.17.0"
|
||||
},
|
||||
"pnpm":{
|
||||
"overrides":{
|
||||
"prettier": "^2.8.8"
|
||||
}
|
||||
},
|
||||
"repository": "https://github.com/antvis/G6.git"
|
||||
}
|
||||
@ -6,7 +6,6 @@ export const RESERVED_SHAPE_IDS = [
|
||||
'haloShape',
|
||||
'anchorShapes',
|
||||
'badgeShapes',
|
||||
'donutShapes',
|
||||
];
|
||||
export const OTHER_SHAPES_FIELD_NAME = 'otherShapes';
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { Point } from '../types/common';
|
||||
import { ComboDisplayModel, ComboModel, NodeModel } from '../types';
|
||||
import { DisplayMapper, State, LodStrategyObj } from '../types/item';
|
||||
import { NodeDisplayModel, NodeModelData } from '../types/node';
|
||||
import type { ComboStyleSet, NodeStyleSet } from '../types/theme';
|
||||
import { ComboStyleSet, NodeStyleSet } from '../types/theme';
|
||||
import { updateShapes } from '../util/shape';
|
||||
import { animateShapes, getAnimatesExcludePosition } from '../util/animate';
|
||||
import {
|
||||
|
||||
@ -276,21 +276,18 @@ export class ItemController {
|
||||
'combo',
|
||||
);
|
||||
}
|
||||
|
||||
if (graphCore.hasTreeStructure('tree')) {
|
||||
// collapse the sub tree which has 'collapsed' in initial data
|
||||
const collapseNodes = [];
|
||||
graphCoreTreeDfs(
|
||||
graphCore,
|
||||
graphCore.getRoots('tree'),
|
||||
(child) => {
|
||||
if (child.data.collapsed) collapseNodes.push(child);
|
||||
},
|
||||
'BT',
|
||||
'tree',
|
||||
);
|
||||
this.collapseSubTree(collapseNodes, graphCore, false);
|
||||
}
|
||||
// collapse the sub tree which has 'collapsed' in initial data
|
||||
const collapseNodes = [];
|
||||
graphCoreTreeDfs(
|
||||
graphCore,
|
||||
graphCore.getRoots('tree'),
|
||||
(child) => {
|
||||
if (child.data.collapsed) collapseNodes.push(child);
|
||||
},
|
||||
'BT',
|
||||
'tree',
|
||||
);
|
||||
this.collapseSubTree(collapseNodes, graphCore, false);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -12,12 +12,11 @@ import { comboFromNode } from './data/comboFromNode';
|
||||
import { LineEdge } from './item/edge';
|
||||
import {
|
||||
CircleNode,
|
||||
DonutNode,
|
||||
EllipseNode,
|
||||
HexagonNode,
|
||||
RectNode,
|
||||
SphereNode,
|
||||
TriangleNode,
|
||||
HexagonNode,
|
||||
} from './item/node';
|
||||
import DarkTheme from './theme/dark';
|
||||
import LightTheme from './theme/light';
|
||||
@ -97,7 +96,6 @@ const stdLib = {
|
||||
'hexagon-node': HexagonNode,
|
||||
'triangle-node': TriangleNode,
|
||||
'ellipse-node': EllipseNode,
|
||||
'donut-node': DonutNode,
|
||||
},
|
||||
edges: {
|
||||
'line-edge': LineEdge,
|
||||
|
||||
@ -1,368 +0,0 @@
|
||||
import { DisplayObject } from '@antv/g';
|
||||
import { each } from '@antv/util';
|
||||
import { NodeDisplayModel } from '../../../types';
|
||||
import { ShapeStyle, State } from '../../../types/item';
|
||||
import {
|
||||
NodeModelData,
|
||||
NodeShapeMap,
|
||||
NodeShapeStyles,
|
||||
} from '../../../types/node';
|
||||
import { BaseNode } from './base';
|
||||
|
||||
const defaultDonutPalette = [
|
||||
'#61DDAA',
|
||||
'#65789B',
|
||||
'#F6BD16',
|
||||
'#7262FD',
|
||||
'#78D3F8',
|
||||
'#9661BC',
|
||||
'#F6903D',
|
||||
'#008685',
|
||||
'#F08BB4',
|
||||
];
|
||||
|
||||
type DonutAttrs = {
|
||||
[propKey: string]: number;
|
||||
};
|
||||
|
||||
type DonutColorMap = {
|
||||
[propKey: string]: string;
|
||||
};
|
||||
|
||||
type DonutNodeDisplayModel = NodeDisplayModel & {
|
||||
donutShapes: ShapeStyle & {
|
||||
innerSize: number;
|
||||
attrs: DonutAttrs;
|
||||
colorMap: DonutColorMap;
|
||||
};
|
||||
};
|
||||
|
||||
type DonutSegmentValue = {
|
||||
key: string; // key of the fan, came from the key of corresponding property of donutAttrs
|
||||
value: number; // format number value of the single fan
|
||||
color: string; // color from corresponding position of donutColorMap
|
||||
};
|
||||
|
||||
type DonutSegmentConfig = {
|
||||
arcR: number; // the radius of the fan
|
||||
beginAngle: number; // the beginning angle of the arc
|
||||
config: DonutSegmentValue; // value and color of the fan
|
||||
index: number; // the index of the fan at the donut fans array
|
||||
lineWidth: number; // width of the segment determining the inner size
|
||||
zIndex: number; // shape zIndex
|
||||
totalValue: number; // the total value of the donut configs
|
||||
drawWhole?: boolean; // whether draw a arc with radius 2*PI to represent a circle
|
||||
};
|
||||
|
||||
export class DonutNode extends BaseNode {
|
||||
override defaultStyles = {
|
||||
keyShape: {
|
||||
r: 16,
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
donutShapes: {
|
||||
innerSize: 0.6,
|
||||
attrs: {},
|
||||
colorMap: {},
|
||||
zIndex: 1,
|
||||
},
|
||||
};
|
||||
mergedStyles: NodeShapeStyles;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// suggest to merge default styles like this to avoid style value missing
|
||||
// this.defaultStyles = mergeStyles([this.baseDefaultStyles, this.defaultStyles]);
|
||||
}
|
||||
public draw(
|
||||
model: DonutNodeDisplayModel,
|
||||
shapeMap: NodeShapeMap,
|
||||
diffData?: { previous: NodeModelData; current: NodeModelData },
|
||||
diffState?: { previous: State[]; current: State[] },
|
||||
): NodeShapeMap {
|
||||
const { data = {} } = model;
|
||||
let shapes: NodeShapeMap = { keyShape: undefined };
|
||||
|
||||
// keyShape
|
||||
shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
|
||||
|
||||
// haloShape
|
||||
if (data.haloShape && this.drawHaloShape) {
|
||||
shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
|
||||
}
|
||||
|
||||
// labelShape
|
||||
if (data.labelShape) {
|
||||
shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
|
||||
}
|
||||
|
||||
// labelBackgroundShape
|
||||
if (data.labelBackgroundShape) {
|
||||
shapes.labelBackgroundShape = this.drawLabelBackgroundShape(
|
||||
model,
|
||||
shapeMap,
|
||||
diffData,
|
||||
);
|
||||
}
|
||||
|
||||
// anchor shapes
|
||||
if (data.anchorShapes) {
|
||||
const anchorShapes = this.drawAnchorShapes(
|
||||
model,
|
||||
shapeMap,
|
||||
diffData,
|
||||
diffState,
|
||||
);
|
||||
shapes = {
|
||||
...shapes,
|
||||
...anchorShapes,
|
||||
};
|
||||
}
|
||||
|
||||
// iconShape
|
||||
if (data.iconShape) {
|
||||
shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
|
||||
}
|
||||
|
||||
// badgeShape
|
||||
if (data.badgeShapes) {
|
||||
const badgeShapes = this.drawBadgeShapes(
|
||||
model,
|
||||
shapeMap,
|
||||
diffData,
|
||||
diffState,
|
||||
);
|
||||
shapes = {
|
||||
...shapes,
|
||||
...badgeShapes,
|
||||
};
|
||||
}
|
||||
|
||||
// donutShapes
|
||||
if (data.donutShapes) {
|
||||
const donutShapes = this.drawDonutShapes(
|
||||
model,
|
||||
shapeMap,
|
||||
diffData,
|
||||
diffState,
|
||||
);
|
||||
shapes = {
|
||||
...shapes,
|
||||
...donutShapes,
|
||||
};
|
||||
}
|
||||
|
||||
// otherShapes
|
||||
if (data.otherShapes && this.drawOtherShapes) {
|
||||
shapes = {
|
||||
...shapes,
|
||||
...this.drawOtherShapes(model, shapeMap, diffData),
|
||||
};
|
||||
}
|
||||
return shapes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw a complete donut composed of several segments
|
||||
* @param model
|
||||
* @param shapeMap
|
||||
* @param diffData
|
||||
* @param diffState
|
||||
* @returns
|
||||
*/
|
||||
private drawDonutShapes(
|
||||
model: DonutNodeDisplayModel,
|
||||
shapeMap: NodeShapeMap,
|
||||
diffData?: { previous: NodeModelData; current: NodeModelData },
|
||||
diffState?: { previous: State[]; current: State[] },
|
||||
): {
|
||||
[shapeId: string]: DisplayObject;
|
||||
} {
|
||||
const {
|
||||
donutShapes: { innerSize, attrs, colorMap, zIndex },
|
||||
} = this.mergedStyles as DonutNodeDisplayModel;
|
||||
|
||||
const attrNum = Object.keys(attrs).length;
|
||||
if (!attrNum) return;
|
||||
|
||||
const { configs, totalValue } = getDonutConfig(attrs, colorMap);
|
||||
if (!totalValue) return;
|
||||
|
||||
const { lineWidth, arcR } = getDonutSize(shapeMap.keyShape, innerSize);
|
||||
let beginAngle = 0;
|
||||
|
||||
const shapes = {};
|
||||
|
||||
each(configs, (config, index) => {
|
||||
const result = this.drawDonutSegment(
|
||||
{
|
||||
arcR,
|
||||
beginAngle,
|
||||
config,
|
||||
index,
|
||||
lineWidth,
|
||||
zIndex,
|
||||
totalValue,
|
||||
drawWhole: attrNum === 1,
|
||||
},
|
||||
shapes,
|
||||
model,
|
||||
shapeMap,
|
||||
diffData,
|
||||
diffState,
|
||||
);
|
||||
if (result.shouldEnd) return;
|
||||
beginAngle = result.beginAngle;
|
||||
});
|
||||
|
||||
return shapes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw a single donut segment
|
||||
* @param cfg The configurations of donut segments
|
||||
* @param shapes The collections of donut segment shapes
|
||||
* @param model
|
||||
* @param shapeMap
|
||||
* @param diffData
|
||||
* @param diffState
|
||||
* @returns
|
||||
*/
|
||||
private drawDonutSegment = (
|
||||
cfg: DonutSegmentConfig,
|
||||
shapes: { [shapeId: string]: DisplayObject },
|
||||
model: DonutNodeDisplayModel,
|
||||
shapeMap: NodeShapeMap,
|
||||
diffData?: { previous: NodeModelData; current: NodeModelData },
|
||||
diffState?: { previous: State[]; current: State[] },
|
||||
): {
|
||||
beginAngle: number; // next begin iangle
|
||||
shouldEnd: boolean; // finish fans drawing
|
||||
} => {
|
||||
const {
|
||||
arcR,
|
||||
beginAngle,
|
||||
config,
|
||||
index,
|
||||
lineWidth,
|
||||
zIndex,
|
||||
totalValue,
|
||||
drawWhole = false,
|
||||
} = cfg;
|
||||
const id = `donutShape${index}`;
|
||||
const percent = config.value / totalValue;
|
||||
if (percent < 0.001) {
|
||||
// too small to add a fan
|
||||
return {
|
||||
beginAngle,
|
||||
shouldEnd: false,
|
||||
};
|
||||
}
|
||||
let arcEnd, endAngle, isLargeArc;
|
||||
const arcBegin = calculateArcEndpoint(arcR, beginAngle);
|
||||
// draw a path represents the whole circle, or the percentage is close to 1
|
||||
if (drawWhole || percent > 0.999) {
|
||||
arcEnd = [arcR, 0.0001]; // [arcR * cos(2 * PI), -arcR * sin(2 * PI)]
|
||||
isLargeArc = 1;
|
||||
} else {
|
||||
const angle = percent * Math.PI * 2;
|
||||
endAngle = beginAngle + angle;
|
||||
arcEnd = calculateArcEndpoint(arcR, endAngle);
|
||||
isLargeArc = angle > Math.PI ? 1 : 0;
|
||||
}
|
||||
const style = {
|
||||
path: [
|
||||
['M', arcBegin[0], arcBegin[1]],
|
||||
['A', arcR, arcR, 0, isLargeArc, 0, arcEnd[0], arcEnd[1]],
|
||||
],
|
||||
stroke:
|
||||
config.color || defaultDonutPalette[index % defaultDonutPalette.length],
|
||||
lineWidth,
|
||||
zIndex,
|
||||
} as ShapeStyle;
|
||||
shapes[id] = this.upsertShape(
|
||||
'path',
|
||||
id,
|
||||
style,
|
||||
shapeMap,
|
||||
model,
|
||||
) as DisplayObject;
|
||||
|
||||
return {
|
||||
beginAngle: endAngle,
|
||||
shouldEnd: drawWhole || percent > 0.999,
|
||||
};
|
||||
};
|
||||
|
||||
public drawKeyShape(
|
||||
model: DonutNodeDisplayModel,
|
||||
shapeMap: NodeShapeMap,
|
||||
diffData?: { previous: NodeModelData; current: NodeModelData },
|
||||
diffState?: { previous: State[]; current: State[] },
|
||||
): DisplayObject {
|
||||
return this.upsertShape(
|
||||
'circle',
|
||||
'keyShape',
|
||||
this.mergedStyles.keyShape,
|
||||
shapeMap,
|
||||
model,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the endpoint of an arc segment.
|
||||
* @param arcR Radius of the arc.
|
||||
* @param angle angle in degrees subtended by arc.
|
||||
*/
|
||||
const calculateArcEndpoint = (arcR: number, angle: number): number[] => [
|
||||
arcR * Math.cos(angle),
|
||||
-arcR * Math.sin(angle),
|
||||
];
|
||||
|
||||
/**
|
||||
* calculate the total value and format single value for each fan
|
||||
* @param donutAttrs
|
||||
* @param donutColorMap
|
||||
* @returns
|
||||
*/
|
||||
const getDonutConfig = (
|
||||
donutAttrs: DonutAttrs,
|
||||
donutColorMap: DonutColorMap,
|
||||
): {
|
||||
totalValue: number;
|
||||
configs: DonutSegmentValue[];
|
||||
} => {
|
||||
let totalValue = 0;
|
||||
const configs = [];
|
||||
Object.keys(donutAttrs).forEach((name) => {
|
||||
const value = +donutAttrs[name];
|
||||
if (isNaN(value)) return;
|
||||
configs.push({
|
||||
key: name,
|
||||
value,
|
||||
color: donutColorMap[name],
|
||||
});
|
||||
totalValue += value;
|
||||
});
|
||||
return { totalValue, configs };
|
||||
};
|
||||
|
||||
/**
|
||||
* calculate the lineWidth and radius for fan shapes according to the keyShape's radius
|
||||
* @param keyShape
|
||||
* @returns
|
||||
*/
|
||||
const getDonutSize = (
|
||||
keyShape,
|
||||
innerSize: number,
|
||||
): {
|
||||
lineWidth: number;
|
||||
arcR: number;
|
||||
} => {
|
||||
const keyShapeR = keyShape.attr('r');
|
||||
const innerR = innerSize * keyShapeR; // The radius of the inner ring of the donut
|
||||
const arcR = (keyShapeR + innerR) / 2; // The average of the radius of the inner ring and the radius of the outer ring
|
||||
const lineWidth = keyShapeR - innerR;
|
||||
return { lineWidth, arcR };
|
||||
};
|
||||
@ -1,7 +1,6 @@
|
||||
export * from './circle';
|
||||
export * from './donut';
|
||||
export * from './ellipse';
|
||||
export * from './hexagon';
|
||||
export * from './rect';
|
||||
export * from './sphere';
|
||||
export * from './rect';
|
||||
export * from './hexagon';
|
||||
export * from './triangle';
|
||||
export * from './ellipse';
|
||||
|
||||
@ -14,7 +14,6 @@ import tooltip from './demo/tooltip';
|
||||
import cubic_edge from './item/edge/cubic-edge';
|
||||
import cubic_horizon_edge from './item/edge/cubic-horizon-edge';
|
||||
import cubic_vertical_edge from './item/edge/cubic-vertical-edge';
|
||||
import donut_node from './item/node/donut-node';
|
||||
import line_edge from './item/edge/line-edge';
|
||||
import layouts_circular from './layouts/circular';
|
||||
import layouts_custom from './layouts/custom';
|
||||
@ -51,7 +50,6 @@ export {
|
||||
cubic_edge,
|
||||
cubic_horizon_edge,
|
||||
cubic_vertical_edge,
|
||||
donut_node,
|
||||
demo,
|
||||
demoFor4,
|
||||
ellipse,
|
||||
|
||||
@ -1,243 +0,0 @@
|
||||
import { Graph, IGraph } from '../../../../src/index';
|
||||
|
||||
let outerTop = 0;
|
||||
let graph: IGraph;
|
||||
|
||||
const createLabelCheckbox = (
|
||||
container: HTMLElement,
|
||||
labelText: string,
|
||||
checkedCallback: () => void,
|
||||
uncheckedCallback: () => void,
|
||||
top?: number,
|
||||
) => {
|
||||
if (!container) return;
|
||||
|
||||
let innerTop = top;
|
||||
if (!top) {
|
||||
innerTop = outerTop;
|
||||
outerTop += 30;
|
||||
}
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.textContent = labelText;
|
||||
label.style.position = 'absolute';
|
||||
label.style.top = `${innerTop}px`;
|
||||
label.style.left = '16px';
|
||||
label.style.zIndex = '100';
|
||||
|
||||
const cb = document.createElement('input');
|
||||
cb.type = 'checkbox';
|
||||
cb.value = 'highlight';
|
||||
cb.style.position = 'absolute';
|
||||
cb.style.width = '20px';
|
||||
cb.style.height = '20px';
|
||||
cb.style.top = `${innerTop}px`;
|
||||
cb.style.left = '400px';
|
||||
cb.style.zIndex = '100';
|
||||
|
||||
cb.addEventListener('click', (e) => {
|
||||
cb.checked ? checkedCallback() : uncheckedCallback();
|
||||
});
|
||||
|
||||
container.appendChild(label);
|
||||
container.appendChild(cb);
|
||||
};
|
||||
|
||||
const createOperationContainer = (container: HTMLElement) => {
|
||||
const operationContainer = document.createElement('div');
|
||||
operationContainer.id = 'ctrl-container';
|
||||
operationContainer.style.width = '100%';
|
||||
operationContainer.style.height = '150px';
|
||||
operationContainer.style.lineHeight = '50px';
|
||||
operationContainer.style.backgroundColor = '#eee';
|
||||
|
||||
container.appendChild(operationContainer);
|
||||
};
|
||||
|
||||
const createOperations = (): any => {
|
||||
const parentEle = document.getElementById('ctrl-container');
|
||||
if (!parentEle) return;
|
||||
|
||||
// Custom Donut Colors
|
||||
createLabelCheckbox(
|
||||
parentEle,
|
||||
'custom donut colors',
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
colorMap: {
|
||||
income: '#78D3F8',
|
||||
outcome: '#F08BB4',
|
||||
unknown: '#65789B',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
colorMap: {},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// Custom Donut innerSize
|
||||
createLabelCheckbox(
|
||||
parentEle,
|
||||
'update donut innerSize',
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
innerSize: 0.8,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
innerSize: 0.6,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// Custom Donut attrs
|
||||
createLabelCheckbox(
|
||||
parentEle,
|
||||
'update donut attrs',
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
attrs: {
|
||||
income: 280,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
() => {
|
||||
graph.updateData('node', {
|
||||
id: 'node1',
|
||||
data: {
|
||||
donutShapes: {
|
||||
attrs: {
|
||||
income: 80,
|
||||
outcome: 40,
|
||||
unknown: 45,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// select
|
||||
createLabelCheckbox(
|
||||
parentEle,
|
||||
'custom selected style',
|
||||
() => {
|
||||
graph.setItemState('node1', 'selected', true);
|
||||
},
|
||||
() => {
|
||||
graph.setItemState('node1', 'selected', false);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
export default (context) => {
|
||||
const { container } = context;
|
||||
|
||||
// 1.create operation container
|
||||
createOperationContainer(container!);
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: 'node1',
|
||||
data: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
type: 'donut-node',
|
||||
keyShape: {
|
||||
r: 30,
|
||||
},
|
||||
labelShape: {
|
||||
text: 'label',
|
||||
position: 'bottom',
|
||||
},
|
||||
labelBackgroundShape: {
|
||||
fill: 'red',
|
||||
},
|
||||
anchorShapes: [
|
||||
{
|
||||
position: [0, 0.5],
|
||||
r: 2,
|
||||
fill: 'red',
|
||||
},
|
||||
],
|
||||
iconShape: {
|
||||
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
badgeShapes: [
|
||||
{
|
||||
text: '1',
|
||||
position: 'rightTop',
|
||||
color: 'blue',
|
||||
},
|
||||
],
|
||||
donutShapes: {
|
||||
attrs: {
|
||||
income: 80,
|
||||
outcome: 40,
|
||||
unknown: 45,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
graph = new Graph({
|
||||
...context,
|
||||
data,
|
||||
type: 'graph',
|
||||
modes: {
|
||||
default: ['drag-canvas', 'drag-node', 'click-select', 'hover-activate'],
|
||||
},
|
||||
node: (nodeInnerModel: any) => {
|
||||
const { id, data } = nodeInnerModel;
|
||||
return {
|
||||
id,
|
||||
data: {
|
||||
keyShape: {
|
||||
r: 16,
|
||||
},
|
||||
...data,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// 2.create operations
|
||||
createOperations();
|
||||
|
||||
return graph;
|
||||
};
|
||||
@ -27,10 +27,10 @@ describe('Activate relations behavior', () => {
|
||||
});
|
||||
|
||||
graph.on('afterlayout', async () => {
|
||||
// await expect(canvas).toMatchCanvasSnapshot(
|
||||
// dir,
|
||||
// 'behaviors-activate-relations',
|
||||
// );
|
||||
await expect(canvas).toMatchCanvasSnapshot(
|
||||
dir,
|
||||
'behaviors-activate-relations',
|
||||
);
|
||||
|
||||
// @ts-ignore
|
||||
// mouseEvent.target = canvas.getContextService().getDomElement();
|
||||
|
||||
@ -1,157 +0,0 @@
|
||||
import { resetEntityCounter } from '@antv/g';
|
||||
import donutNode from '../demo/item/node/donut-node';
|
||||
import './utils/useSnapshotMatchers';
|
||||
import { createContext } from './utils';
|
||||
|
||||
describe('Items node donut', () => {
|
||||
beforeEach(() => {
|
||||
/**
|
||||
* SVG Snapshot testing will generate a unique id for each element.
|
||||
* Reset to 0 to keep snapshot consistent.
|
||||
*/
|
||||
resetEntityCounter();
|
||||
});
|
||||
|
||||
it('should be rendered correctly with Canvas2D', (done) => {
|
||||
const dir = `${__dirname}/snapshots/canvas/items/node/donut`;
|
||||
const { backgroundCanvas, canvas, transientCanvas, container } =
|
||||
createContext('canvas', 500, 500);
|
||||
|
||||
const graph = donutNode({
|
||||
container,
|
||||
backgroundCanvas,
|
||||
canvas,
|
||||
transientCanvas,
|
||||
width: 500,
|
||||
height: 500,
|
||||
});
|
||||
|
||||
graph.on('afterlayout', async () => {
|
||||
await expect(canvas).toMatchCanvasSnapshot(dir, 'items-node-donut');
|
||||
|
||||
/**
|
||||
* Click the checkbox to set custom colors.
|
||||
*/
|
||||
const $customColors = document.querySelectorAll(
|
||||
'input',
|
||||
)[0] as HTMLInputElement;
|
||||
$customColors.click();
|
||||
await expect(canvas).toMatchCanvasSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-colors',
|
||||
);
|
||||
$customColors.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to set custom inner size.
|
||||
*/
|
||||
const $innerSize = document.querySelectorAll(
|
||||
'input',
|
||||
)[1] as HTMLInputElement;
|
||||
$innerSize.click();
|
||||
await expect(canvas).toMatchCanvasSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-innersize',
|
||||
);
|
||||
$innerSize.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to update attrs.
|
||||
*/
|
||||
const $attrs = document.querySelectorAll('input')[2] as HTMLInputElement;
|
||||
$attrs.click();
|
||||
await expect(canvas).toMatchCanvasSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-attrs',
|
||||
);
|
||||
$attrs.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to set selected style.
|
||||
*/
|
||||
const $selected = document.querySelectorAll(
|
||||
'input',
|
||||
)[3] as HTMLInputElement;
|
||||
$selected.click();
|
||||
await expect(canvas).toMatchCanvasSnapshot(
|
||||
dir,
|
||||
'items-node-donut-selected-style',
|
||||
);
|
||||
$selected.click();
|
||||
|
||||
graph.destroy();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should be rendered correctly with SVG', (done) => {
|
||||
const dir = `${__dirname}/snapshots/svg/items/node/donut`;
|
||||
const { backgroundCanvas, canvas, transientCanvas, container } =
|
||||
createContext('svg', 500, 500);
|
||||
|
||||
const graph = donutNode({
|
||||
container,
|
||||
backgroundCanvas,
|
||||
canvas,
|
||||
transientCanvas,
|
||||
width: 500,
|
||||
height: 500,
|
||||
});
|
||||
|
||||
graph.on('afterlayout', async () => {
|
||||
await expect(canvas).toMatchSVGSnapshot(dir, 'items-node-donut');
|
||||
/**
|
||||
* Click the checkbox to set custom colors.
|
||||
*/
|
||||
const $customColors = document.querySelectorAll(
|
||||
'input',
|
||||
)[0] as HTMLInputElement;
|
||||
$customColors.click();
|
||||
await expect(canvas).toMatchSVGSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-colors',
|
||||
);
|
||||
$customColors.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to set custom inner size.
|
||||
*/
|
||||
const $innerSize = document.querySelectorAll(
|
||||
'input',
|
||||
)[1] as HTMLInputElement;
|
||||
$innerSize.click();
|
||||
await expect(canvas).toMatchSVGSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-innersize',
|
||||
);
|
||||
$innerSize.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to update attrs.
|
||||
*/
|
||||
const $attrs = document.querySelectorAll('input')[2] as HTMLInputElement;
|
||||
$attrs.click();
|
||||
await expect(canvas).toMatchSVGSnapshot(
|
||||
dir,
|
||||
'items-node-donut-custom-attrs',
|
||||
);
|
||||
$attrs.click();
|
||||
|
||||
/**
|
||||
* Click the checkbox to set selected style.
|
||||
*/
|
||||
const $selected = document.querySelectorAll(
|
||||
'input',
|
||||
)[3] as HTMLInputElement;
|
||||
$selected.click();
|
||||
await expect(canvas).toMatchSVGSnapshot(
|
||||
dir,
|
||||
'items-node-donut-selected-style',
|
||||
);
|
||||
$selected.click();
|
||||
|
||||
graph.destroy();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: fixed; outline: none;" color-interpolation-filters="sRGB" tabindex="1"><defs/><g transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" stroke="transparent" stroke-width="01"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,100,100)"><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" r="30" stroke-width="0"/></g><g transform="matrix(0.945946,0,0,1,-16.499999,30)"><path fill="rgba(255,0,0,1)" d="M 0,0 l 37,0 l 0,19 l-37 0 z" stroke-width="0" opacity="0.75" width="37" height="19"/></g><g transform="matrix(1,0,0,1,-10,-10)"><image fill="rgba(255,255,255,1)" preserveAspectRatio="none" x="0" y="0" href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" font-size="16" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0" width="20" height="20"/></g><g transform="matrix(1,0,0,1,-24,-23.999950)"><path fill="none" d="M 47.99999999994792,23.99995 A 24 24 0 1 0 47.99999999994792 24.000049999999998" stroke="rgba(97,221,170,1)" stroke-width="12"/><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="transparent" stroke-width="12"/></g><g transform="matrix(1,0,0,1,0,32)"><text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0" dy="7.5px" text-anchor="middle" font-size="12" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0">label</text></g><g transform="matrix(1,0,0,1,-30,0)"><circle fill="rgba(255,0,0,1)" transform="translate(-2,-2)" cx="2" cy="2" stroke-width="1" stroke="rgba(0,0,0,0.65)" r="2"/></g><g transform="matrix(1,0,0,1,15,-33.200001)"><path fill="rgba(0,0,255,1)" d="M 10,0 l 0,0 a 10,10,0,0,1,10,10 l 0,0 a 10,10,0,0,1,-10,10 l 0,0 a 10,10,0,0,1,-10,-10 l 0,0 a 10,10,0,0,1,10,-10 z" height="20" width="20"/></g><g transform="matrix(1,0,0,1,17,-23.200001)"><text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" font-size="17" text-anchor="left">1</text></g></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: fixed; outline: none;" color-interpolation-filters="sRGB" tabindex="1"><defs/><g transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" stroke="transparent" stroke-width="01"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,100,100)"><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" r="30" stroke-width="0"/></g><g transform="matrix(0.945946,0,0,1,-16.499999,30)"><path fill="rgba(255,0,0,1)" d="M 0,0 l 37,0 l 0,19 l-37 0 z" stroke-width="0" opacity="0.75" width="37" height="19"/></g><g transform="matrix(1,0,0,1,-10,-10)"><image fill="rgba(255,255,255,1)" preserveAspectRatio="none" x="0" y="0" href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" font-size="16" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0" width="20" height="20"/></g><g transform="matrix(1,0,0,1,-23.891327,-24)"><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="rgba(120,211,248,1)" stroke-width="12"/><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,-24,-2.281345)"><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="rgba(240,139,180,1)" stroke-width="12"/><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,-3.415556,0)"><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="rgba(101,120,155,1)" stroke-width="12"/><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,0,32)"><text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0" dy="7.5px" text-anchor="middle" font-size="12" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0">label</text></g><g transform="matrix(1,0,0,1,-30,0)"><circle fill="rgba(255,0,0,1)" transform="translate(-2,-2)" cx="2" cy="2" stroke-width="1" stroke="rgba(0,0,0,0.65)" r="2"/></g><g transform="matrix(1,0,0,1,15,-33.200001)"><path fill="rgba(0,0,255,1)" d="M 10,0 l 0,0 a 10,10,0,0,1,10,10 l 0,0 a 10,10,0,0,1,-10,10 l 0,0 a 10,10,0,0,1,-10,-10 l 0,0 a 10,10,0,0,1,10,-10 z" height="20" width="20"/></g><g transform="matrix(1,0,0,1,17,-23.200001)"><text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" font-size="17" text-anchor="left">1</text></g></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: fixed; outline: none;" color-interpolation-filters="sRGB" tabindex="1"><defs/><g transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" stroke="transparent" stroke-width="01"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,100,100)"><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" r="30" stroke-width="0"/></g><g transform="matrix(0.945946,0,0,1,-16.499999,30)"><path fill="rgba(255,0,0,1)" d="M 0,0 l 37,0 l 0,19 l-37 0 z" stroke-width="0" opacity="0.75" width="37" height="19"/></g><g transform="matrix(1,0,0,1,-10,-10)"><image fill="rgba(255,255,255,1)" preserveAspectRatio="none" x="0" y="0" href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" font-size="16" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0" width="20" height="20"/></g><g transform="matrix(1,0,0,1,-26.877743,-27)"><path fill="none" d="M 53.877741909473286,27.000000000000046 A 27 27 0 0 0 7.105427357601002e-15 24.433486830787107" stroke="rgba(97,221,170,1)" stroke-width="6"/><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="transparent" stroke-width="6"/></g><g transform="matrix(1,0,0,1,-27,-2.566513)"><path fill="none" d="M 0.12225809052671721,0 A 27 27 0 0 0 23.1574993666213 29.291692099998123" stroke="rgba(101,120,155,1)" stroke-width="6"/><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="transparent" stroke-width="6"/></g><g transform="matrix(1,0,0,1,-3.842501,0)"><path fill="none" d="M 0,26.725178930785177 A 27 27 0 0 0 30.8425006333787 6.178883824198621e-16" stroke="rgba(246,189,22,1)" stroke-width="6"/><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="transparent" stroke-width="6"/></g><g transform="matrix(1,0,0,1,0,32)"><text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0" dy="7.5px" text-anchor="middle" font-size="12" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0">label</text></g><g transform="matrix(1,0,0,1,-30,0)"><circle fill="rgba(255,0,0,1)" transform="translate(-2,-2)" cx="2" cy="2" stroke-width="1" stroke="rgba(0,0,0,0.65)" r="2"/></g><g transform="matrix(1,0,0,1,15,-33.200001)"><path fill="rgba(0,0,255,1)" d="M 10,0 l 0,0 a 10,10,0,0,1,10,10 l 0,0 a 10,10,0,0,1,-10,10 l 0,0 a 10,10,0,0,1,-10,-10 l 0,0 a 10,10,0,0,1,10,-10 z" height="20" width="20"/></g><g transform="matrix(1,0,0,1,17,-23.200001)"><text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" font-size="17" text-anchor="left">1</text></g></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: fixed; outline: none;" color-interpolation-filters="sRGB" tabindex="1"><defs/><g transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" stroke="transparent" stroke-width="01"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,100,100)"><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" opacity="0.25" r="30" stroke-width="20" stroke="rgba(34,126,255,1)" pointer-events="none"/></g><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" r="30" stroke-width="3" stroke="rgba(0,0,0,1)"/></g><g transform="matrix(0.945946,0,0,1,-16.499999,30)"><path fill="rgba(255,0,0,1)" d="M 0,0 l 37,0 l 0,19 l-37 0 z" stroke-width="0" opacity="0.75" width="37" height="19"/></g><g transform="matrix(1,0,0,1,-10,-10)"><image fill="rgba(255,255,255,1)" preserveAspectRatio="none" x="0" y="0" href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" font-size="16" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0" width="20" height="20"/></g><g transform="matrix(1,0,0,1,-23.891327,-24)"><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="rgba(97,221,170,1)" stroke-width="12"/><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="transparent" stroke-width="12"/></g><g transform="matrix(1,0,0,1,-24,-2.281345)"><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="rgba(101,120,155,1)" stroke-width="12"/><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,-3.415556,0)"><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="rgba(246,189,22,1)" stroke-width="12"/><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,0,32)"><text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0" dy="7.5px" text-anchor="middle" font-size="12" font-family="sans-serif" font-weight="700" font-variant="normal" font-style="normal" stroke-width="0">label</text></g><g transform="matrix(1,0,0,1,-30,0)"><circle fill="rgba(255,0,0,1)" transform="translate(-2,-2)" cx="2" cy="2" stroke-width="1" stroke="rgba(0,0,0,0.65)" r="2"/></g><g transform="matrix(1,0,0,1,15,-33.200001)"><path fill="rgba(0,0,255,1)" d="M 10,0 l 0,0 a 10,10,0,0,1,10,10 l 0,0 a 10,10,0,0,1,-10,10 l 0,0 a 10,10,0,0,1,-10,-10 l 0,0 a 10,10,0,0,1,10,-10 z" height="20" width="20"/></g><g transform="matrix(1,0,0,1,17,-23.200001)"><text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" font-size="17" text-anchor="left">1</text></g></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: fixed; outline: none;" color-interpolation-filters="sRGB" tabindex="1"><defs/><g transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" stroke="transparent" stroke-width="01"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"/><g fill="none" transform="matrix(1,0,0,1,0,0)"><g fill="none" transform="matrix(1,0,0,1,100,100)"><g transform="matrix(1,0,0,1,0,0)"><circle fill="rgba(34,126,255,1)" transform="translate(-30,-30)" cx="30" cy="30" r="30" stroke-width="0"/></g><g transform="matrix(0.945946,0,0,1,-16.499999,30)"><path fill="rgba(255,0,0,1)" d="M 0,0 l 37,0 l 0,19 l-37 0 z" stroke-width="0" opacity="0.75" width="37" height="19"/></g><g transform="matrix(1,0,0,1,-10,-10)"><image fill="rgba(255,255,255,1)" preserveAspectRatio="none" x="0" y="0" href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" font-size="16" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0" width="20" height="20"/></g><g transform="matrix(1,0,0,1,-23.891327,-24)"><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="rgba(97,221,170,1)" stroke-width="12"/><path fill="none" d="M 47.891326141754035,24.00000000000001 A 24 24 0 0 0 3.552713678800501e-15 21.71865496069962" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,-24,-2.281345)"><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="rgba(101,120,155,1)" stroke-width="12"/><path fill="none" d="M 0.10867385824597164,1.7763568394002505e-15 A 24 24 0 0 0 20.584443881441153 26.037059644442774" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,-3.415556,0)"><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="rgba(246,189,22,1)" stroke-width="12"/><path fill="none" d="M 3.1086244689504383e-15,23.755714605142373 A 24 24 0 0 0 27.415556118558847 -4.779836400494208e-15" stroke="transparent" stroke-width="24"/></g><g transform="matrix(1,0,0,1,0,32)"><text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0" dy="7.5px" text-anchor="middle" font-size="12" font-family="sans-serif" font-weight="normal" font-variant="normal" font-style="normal" stroke-width="0">label</text></g><g transform="matrix(1,0,0,1,-30,0)"><circle fill="rgba(255,0,0,1)" transform="translate(-2,-2)" cx="2" cy="2" stroke-width="1" stroke="rgba(0,0,0,0.65)" r="2"/></g><g transform="matrix(1,0,0,1,15,-33.200001)"><path fill="rgba(0,0,255,1)" d="M 10,0 l 0,0 a 10,10,0,0,1,10,10 l 0,0 a 10,10,0,0,1,-10,10 l 0,0 a 10,10,0,0,1,-10,-10 l 0,0 a 10,10,0,0,1,10,-10 z" height="20" width="20"/></g><g transform="matrix(1,0,0,1,17,-23.200001)"><text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" font-size="17" text-anchor="left">1</text></g></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -41,7 +41,7 @@
|
||||
"father-build": "^1.17.2",
|
||||
"gh-pages": "^3.0.0",
|
||||
"lint-staged": "^10.0.7",
|
||||
"prettier": "^1.19.1",
|
||||
"prettier": "^2.8.8",
|
||||
"yorkie": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
if (window) {
|
||||
// window.g6 = require('@antv/g6/es'); // import the source for debugging
|
||||
// window.g6 = require('@antv/g6/lib'); // import the source for debugging
|
||||
(window as any).g6 = require('@antv/g6/dist/g6.min.js'); // import the package for webworker
|
||||
(window as any).insertCss = require('insert-css');
|
||||
(window as any).Chart = require('@antv/chart-node-g6');
|
||||
(window as any).AntVUtil = require('@antv/util');
|
||||
(window as any).GraphLayoutPredict = require('@antv/vis-predict-engine');
|
||||
}
|
||||
(window as any).g6 = require("@antv/g6/lib"); // import the source for debugging
|
||||
// (window as any).g6 = require('@antv/g6/dist/g6.min.js'); // import the package for webworker
|
||||
(window as any).insertCss = require("insert-css");
|
||||
(window as any).Chart = require("@antv/chart-node-g6");
|
||||
(window as any).AntVUtil = require("@antv/util");
|
||||
(window as any).GraphLayoutPredict = require("@antv/vis-predict-engine");
|
||||
}
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import { defineConfig } from 'dumi';
|
||||
import { repository, version, homepage } from './package.json';
|
||||
import { Extractor, ExtractorConfig } from '@microsoft/api-extractor';
|
||||
import { defineConfig } from 'dumi';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { homepage, repository, version } from './package.json';
|
||||
|
||||
const getExtraLib = () => {
|
||||
try {
|
||||
const extractorConfig = ExtractorConfig.loadFileAndPrepare(
|
||||
path.resolve('./api-extractor.json'),
|
||||
);
|
||||
const extractorConfig = ExtractorConfig.loadFileAndPrepare(path.resolve('./api-extractor.json'));
|
||||
const extractorResult = Extractor.invoke(extractorConfig, {
|
||||
localBuild: true,
|
||||
showVerboseMessages: true,
|
||||
@ -29,45 +27,48 @@ const getExtraLib = () => {
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
locales: [{ id: 'zh', name: '中文' }, { id: 'en', name: 'English' }],
|
||||
title: 'G6', // 网站header标题
|
||||
locales: [
|
||||
{ id: 'zh', name: '中文' },
|
||||
{ id: 'en', name: 'English' },
|
||||
],
|
||||
title: 'G6', // 网站header标题
|
||||
favicons: ['https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original'], // 网站 favicon
|
||||
metas: [ // 自定义 meta 标签
|
||||
metas: [
|
||||
// 自定义 meta 标签
|
||||
{ name: 'keywords', content: 'G6' },
|
||||
{ name: 'description', content: 'A collection of charts made with the Grammar of Graphics' },
|
||||
{
|
||||
name: 'description',
|
||||
content: 'A collection of charts made with the Grammar of Graphics',
|
||||
},
|
||||
],
|
||||
themeConfig: {
|
||||
title: 'G6',
|
||||
description: 'A collection of charts made with the Grammar of Graphics',
|
||||
defaultLanguage: 'zh', // 默认语言
|
||||
isAntVSite: false, // 是否是 AntV 的大官网
|
||||
siteUrl: homepage, // 官网地址
|
||||
githubUrl: repository.url, // GitHub 地址
|
||||
showSearch: true, // 是否显示搜索框
|
||||
showGithubCorner: true, // 是否显示头部的 GitHub icon
|
||||
showGithubStars: true, // 是否显示 GitHub star 数量
|
||||
showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
|
||||
showLanguageSwitcher: true, // 是否显示官网语言切换
|
||||
showWxQrcode: true, // 是否显示头部菜单的微信公众号
|
||||
showChartResize: true, // 是否在 demo 页展示图表视图切换
|
||||
showAPIDoc: true, // 是否在 demo 页展示API文档
|
||||
defaultLanguage: 'zh', // 默认语言
|
||||
isAntVSite: false, // 是否是 AntV 的大官网
|
||||
siteUrl: homepage, // 官网地址
|
||||
githubUrl: repository.url, // GitHub 地址
|
||||
showSearch: true, // 是否显示搜索框
|
||||
showGithubCorner: true, // 是否显示头部的 GitHub icon
|
||||
showGithubStars: true, // 是否显示 GitHub star 数量
|
||||
showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
|
||||
showLanguageSwitcher: true, // 是否显示官网语言切换
|
||||
showWxQrcode: true, // 是否显示头部菜单的微信公众号
|
||||
showChartResize: true, // 是否在 demo 页展示图表视图切换
|
||||
showAPIDoc: true, // 是否在 demo 页展示API文档
|
||||
themeSwitcher: 'g2',
|
||||
versions: { // 历史版本以及切换下拉菜单
|
||||
versions: {
|
||||
// 历史版本以及切换下拉菜单
|
||||
[version]: 'https://g6.antv.antgroup.com',
|
||||
'4.x': 'https://g6.antv.antgroup.com',
|
||||
'3.2.x': 'https://g6-v3-2.antv.vision',
|
||||
},
|
||||
docsearchOptions: { // 头部搜索框配置
|
||||
docsearchOptions: {
|
||||
// 头部搜索框配置
|
||||
apiKey: '9d1cd586972bb492b7b41b13a949ef30',
|
||||
indexName: 'antv_g6',
|
||||
},
|
||||
navs: [
|
||||
{
|
||||
slug: 'docs/design/overview',
|
||||
title: {
|
||||
zh: '设计体系',
|
||||
en: 'Design System',
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'docs/manual/introduction',
|
||||
title: {
|
||||
@ -75,6 +76,13 @@ export default defineConfig({
|
||||
en: 'Manual',
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'examples',
|
||||
title: {
|
||||
zh: '示例',
|
||||
en: 'Examples',
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'docs/api/Graph',
|
||||
title: {
|
||||
@ -84,62 +92,62 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
title: {
|
||||
zh: '在线工具',
|
||||
zh: '其他资源',
|
||||
en: 'Online Tools',
|
||||
},
|
||||
dropdownItems: [
|
||||
// {
|
||||
// url: '/design/overview',
|
||||
// name: {
|
||||
// zh: '设计体系',
|
||||
// en: 'Design System',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
url: 'https://www.yuque.com/antv/g6-blog',
|
||||
name: {
|
||||
zh: 'Graphinsight',
|
||||
en: 'Graphinsight'
|
||||
zh: '文章博客',
|
||||
en: 'Blog',
|
||||
},
|
||||
},
|
||||
{
|
||||
url: 'https://g6.antv.antgroup.com',
|
||||
name: {
|
||||
zh: '极速站点',
|
||||
en: 'Fast Site',
|
||||
},
|
||||
url: 'https://graphinsight.antgroup.com/#/workspace'
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'GraphMaker',
|
||||
en: 'GraphMaker'
|
||||
zh: '在线工具',
|
||||
en: 'Graphinsight',
|
||||
},
|
||||
url: 'https://render.mybank.cn/p/c/17sfi50vhu80#/home'
|
||||
url: 'https://graphinsight.antgroup.com/#/workspace',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
slug: 'examples',
|
||||
title: {
|
||||
zh: '图表示例',
|
||||
en: 'Examples',
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'https://www.yuque.com/antv/g6-blog',
|
||||
title: {
|
||||
zh: '博客',
|
||||
en: 'Blog',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
ecosystems: [ // 头部的菜单中的「周边生态」
|
||||
|
||||
ecosystems: [
|
||||
// 头部的菜单中的「周边生态」
|
||||
],
|
||||
docs: [
|
||||
// ===========Design===================
|
||||
{
|
||||
slug: 'design/global',
|
||||
title: {
|
||||
zh: '全局规范',
|
||||
en: 'Global',
|
||||
},
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
slug: 'design/component',
|
||||
title: {
|
||||
zh: '组件设计',
|
||||
en: 'Component Design',
|
||||
},
|
||||
order: 4,
|
||||
},
|
||||
// {
|
||||
// slug: 'design/global',
|
||||
// title: {
|
||||
// zh: '全局规范',
|
||||
// en: 'Global',
|
||||
// },
|
||||
// order: 3,
|
||||
// },
|
||||
// {
|
||||
// slug: 'design/component',
|
||||
// title: {
|
||||
// zh: '组件设计',
|
||||
// en: 'Component Design',
|
||||
// },
|
||||
// order: 4,
|
||||
// },
|
||||
{
|
||||
slug: 'manual/FAQ',
|
||||
title: {
|
||||
@ -157,132 +165,132 @@ export default defineConfig({
|
||||
order: 3,
|
||||
},
|
||||
// ===========Concepts===================
|
||||
{
|
||||
slug: 'manual/middle',
|
||||
title: {
|
||||
zh: '核心概念',
|
||||
en: 'Middle',
|
||||
},
|
||||
order: 4,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle',
|
||||
// title: {
|
||||
// zh: '核心概念',
|
||||
// en: 'Middle',
|
||||
// },
|
||||
// order: 4,
|
||||
// },
|
||||
|
||||
{
|
||||
slug: 'manual/middle/elements',
|
||||
title: {
|
||||
zh: '图元素：节点/边/Combo',
|
||||
en: 'Graph Elements',
|
||||
},
|
||||
order: 2,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle/elements',
|
||||
// title: {
|
||||
// zh: '图元素：节点/边/Combo',
|
||||
// en: 'Graph Elements',
|
||||
// },
|
||||
// order: 2,
|
||||
// },
|
||||
|
||||
{
|
||||
slug: 'manual/middle/elements/shape',
|
||||
title: {
|
||||
zh: '图形 Shape（选读）',
|
||||
en: 'Shape',
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/nodes',
|
||||
title: {
|
||||
zh: '节点',
|
||||
en: 'Node',
|
||||
},
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/edges',
|
||||
title: {
|
||||
zh: '边',
|
||||
en: 'Edge',
|
||||
},
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/combos',
|
||||
title: {
|
||||
zh: 'Combo',
|
||||
en: 'Combo',
|
||||
},
|
||||
order: 4,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle/elements/shape',
|
||||
// title: {
|
||||
// zh: '图形 Shape（选读）',
|
||||
// en: 'Shape',
|
||||
// },
|
||||
// order: 1,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/nodes',
|
||||
// title: {
|
||||
// zh: '节点',
|
||||
// en: 'Node',
|
||||
// },
|
||||
// order: 2,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/edges',
|
||||
// title: {
|
||||
// zh: '边',
|
||||
// en: 'Edge',
|
||||
// },
|
||||
// order: 3,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/combos',
|
||||
// title: {
|
||||
// zh: 'Combo',
|
||||
// en: 'Combo',
|
||||
// },
|
||||
// order: 4,
|
||||
// },
|
||||
|
||||
{
|
||||
slug: 'manual/middle/elements/nodes/built-in',
|
||||
title: {
|
||||
zh: '内置节点类型',
|
||||
en: 'Built-in Nodes',
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/edges/built-in',
|
||||
title: {
|
||||
zh: '内置边类型',
|
||||
en: 'Built-in Edges',
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/combos/built-in',
|
||||
title: {
|
||||
zh: '内置 Combo',
|
||||
en: 'Built-in Combos',
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle/elements/nodes/built-in',
|
||||
// title: {
|
||||
// zh: '内置节点类型',
|
||||
// en: 'Built-in Nodes',
|
||||
// },
|
||||
// order: 1,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/edges/built-in',
|
||||
// title: {
|
||||
// zh: '内置边类型',
|
||||
// en: 'Built-in Edges',
|
||||
// },
|
||||
// order: 1,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/combos/built-in',
|
||||
// title: {
|
||||
// zh: '内置 Combo',
|
||||
// en: 'Built-in Combos',
|
||||
// },
|
||||
// order: 1,
|
||||
// },
|
||||
|
||||
{
|
||||
slug: 'manual/middle/elements/advanced-style',
|
||||
title: {
|
||||
zh: '高级样式',
|
||||
en: 'Advanced Style',
|
||||
},
|
||||
order: 5,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/elements/methods',
|
||||
title: {
|
||||
zh: '高级操作',
|
||||
en: 'Advanced operation',
|
||||
},
|
||||
order: 6,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle/elements/advanced-style',
|
||||
// title: {
|
||||
// zh: '高级样式',
|
||||
// en: 'Advanced Style',
|
||||
// },
|
||||
// order: 5,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/elements/methods',
|
||||
// title: {
|
||||
// zh: '高级操作',
|
||||
// en: 'Advanced operation',
|
||||
// },
|
||||
// order: 6,
|
||||
// },
|
||||
|
||||
{
|
||||
slug: 'manual/middle/layout',
|
||||
title: {
|
||||
zh: '图布局',
|
||||
en: 'Graph Layouts',
|
||||
},
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/states',
|
||||
title: {
|
||||
zh: '交互与事件',
|
||||
en: 'Behavior & Event',
|
||||
},
|
||||
order: 4,
|
||||
},
|
||||
{
|
||||
slug: 'manual/middle/plugins',
|
||||
title: {
|
||||
zh: '分析组件',
|
||||
en: 'Component',
|
||||
},
|
||||
order: 6,
|
||||
},
|
||||
// ==============================
|
||||
{
|
||||
slug: 'manual/advanced',
|
||||
title: {
|
||||
zh: '拓展阅读',
|
||||
en: 'Further Reading',
|
||||
},
|
||||
order: 5,
|
||||
},
|
||||
// {
|
||||
// slug: 'manual/middle/layout',
|
||||
// title: {
|
||||
// zh: '图布局',
|
||||
// en: 'Graph Layouts',
|
||||
// },
|
||||
// order: 3,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/states',
|
||||
// title: {
|
||||
// zh: '交互与事件',
|
||||
// en: 'Behavior & Event',
|
||||
// },
|
||||
// order: 4,
|
||||
// },
|
||||
// {
|
||||
// slug: 'manual/middle/plugins',
|
||||
// title: {
|
||||
// zh: '分析组件',
|
||||
// en: 'Component',
|
||||
// },
|
||||
// order: 6,
|
||||
// },
|
||||
// // ==============================
|
||||
// {
|
||||
// slug: 'manual/advanced',
|
||||
// title: {
|
||||
// zh: '拓展阅读',
|
||||
// en: 'Further Reading',
|
||||
// },
|
||||
// order: 5,
|
||||
// },
|
||||
// ==========API====================
|
||||
{
|
||||
slug: 'api/graphLayout',
|
||||
@ -328,14 +336,14 @@ export default defineConfig({
|
||||
},
|
||||
],
|
||||
examples: [
|
||||
{
|
||||
slug: 'case',
|
||||
icon: 'gallery',
|
||||
title: {
|
||||
zh: '场景案例',
|
||||
en: 'Case',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// slug: 'case',
|
||||
// icon: 'gallery',
|
||||
// title: {
|
||||
// zh: '场景案例',
|
||||
// en: 'Case',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
slug: 'net',
|
||||
icon: 'net',
|
||||
@ -419,8 +427,10 @@ export default defineConfig({
|
||||
en: 'G6 Graph Visualization Engine',
|
||||
},
|
||||
description: {
|
||||
zh: 'G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。',
|
||||
en: 'G6 is graph visualization engine with simplicity and convenience. Based on the ability of customize, it provides a set of elegant graph visualization solutions, and helps developers to build up applications for graph visualization, graph analysis, and graph editor.'
|
||||
zh:
|
||||
'G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。',
|
||||
en:
|
||||
'G6 is graph visualization engine with simplicity and convenience. Based on the ability of customize, it provides a set of elegant graph visualization solutions, and helps developers to build up applications for graph visualization, graph analysis, and graph editor.',
|
||||
},
|
||||
image: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*j5AqSpmNPdYAAAAAAAAAAABkARQnAQ',
|
||||
buttons: [
|
||||
@ -478,7 +488,7 @@ export default defineConfig({
|
||||
},
|
||||
description: {
|
||||
zh: 'G6 是一个专注于关系数据的、完备的图可视化引擎',
|
||||
en: 'G6 is a complete graph visualization engine, which focuses on relational data'
|
||||
en: 'G6 is a complete graph visualization engine, which focuses on relational data',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -500,25 +510,26 @@ export default defineConfig({
|
||||
},
|
||||
description: {
|
||||
zh: 'Vivid, 精心设计的简单、灵活、高可拓展的接口，满足你的无限创意',
|
||||
en: 'Well-designed simple, flexible, and extendable intefaces will satisfy your infinite originality'
|
||||
}
|
||||
en: 'Well-designed simple, flexible, and extendable intefaces will satisfy your infinite originality',
|
||||
},
|
||||
},
|
||||
],
|
||||
/** 首页案例 */
|
||||
cases: [
|
||||
{
|
||||
logo: 'https://camo.githubusercontent.com/53886f0e306c9f01c96dee2edca3992830b7cbb769118029a7e5d677deb7e67e/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f616e7466696e63646e2f306234487a4f63454a592f4772617068696e2e737667',
|
||||
logo:
|
||||
'https://camo.githubusercontent.com/53886f0e306c9f01c96dee2edca3992830b7cbb769118029a7e5d677deb7e67e/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f616e7466696e63646e2f306234487a4f63454a592f4772617068696e2e737667',
|
||||
title: {
|
||||
zh: 'Graphin 图可视分析组件',
|
||||
en: 'Graphin: Graph Insight',
|
||||
},
|
||||
description: {
|
||||
zh: 'Graphin 是一款基于 G6 封装的 React 分析组件库，专注在关系可视分析领域，简单高效，开箱即用。',
|
||||
en: "Graphin stands for Graph Insight. It's a toolkit based on G6 and React, that focuses on relational visual analysis.It's simple, efficient, out of the box."
|
||||
en:
|
||||
"Graphin stands for Graph Insight. It's a toolkit based on G6 and React, that focuses on relational visual analysis.It's simple, efficient, out of the box.",
|
||||
},
|
||||
link: `https://graphin.antv.vision`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*LKq7Q5wPA0AAAAAAAAAAAAAAARQnAQ',
|
||||
image: 'https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*LKq7Q5wPA0AAAAAAAAAAAAAAARQnAQ',
|
||||
},
|
||||
{
|
||||
logo: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ch6rTrCxb6YAAAAAAAAAAABkARQnAQ',
|
||||
@ -528,11 +539,11 @@ export default defineConfig({
|
||||
},
|
||||
description: {
|
||||
zh: '基于 G6 实现的动态决策树，辅助用户寻找合适的可视化方式。它展示了 G6 强大的自定义节点和动画的能力。',
|
||||
en: 'It is an interactive graph for users to find out an appropriate visualization method for their requirements. The demo shows the powerful custom node and animation ability of G6.'
|
||||
en:
|
||||
'It is an interactive graph for users to find out an appropriate visualization method for their requirements. The demo shows the powerful custom node and animation ability of G6.',
|
||||
},
|
||||
link: `/examples/case/graphDemos/#decisionBubbles`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*10b6R5fkyJ4AAAAAAAAAAABkARQnAQ',
|
||||
image: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*10b6R5fkyJ4AAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
logo: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*95GYRI0zPx8AAAAAAAAAAABkARQnAQ',
|
||||
@ -541,12 +552,13 @@ export default defineConfig({
|
||||
en: 'Graph Analysis App Powered by G6',
|
||||
},
|
||||
description: {
|
||||
zh: '社交网络分析是图可视化中一个重要的应用场景。随着社交网络越来越流行，人与人、人与组织之间的关系变得越来越复杂，使用传统的分析手段，已经很难满足我们的分析需求。在这种情况下，图分析及图可视化显得愈发重要。',
|
||||
en: 'Social network is an important scenario in graph visualization. The relationships become complicate with the development of social network. Graph visualization and analysis do well on these complex cases.'
|
||||
zh:
|
||||
'社交网络分析是图可视化中一个重要的应用场景。随着社交网络越来越流行，人与人、人与组织之间的关系变得越来越复杂，使用传统的分析手段，已经很难满足我们的分析需求。在这种情况下，图分析及图可视化显得愈发重要。',
|
||||
en:
|
||||
'Social network is an important scenario in graph visualization. The relationships become complicate with the development of social network. Graph visualization and analysis do well on these complex cases.',
|
||||
},
|
||||
link: `/manual/cases/relations`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RYFQSZYewokAAAAAAAAAAABkARQnAQ',
|
||||
image: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RYFQSZYewokAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
logo: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IEQFS5VtXX8AAAAAAAAAAABkARQnAQ',
|
||||
@ -555,40 +567,63 @@ export default defineConfig({
|
||||
en: 'Dynamic Relationships Analysis Powered by G6',
|
||||
},
|
||||
description: {
|
||||
zh: '基于 G6 的关系时序分析应用，解决应急过程中流程、影响面、应急预案等一系列应急决策辅助信息和手段，快速止血以减少和避免故障升级。',
|
||||
en: 'This is an application for dynamic relationships analysis based on G6, which helps people deal with the flow, influence, and find out solutions to avoid losses and faults.'
|
||||
zh:
|
||||
'基于 G6 的关系时序分析应用，解决应急过程中流程、影响面、应急预案等一系列应急决策辅助信息和手段，快速止血以减少和避免故障升级。',
|
||||
en:
|
||||
'This is an application for dynamic relationships analysis based on G6, which helps people deal with the flow, influence, and find out solutions to avoid losses and faults.',
|
||||
},
|
||||
link: `/manual/cases/sequenceTime`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*m41kSpg17ZkAAAAAAAAAAABkARQnAQ',
|
||||
image: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*m41kSpg17ZkAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
],
|
||||
/** 首页合作公司 */
|
||||
companies: [
|
||||
{ name: '阿里云', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ' },
|
||||
{ name: '支付宝', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '天猫', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '淘宝网', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '网上银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '京东', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ', },
|
||||
],
|
||||
internalSite: {
|
||||
url: 'https://g6.antv.antgroup.com',
|
||||
name: {
|
||||
zh: '极速站点',
|
||||
en: 'Fast Site',
|
||||
{
|
||||
name: '阿里云',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '支付宝',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '天猫',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '淘宝网',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '网上银行',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '京东',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: 'yunos',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '菜鸟',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
],
|
||||
// internalSite: {
|
||||
// url: 'https://g6.antv.antgroup.com',
|
||||
// name: {
|
||||
// zh: '极速站点',
|
||||
// en: 'Fast Site',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
mfsu: false,
|
||||
alias: {
|
||||
'@': __dirname
|
||||
'@': __dirname,
|
||||
},
|
||||
links: [
|
||||
],
|
||||
scripts: [
|
||||
],
|
||||
links: [],
|
||||
scripts: [],
|
||||
jsMinifier: 'terser',
|
||||
});
|
||||
|
||||
11
packages/site/.prettierrc
Normal file
11
packages/site/.prettierrc
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
"options": { "parser": "json" }
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "toolbar.js",
|
||||
"filename": "toolbar.ts",
|
||||
"title": {
|
||||
"zh": "工具栏",
|
||||
"en": "ToolBar"
|
||||
@ -13,7 +13,7 @@
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MhpmS68lZW0AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "self-toolbar.js",
|
||||
"filename": "self-toolbar.ts",
|
||||
"title": {
|
||||
"zh": "自定义工具栏",
|
||||
"en": "ToolBar"
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
import G6 from '@antv/g6';
|
||||
import insertCss from 'insert-css';
|
||||
|
||||
insertCss(`
|
||||
.g6-toolbar-ul {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #545454;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 10px 8px;
|
||||
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
`);
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: '0',
|
||||
label: 'node-0',
|
||||
x: 100,
|
||||
y: 100,
|
||||
description: 'This is node-0.',
|
||||
subdescription: 'This is subdescription of node-0.',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
label: 'node-1',
|
||||
x: 250,
|
||||
y: 100,
|
||||
description: 'This is node-1.',
|
||||
subdescription: 'This is subdescription of node-1.',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'node-2',
|
||||
x: 150,
|
||||
y: 310,
|
||||
description: 'This is node-2.',
|
||||
subdescription: 'This is subdescription of node-2.',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: 'node-3',
|
||||
x: 320,
|
||||
y: 310,
|
||||
description: 'This is node-3.',
|
||||
subdescription: 'This is subdescription of node-3.',
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'e0',
|
||||
source: '0',
|
||||
target: '1',
|
||||
description: 'This is edge from node 0 to node 1.',
|
||||
},
|
||||
{
|
||||
id: 'e1',
|
||||
source: '0',
|
||||
target: '2',
|
||||
description: 'This is edge from node 0 to node 2.',
|
||||
},
|
||||
{
|
||||
id: 'e2',
|
||||
source: '0',
|
||||
target: '3',
|
||||
description: 'This is edge from node 0 to node 3.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 500;
|
||||
|
||||
const toolbar = new G6.ToolBar({
|
||||
// container: tc,
|
||||
className: 'g6-toolbar-ul',
|
||||
getContent: () => {
|
||||
return `
|
||||
<ul>
|
||||
<li code='add'>增加节点</li>
|
||||
<li code='undo'>撤销</li>
|
||||
<li code='redo'>回退</li>
|
||||
</ul>
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === 'add') {
|
||||
graph.addItem('node', {
|
||||
id: 'node2',
|
||||
label: 'node2',
|
||||
x: 300,
|
||||
y: 150,
|
||||
});
|
||||
} else if (code === 'undo') {
|
||||
toolbar.undo();
|
||||
} else if (code === 'redo') {
|
||||
toolbar.redo();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
container: 'container',
|
||||
width,
|
||||
height,
|
||||
linkCenter: true,
|
||||
// 设置为true，启用 redo & undo 栈功能
|
||||
enabledStack: true,
|
||||
plugins: [toolbar],
|
||||
defaultNode: {
|
||||
size: [80, 40],
|
||||
type: 'rect',
|
||||
style: {
|
||||
fill: '#DEE9FF',
|
||||
stroke: '#5B8FF9',
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
style: {
|
||||
stroke: '#b5b5b5',
|
||||
lineAppendWidth: 3,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['drag-node'],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
if (typeof window !== 'undefined')
|
||||
window.onresize = () => {
|
||||
if (!graph || graph.get('destroyed')) return;
|
||||
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
||||
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
||||
};
|
||||
83
packages/site/examples/tool/toolbar/demo/self-toolbar.ts
Normal file
83
packages/site/examples/tool/toolbar/demo/self-toolbar.ts
Normal file
@ -0,0 +1,83 @@
|
||||
import { Graph } from "@antv/g6";
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: "node1", data: { x: 100, y: 200, nodeType: "a" } },
|
||||
{ id: "node2", data: { x: 200, y: 250, nodeType: "b" } },
|
||||
{ id: "node3", data: { x: 200, y: 350, nodeType: "b" } },
|
||||
{ id: "node4", data: { x: 300, y: 250, nodeType: "c" } },
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: "edge1",
|
||||
source: "node1",
|
||||
target: "node2",
|
||||
data: { edgeType: "e1" },
|
||||
},
|
||||
{
|
||||
id: "edge2",
|
||||
source: "node2",
|
||||
target: "node3",
|
||||
data: { edgeType: "e2" },
|
||||
},
|
||||
{
|
||||
id: "edge3",
|
||||
source: "node3",
|
||||
target: "node4",
|
||||
data: { edgeType: "e3" },
|
||||
},
|
||||
{
|
||||
id: "edge4",
|
||||
source: "node1",
|
||||
target: "node4",
|
||||
data: { edgeType: "e3" },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const toolbar = {
|
||||
type: "toolbar",
|
||||
|
||||
getContent: () => {
|
||||
return `
|
||||
<ul>
|
||||
<li code='alert'>Alert</li>
|
||||
</ul>
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === "alert") {
|
||||
alert("hello world");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
new Graph({
|
||||
container: "container",
|
||||
width: 500,
|
||||
height: 500,
|
||||
renderer: "canvas",
|
||||
type: "graph",
|
||||
layout: {
|
||||
type: "grid",
|
||||
},
|
||||
node: {
|
||||
labelShape: {
|
||||
text: {
|
||||
fields: ["id"],
|
||||
formatter: (model) => model.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
toolbar,
|
||||
{
|
||||
...toolbar,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 200,
|
||||
},
|
||||
},
|
||||
],
|
||||
data,
|
||||
});
|
||||
@ -1,109 +0,0 @@
|
||||
import G6 from '@antv/g6';
|
||||
import insertCss from 'insert-css';
|
||||
|
||||
insertCss(`
|
||||
.g6-component-toolbar li {
|
||||
list-style-type: none !important;
|
||||
}
|
||||
`);
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: '0',
|
||||
label: 'node-0',
|
||||
x: 100,
|
||||
y: 100,
|
||||
description: 'This is node-0.',
|
||||
subdescription: 'This is subdescription of node-0.',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
label: 'node-1',
|
||||
x: 250,
|
||||
y: 100,
|
||||
description: 'This is node-1.',
|
||||
subdescription: 'This is subdescription of node-1.',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'node-2',
|
||||
x: 150,
|
||||
y: 310,
|
||||
description: 'This is node-2.',
|
||||
subdescription: 'This is subdescription of node-2.',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: 'node-3',
|
||||
x: 320,
|
||||
y: 310,
|
||||
description: 'This is node-3.',
|
||||
subdescription: 'This is subdescription of node-3.',
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'e0',
|
||||
source: '0',
|
||||
target: '1',
|
||||
description: 'This is edge from node 0 to node 1.',
|
||||
},
|
||||
{
|
||||
id: 'e1',
|
||||
source: '0',
|
||||
target: '2',
|
||||
description: 'This is edge from node 0 to node 2.',
|
||||
},
|
||||
{
|
||||
id: 'e2',
|
||||
source: '0',
|
||||
target: '3',
|
||||
description: 'This is edge from node 0 to node 3.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 500;
|
||||
|
||||
const toolbar = new G6.ToolBar({
|
||||
position: { x: 10, y: 10 },
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
container: 'container',
|
||||
width,
|
||||
height,
|
||||
linkCenter: true,
|
||||
plugins: [toolbar],
|
||||
// 设置为true，启用 redo & undo 栈功能
|
||||
enabledStack: true,
|
||||
defaultNode: {
|
||||
size: [80, 40],
|
||||
type: 'rect',
|
||||
style: {
|
||||
fill: '#DEE9FF',
|
||||
stroke: '#5B8FF9',
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
style: {
|
||||
stroke: '#b5b5b5',
|
||||
lineAppendWidth: 3,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['drag-node'],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
if (typeof window !== 'undefined')
|
||||
window.onresize = () => {
|
||||
if (!graph || graph.get('destroyed')) return;
|
||||
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
||||
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
||||
};
|
||||
57
packages/site/examples/tool/toolbar/demo/toolbar.ts
Normal file
57
packages/site/examples/tool/toolbar/demo/toolbar.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { Graph } from "@antv/g6";
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: "node1", data: { x: 100, y: 200, nodeType: "a" } },
|
||||
{ id: "node2", data: { x: 200, y: 250, nodeType: "b" } },
|
||||
{ id: "node3", data: { x: 200, y: 350, nodeType: "b" } },
|
||||
{ id: "node4", data: { x: 300, y: 250, nodeType: "c" } },
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: "edge1",
|
||||
source: "node1",
|
||||
target: "node2",
|
||||
data: { edgeType: "e1" },
|
||||
},
|
||||
{
|
||||
id: "edge2",
|
||||
source: "node2",
|
||||
target: "node3",
|
||||
data: { edgeType: "e2" },
|
||||
},
|
||||
{
|
||||
id: "edge3",
|
||||
source: "node3",
|
||||
target: "node4",
|
||||
data: { edgeType: "e3" },
|
||||
},
|
||||
{
|
||||
id: "edge4",
|
||||
source: "node1",
|
||||
target: "node4",
|
||||
data: { edgeType: "e3" },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const graph = new Graph({
|
||||
container: "container",
|
||||
width: 500,
|
||||
height: 500,
|
||||
renderer: "canvas",
|
||||
type: "graph",
|
||||
layout: {
|
||||
type: "grid",
|
||||
},
|
||||
node: {
|
||||
labelShape: {
|
||||
text: {
|
||||
fields: ["id"],
|
||||
formatter: (model) => model.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: ["toolbar"],
|
||||
data,
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/g6-site",
|
||||
"version": "4.8.0",
|
||||
"private": true,
|
||||
"description": "G6 sites deployed on gh-pages",
|
||||
"keywords": [
|
||||
"antv",
|
||||
@ -25,30 +25,31 @@
|
||||
"author": "https://github.com/orgs/antvis/people",
|
||||
"scripts": {
|
||||
"site:build": "dumi build",
|
||||
"site:deploy": "npm run site:build && gh-pages -d dist",
|
||||
"site:develop": "dumi dev",
|
||||
"site:preview": "dumi preview",
|
||||
"site:deploy": "npm run site:build && gh-pages -d dist",
|
||||
"start": "npm run site:develop"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^7.0.3"
|
||||
"resolutions": {
|
||||
"@types/react": "^16.9.35"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.0.6",
|
||||
"@antv/chart-node-g6": "^0.0.3",
|
||||
"@antv/dumi-theme-antv": "^0.3.0-beta.5",
|
||||
"@antv/g6": "4.7.9",
|
||||
"@antv/dumi-theme-antv": "^0.3.18",
|
||||
"@antv/g6": "workspace:*",
|
||||
"@antv/g6-react-node": "^1.4.5",
|
||||
"@antv/util": "^2.0.9",
|
||||
"@antv/vis-predict-engine": "^0.1.1",
|
||||
"@microsoft/api-extractor": "^7.33.6",
|
||||
"dumi": "^2.0.0-beta.15",
|
||||
"dumi": "^2.2.4",
|
||||
"insert-css": "^2.0.0",
|
||||
"typedoc": "^0.17.6",
|
||||
"typedoc-plugin-markdown": "^2.2.11",
|
||||
"typescript": "^4.6.3"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "^16.9.35"
|
||||
"devDependencies": {
|
||||
"prettier": "^2.8.8",
|
||||
"cross-env": "^7.0.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
11
packages/site/tsconfig.json
Normal file
11
packages/site/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"target": "ESNext",
|
||||
"jsx": "react",
|
||||
"lib": ["dom"],
|
||||
"paths": {
|
||||
"@antv/g6": ["../g6/lib/index"]
|
||||
}
|
||||
}
|
||||
}
|
||||
41525
pnpm-lock.yaml
Normal file
41525
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
5
pnpm-workspace.yaml
Normal file
5
pnpm-workspace.yaml
Normal file
@ -0,0 +1,5 @@
|
||||
packages:
|
||||
# all packages in subdirs of packages/ and components/
|
||||
- "packages/**"
|
||||
- "!packages/g6-demo"
|
||||
- "!packages/react-node"
|
||||
Loading…
Reference in New Issue
Block a user