Skip to content

S
szse
Commit 2ba5c1b4 by zhaochengxiang
Options

修改树样式

parent dc8a73ab
Showing with 87 additions and 11 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,17 +61,18 @@ class Org extends React.Component { ...@@ -62,17 +61,18 @@ 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.dbType==='Dir') {
if (!cfg.children) { if (!cfg.children) {
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
x: bbox.maxX + 12, x: bbox.maxX + 12,
y: bbox.height/2 -3, y: (bbox.height/2) -3,
r: 6, r: 6,
symbol: EXPAND_ICON, symbol: EXPAND_ICON,
stroke: '#73d13d', stroke: '#73d13d',
...@@ -83,7 +83,7 @@ class Org extends React.Component { ...@@ -83,7 +83,7 @@ class Org extends React.Component {
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
x: bbox.maxX + 12, x: bbox.maxX + 12,
y: bbox.height/2 -3, y: (bbox.height/2) -3,
r: 6, r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON, symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f', stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
...@@ -91,11 +91,12 @@ class Org extends React.Component { ...@@ -91,11 +91,12 @@ class Org extends React.Component {
} }
}); });
} }
}
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
...@@ -79,6 +79,7 @@ class Relation extends React.Component { ...@@ -79,6 +79,7 @@ class Relation extends React.Component {
const bbox = text.getBBox(); const bbox = text.getBBox();
if (cfg.dbType==='Dir') {
if (!cfg.children) { if (!cfg.children) {
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
...@@ -102,6 +103,7 @@ class Relation extends React.Component { ...@@ -102,6 +103,7 @@ class Relation extends React.Component {
} }
}); });
} }
}
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,6 +68,7 @@ class Tree extends React.Component { ...@@ -67,6 +68,7 @@ class Tree extends React.Component {
const bbox = text.getBBox(); const bbox = text.getBBox();
if (cfg.dbType==='Dir') {
if (!cfg.children) { if (!cfg.children) {
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
...@@ -90,11 +92,12 @@ class Tree extends React.Component { ...@@ -90,11 +92,12 @@ class Tree extends React.Component {
} }
}); });
} }
}
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