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

fix(behaviors): create-edge demo update (#5624)

Browse Source 
Co-authored-by: wb-xcf804241 <wb-xcf804241@alibaba-inc.com>
This commit is contained in:
Frank William 2024-04-07 17:12:27 +08:00 committed by GitHub
parent e968ba6359
commit 944ccda096
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 52 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/site/examples/interaction/createEdge/demo/createCustomEdge.js → packages/site/examples/interaction/createEdge/demo/createCustomEdge.ts
View File

@ -1,14 +1,7 @@
import { Graph } from '@antv/g6';
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new Graph({
container: 'container',
width,
height,
layout: {
type: 'grid',
},
@ -19,14 +12,6 @@ const graph = new Graph({
disableLod: true,
},
],
node: {
labelShape: {
text: {
fields: ['id'],
formatter: (model) => model.id,
},
},
},
data: {
nodes: [
{ id: 'node1', data: {} },
@ -70,5 +55,3 @@ const graph = new Graph({
});
graph.render();
window.graph = graph;

17
packages/site/examples/interaction/createEdge/demo/createEdgeByClicking.js → packages/site/examples/interaction/createEdge/demo/createEdgeByClicking.ts
View File

@ -1,14 +1,7 @@
import { Graph } from '@antv/g6';
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new Graph({
container: 'container',
width,
height,
layout: {
type: 'grid',
},
@ -19,14 +12,6 @@ const graph = new Graph({
disableLod: true,
},
],
node: {
labelShape: {
text: {
fields: ['id'],
formatter: (model) => model.id,
},
},
},
data: {
nodes: [
{ id: 'node1', data: {} },
@ -62,5 +47,3 @@ const graph = new Graph({
});
graph.render();
window.graph = graph;

20
packages/site/examples/interaction/createEdge/demo/createEdgeByDragging.js → packages/site/examples/interaction/createEdge/demo/createEdgeByDragging.ts
View File

@ -1,14 +1,7 @@
import { Graph } from '@antv/g6';
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new Graph({
container: 'container',
width,
height,
layout: {
type: 'grid',
},
@ -19,14 +12,6 @@ const graph = new Graph({
disableLod: true,
},
],
node: {
labelShape: {
text: {
fields: ['id'],
formatter: (model) => model.id,
},
},
},
data: {
nodes: [
{ id: 'node1', data: {} },
@ -54,14 +39,11 @@ const graph = new Graph({
type: 'create-edge',
trigger: 'drag',
style: {
color: '#fff',
color: 'red',
lineWidth: 2,
lineDash: [2, 3],
},
},
],
});
graph.render();
window.graph = graph;

49
packages/site/examples/interaction/createEdge/demo/createEdgeCombo.js
View File

@ -1,49 +0,0 @@
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
{ id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
{ id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
],
edges: [],
combos: [
{
id: 'combo1',
},
{
id: 'combo2',
style: {
// 指向中心
ports: [{ key: 'port-1', placement: [0.5, 0.5] }],
},
},
],
};
const graph = new Graph({
container: 'container',
node: {
style: {
labelText: (d) => d.id,
},
},
combo: {
style: {
type: 'circle', // 👈🏻 Combo shape type.
},
},
data,
behaviors: [
{
type: 'create-edge',
trigger: 'drag',
style: {
lineWidth: 2,
lineDash: [2, 3],
},
},
],
});
graph.render();

47
packages/site/examples/interaction/createEdge/demo/createEdgeCombo.ts Normal file
View File

@ -0,0 +1,47 @@
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
node: {
style: {
labelText: (d) => d.id,
},
},
combo: {
style: {
type: 'circle', // 👈🏻 Combo shape type.
},
},
data: {
nodes: [
{ id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
{ id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
{ id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
],
edges: [],
combos: [
{
id: 'combo1',
},
{
id: 'combo2',
style: {
// 指向中心
ports: [{ key: 'port-1', placement: [0.5, 0.5] }],
},
},
],
},
behaviors: [
{
type: 'create-edge',
trigger: 'drag',
style: {
lineWidth: 2,
lineDash: [2, 3],
},
},
],
});
graph.render();

8
packages/site/examples/interaction/createEdge/demo/meta.json
View File

@ -5,7 +5,7 @@
},
"demos": [
{
"filename": "createEdgeByDragging.js",
"filename": "createEdgeByDragging.ts",
"title": {
"zh": "从节点拖拽创建边",
"en": "Create Edge by Dragging"
@ -13,7 +13,7 @@
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DW16QJNmRm8AAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "createEdgeByClicking.js",
"filename": "createEdgeByClicking.ts",
"title": {
"zh": "点击节点创建边",
"en": "Create Edge by Clicking"
@ -21,7 +21,7 @@
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DW16QJNmRm8AAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "createEdgeCombo.js",
"filename": "createEdgeCombo.ts",
"title": {
"zh": "点击 Combo 创建边",
"en": "Create Edge by Clicking Combo"
@ -29,7 +29,7 @@
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Uwn-RZXSXLQAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "createCustomEdge.js",
"filename": "createCustomEdge.ts",
"title": {
"zh": "点击自定义创建边",
"en": "Create custom Edge by Clicking"