Skip to content

S
szse
Commit 695f0762 by zhaochengxiang
Options

优化地图样式

parent 385aee2a
Showing with 268 additions and 269 deletions
src/view/Manage/Map/Component/Org.jsx
...@@ -29,123 +29,45 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) { ...@@ -29,123 +29,45 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
class Org extends React.Component { class Org extends React.Component {
componentDidMount() { componentDidUpdate(prevProps, prevState) {
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props; const { childData, parentNodeId } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
G6.registerNode(
'org-node',
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
},
});
const text = group.addShape('text', { if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
attrs: { const parentData = this.graph?.findDataById(parentNodeId);
x: 0, if (!parentData.children) {
y: 0, parentData.children = [];
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: (cfg.label||''),
cursor: (cfg.dbType==='Dir')?'pointer':'default',
} }
});
const bbox = text.getBBox(); parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
if (cfg.dbType==='Dir') { this.graph?.updateItem(graph.findById(parentNodeId), {
if (!cfg.children) { collapsed: false,
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer',
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
}
}); });
} else if (this.props.data && parentNodeId===null) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data);
} }
} }
rect.attr({ graph = undefined
x: bbox.minX - 10, elem = undefined
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group; render() {
}, const { styles } = this.props;
update: undefined, return (
}, <div ref={ref => this.elem = ref} style={styles} />
'rect',
); );
G6.registerEdge(
'flow-line',
{
getPath(points) {
const startPoint = points[0];
const endPoint = points[1];
return [
['M', startPoint.x, startPoint.y],
['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, endPoint.y],
];
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [startPoint]; // the start point
// the control points
if (controlPoints) {
points = points.concat(controlPoints);
} }
// the end point }
points.push(endPoint);
const path = this.getPath(points); export default Org;
const style = Object.assign(
{}, const init = (ctx) => function (container, data) {
G6.Global.defaultEdge.style, const width = container.scrollWidth;
{ const height = container.scrollHeight;
path,
},
cfg.style,
);
return style;
},
},
'line'
);
const tooltip = new G6.Tooltip({ const tooltip = new G6.Tooltip({
offsetX: 10, offsetX: 10,
...@@ -167,7 +89,7 @@ class Org extends React.Component { ...@@ -167,7 +89,7 @@ class Org extends React.Component {
}); });
graph = new G6.TreeGraph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container,
width, width,
height, height,
linkCenter: true, linkCenter: true,
...@@ -248,7 +170,9 @@ class Org extends React.Component { ...@@ -248,7 +170,9 @@ class Org extends React.Component {
}; };
}); });
this.layoutGraph(); graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
...@@ -259,17 +183,17 @@ class Org extends React.Component { ...@@ -259,17 +183,17 @@ class Org extends React.Component {
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadSubLeafData) { if (!children ) {
loadSubLeafData(model.dirId||'', nodeId); ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
} }
} else if (model.dbType === 'Table') { } else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid); ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') { } else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index); ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
} }
...@@ -283,47 +207,115 @@ class Org extends React.Component { ...@@ -283,47 +207,115 @@ class Org extends React.Component {
graph.changeSize(container.scrollWidth, container.scrollHeight); graph.changeSize(container.scrollWidth, container.scrollHeight);
}; };
} }
}
layoutGraph = () => {
const { data } = this.props;
if(graph && data){ return graph;
graph.data(data); }
graph.render();
graph.fitView();
}
}
componentDidUpdate(prevProps, prevState) { G6.registerNode(
const { childData, parentNodeId, data } = this.props; 'org-node',
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
});
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) { const text = group.addShape('text', {
const parentData = graph.findDataById(parentNodeId); attrs: {
if (!parentData.children) { x: 0,
parentData.children = []; y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: (cfg.label||''),
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
} }
});
parentData.children = parentData.children.filter(item => item.dbType!=='More'); const bbox = text.getBBox();
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
graph.updateItem(graph.findById(parentNodeId), { if (cfg.dbType==='Dir') {
collapsed: false, if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer',
}
}); });
} else if ((cfg.children||[]).length>0) {
} else if (data !== prevProps.data) { group.addShape('marker', {
this.layoutGraph(); attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
} }
});
} }
render() {
const { type } = this.props;
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }} ></div>
);
} }
}
export default Org; rect.attr({
\ No newline at end of file x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group;
},
update: undefined,
},
'rect',
);
G6.registerEdge(
'flow-line',
{
getPath(points) {
const startPoint = points[0];
const endPoint = points[1];
return [
['M', startPoint.x, startPoint.y],
['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, endPoint.y],
];
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [startPoint]; // the start point
// the control points
if (controlPoints) {
points = points.concat(controlPoints);
}
// the end point
points.push(endPoint);
const path = this.getPath(points);
const style = Object.assign(
{},
G6.Global.defaultEdge.style,
{
path,
},
cfg.style,
);
return style;
},
},
'line'
);
\ No newline at end of file
src/view/Manage/Map/Component/Relation.jsx
...@@ -52,9 +52,11 @@ class Relation extends React.Component { ...@@ -52,9 +52,11 @@ class Relation extends React.Component {
render() { render() {
const { styles } = this.props;
return ( return (
<React.Fragment> <React.Fragment>
<div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', }}> <div ref={ref => this.elem = ref} style={styles}>
</div> </div>
</React.Fragment> </React.Fragment>
...@@ -267,7 +269,7 @@ G6.registerNode( ...@@ -267,7 +269,7 @@ G6.registerNode(
fill: colors[cfg.depth % colors.length], fill: colors[cfg.depth % colors.length],
stroke: highlight, stroke: highlight,
lineWidth, lineWidth,
cursor: (cfg.dbType==='Dir')?'pointer':'default', cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
}, },
name: 'aggregated-node-keyShape', name: 'aggregated-node-keyShape',
}); });
......
src/view/Manage/Map/Component/Tree.jsx
...@@ -28,86 +28,45 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) { ...@@ -28,86 +28,45 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
class Tree extends React.Component { class Tree extends React.Component {
componentDidMount() { componentDidUpdate(prevProps, prevState){
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props; const { childData, parentNodeId } = this.props;
const container = document.getElementById(`container${type||''}`); if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
if (!container) return; const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
const width = container.scrollWidth; parentData.children = parentData.children.filter(item => item.dbType!=='More');
const height = container.scrollHeight || 500; parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
G6.registerNode( this.graph?.updateItem(graph.findById(parentNodeId), {
'tree-node', collapsed: false,
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
},
}); });
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n'); } else if (this.props.data && parentNodeId===null) {
this.graph?.destroy();
const text = group.addShape('text', { this.graph = init(this)(this.elem, this.props.data);
attrs: { }
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: content,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
} }
});
const bbox = text.getBBox(); graph = undefined
elem = undefined
if (cfg.dbType==='Dir') { render() {
if (!cfg.children) { const { styles } = this.props;
group.addShape('marker', { return (
attrs: { <div ref={ref => this.elem = ref} style={styles} />
x: bbox.maxX + 12, );
y: bbox.height/2 -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer'
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
}
});
}
} }
}
rect.attr({ export default Tree;
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group; const init = (ctx) => function (container, data) {
}, const width = container.scrollWidth;
update: undefined, const height = container.scrollHeight;
},
'single-node'
);
const tooltip = new G6.Tooltip({ const tooltip = new G6.Tooltip({
offsetX: 10, offsetX: 10,
...@@ -129,7 +88,7 @@ class Tree extends React.Component { ...@@ -129,7 +88,7 @@ class Tree extends React.Component {
}); });
graph = new G6.TreeGraph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container,
animate: false, animate: false,
width, width,
height, height,
...@@ -210,7 +169,9 @@ class Tree extends React.Component { ...@@ -210,7 +169,9 @@ class Tree extends React.Component {
}; };
}); });
this.layoutGraph(); graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
...@@ -221,17 +182,17 @@ class Tree extends React.Component { ...@@ -221,17 +182,17 @@ class Tree extends React.Component {
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadSubLeafData) { if (!children) {
loadSubLeafData(model.dirId||'', nodeId); ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
} }
} else if (model.dbType === 'Table') { } else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid); ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') { } else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index); ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
} }
...@@ -245,47 +206,78 @@ class Tree extends React.Component { ...@@ -245,47 +206,78 @@ class Tree extends React.Component {
graph.changeSize(container.scrollWidth, container.scrollHeight); graph.changeSize(container.scrollWidth, container.scrollHeight);
}; };
} }
}
layoutGraph = () => { return graph;
const { data } = this.props; }
if(graph && data){ G6.registerNode(
graph.data(data); 'tree-node',
graph.render(); {
graph.fitView(); draw(cfg, group) {
} const rect = group.addShape('rect', {
} attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
});
componentDidUpdate(prevProps, prevState){ const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) { const text = group.addShape('text', {
const parentData = graph.findDataById(parentNodeId); attrs: {
if (!parentData.children) { x: 0,
parentData.children = []; y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: content,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
} }
});
parentData.children = parentData.children.filter(item => item.dbType!=='More'); const bbox = text.getBBox();
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
graph.updateItem(graph.findById(parentNodeId), { if (cfg.dbType==='Dir') {
collapsed: false, if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer'
}
}); });
} else if ((cfg.children||[]).length>0) {
} else if (data !== prevProps.data) { group.addShape('marker', {
this.layoutGraph(); attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
} }
});
} }
render() {
const { type } = this.props;
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
);
} }
}
export default Tree; rect.attr({
\ No newline at end of file x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group;
},
update: undefined,
},
'single-node'
);
\ No newline at end of file
src/view/Manage/Map/MapContent.jsx
...@@ -28,7 +28,7 @@ class MapContent extends React.Component { ...@@ -28,7 +28,7 @@ class MapContent extends React.Component {
relationChildData: null, relationChildData: null,
parentNodeId: null, parentNodeId: null,
breadcrumbContents: null, breadcrumbContents: null,
currentLevel: 1, currentLevel: -1,
totalLevel: 1, totalLevel: 1,
haveMoreData: false, haveMoreData: false,
}; };
...@@ -42,13 +42,18 @@ class MapContent extends React.Component { ...@@ -42,13 +42,18 @@ class MapContent extends React.Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const { type } = this.props; const { type } = this.props;
const { currentLevel } = this.state;
if (type !== prevProps.type) { if (type !== prevProps.type) {
this.setState({ parentNodeId: '' }); this.setState({ parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
if (type !== 'square') {
this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel(false, currentLevel);
}
});
} }
} }
getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = () => { getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = (first=true, defaultCurrentLevel=-1) => {
const { topic } = this.props; const { topic } = this.props;
dispatch({ dispatch({
...@@ -57,16 +62,16 @@ class MapContent extends React.Component { ...@@ -57,16 +62,16 @@ class MapContent extends React.Component {
callback: data => { callback: data => {
const _totalLevel = Number(data); const _totalLevel = Number(data);
const _currentLevel = (_totalLevel < 3 ? _totalLevel : 3); const _currentLevel = (defaultCurrentLevel===-1) ? (_totalLevel < 3 ? _totalLevel : 3) : defaultCurrentLevel;
this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => { this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => {
this.queryAllDirectoryAsTreeByDirLevel(_currentLevel - 1); this.queryAllDirectoryAsTreeByDirLevel(first, _currentLevel - 1);
}); });
} }
}) })
} }
queryAllDirectoryAsTreeByDirLevel = (level) => { queryAllDirectoryAsTreeByDirLevel = (first, level) => {
const { topic } = this.props; const { topic } = this.props;
dispatchLatest({ dispatchLatest({
...@@ -90,6 +95,7 @@ class MapContent extends React.Component { ...@@ -90,6 +95,7 @@ class MapContent extends React.Component {
const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More'); const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
if (first) {
this.setState({ this.setState({
curTableModelData: _curTableModelData, curTableModelData: _curTableModelData,
breadcrumbContents: [{ data: _treeData }], breadcrumbContents: [{ data: _treeData }],
...@@ -99,6 +105,13 @@ class MapContent extends React.Component { ...@@ -99,6 +105,13 @@ class MapContent extends React.Component {
treeModelData: JSON.parse(JSON.stringify(_treeData)), treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData)) relationModelData: JSON.parse(JSON.stringify(_treeData))
}); });
} else {
this.setState({
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
}
} }
}) })
} }
...@@ -365,10 +378,10 @@ class MapContent extends React.Component { ...@@ -365,10 +378,10 @@ class MapContent extends React.Component {
data={orgModelData} data={orgModelData}
parentNodeId={parentNodeId} parentNodeId={parentNodeId}
childData={orgChildData} childData={orgChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData} loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData} loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick} onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/> />
} }
{ {
...@@ -376,10 +389,10 @@ class MapContent extends React.Component { ...@@ -376,10 +389,10 @@ class MapContent extends React.Component {
data={treeModelData} data={treeModelData}
parentNodeId={parentNodeId} parentNodeId={parentNodeId}
childData={treeChildData} childData={treeChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData} loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData} loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick} onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/> />
} }
{ {
...@@ -387,10 +400,10 @@ class MapContent extends React.Component { ...@@ -387,10 +400,10 @@ class MapContent extends React.Component {
data={relationModelData} data={relationModelData}
parentNodeId={parentNodeId} parentNodeId={parentNodeId}
childData={relationChildData} childData={relationChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData} loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData} loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick} onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/> />
} }
<div <div
......
src/view/Manage/Map/index.jsx
...@@ -13,10 +13,10 @@ const graphModes = [ ...@@ -13,10 +13,10 @@ const graphModes = [
title: '方块图', title: '方块图',
key: 'square' key: 'square'
}, },
{ // {
title: '组织图', // title: '组织图',
key: 'org', // key: 'org',
}, // },
{ {
title: '树形图', title: '树形图',
key: 'tree', key: 'tree',
......
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