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