test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 02:38:20 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore: replace v5 screenshots for site

Browse Source
This commit is contained in:
Yanyan-Wang 2023-08-31 22:16:30 +08:00
parent aadef7f171
commit f951c95fb3
67 changed files with 689 additions and 975 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/g6/src/stdlib/data/validateData.ts
View File

@ -1,3 +1,4 @@
import { uniqueId } from '@antv/util';
import { GraphCore } from '../../types/data';
import {
GraphData,
@ -5,7 +6,6 @@ import {
EdgeUserModel,
NodeUserModel,
} from '../../types';
import { uniqueId } from '@antv/util';
/**
* Validate and format the graph data.

8
packages/site/.dumirc.ts
View File

@ -417,14 +417,6 @@ export default defineConfig({
en: 'Component',
},
},
{
slug: 'algorithm',
icon: 'gallery',
title: {
zh: '算法',
en: 'Algorithm',
},
},
{
slug: 'performance',
icon: 'net',

10
packages/site/examples/feature/features/demo/meta.json
View File

@ -18,7 +18,7 @@
"zh": "信息分层",
"en": "Level of Details"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ucUBSoDw2TwAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EtKkRZVxWDAAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "itemAnimates.js",
@ -26,7 +26,7 @@
"zh": "动画 Spec",
"en": "Animation Spec"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M-EGS5v6RnUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uVOySpSIZXkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "rendererSwitch.js",
@ -34,7 +34,7 @@
"zh": "渲染器运行时切换",
"en": "Renderer Switch"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M-EGS5v6RnUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NUFVRqAJv6QAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "themeSwitch.js",
@ -42,7 +42,7 @@
"zh": "主题切换",
"en": "Theme Switch"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M-EGS5v6RnUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jCYaT7L2E7sAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "treeAndGraph.js",
@ -50,7 +50,7 @@
"zh": "树与图通用",
"en": "Tree Data and Graph Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M-EGS5v6RnUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SAkASow3N60AAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "wasmLayouts.js",

21
packages/site/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js
View File

@ -13,23 +13,10 @@ class TwoFingerScrollCanvas extends Extensions.BaseBehavior {
};
}
onWheel = (ev) => {
if (ev.ctrlKey) {
let ratio = graph.getZoom();
if (ev.wheelDelta > 0) {
ratio = ratio + ratio * 0.05;
} else {
ratio = ratio - ratio * 0.05;
}
this.graph.zoomTo(ratio, {
x: ev.canvas.x,
y: ev.canvas.y,
});
} else {
const x = ev.deltaX || ev.movementX || 0;
let y = ev.deltaY || ev.movementY || 0;
if (!y && navigator.userAgent.indexOf('Firefox') > -1) y = (-ev.wheelDelta * 125) / 3;
this.graph.translate({ dx: x, dy: y });
}
const x = ev.deltaX || ev.movementX || 0;
let y = ev.deltaY || ev.movementY || 0;
if (!y && navigator.userAgent.indexOf('Firefox') > -1) y = (-ev.wheelDelta * 125) / 3;
this.graph.translate({ dx: x, dy: y });
};
}

4
packages/site/examples/item/arrows/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "默认和内置箭头",
"en": "Default and Built-in Arrows"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mGusTo9FcCYAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VlxQQoEpTIgAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "custom-arrows.js",
@ -18,7 +18,7 @@
"zh": "自定义箭头",
"en": "Custom Arrows"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*C2ODRb7E9mwAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6wrVRoF3S98AAAAAAAAAAAAADmJ7AQ/original"
}
]
}

6
packages/site/examples/item/customEdge/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "添加额外图形",
"en": "Custom Edge with Extra Shapes"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*L4rZQbqwaRYAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HZVSQqa-I8AAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "customPolyline.js",
@ -18,7 +18,7 @@
"zh": "自定义折线",
"en": "Custom Polyline"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FuS3Qq_lDiIAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MPQTSap6ZusAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "edgeMulLabel.js",
@ -26,7 +26,7 @@
"zh": "多标签边",
"en": "Multiple Labels"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*01YORI5jRp8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HZVSQqa-I8AAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

4
packages/site/examples/item/defaultCombos/demo/meta.json
View File

@ -7,12 +7,12 @@
{
"filename": "circle.js",
"title": "圆形",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Rvx9SYSHGsIAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kbk1S5pzSY0AAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "rect.js",
"title": "矩形",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qvmVTZc-iNcAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKtgSZzmb3YAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

16
packages/site/examples/item/defaultEdges/demo/meta.json
View File

@ -18,15 +18,15 @@
"zh": "折线（设置控制点）",
"en": "Polyline 2"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*CA7oQJIkIl8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mxXeT7xiFVQAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "polyline3.js",
"title": {
"zh": "折线（智能寻径）",
"en": "Polyline 3"
"en": "Polyline with Router and Obstacles"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E-MJQqf9mSUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Giy7R4jheawAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "quadratic.js",
@ -34,7 +34,7 @@
"zh": "二次贝塞尔曲线",
"en": "Quadratic"
},
"screenshot": ""
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7nRdQ45O4ToAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "cubic.js",
@ -42,7 +42,7 @@
"zh": "三次贝塞尔曲线",
"en": "Cubic"
},
"screenshot": ""
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DefFQKN3V_wAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "verticalCubic.js",
@ -50,7 +50,7 @@
"zh": "三次贝塞尔曲线-垂直",
"en": "Vertical Cubic"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UO_sQp0XftMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*32fiR5igjmAAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "horizontalCubic.js",
@ -58,7 +58,7 @@
"zh": "三次贝塞尔曲线-水平",
"en": "Horizontal Cubic"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*LxFySJ-uvhMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-tIXTbS3SIAAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "loop.js",
@ -66,7 +66,7 @@
"zh": "自环边",
"en": "Loop"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*W8wxRJk_q8wAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-fZpR6ir9TYAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

147
packages/site/examples/item/defaultNodes/demo/circle.js
View File

@ -3,12 +3,55 @@ import G6 from '@antv/g6';
const data = {
nodes: [
{
id: 'circle',
id: 'node1',
data: {
x: 250,
y: 150,
},
},
{
id: 'circle-active',
data: {
x: 250,
y: 300,
},
},
{
id: 'circle-selected',
data: {
x: 250,
y: 450,
},
},
{
id: 'circle-highlight',
data: {
x: 400,
y: 150,
},
},
{
id: 'circle-inactive',
data: {
x: 400,
y: 300,
},
},
{
id: 'circle-badges',
data: {
x: 400,
y: 450,
},
},
{
id: 'circle-anchorShapes',
data: {
x: 550,
y: 150,
},
},
],
};
@ -23,42 +66,80 @@ const graph = new G6.Graph({
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
data,
node: {
keyShape: {
r: 30,
},
labelShape: {
text: {
fields: ['id'],
formatter: (model) => model.id,
node: (model) => {
const { id, data } = model;
const config = {
id,
data: {
...data,
type: 'circle-node',
labelShape: {
text: 'label',
position: 'bottom',
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
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',
},
],
};
if (id.includes('badges')) {
config.data.badgeShapes = [
{
text: 'A',
position: 'rightTop',
},
{
text: 'Important',
position: 'right',
},
{
text: 'Notice',
position: 'rightBottom',
},
];
}
if (id.includes('anchorShapes')) {
config.data.anchorShapes = [
{
position: [0, 0.5],
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
{
position: [1, 0.5],
},
];
}
return config;
},
});
graph.on('afterrender', (e) => {
graph.setItemState('circle-active', 'active', true);
graph.setItemState('circle-selected', 'selected', true);
graph.setItemState('circle-highlight', 'highlight', true);
graph.setItemState('circle-inactive', 'inactive', true);
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;

32
packages/site/examples/item/defaultNodes/demo/diamond.js
View File

@ -32,9 +32,6 @@ const graph = new ExtGraph({
data,
node: {
type: 'diamond-node',
keyShape: {
r: 30,
},
labelShape: {
text: {
fields: ['id'],
@ -42,14 +39,16 @@ const graph = new ExtGraph({
},
position: 'bottom',
},
labelBackgroundShape: {
fill: 'red',
},
labelBackgroundShape: {},
anchorShapes: [
{
position: [0, 0.5],
r: 2,
fill: 'red',
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
],
iconShape: {
@ -59,11 +58,24 @@ const graph = new ExtGraph({
},
badgeShapes: [
{
text: '1',
text: 'A',
position: 'rightTop',
color: 'blue',
},
],
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
});

29
packages/site/examples/item/defaultNodes/demo/donut.js
View File

@ -65,14 +65,16 @@ const graph = new ExtGraph({
},
position: 'bottom',
},
labelBackgroundShape: {
fill: 'red',
},
labelBackgroundShape: {},
anchorShapes: [
{
position: [0, 0.5],
r: 2,
fill: 'red',
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
],
iconShape: {
@ -82,9 +84,8 @@ const graph = new ExtGraph({
},
badgeShapes: [
{
text: '1',
text: 'A',
position: 'rightTop',
color: 'blue',
},
],
/** Shapes of donut */
@ -100,6 +101,20 @@ const graph = new ExtGraph({
formatter: (model) => model.data.donutColorMap,
},
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
});

168
packages/site/examples/item/defaultNodes/demo/ellipse.js
View File

@ -1,25 +1,55 @@
import { Graph, Extensions, extend } from '@antv/g6';
import G6 from '@antv/g6';
const data = {
nodes: [
{
id: 'ellipse',
id: 'node1',
data: {
x: 250,
y: 150,
type: 'ellipse-node',
keyShape: {
/**
* 水平半径，默认 30
* the horizontal radius of the ellipse, default is 30
*/
// rx: 30,
/**
* 垂直半径，数字可选，默认 20
* the vertical radius of the ellipse, default is 20
*/
// ry: 20,
},
},
},
{
id: 'ellipse-active',
data: {
x: 250,
y: 300,
},
},
{
id: 'ellipse-selected',
data: {
x: 250,
y: 450,
},
},
{
id: 'ellipse-highlight',
data: {
x: 400,
y: 150,
},
},
{
id: 'ellipse-inactive',
data: {
x: 400,
y: 300,
},
},
{
id: 'ellipse-badges',
data: {
x: 400,
y: 450,
},
},
{
id: 'ellipse-anchorShapes',
data: {
x: 550,
y: 150,
},
},
],
@ -28,14 +58,7 @@ const data = {
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const ExtGraph = extend(Graph, {
nodes: {
'ellipse-node': Extensions.EllipseNode,
},
});
const graph = new ExtGraph({
const graph = new G6.Graph({
container: 'container',
width,
height,
@ -43,39 +66,80 @@ const graph = new ExtGraph({
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
data,
node: {
labelShape: {
text: {
fields: ['id'],
formatter: (model) => model.id,
node: (model) => {
const { id, data } = model;
const config = {
id,
data: {
...data,
type: 'ellipse-node',
labelShape: {
text: 'label',
position: 'bottom',
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
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',
},
],
};
if (id.includes('badges')) {
config.data.badgeShapes = [
{
text: 'A',
position: 'rightTop',
},
{
text: 'Important',
position: 'right',
},
{
text: 'Notice',
position: 'rightBottom',
},
];
}
if (id.includes('anchorShapes')) {
config.data.anchorShapes = [
{
position: [0, 0.5],
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
{
position: [1, 0.5],
},
];
}
return config;
},
});
graph.on('afterrender', (e) => {
graph.setItemState('ellipse-active', 'active', true);
graph.setItemState('ellipse-selected', 'selected', true);
graph.setItemState('ellipse-highlight', 'highlight', true);
graph.setItemState('ellipse-inactive', 'inactive', true);
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;

48
packages/site/examples/item/defaultNodes/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "圆形",
"en": "Circle"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*8QIsS5rud6oAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hdvGT4kEmOAAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "donut.js",
@ -18,7 +18,7 @@
"zh": "甜甜圈",
"en": "Donut"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NRJ7RpkMPNsAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*c5f5Q7XuOWoAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "ellipse.js",
@ -26,7 +26,7 @@
"zh": "椭圆",
"en": "Ellipse"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*tWyKToNjzWMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*S9gxRJiRMEkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "rect.js",
@ -34,7 +34,15 @@
"zh": "矩形",
"en": "Rect"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*pnaTQYJ3kaQAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VGpITb2jm7IAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "radiusRect.js",
"title": {
"zh": "圆角矩形",
"en": "Radius Rect"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*R45pQLK7pgYAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "modelRect.js",
@ -43,38 +51,6 @@
"en": "ModelRect"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*w4kQSYQ9djQAAAAAAAAAAABkARQnAQ"
},
{
"filename": "diamond.js",
"title": {
"zh": "模态菱形矩形",
"en": "Diamond"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6XXCTZxhib0AAAAAAAAAAABkARQnAQ"
},
{
"filename": "star.js",
"title": {
"zh": "五角星",
"en": "Star"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-unkSZtlDeAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "triangle.js",
"title": {
"zh": "三角形",
"en": "Triangle"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*i2tETYnJ0dIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "hexagon.js",
"title": {
"zh": "六边形",
"en": "Hexagon"
},
"screenshot": ""
}
]
}

151
packages/site/examples/item/defaultNodes/demo/radiusRect.js Normal file
View File

@ -0,0 +1,151 @@
import G6 from '@antv/g6';
const data = {
nodes: [
{
id: 'node1',
data: {
x: 250,
y: 150,
},
},
{
id: 'rect-active',
data: {
x: 250,
y: 300,
},
},
{
id: 'rect-selected',
data: {
x: 250,
y: 450,
},
},
{
id: 'rect-highlight',
data: {
x: 400,
y: 150,
},
},
{
id: 'rect-inactive',
data: {
x: 400,
y: 300,
},
},
{
id: 'rect-badges',
data: {
x: 400,
y: 450,
},
},
{
id: 'rect-anchorShapes',
data: {
x: 550,
y: 150,
},
},
],
};
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
data,
node: (model) => {
const { id, data } = model;
const config = {
id,
data: {
...data,
type: 'rect-node',
keyShape: {
radius: 10,
},
labelShape: {
text: 'label',
position: 'bottom',
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
};
if (id.includes('badges')) {
config.data.badgeShapes = [
{
text: 'A',
position: 'rightTop',
},
{
text: 'Important',
position: 'right',
},
{
text: 'Notice',
position: 'rightBottom',
},
];
}
if (id.includes('anchorShapes')) {
config.data.anchorShapes = [
{
position: [0, 0.5],
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
{
position: [1, 0.5],
},
];
}
return config;
},
});
graph.on('afterrender', (e) => {
graph.setItemState('rect-active', 'active', true);
graph.setItemState('rect-selected', 'selected', true);
graph.setItemState('rect-highlight', 'highlight', true);
graph.setItemState('rect-inactive', 'inactive', true);
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.setSize([container.scrollWidth, container.scrollHeight]);
};

152
packages/site/examples/item/defaultNodes/demo/rect.js
View File

@ -7,19 +7,49 @@ const data = {
data: {
x: 250,
y: 150,
type: 'rect-node',
keyShape: {
/**
* 矩形的宽度，默认为32
* the width of the rectangle, default is 32
*/
// width: 32,
/**
* 矩形的高度，默认为32
* the height of the rectangle, default is 32
*/
// height: 32,
},
},
},
{
id: 'rect-active',
data: {
x: 250,
y: 300,
},
},
{
id: 'rect-selected',
data: {
x: 250,
y: 450,
},
},
{
id: 'rect-highlight',
data: {
x: 400,
y: 150,
},
},
{
id: 'rect-inactive',
data: {
x: 400,
y: 300,
},
},
{
id: 'rect-badges',
data: {
x: 400,
y: 450,
},
},
{
id: 'rect-anchorShapes',
data: {
x: 550,
y: 150,
},
},
],
@ -36,36 +66,80 @@ const graph = new G6.Graph({
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
data,
node: {
labelShape: {
text: 'label',
position: 'bottom',
},
labelBackgroundShape: {
fill: 'red',
},
anchorShapes: [
{
position: [0, 0.5],
r: 2,
fill: 'red',
node: (model) => {
const { id, data } = model;
const config = {
id,
data: {
...data,
type: 'rect-node',
labelShape: {
text: 'label',
position: 'bottom',
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['selected', 'active'],
},
],
},
},
],
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',
},
],
};
if (id.includes('badges')) {
config.data.badgeShapes = [
{
text: 'A',
position: 'rightTop',
},
{
text: 'Important',
position: 'right',
},
{
text: 'Notice',
position: 'rightBottom',
},
];
}
if (id.includes('anchorShapes')) {
config.data.anchorShapes = [
{
position: [0, 0.5],
},
{
position: [0.5, 0],
},
{
position: [0.5, 1],
},
{
position: [1, 0.5],
},
];
}
return config;
},
});
graph.on('afterrender', (e) => {
graph.setItemState('rect-active', 'active', true);
graph.setItemState('rect-selected', 'selected', true);
graph.setItemState('rect-highlight', 'highlight', true);
graph.setItemState('rect-inactive', 'inactive', true);
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;

2
packages/site/examples/net/circular/demo/circularConfigurationTranslate.js
View File

@ -651,7 +651,7 @@ const graph = new G6.Graph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
autoFit: {
type: 'center',

4
packages/site/examples/net/circular/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "Circular 布局",
"en": "Circular Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZSuXQ4PS2F8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PpVQLFTaQwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "circularConfigurationTranslate.js",
@ -18,7 +18,7 @@
"zh": "Circular 布局参数动态变化",
"en": "Update Configurations for Circular Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*D85cS7-yqNEAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*H6DyT6468ZMAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/comboLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "ComboCombined 组合布局",
"en": "Combo Combined Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*odTCQLZkqxIAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zPAzSZ3XxpUAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

6
packages/site/examples/net/compactBox/demo/basicCompactBox.js
View File

@ -54,12 +54,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

6
packages/site/examples/net/compactBox/demo/graphWithCompactBox.js
View File

@ -54,12 +54,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

6
packages/site/examples/net/compactBox/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "紧凑树",
"en": "CompactBox Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XlXOR5pmM3oAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-FgIT7w4OXwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "graphWithCompactBox.js",
@ -18,7 +18,7 @@
"zh": "图数据使用紧凑树",
"en": "CompactBox Layout on Graph Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XlXOR5pmM3oAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dfI9RL0lBmMAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "compactBoxLeftAlign.js",
@ -26,7 +26,7 @@
"zh": "节点左对齐的紧凑树",
"en": "CompactBox with Left Align Nodes"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b3G-QZZekE8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*X26MRo25GKgAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

10
packages/site/examples/net/concentricLayout/demo/basicConcentric.js
View File

@ -1,4 +1,10 @@
import G6 from '@antv/g6';
import { Graph, Extensions, extend } from '@antv/g6';
const ExtGraph = extend(Graph, {
behaviors: {
'brush-select': Extensions.BrushSelect,
},
});
const container = document.getElementById('container');
const width = container.scrollWidth;
@ -7,7 +13,7 @@ const height = container.scrollHeight || 500;
fetch('https://gw.alipayobjects.com/os/basement_prod/8dacf27e-e1bc-4522-b6d3-4b6d9b9ed7df.json')
.then((res) => res.json())
.then((data) => {
const graph = new G6.Graph({
const graph = new ExtGraph({
container: 'container',
width,
height,

2
packages/site/examples/net/concentricLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "基本 Concentric 同心圆布局",
"en": "Basic Concentric Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QpyPTbBpO2AAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KXunQKOLCSAAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

11
packages/site/examples/net/dagreFlow/demo/dagreCombo.js
View File

@ -174,8 +174,13 @@ const data = {
};
let sortByCombo = false;
const descriptionDiv = document.createElement('button');
descriptionDiv.innerHTML = 'Enable sortByCombo';
const descriptionDiv = document.createElement('a');
descriptionDiv.style.position = 'absolute';
descriptionDiv.style.zIndex = 10;
descriptionDiv.innerHTML = '👉 Enable sortByCombo';
descriptionDiv.style.fontSize = '20px';
descriptionDiv.style.border = '1px dashed rgba(34, 126, 255, 0.5)';
descriptionDiv.style.padding = '2px 8px';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);
@ -193,7 +198,7 @@ const graph = new ExtGraph({
container: 'container',
width,
height: height - 50,
autoFit: 'view',
autoFit: 'center',
modes: {
default: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand-combo'],
},

4
packages/site/examples/net/dagreFlow/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "Dagre 流程图",
"en": "Dagre Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2uMmRo5wYPUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ESU8SrsUnlwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "dagreCombo.js",
@ -18,7 +18,7 @@
"zh": "带有 Combo 的流程图",
"en": "Dagre with Combos"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*94EUTJ8l2QAAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*h60aQKusJRcAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

10
packages/site/examples/net/dendrogram/demo/basicDendrogram.js
View File

@ -10,8 +10,8 @@ const layoutConfigs = {
LR: {
type: 'dendrogram',
direction: 'LR', // H / V / LR / RL / TB / BT
nodeSep: 40,
rankSep: 100,
nodeSep: 36,
rankSep: 250,
},
TB: {
type: 'dendrogram',
@ -33,12 +33,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

4
packages/site/examples/net/dendrogram/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "生态树",
"en": "Basic Dendrogram Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ffD6S74MXw4AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*P-qOSoDNuckAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "graphDataWithDendrogram.js",
@ -18,7 +18,7 @@
"zh": "图数据使用生态树",
"en": "Basic Dendrogram Layout with Graph Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ffD6S74MXw4AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ti5tSZHz7vgAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

4
packages/site/examples/net/forceDirected/demo/basicFA2.js
View File

@ -19,12 +19,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
height,
transforms: ['transform-v4-data'],
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
layout: {
type: 'forceAtlas2',
preventOverlap: true,
kr: 2,
kr: 20,
center: [250, 250],
},
autoFit: 'view',

605
packages/site/examples/net/forceDirected/demo/basicForce2.js
View File

@ -1,605 +0,0 @@
import G6 from '@antv/g6';
const data = {
nodes: [
{
id: '0',
data: {
cluster: 'a',
},
},
{
id: '1',
data: {
cluster: 'a',
},
},
{
id: '2',
data: {
cluster: 'a',
},
},
{
id: '3',
data: {
cluster: 'a',
},
},
{
id: '4',
data: {
cluster: 'a',
},
},
{
id: '5',
data: {
cluster: 'a',
},
},
{
id: '6',
data: {
cluster: 'a',
},
},
{
id: '7',
data: {
cluster: 'a',
},
},
{
id: '8',
data: {
cluster: 'a',
},
},
{
id: '9',
data: {
cluster: 'a',
},
},
{
id: '10',
data: {
cluster: 'a',
},
},
{
id: '11',
data: {
cluster: 'a',
},
},
{
id: '12',
data: {
cluster: 'a',
},
},
{
id: '13',
data: {
cluster: 'b',
},
},
{
id: '14',
data: {
cluster: 'b',
},
},
{
id: '15',
data: {
cluster: 'b',
},
},
{
id: '16',
data: {
cluster: 'b',
},
},
{
id: '17',
data: {
cluster: 'b',
},
},
{
id: '18',
data: {
cluster: 'c',
},
},
{
id: '19',
data: {
cluster: 'c',
},
},
{
id: '20',
data: {
cluster: 'c',
},
},
{
id: '21',
data: {
cluster: 'c',
},
},
{
id: '22',
data: {
cluster: 'c',
},
},
{
id: '23',
data: {
cluster: 'c',
},
},
{
id: '24',
data: {
cluster: 'c',
},
},
{
id: '25',
data: {
cluster: 'c',
},
},
{
id: '26',
data: {
cluster: 'c',
},
},
{
id: '27',
data: {
cluster: 'c',
},
},
{
id: '28',
data: {
cluster: 'c',
},
},
{
id: '29',
data: {
cluster: 'c',
},
},
{
id: '30',
data: {
cluster: 'c',
},
},
{
id: '31',
data: {
cluster: 'd',
},
},
{
id: '32',
data: {
cluster: 'd',
},
},
{
id: '33',
data: {
cluster: 'd',
},
},
],
edges: [
{
id: 'edge-583',
source: '0',
target: '1',
},
{
id: 'edge-0',
source: '0',
target: '2',
},
{
id: 'edge-888',
source: '0',
target: '3',
},
{
id: 'edge-560',
source: '0',
target: '4',
},
{
id: 'edge-34',
source: '0',
target: '5',
},
{
id: 'edge-654',
source: '0',
target: '7',
},
{
id: 'edge-317',
source: '0',
target: '8',
},
{
id: 'edge-962',
source: '0',
target: '9',
},
{
id: 'edge-746',
source: '0',
target: '10',
},
{
id: 'edge-75',
source: '0',
target: '11',
},
{
id: 'edge-80',
source: '0',
target: '13',
},
{
id: 'edge-674',
source: '0',
target: '14',
},
{
id: 'edge-795',
source: '0',
target: '15',
},
{
id: 'edge-886',
source: '0',
target: '16',
},
{
id: 'edge-630',
source: '2',
target: '3',
},
{
id: 'edge-710',
source: '4',
target: '5',
},
{
id: 'edge-284',
source: '4',
target: '6',
},
{
id: 'edge-758',
source: '5',
target: '6',
},
{
id: 'edge-288',
source: '7',
target: '13',
},
{
id: 'edge-103',
source: '8',
target: '14',
},
{
id: 'edge-873',
source: '9',
target: '10',
},
{
id: 'edge-108',
source: '10',
target: '22',
},
{
id: 'edge-214',
source: '10',
target: '14',
},
{
id: 'edge-928',
source: '10',
target: '12',
},
{
id: 'edge-717',
source: '10',
target: '24',
},
{
id: 'edge-752',
source: '10',
target: '21',
},
{
id: 'edge-424',
source: '10',
target: '20',
},
{
id: 'edge-755',
source: '11',
target: '24',
},
{
id: 'edge-822',
source: '11',
target: '22',
},
{
id: 'edge-366',
source: '11',
target: '14',
},
{
id: 'edge-411',
source: '12',
target: '13',
},
{
id: 'edge-781',
source: '16',
target: '17',
},
{
id: 'edge-742',
source: '16',
target: '18',
},
{
id: 'edge-762',
source: '16',
target: '21',
},
{
id: 'edge-519',
source: '16',
target: '22',
},
{
id: 'edge-187',
source: '17',
target: '18',
},
{
id: 'edge-919',
source: '17',
target: '20',
},
{
id: 'edge-854',
source: '18',
target: '19',
},
{
id: 'edge-199',
source: '19',
target: '20',
},
{
id: 'edge-475',
source: '19',
target: '33',
},
{
id: 'edge-55',
source: '19',
target: '22',
},
{
id: 'edge-528',
source: '19',
target: '23',
},
{
id: 'edge-741',
source: '20',
target: '21',
},
{
id: 'edge-920',
source: '21',
target: '22',
},
{
id: 'edge-457',
source: '22',
target: '24',
},
{
id: 'edge-524',
source: '22',
target: '25',
},
{
id: 'edge-814',
source: '22',
target: '26',
},
{
id: 'edge-258',
source: '22',
target: '23',
},
{
id: 'edge-222',
source: '22',
target: '28',
},
{
id: 'edge-803',
source: '22',
target: '30',
},
{
id: 'edge-693',
source: '22',
target: '31',
},
{
id: 'edge-491',
source: '22',
target: '32',
},
{
id: 'edge-46',
source: '22',
target: '33',
},
{
id: 'edge-145',
source: '23',
target: '28',
},
{
id: 'edge-45',
source: '23',
target: '27',
},
{
id: 'edge-98',
source: '23',
target: '29',
},
{
id: 'edge-993',
source: '23',
target: '30',
},
{
id: 'edge-514',
source: '23',
target: '31',
},
{
id: 'edge-361',
source: '23',
target: '33',
},
{
id: 'edge-154',
source: '32',
target: '33',
},
],
};
data.nodes.forEach((node) => (node.data.size = Math.random() * 30 + 5));
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
node: {
lodStrategy: {},
keyShape: {
r: {
fields: ['size'],
formatter: (model) => model.data.size / 2,
},
},
labelShape: {
text: {
fields: ['id'],
formatter: (node) => node.id,
},
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
},
],
},
},
layout: {
type: 'force',
linkDistance: 50,
maxSpeed: 60,
animated: true,
clustering: true,
nodeClusterBy: 'cluster',
clusterNodeStrength: 200,
},
theme: {
type: 'spec',
specification: {
node: {
dataTypeField: 'cluster',
},
edge: {
dataTypeField: 'cluster',
},
},
},
autoFit: 'view',
modes: {
default: ['zoom-canvas', 'drag-canvas', 'click-select'],
},
data,
});
/******** 拖拽固定节点的逻辑 *********/
graph.on('node:dragstart', function (e) {
graph.stopLayout();
});
graph.on('node:drag', function (e) {
refreshDragedNodePosition(e);
});
graph.on('node:dragend', (e) => {
graph.layout();
});
function refreshDragedNodePosition(e) {
const { x, y } = e.canvas;
graph.updateData('node', {
id: e.itemId,
data: {
fx: x,
fy: y,
x,
y,
},
});
}
/*********************************/
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.setSize([container.scrollWidth, container.scrollHeight]);
};

2
packages/site/examples/net/forceDirected/demo/forceDirectedConfigurationTranslate.js
View File

@ -523,7 +523,7 @@ const graph = new G6.Graph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
layout: {
type: 'force',

2
packages/site/examples/net/forceDirected/demo/forceDirectedFunctionalParams.js
View File

@ -20,7 +20,7 @@ const graph = new G6.Graph({
},
},
modes: {
default: ['drag-canvas'],
default: ['zoom-canvas', 'drag-canvas', 'click-select'],
},
data: {
nodes: [

14
packages/site/examples/net/forceDirected/demo/meta.json
View File

@ -5,12 +5,12 @@
},
"demos": [
{
"filename": "basicForce2.js",
"filename": "basicForce.js",
"title": {
"zh": "Force2 聚类及固定拖拽节点",
"en": "Basic Force2 Layout with dragging"
"zh": "Force 聚类及固定拖拽节点",
"en": "Clustering Force Layout with dragging"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ce2WSIlo_fcAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sA14SZo9BBMAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "basicFA2.js",
@ -18,7 +18,7 @@
"zh": "基本 Force Atlas 2",
"en": "Basic Force-Atlas 2 Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqwAQZLIVPwAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-HgiS6CyuuEAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "forceDirectedFunctionalParams.js",
@ -26,7 +26,7 @@
"zh": "定制不同节点的参数",
"en": "Different Configurations for Nodes"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*SnVUQbXv7JAAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xQRmQ7pTvZMAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "forceDirectedConfigurationTranslate.js",
@ -34,7 +34,7 @@
"zh": "力导向布局参数动态变化",
"en": "Update Configurations for Force-directed Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IyK7T5MkVqUAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2HKeQqGwjQoAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/furchtermanLayout/demo/basicFruchterman.js
View File

@ -465,10 +465,12 @@ const graph = new ExtGraph({
update: [
{
fields: ['opacity'],
states: ['selected', 'active'],
shapeId: 'haloShape',
},
{
fields: ['lineWidth'],
states: ['selected', 'active'],
shapeId: 'keyShape',
},
],

16
packages/site/examples/net/furchtermanLayout/demo/fruchtermanFix.js
View File

@ -30,10 +30,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
update: [
{
fields: ['opacity'],
states: ['selected', 'active'],
shapeId: 'haloShape',
},
{
fields: ['lineWidth'],
states: ['selected', 'active'],
shapeId: 'keyShape',
},
],
@ -41,23 +43,11 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
},
layout: {
type: 'fruchterman',
speed: 20,
speed: 50,
gravity: 1,
animated: true,
maxIteration: 500,
},
theme: {
type: 'spec',
specification: {
node: {
dataTypeField: 'cluster',
},
edge: {
dataTypeField: 'cluster',
},
},
},
autoFit: 'view',
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},

2
packages/site/examples/net/furchtermanLayout/demo/fruchtermanWebWorker.js
View File

@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4
height,
transforms: ['transform-v4-data'],
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
layout: {
type: 'fruchterman',

6
packages/site/examples/net/furchtermanLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "基本 Fruchterman 布局",
"en": "Basic Fruchterman Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1KY7SLEXxqMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-s9CTphuwgcAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "fruchtermanWebWorker.js",
@ -18,7 +18,7 @@
"zh": "Fruchterman 使用 Web-worker",
"en": "Fruchterman with Web-worker"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0sl9RZ7Cp28AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3gn9TZ3oUoIAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "fruchtermanFix.js",
@ -26,7 +26,7 @@
"zh": "Fruchterman 固定被拖拽的节点",
"en": "Fruchterman with Fixing Dragged Nodes"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*fQNPRKHPJRMAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sbvuTbp3L6sAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/gpuLayout/demo/basicFruchterman.js
View File

@ -562,7 +562,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
theme: {
type: 'spec',

2
packages/site/examples/net/gpuLayout/demo/basicGForce.js
View File

@ -565,7 +565,7 @@ const graph = new CustomGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
edge: {
keyShape: {

2
packages/site/examples/net/gpuLayout/demo/fruchtermanComplexData.js
View File

@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4
height,
transforms: ['transform-v4-data'],
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
node: {
keyShape: {

2
packages/site/examples/net/gpuLayout/demo/gForceComplexData.js
View File

@ -25,7 +25,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4
height,
transforms: ['transform-v4-data'],
modes: {
default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
edge: {
keyShape: {

4
packages/site/examples/net/gpuLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "GPU Fruchterman 小数据",
"en": "GPU Fruchterman Small Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1KY7SLEXxqMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SmXBQ6fv8PoAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "fruchtermanComplexData.js",
@ -18,7 +18,7 @@
"zh": "GPU Fruchterman 复杂数据",
"en": "GPU Fruchterman with Complex Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0sl9RZ7Cp28AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MOhtRqDDV6oAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

10
packages/site/examples/net/gridLayout/demo/grid.js
View File

@ -1,4 +1,10 @@
import G6 from '@antv/g6';
import { Graph, Extensions, extend } from '@antv/g6';
const ExtGraph = extend(Graph, {
behaviors: {
'brush-select': Extensions.BrushSelect,
},
});
const data = {
nodes: [
@ -608,7 +614,7 @@ const data = {
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
const graph = new ExtGraph({
container: 'container',
width,
height,

2
packages/site/examples/net/gridLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "Grid 网格布局",
"en": "Grid Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Oh6mRLVEBBIAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8RYVTrENVCcAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

6
packages/site/examples/net/indented/demo/graphWithIntended.js
View File

@ -27,12 +27,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
data: {
...model.data,
lodStrategy: {},
labelShape: {
text: model.id,
position: 'center',
maxWidth: '120%',
},
labelBackgroundShape: {},
anchorPoints:
model.data.layoutDirection === 'TB'
? [

6
packages/site/examples/net/indented/demo/intendAlignTop.js
View File

@ -122,12 +122,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

2
packages/site/examples/net/indented/demo/meta.json
View File

@ -34,7 +34,7 @@
"zh": "图数据使用缩进树",
"en": "Indented Layout with Graph Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ffD6S74MXw4AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*AvvxR51CtbMAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/layoutMechanism/demo/layoutTiming.js
View File

@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4
workerEnabled: true,
},
modes: {
default: ['drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
node: {
keyShape: {

10
packages/site/examples/net/layoutMechanism/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "布局切换",
"en": "Layout Translate"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eZRNQ4tpkecAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aGiCRrsJeCUAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "subgraphLayout.js",
@ -18,7 +18,7 @@
"zh": "子图布局",
"en": "Subgraph Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*dsOISrH6tREAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RDoPRohHU_gAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "dataChange.js",
@ -26,7 +26,7 @@
"zh": "数据动态切换",
"en": "Change Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VIXvQagCETkAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Cq8SRL2NZtYAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "customBigraph.js",
@ -34,7 +34,7 @@
"zh": "自定义二分图布局",
"en": "Custom Bigraph Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Vod0Q6u5dSoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*G4-YT4NDA2oAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "layoutTiming.js",
@ -42,7 +42,7 @@
"zh": "布局时机监听",
"en": "Layout Listener"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*tdRuSbgJAZ8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MOhtRqDDV6oAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/layoutMechanism/demo/sublayoutPipes.js
View File

@ -109,7 +109,7 @@ const graph = new G6.Graph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
plugins: [legend],
animate: true,

2
packages/site/examples/net/mdsLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "基本 MDS 布局",
"en": "Basic MDS Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*aUS7TJR2NHcAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*myM6T6R_d34AAAAAAAAAAAAADmJ7AQ/original"
}
]
}

6
packages/site/examples/net/mindmap/demo/graphWithMindmap.js
View File

@ -57,12 +57,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

8
packages/site/examples/net/mindmap/demo/hMindmap.js
View File

@ -20,7 +20,7 @@ const layoutConfigs = {
return 10;
},
getHGap: () => {
return 50;
return 100;
},
getSide: undefined,
},
@ -76,12 +76,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
width,
height,
transforms: ['transform-v4-data'],
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 32,
workerEnabled: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
},

4
packages/site/examples/net/mindmap/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "脑图树-子节点自动两侧分布",
"en": "Two Side Mindmap Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wRZjTL3fCbEAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*noXTS5TOPdwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "graphWithMindmap.js",
@ -18,7 +18,7 @@
"zh": "图数据使用脑图树",
"en": "Mindmap Layout with Graph Data"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ffD6S74MXw4AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VzdkSbUVWfoAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/radialLayout/demo/basicRadial.js
View File

@ -525,7 +525,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
layout: {
type: 'radial',

2
packages/site/examples/net/radialLayout/demo/interactRadial.js
View File

@ -897,7 +897,7 @@ const graph = new ExtGraph({
},
animate: true,
modes: {
default: ['drag-node', 'click-select', 'drag-canvas'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
data,
});

10
packages/site/examples/net/radialLayout/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "基本 Radial 辐射布局",
"en": "Basic Radial Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ec_WQ5hqVsgAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DQBoTocVv_EAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "preventOverlapRadial.js",
@ -18,7 +18,7 @@
"zh": "防止节点重叠的严格辐射布局",
"en": "Prevent Node Overlappings and Restrict Radial"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GAFjRJeAoAsAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wed9QJCrM9cAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "preventOverlapUnstrictRadial.js",
@ -26,7 +26,7 @@
"zh": "防止节点重叠的非严格辐射布局",
"en": "Prevent Node Overlappings and Unrestrict Radial"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*X8rzTZyWwUcAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fonYTKm_WHEAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "radialConfigurationTranslate.js",
@ -34,7 +34,7 @@
"zh": "Radial 布局参数动态变化",
"en": "Update Configurations for Radial"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ikctQb9KECAAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gbAITpEBjsIAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "sortRadial.js",
@ -42,7 +42,7 @@
"zh": "同层节点按照指定字段聚类",
"en": "Order the Level Nodes"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gzfTQKBB62IAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7DfvS4QOjycAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/net/radialLayout/demo/preventOverlapRadial.js
View File

@ -525,7 +525,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
layout: {
type: 'radial',

2
packages/site/examples/net/radialLayout/demo/preventOverlapUnstrictRadial.js
View File

@ -525,7 +525,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
layout: {
type: 'radial',

2
packages/site/examples/net/radialLayout/demo/radialConfigurationTranslate.js
View File

@ -530,7 +530,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'],
},
layout: {
type: 'radial',

2
packages/site/examples/net/radialLayout/demo/sortRadial.js
View File

@ -559,7 +559,7 @@ const graph = new ExtGraph({
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
layout: {
type: 'radial',

2
packages/site/examples/net/radialtree/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "辐射树",
"en": "Radial Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mS3_Rb4VuPoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2eo2TaGyLZoAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

30
packages/site/examples/performance/perf/demo/meta.json
View File

@ -4,29 +4,21 @@
"en": "Category"
},
"demos": [
{
"filename": "netscience.ts",
"title": {
"zh": "5000+ 图元使用 Canvas 渲染",
"en": "5000+ Graphic Shapes Rendered by Canvas"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q6eRT7RNwBYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "netscienceWebGL.ts",
"title": {
"zh": "5000+ 图元使用 WebGL 渲染",
"en": "5000+ Graphic Shapes Rendered by WebGL"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q6eRT7RNwBYAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0amkSqk3JnkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "eva.ts",
"filename": "netscience.ts",
"title": {
"zh": "~20000 图元使用 Canvas 渲染",
"en": "~20000 Graphic Shapes Rendered by Canvas"
"zh": "5000+ 图元使用 Canvas 渲染",
"en": "5000+ Graphic Shapes Rendered by Canvas"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mysRTLxipwMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0amkSqk3JnkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "evaWebGL.ts",
@ -34,7 +26,15 @@
"zh": "~20000 图元使用 WebGL 渲染",
"en": "~20000 Graphic Shapes Rendered by WebGL"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mysRTLxipwMAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sZz4QqcPxTkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "eva.ts",
"title": {
"zh": "~20000 图元使用 Canvas 渲染",
"en": "~20000 Graphic Shapes Rendered by Canvas"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sZz4QqcPxTkAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "moreDataWebGL.js",
@ -42,7 +42,7 @@
"zh": "50000+ 图元使用 WebGL 渲染",
"en": "50000+ Graphic Shapes Rendered by WebGL"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6U-cSrdpBjYAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Pz31S5UcA8AAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

2
packages/site/examples/tool/contextMenu/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "上下文菜单",
"en": "Context Menu"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*YtBHR5akE2gAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vY6TS7FGvngAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

4
packages/site/examples/tool/minimap/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "小地图导航",
"en": "Minimap"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*r3dAQo-R3BoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9SBGT5nadhoAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "minimap-api.ts",
@ -18,7 +18,7 @@
"zh": "通过 API 控制 Minimap",
"en": "Minimap API"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*r3dAQo-R3BoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9SBGT5nadhoAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

6
packages/site/examples/tool/overview/demo/meta.json
View File

@ -7,10 +7,10 @@
{
"filename": "default.ts",
"title": {
"zh": "画布网格",
"en": "Grid"
"zh": "总览",
"en": "Overview"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*r3dAQo-R3BoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JtOPS4unj58AAAAAAAAAAAAADmJ7AQ/original"
}
]
}

4
packages/site/examples/tool/toolbar/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "工具栏",
"en": "ToolBar"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MhpmS68lZW0AAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e5BYT75a3rgAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "self-toolbar.ts",
@ -18,7 +18,7 @@
"zh": "自定义工具栏",
"en": "ToolBar"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ljOiTJAuQnIAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dD5gR7D8TbAAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

4
packages/site/examples/tool/tooltip/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "提示框插件",
"en": "Tooltip Plugin"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kjsSQ5pgVmoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ErhbR7ErhRwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "tooltipClick.ts",
@ -18,7 +18,7 @@
"zh": "点击出现提示框",
"en": "Tooltip Plugin with Click Trigger"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kjsSQ5pgVmoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ErhbR7ErhRwAAAAAAAAAAAAADmJ7AQ/original"
}
]
}