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) {
class Org extends React.Component {
componentDidMount() {
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = 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',
},
});
componentDidUpdate(prevProps, prevState) {
const { childData, parentNodeId } = this.props;
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: (cfg.label||''),
cursor: (cfg.dbType==='Dir')?'pointer':'default',
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
});
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') {
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) {
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',
}
this.graph?.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
} else if (this.props.data && parentNodeId===null) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data);
}
}
rect.attr({
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,
});
graph = undefined
elem = undefined
return group;
},
update: undefined,
},
'rect',
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
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'
);
}
export default Org;
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
const tooltip = new G6.Tooltip({
offsetX: 10,
......@@ -167,7 +89,7 @@ class Org extends React.Component {
});
graph = new G6.TreeGraph({
container: `container${type||''}`,
container,
width,
height,
linkCenter: true,
......@@ -248,7 +170,9 @@ class Org extends React.Component {
};
});
this.layoutGraph();
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) {
const node = e.item;
......@@ -259,17 +183,17 @@ class Org extends React.Component {
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
if (!children ) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
ctx.props?.onAssetClick(model.tid);
} 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 {
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
}
layoutGraph = () => {
const { data } = this.props;
if(graph && data){
graph.data(data);
graph.render();
graph.fitView();
}
}
return graph;
}
componentDidUpdate(prevProps, prevState) {
const { childData, parentNodeId, data } = this.props;
G6.registerNode(
'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 parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
const text = group.addShape('text', {
attrs: {
x: 0,
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');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
const bbox = text.getBBox();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
if (cfg.dbType==='Dir') {
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 (data !== prevProps.data) {
this.layoutGraph();
} 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',
}
});
}
render() {
const { type } = this.props;
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }} ></div>
);
}
}
export default Org;
\ No newline at end of file
rect.attr({
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 {
render() {
const { styles } = this.props;
return (
<React.Fragment>
<div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', }}>
<div ref={ref => this.elem = ref} style={styles}>
</div>
</React.Fragment>
......@@ -267,7 +269,7 @@ G6.registerNode(
fill: colors[cfg.depth % colors.length],
stroke: highlight,
lineWidth,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
name: 'aggregated-node-keyShape',
});
......
src/view/Manage/Map/Component/Tree.jsx
......@@ -28,86 +28,45 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
class Tree extends React.Component {
componentDidMount() {
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props;
componentDidUpdate(prevProps, prevState){
const { childData, parentNodeId } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
G6.registerNode(
'tree-node',
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
},
this.graph?.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: content,
cursor: (cfg.dbType==='Dir')?'pointer':'default',
} else if (this.props.data && parentNodeId===null) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data);
}
}
});
const bbox = text.getBBox();
graph = undefined
elem = undefined
if (cfg.dbType==='Dir') {
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) {
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',
}
});
}
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
}
}
rect.attr({
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,
});
export default Tree;
return group;
},
update: undefined,
},
'single-node'
);
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
const tooltip = new G6.Tooltip({
offsetX: 10,
......@@ -129,7 +88,7 @@ class Tree extends React.Component {
});
graph = new G6.TreeGraph({
container: `container${type||''}`,
container,
animate: false,
width,
height,
......@@ -210,7 +169,9 @@ class Tree extends React.Component {
};
});
this.layoutGraph();
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) {
const node = e.item;
......@@ -221,17 +182,17 @@ class Tree extends React.Component {
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
if (!children) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
ctx.props?.onAssetClick(model.tid);
} 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 {
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
}
layoutGraph = () => {
const { data } = this.props;
return graph;
}
if(graph && data){
graph.data(data);
graph.render();
graph.fitView();
}
}
G6.registerNode(
'tree-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',
},
});
componentDidUpdate(prevProps, prevState){
const { childData, parentNodeId, data } = this.props;
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
const text = group.addShape('text', {
attrs: {
x: 0,
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');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
const bbox = text.getBBox();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
if (cfg.dbType==='Dir') {
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 (data !== prevProps.data) {
this.layoutGraph();
} 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',
}
});
}
render() {
const { type } = this.props;
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
);
}
}
export default Tree;
\ No newline at end of file
rect.attr({
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 {
relationChildData: null,
parentNodeId: null,
breadcrumbContents: null,
currentLevel: 1,
currentLevel: -1,
totalLevel: 1,
haveMoreData: false,
};
......@@ -42,13 +42,18 @@ class MapContent extends React.Component {
componentDidUpdate(prevProps, prevState) {
const { type } = this.props;
const { currentLevel } = this.state;
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;
dispatch({
......@@ -57,16 +62,16 @@ class MapContent extends React.Component {
callback: 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.queryAllDirectoryAsTreeByDirLevel(_currentLevel - 1);
this.queryAllDirectoryAsTreeByDirLevel(first, _currentLevel - 1);
});
}
})
}
queryAllDirectoryAsTreeByDirLevel = (level) => {
queryAllDirectoryAsTreeByDirLevel = (first, level) => {
const { topic } = this.props;
dispatchLatest({
......@@ -90,6 +95,7 @@ class MapContent extends React.Component {
const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
if (first) {
this.setState({
curTableModelData: _curTableModelData,
breadcrumbContents: [{ data: _treeData }],
......@@ -99,6 +105,13 @@ class MapContent extends React.Component {
treeModelData: 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 {
data={orgModelData}
parentNodeId={parentNodeId}
childData={orgChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
{
......@@ -376,10 +389,10 @@ class MapContent extends React.Component {
data={treeModelData}
parentNodeId={parentNodeId}
childData={treeChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
{
......@@ -387,10 +400,10 @@ class MapContent extends React.Component {
data={relationModelData}
parentNodeId={parentNodeId}
childData={relationChildData}
type={`${topic.id || ''}${type}`}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
<div
......
src/view/Manage/Map/index.jsx
......@@ -13,10 +13,10 @@ const graphModes = [
title: '方块图',
key: 'square'
},
{
title: '组织图',
key: 'org',
},
// {
// title: '组织图',
// key: 'org',
// },
{
title: '树形图',
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