Skip to content

S
szse
Commit 695f0762 by zhaochengxiang
Options

优化地图样式

parent 385aee2a
Showing with 518 additions and 519 deletions
src/view/Manage/Map/Component/Org.jsx
...@@ -29,301 +29,293 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) { ...@@ -29,301 +29,293 @@ 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 (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), {
'org-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 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',
}
});
const bbox = text.getBBox(); } else if (this.props.data && parentNodeId===null) {
this.graph?.destroy();
if (cfg.dbType==='Dir') { this.graph = init(this)(this.elem, this.props.data);
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',
}
});
}
}
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;
},
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'
);
const tooltip = new G6.Tooltip({ render() {
offsetX: 10, const { styles } = this.props;
offsetY: 10, return (
// the types of items that allow the tooltip show up <div ref={ref => this.elem = ref} style={styles} />
// 允许出现 tooltip 的 item 类型 );
itemTypes: ['node'], }
// custom the tooltip's content }
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({ export default Org;
container: `container${type||''}`,
width, const init = (ctx) => function (container, data) {
height, const width = container.scrollWidth;
linkCenter: true, const height = container.scrollHeight;
maxZoom: 1,
plugins: [tooltip], const tooltip = new G6.Tooltip({
modes: { offsetX: 10,
default: [ offsetY: 10,
{ // the types of items that allow the tooltip show up
type: 'collapse-expand', // 允许出现 tooltip 的 item 类型
onChange: function onChange(item, collapsed) { itemTypes: ['node'],
const data = item.get('model'); // custom the tooltip's content
graph.updateItem(item, { // 自定义 tooltip 内容
collapsed, getContent: (e) => {
}); const outDiv = document.createElement('div');
data.collapsed = collapsed; outDiv.style.width = 'fit-content';
return true; //outDiv.style.padding = '0px 0px 20px 0px';
}, outDiv.innerHTML = `
}, <h4>${e.item.getModel().text||''}</h4>
'drag-canvas', `;
'zoom-canvas', return outDiv;
], },
}, });
defaultNode: {
type: 'org-node', graph = new G6.TreeGraph({
}, container,
defaultEdge: { width,
type: 'flow-line', height,
size: 2, linkCenter: true,
color: '#e2e2e2', maxZoom: 1,
style: { plugins: [tooltip],
endArrow: { modes: {
path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z', default: [
fill: '#91d5ff', {
d: -20, type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
}, },
}
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
},
getVGap: function getVGap() {
return 40;
}, },
getHGap: function getHGap() { 'drag-canvas',
return 80; 'zoom-canvas',
],
},
defaultNode: {
type: 'org-node',
},
defaultEdge: {
type: 'flow-line',
size: 2,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
fill: '#91d5ff',
d: -20,
}, },
}
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
}, },
getVGap: function getVGap() {
return 40;
},
getHGap: function getHGap() {
return 80;
},
},
});
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
}); });
return res;
};
const fittingString = (str, maxWidth, fontSize) => { graph.node(function (node) {
const ellipsis = '...'; return {
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]; label: fittingString(node.text||'', maxTextWidth, globalFontSize),
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
}; };
});
graph.node(function (node) { graph.data(data);
return { graph.render();
label: fittingString(node.text||'', maxTextWidth, globalFontSize), graph.fitView();
};
});
this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const nodeId = node.get('id'); const nodeId = node.get('id');
const model = node.getModel(); const model = node.getModel();
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);
} else if (model.dbType === 'More') { ctx.props?.onAssetClick(model.tid);
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index); } else if (model.dbType === 'More') {
} ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
}); });
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.onresize = () => { window.onresize = () => {
if (!graph || graph.get('destroyed')) return; if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return; if (!container || !container.scrollWidth || !container.scrollHeight) return;
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); 'org-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',
},
});
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',
}
});
componentDidUpdate(prevProps, prevState) { const bbox = text.getBBox();
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) { if (cfg.dbType==='Dir') {
const parentData = graph.findDataById(parentNodeId); if (!cfg.children) {
if (!parentData.children) { group.addShape('marker', {
parentData.children = []; 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',
}
});
}
} }
parentData.children = parentData.children.filter(item => item.dbType!=='More'); rect.attr({
parentData.children = [...parentData.children, ...childData]; x: bbox.minX - 10,
graph.changeData(); y: bbox.minY - 10,
// graph.fitView(); width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
}); });
} else if (data !== prevProps.data) { return group;
this.layoutGraph(); },
} update: undefined,
} },
'rect',
render() { );
const { type } = this.props;
return ( G6.registerEdge(
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }} ></div> 'flow-line',
); {
} getPath(points) {
} const startPoint = points[0];
const endPoint = points[1];
export default Org; return [
\ No newline at end of file ['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,264 +28,256 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) { ...@@ -28,264 +28,256 @@ 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');
const text = group.addShape('text', { } else if (this.props.data && parentNodeId===null) {
attrs: { this.graph?.destroy();
x: 0, this.graph = init(this)(this.elem, this.props.data);
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') {
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',
}
});
}
}
rect.attr({ render() {
x: bbox.minX - 10, const { styles } = this.props;
y: bbox.minY - 10, return (
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20), <div ref={ref => this.elem = ref} style={styles} />
height: bbox.height + 20, );
}); }
}
return group;
},
update: undefined,
},
'single-node'
);
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({ export default Tree;
container: `container${type||''}`,
animate: false, const init = (ctx) => function (container, data) {
width, const width = container.scrollWidth;
height, const height = container.scrollHeight;
maxZoom: 1,
plugins: [tooltip], const tooltip = new G6.Tooltip({
modes: { offsetX: 10,
default: [ offsetY: 10,
{ // the types of items that allow the tooltip show up
type: 'collapse-expand', // 允许出现 tooltip 的 item 类型
onChange: function onChange(item, collapsed) { itemTypes: ['node'],
const data = item.get('model'); // custom the tooltip's content
graph.updateItem(item, { // 自定义 tooltip 内容
collapsed, getContent: (e) => {
}); const outDiv = document.createElement('div');
data.collapsed = collapsed; outDiv.style.width = 'fit-content';
return true; //outDiv.style.padding = '0px 0px 20px 0px';
}, outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({
container,
animate: false,
width,
height,
maxZoom: 1,
plugins: [tooltip],
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
}, },
'drag-canvas', },
'zoom-canvas', 'drag-canvas',
], 'zoom-canvas',
],
},
defaultNode: {
type: 'tree-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
style: {
endArrow: true
}
},
layout: {
type: 'compactBox',
direction: 'LR', // H / V / LR / RL / TB / BT
getId: function getId(d) {
return d.id;
}, },
defaultNode: { getVGap: function getVGap() {
type: 'tree-node', return 20;
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
}, },
defaultEdge: { getHGap: function getHGap() {
type: 'cubic-horizontal', return 100;
size: 2,
color: '#e2e2e2',
style: {
endArrow: true
}
},
layout: {
type: 'compactBox',
direction: 'LR', // H / V / LR / RL / TB / BT
getId: function getId(d) {
return d.id;
},
getVGap: function getVGap() {
return 20;
},
getHGap: function getHGap() {
return 100;
},
}, },
},
});
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
}); });
return res;
};
const fittingString = (str, maxWidth, fontSize) => { graph.node(function (node) {
const ellipsis = '...'; return {
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]; label: fittingString(node.text||'', maxTextWidth, globalFontSize),
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
}; };
});
graph.node(function (node) { graph.data(data);
return { graph.render();
label: fittingString(node.text||'', maxTextWidth, globalFontSize), graph.fitView();
};
});
this.layoutGraph(); graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
graph.on('node:click', function (e) { const model = node.getModel();
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel(); if (model.dbType==='Dir') {
if (model.dbType==='Dir') { const children = model.children;
if (!children) {
const children = model.children; ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
if (!children && loadSubLeafData) { }
loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') { } else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
} else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
} ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
}); });
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.onresize = () => { window.onresize = () => {
if (!graph || graph.get('destroyed')) return; if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return; if (!container || !container.scrollWidth || !container.scrollHeight) return;
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',
},
});
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'||cfg.dbType==='More')?'pointer':'default',
}
});
componentDidUpdate(prevProps, prevState){ const bbox = text.getBBox();
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) { if (cfg.dbType==='Dir') {
const parentData = graph.findDataById(parentNodeId); if (!cfg.children) {
if (!parentData.children) { group.addShape('marker', {
parentData.children = []; 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',
}
});
}
} }
parentData.children = parentData.children.filter(item => item.dbType!=='More'); rect.attr({
parentData.children = [...parentData.children, ...childData]; x: bbox.minX - 10,
graph.changeData(); y: bbox.minY - 10,
// graph.fitView(); width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
}); });
} else if (data !== prevProps.data) { return group;
this.layoutGraph(); },
} update: undefined,
} },
'single-node'
render() { );
const { type } = this.props; \ No newline at end of file
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
);
}
}
export default Tree;
\ 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,15 +95,23 @@ class MapContent extends React.Component { ...@@ -90,15 +95,23 @@ class MapContent extends React.Component {
const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More'); const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
this.setState({ if (first) {
curTableModelData: _curTableModelData, this.setState({
breadcrumbContents: [{ data: _treeData }], curTableModelData: _curTableModelData,
haveMoreData: (_curTableModelData||[]).length===defaultLoadCount, breadcrumbContents: [{ data: _treeData }],
//深拷贝 haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
orgModelData: JSON.parse(JSON.stringify(_treeData)), //深拷贝
treeModelData: JSON.parse(JSON.stringify(_treeData)), orgModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData)) 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 { ...@@ -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