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) {
class Org 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(
'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', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: (cfg.label||''),
cursor: (cfg.dbType==='Dir')?'pointer':'default',
}
});
this.graph?.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
const bbox = text.getBBox();
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',
}
});
}
}
} 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,
});
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'
);
graph = undefined
elem = undefined
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;
},
});
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
}
}
graph = new G6.TreeGraph({
container: `container${type||''}`,
width,
height,
linkCenter: true,
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',
],
},
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,
export default Org;
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
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({
container,
width,
height,
linkCenter: true,
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;
},
}
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
},
getVGap: function getVGap() {
return 40;
},
getHGap: function getHGap() {
return 80;
'drag-canvas',
'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) => {
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;
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
this.layoutGraph();
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
graph.on('node:click', function (e) {
const node = e.item;
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;
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
}
const children = model.children;
if (!children ) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
} else if (model.dbType === 'Table') {
} 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') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
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(
'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',
},
});
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 { childData, parentNodeId, data } = this.props;
const bbox = text.getBBox();
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
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',
}
});
}
}
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
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,
});
} else if (data !== prevProps.data) {
this.layoutGraph();
}
}
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
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,264 +28,256 @@ 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',
},
});
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
this.graph?.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
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();
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',
}
});
}
}
graph = undefined
elem = undefined
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'
);
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;
},
});
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
}
}
graph = new G6.TreeGraph({
container: `container${type||''}`,
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;
},
export default Tree;
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
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({
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: {
type: 'tree-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
getVGap: function getVGap() {
return 20;
},
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;
},
getVGap: function getVGap() {
return 20;
},
getHGap: function getHGap() {
return 100;
},
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) => {
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;
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
graph.data(data);
graph.render();
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 node = e.item;
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;
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
}
const children = model.children;
if (!children) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
} else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
} else if (model.dbType === 'Table') {
}
ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
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',
},
});
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 { childData, parentNodeId, data } = this.props;
const bbox = text.getBBox();
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
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',
}
});
}
}
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
// graph.fitView();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
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,
});
} else if (data !== prevProps.data) {
this.layoutGraph();
}
}
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
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,15 +95,23 @@ class MapContent extends React.Component {
const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
this.setState({
curTableModelData: _curTableModelData,
breadcrumbContents: [{ data: _treeData }],
haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
//深拷贝
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
if (first) {
this.setState({
curTableModelData: _curTableModelData,
breadcrumbContents: [{ data: _treeData }],
haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
//深拷贝
orgModelData: 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 {
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