test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: update the docs for dom listner.

Browse Source
This commit is contained in:
Yanyan-Wang 2020-04-14 16:54:18 +08:00 committed by Yanyan Wang
parent 7d6c4d024e
commit 0a24ed36d7
5 changed files with 95 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/manual/advanced/custom-node.en.md
View File

@ -533,7 +533,7 @@ G6.registerNode('dom-node', {
height: cfg.size[1],
// DOM's html with onclick event
html: `
<div onclick="handleClick('Hello')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div onclick="alert('Hi')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
<img alt="" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />
</div>
@ -545,7 +545,4 @@ G6.registerNode('dom-node', {
});
},
}, 'single-node');
const handleClick = msg => {
// ...
}
```

5
docs/manual/advanced/custom-node.zh.md
View File

@ -529,7 +529,7 @@ G6.registerNode('dom-node', {
height: cfg.size[1],
// 传入 DOM 的 html，带有原生 onclick 事件
html: `
<div onclick="handleClick('Hello')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div onclick="alert('Hi')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
<img alt="" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />
</div>
@ -541,7 +541,4 @@ G6.registerNode('dom-node', {
});
},
}, 'single-node');
const handleClick = msg => {
// ...
}
```

2
examples/shape/customNode/demo/svgDom.js
View File

@ -17,7 +17,7 @@ G6.registerNode('dom-node', {
width: cfg.size[0],
height: cfg.size[1],
html: `
<div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div onclick="alert('Hi')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
<img alt="" style="line-height: 100%; margin-left: 7px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />
</div>

87
stories/Issues/component/dom-click.tsx Normal file
View File

@ -0,0 +1,87 @@
import React, { useEffect } from 'react';
import G6 from '../../../src';
import { IGraph } from '../../../src/interface/graph';
let graph: IGraph = null;
function handleClick(msg) {
alert('aaa')
}
const DomClick = () => {
G6.registerNode('dom-node', {
draw: (cfg, group) => {
return group.addShape('dom', {
attrs: {
width: cfg.size[0],
height: cfg.size[1],
// 传入 DOM 的 html，带有原生 onclick 事件
html: `
<div onclick="console.log('a');alert('a');" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
<img alt="" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />
</div>
<span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
</div>
`
},
draggable: true
});
},
}, 'single-node');
const data = {
nodes: [
{
id: 'node1',
x: 100,
y: 200,
label: '首页监控',
},
{
id: 'node2',
x: 300,
y: 200,
label: '子页面',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
const container = React.useRef();
useEffect(() => {
if (!graph) {
graph = new G6.Graph({
container: container.current as string | HTMLElement,
width: 500,
height: 600,
renderer: 'svg',
defaultNode: {
type: 'dom-node',
size: [120, 40]
},
defaultEdge: {
type: 'polyline',
style: {
radius: 20,
offset: 45,
endArrow: true,
lineWidth: 2,
stroke: '#C2C8D5',
},
},
});
graph.data(data);
graph.render();
}
});
return <div ref={container}></div>;
};
export default DomClick;

5
stories/Issues/issues.stories.tsx
View File

@ -4,6 +4,7 @@ import DragCanvas from './component/drag-canvas';
import DagreArrow from './component/dagre-arrow';
import ChageData from './changeData'
import ChangeAttr from './attrs'
import DomClick from './component/dom-click'
export default { title: 'Issues' };
@ -20,3 +21,7 @@ storiesOf('Issues', module)
.add('change attr', () => (
<ChangeAttr />
))
.add('dom click', () => (
<DomClick />
))