Skip to content

S
szse
Commit 5b5dc228 by Your Name
Options

finetune background image

parent f63e025b
Showing with 111 additions and 90 deletions
src/view/Manage/Map/Component/Relation.jsx
...@@ -19,6 +19,8 @@ const colors = [ ...@@ -19,6 +19,8 @@ const colors = [
'#FFD6E7', '#FFD6E7',
]; ];
const highlight = '#ff7800'
class Relation extends React.Component { class Relation extends React.Component {
...@@ -49,12 +51,8 @@ class Relation extends React.Component { ...@@ -49,12 +51,8 @@ class Relation extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
<div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}> <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', }}>
</div> </div>
<div id="left-control-container"></div>
<div id="right-control-container"></div>
<div id="bottom-bg-container"></div>
</React.Fragment> </React.Fragment>
); );
...@@ -158,6 +156,16 @@ const init = (ctx) => function (container, data) { ...@@ -158,6 +156,16 @@ const init = (ctx) => function (container, data) {
}); });
}); });
graph.on('edge:mouseenter', (evt) => {
const { item } = evt;
graph.setItemState(item, 'active', true);
});
graph.on('edge:mouseleave', (evt) => {
const { item } = evt;
graph.setItemState(item, 'active', false);
});
// click node to show the detail drawer // click node to show the detail drawer
graph.on('node:click', (evt) => { graph.on('node:click', (evt) => {
const focusNodes = graph.findAllByState('node', 'focus'); const focusNodes = graph.findAllByState('node', 'focus');
...@@ -210,7 +218,7 @@ G6.registerNode( ...@@ -210,7 +218,7 @@ G6.registerNode(
let r = 10, width1 = 0, width2 = 0, lineWidth = 0 let r = 10, width1 = 0, width2 = 0, lineWidth = 0
if (depthCount[cfg.depth] > 10) { if (depthCount[cfg.depth] > 10) {
r = 7 r = 6
} }
width1 = r * 2.5 width1 = r * 2.5
width2 = r * 4 width2 = r * 4
...@@ -255,7 +263,7 @@ G6.registerNode( ...@@ -255,7 +263,7 @@ G6.registerNode(
y: 0, y: 0,
r, r,
fill: colors[cfg.depth % colors.length], fill: colors[cfg.depth % colors.length],
stroke: '#ff7800', stroke: highlight,
lineWidth, lineWidth,
cursor: 'pointer', cursor: 'pointer',
}, },
...@@ -294,14 +302,13 @@ G6.registerNode( ...@@ -294,14 +302,13 @@ G6.registerNode(
}); });
} }
const bbox = keyShape.getBBox() const bbox = keyShape.getBBox()
// console.debug(bbox)
if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') { if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
if (!cfg.children) { if (!cfg.children) {
group.addShape('marker', { const marker = group.addShape('marker', {
attrs: { attrs: {
x: bbox.maxX + 3, x: 0,
y: -1, y: 0,
r: 3, r: 3,
symbol: EXPAND_ICON, symbol: EXPAND_ICON,
stroke: '#73d13d', stroke: '#73d13d',
...@@ -310,6 +317,9 @@ G6.registerNode( ...@@ -310,6 +317,9 @@ G6.registerNode(
}, },
name: 'add-item', name: 'add-item',
}); });
const mbbox = marker.getBBox()
// console.debug(bbox, mbbox)
marker.moveTo(bbox.maxX + mbbox.width/2, bbox.minY + mbbox.height)
} }
// else if (cfg?.children?.length > 10) { // else if (cfg?.children?.length > 10) {
// group.addShape('marker', { // group.addShape('marker', {
...@@ -466,43 +476,51 @@ G6.registerEdge( ...@@ -466,43 +476,51 @@ G6.registerEdge(
return group; return group;
}, },
afterDraw: (cfg, group) => { // afterDraw: (cfg, group) => {
}, // },
setState: (name, value, item) => { setState: (name, value, item) => {
if (name === 'focus') { if (name === 'active') {
const keyShape = item.get('keyShape'); const keyShape = item.get('keyShape').get('children')[0];
if (value) { if (value) {
if (keyShape.cfg.animating) { keyShape.attr('stroke', highlight);
return
}
// const length = keyShape.getTotalLength();
// To fix stopAnimate not immediately bug
window.setTimeout(() => {
keyShape.animate(
(ratio) => {
// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
// const startLen = ratio * length;
// Calculate the lineDash
const cfg = {
// lineDash: [startLen, length - startLen],
lineDash,
lineDashOffset: - Math.floor(ratio * 10),
};
return cfg;
},
{
repeat: true, // Whether executes the animation repeatly
duration: 1000, // the duration for executing once
},
);
}, 100)
} else { } else {
keyShape.stopAnimate(); keyShape.attr('stroke', '#aaa');
keyShape.attr('lineDash', null)
} }
} }
// if (name === 'focus') {
// const keyShape = item.get('keyShape');
// if (value) {
// if (keyShape.cfg.animating) {
// return
// }
// // const length = keyShape.getTotalLength();
// // To fix stopAnimate not immediately bug
// window.setTimeout(() => {
// keyShape.animate(
// (ratio) => {
// // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
// // const startLen = ratio * length;
// // Calculate the lineDash
// const cfg = {
// // lineDash: [startLen, length - startLen],
// lineDash,
// lineDashOffset: - Math.floor(ratio * 10),
// };
// return cfg;
// },
// {
// repeat: true, // Whether executes the animation repeatly
// duration: 1000, // the duration for executing once
// },
// );
// }, 100)
// } else {
// keyShape.stopAnimate();
// keyShape.attr('lineDash', null)
// }
// }
} }
}, },
// 'single-edge', // 'single-edge',
......
src/view/Manage/Map/index.jsx
...@@ -30,8 +30,8 @@ const graphModes = [ ...@@ -30,8 +30,8 @@ const graphModes = [
class Map extends React.Component { class Map extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
type: 'square', type: 'square',
tabKey: '', tabKey: '',
loadingTopics: false, loadingTopics: false,
topics: null topics: null
...@@ -46,9 +46,9 @@ class Map extends React.Component { ...@@ -46,9 +46,9 @@ class Map extends React.Component {
payload: null, payload: null,
callback: data => { callback: data => {
this.setState({ this.setState({
loadingTopics: false, loadingTopics: false,
topics: data||[], topics: data || [],
tabKey: (data||[]).length>0?data[0].id:'', tabKey: (data || []).length > 0 ? data[0].id : '',
}); });
}, },
error: () => { error: () => {
...@@ -68,51 +68,53 @@ class Map extends React.Component { ...@@ -68,51 +68,53 @@ class Map extends React.Component {
render() { render() {
const { type, tabKey, topics, loadingTopics } = this.state; const { type, tabKey, topics, loadingTopics } = this.state;
const switchMode = <div className=''>
<Radio.Group
value={type}
onChange={this.onTypeChange} size="small"
>
{
graphModes && graphModes.map((mode, index) => {
return (
<Tooltip key={index} title={mode.title || ''} >
<Radio.Button value={mode.key}>{(mode.title || '').substring(0, 1)}</Radio.Button>
</Tooltip>
);
})
}
</Radio.Group>
</div>
return ( return (
<div className='asset-map' style={{ backgroundColor: '#fff' }}> <div className='asset-map' style={{ backgroundColor: '#fff' }}>
{
loadingTopics ? <Spin /> : <>
{ {
topics && topics.length>0 && <Tabs loadingTopics ? <Spin /> : <>
activeKey={tabKey} {
size='large' topics && topics.length > 0 && <Tabs
centered activeKey={tabKey}
onChange={this.onTabChange} size='large'
> centered
{ onChange={this.onTabChange}
topics && topics.map((topic) => { >
return ( {
<TabPane tab={topic.name||''} key={topic.id||''}> topics && topics.map((topic) => {
<div className='d-flex px-3' style={{ height: 53, alignItems: 'center' }}> return (
<Radio.Group <TabPane tab={topic.name || ''} key={topic.id || ''}>
value={type} {
onChange={this.onTypeChange} tabKey === topic.id && <div className='map-container' >
style={{ marginLeft: 'auto' }} <MapContent type={type} topic={topic} switchMode={switchMode} {...this.props} />
> </div>
{ }
graphModes && graphModes.map((mode, index) => { </TabPane>
return ( );
<Tooltip key={index} title={mode.title||''} > })
<Radio.Button value={mode.key}>{(mode.title||'').substring(0, 1)}</Radio.Button> }
</Tooltip> </Tabs>
); }
}) </>
}
</Radio.Group>
</div>
{
tabKey===topic.id && <div className='map-container' style={{ padding: '0 10px' }}>
<MapContent type={type} topic={topic} {...this.props} />
</div>
}
</TabPane>
);
})
}
</Tabs>
} }
</>
}
</div> </div>
); );
} }
......
src/view/Manage/Map/index.less
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
} }
.map-container { .map-container {
height: calc(100vh - 64px - 30px - 57px - 53px) !important; height: calc(100vh - 64px - 30px - 57px/* - 53px */) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment