Skip to content

S
szse
Commit 2ba5c1b4 by zhaochengxiang
Options

修改树样式

parent dc8a73ab
Showing with 152 additions and 76 deletions
src/view/Manage/Map/Component/Org.jsx
......@@ -6,6 +6,7 @@ import { ContextPath } from '../../../../util';
let graph = null;
const globalFontSize = 20;
const maxTextWidth = 160;
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
......@@ -52,8 +53,6 @@ class Org extends React.Component {
},
});
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const text = group.addShape('text', {
attrs: {
x: 0,
......@@ -62,40 +61,42 @@ class Org extends React.Component {
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: content,
text: (cfg.label||''),
}
});
const bbox = text.getBBox();
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,
}
});
} 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,
}
});
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,
}
});
} 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,
}
});
}
}
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (!cfg.children||((cfg.children||[]).length>0) ? 38 : 20),
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
......@@ -193,6 +194,15 @@ class Org extends React.Component {
},
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',
......@@ -204,7 +214,7 @@ class Org extends React.Component {
return 40;
},
getHGap: function getHGap() {
return 70;
return 80;
},
},
});
......@@ -243,9 +253,31 @@ class Org extends React.Component {
if(graph && data){
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: (node.text||''),
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
......
src/view/Manage/Map/Component/Relation.jsx
......@@ -78,29 +78,31 @@ class Relation extends React.Component {
});
const bbox = text.getBBox();
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
}
return group;
......@@ -180,6 +182,18 @@ class Relation extends React.Component {
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
// style: {
// endArrow: {
// path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
// fill: '#91d5ff',
// d: -40,
// },
// }
},
});
this.layoutGraph();
......
src/view/Manage/Map/Component/Tree.jsx
......@@ -5,6 +5,7 @@ import { ContextPath } from '../../../../util';
let graph = null;
const globalFontSize = 20;
const maxTextWidth = 160;
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
......@@ -67,34 +68,36 @@ class Tree extends React.Component {
const bbox = text.getBBox();
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,
}
});
} 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,
}
});
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,
}
});
} 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,
}
});
}
}
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (!cfg.children||((cfg.children||[]).length>0) ? 38 : 20),
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
......@@ -156,6 +159,11 @@ class Tree extends React.Component {
},
defaultEdge: {
type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
style: {
endArrow: true
}
},
layout: {
type: 'compactBox',
......@@ -167,7 +175,7 @@ class Tree extends React.Component {
return 20;
},
getHGap: function getHGap() {
return 80;
return 100;
},
},
});
......@@ -206,9 +214,31 @@ class Tree extends React.Component {
if(graph && data){
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: node.text||'',
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
......
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