You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
9.2 KiB
261 lines
9.2 KiB
const BADGE_PALETTE = ['#7E92B5', '#F4664A', '#FFBE3A'];
|
|
const NODE_PALETTE_OPTIONS = {
|
|
type: 'group',
|
|
color: ['#1783FF', '#00C9C9', '#F08F56', '#D580FF', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F'],
|
|
};
|
|
const EDGE_PALETTE_OPTIONS = {
|
|
type: 'group',
|
|
color: [
|
|
'#99ADD1',
|
|
'#1783FF',
|
|
'#00C9C9',
|
|
'#F08F56',
|
|
'#D580FF',
|
|
'#7863FF',
|
|
'#DB9D0D',
|
|
'#60C42D',
|
|
'#FF80CA',
|
|
'#2491B3',
|
|
'#17C76F',
|
|
],
|
|
};
|
|
/**
|
|
* <zh/> 创建主题
|
|
*
|
|
* <en/> Create a theme based on the given tokens
|
|
* @param tokens - <zh/> 主题配置项 <en/> Theme tokens
|
|
* @returns <zh/> 主题 <en/> Theme
|
|
*/
|
|
export function create(tokens) {
|
|
const { bgColor, textColor, nodeColor, nodeColorDisabled, nodeStroke, nodeHaloStrokeOpacityActive = 0.15, nodeHaloStrokeOpacitySelected = 0.25, nodeOpacityDisabled = 0.06, nodeIconOpacityInactive = 0.85, nodeOpacityInactive = 0.25, nodeBadgePalette = BADGE_PALETTE, nodePaletteOptions = NODE_PALETTE_OPTIONS, edgeColor, edgeColorDisabled, edgePaletteOptions = EDGE_PALETTE_OPTIONS, comboColor, comboColorDisabled, comboStroke, comboStrokeDisabled, edgeColorInactive, } = tokens;
|
|
return {
|
|
background: bgColor,
|
|
node: {
|
|
palette: nodePaletteOptions,
|
|
style: {
|
|
donutOpacity: 1,
|
|
badgeBackgroundOpacity: 1,
|
|
badgeFill: '#fff',
|
|
badgeFontSize: 8,
|
|
badgePadding: [0, 4],
|
|
badgePalette: nodeBadgePalette,
|
|
fill: nodeColor,
|
|
fillOpacity: 1,
|
|
halo: false,
|
|
iconFill: '#fff',
|
|
iconOpacity: 1,
|
|
labelBackground: false,
|
|
labelBackgroundFill: bgColor,
|
|
labelBackgroundLineWidth: 0,
|
|
labelBackgroundOpacity: 0.75,
|
|
labelFill: textColor,
|
|
labelFillOpacity: 0.85,
|
|
labelLineHeight: 16,
|
|
labelPadding: [0, 2],
|
|
labelFontSize: 12,
|
|
labelFontWeight: 400,
|
|
labelOpacity: 1,
|
|
labelOffsetY: 2,
|
|
lineWidth: 0,
|
|
portFill: nodeColor,
|
|
portLineWidth: 1,
|
|
portStroke: nodeStroke,
|
|
portStrokeOpacity: 0.65,
|
|
size: 32,
|
|
stroke: nodeStroke,
|
|
strokeOpacity: 1,
|
|
zIndex: 2,
|
|
},
|
|
state: {
|
|
selected: {
|
|
halo: true,
|
|
haloLineWidth: 24,
|
|
haloStrokeOpacity: nodeHaloStrokeOpacitySelected,
|
|
labelFontSize: 12,
|
|
labelFontWeight: 'bold',
|
|
lineWidth: 4,
|
|
stroke: nodeStroke,
|
|
},
|
|
active: {
|
|
halo: true,
|
|
haloLineWidth: 12,
|
|
haloStrokeOpacity: nodeHaloStrokeOpacityActive,
|
|
},
|
|
highlight: {
|
|
labelFontWeight: 'bold',
|
|
lineWidth: 4,
|
|
stroke: nodeStroke,
|
|
strokeOpacity: 0.85,
|
|
},
|
|
inactive: {
|
|
badgeBackgroundOpacity: nodeOpacityInactive,
|
|
donutOpacity: nodeOpacityInactive,
|
|
fillOpacity: nodeOpacityInactive,
|
|
iconOpacity: nodeIconOpacityInactive,
|
|
labelFill: textColor,
|
|
labelFillOpacity: nodeOpacityInactive,
|
|
strokeOpacity: nodeOpacityInactive,
|
|
},
|
|
disabled: {
|
|
badgeBackgroundOpacity: 0.25,
|
|
donutOpacity: nodeOpacityDisabled,
|
|
fill: nodeColorDisabled,
|
|
fillOpacity: nodeOpacityDisabled,
|
|
iconFill: nodeColorDisabled,
|
|
iconOpacity: 0.25,
|
|
labelFill: textColor,
|
|
labelFillOpacity: 0.25,
|
|
strokeOpacity: nodeOpacityDisabled,
|
|
},
|
|
},
|
|
animation: {
|
|
enter: 'fade',
|
|
exit: 'fade',
|
|
show: 'fade',
|
|
hide: 'fade',
|
|
expand: 'node-expand',
|
|
collapse: 'node-collapse',
|
|
update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
|
|
translate: [{ fields: ['x', 'y'] }],
|
|
},
|
|
},
|
|
edge: {
|
|
palette: edgePaletteOptions,
|
|
style: {
|
|
badgeBackgroundFill: edgeColor,
|
|
badgeFill: '#fff',
|
|
badgeFontSize: 8,
|
|
badgeOffsetX: 10,
|
|
badgeBackgroundOpacity: 1,
|
|
fillOpacity: 1,
|
|
halo: false,
|
|
haloLineWidth: 12,
|
|
haloStrokeOpacity: 1,
|
|
increasedLineWidthForHitTesting: 2,
|
|
labelBackground: false,
|
|
labelBackgroundFill: bgColor,
|
|
labelBackgroundLineWidth: 0,
|
|
labelBackgroundOpacity: 0.75,
|
|
labelBackgroundPadding: [4, 4, 4, 4],
|
|
labelFill: textColor,
|
|
labelFontSize: 12,
|
|
labelFontWeight: 400,
|
|
labelOpacity: 1,
|
|
labelPlacement: 'center',
|
|
labelTextBaseline: 'middle',
|
|
lineWidth: 1,
|
|
stroke: edgeColor,
|
|
strokeOpacity: 1,
|
|
zIndex: 1,
|
|
},
|
|
state: {
|
|
selected: {
|
|
halo: true,
|
|
haloStrokeOpacity: 0.25,
|
|
labelFontSize: 14,
|
|
labelFontWeight: 'bold',
|
|
lineWidth: 3,
|
|
},
|
|
active: {
|
|
halo: true,
|
|
haloStrokeOpacity: 0.15,
|
|
},
|
|
highlight: {
|
|
labelFontWeight: 'bold',
|
|
lineWidth: 3,
|
|
},
|
|
inactive: {
|
|
stroke: edgeColorInactive,
|
|
fillOpacity: 0.08,
|
|
labelOpacity: 0.25,
|
|
strokeOpacity: 0.08,
|
|
badgeBackgroundOpacity: 0.25,
|
|
},
|
|
disabled: {
|
|
stroke: edgeColorDisabled,
|
|
fillOpacity: 0.45,
|
|
strokeOpacity: 0.45,
|
|
labelOpacity: 0.25,
|
|
badgeBackgroundOpacity: 0.45,
|
|
},
|
|
},
|
|
animation: {
|
|
enter: 'fade',
|
|
exit: 'fade',
|
|
expand: 'path-in',
|
|
collapse: 'path-out',
|
|
show: 'fade',
|
|
hide: 'fade',
|
|
update: [{ fields: ['sourceNode', 'targetNode'] }, { fields: ['stroke'], shape: 'key' }],
|
|
translate: [{ fields: ['sourceNode', 'targetNode'] }],
|
|
},
|
|
},
|
|
combo: {
|
|
style: {
|
|
collapsedMarkerFill: bgColor,
|
|
collapsedMarkerFontSize: 12,
|
|
collapsedMarkerFillOpacity: 1,
|
|
collapsedSize: 32,
|
|
collapsedFillOpacity: 1,
|
|
fill: comboColor,
|
|
halo: false,
|
|
haloLineWidth: 12,
|
|
haloStroke: comboStroke,
|
|
haloStrokeOpacity: 0.25,
|
|
labelBackground: false,
|
|
labelBackgroundFill: bgColor,
|
|
labelBackgroundLineWidth: 0,
|
|
labelBackgroundOpacity: 0.75,
|
|
labelBackgroundPadding: [2, 4, 2, 4],
|
|
labelFill: textColor,
|
|
labelFontSize: 12,
|
|
labelFontWeight: 400,
|
|
labelOpacity: 1,
|
|
lineDash: 0,
|
|
lineWidth: 1,
|
|
fillOpacity: 0.04,
|
|
strokeOpacity: 1,
|
|
padding: 10,
|
|
stroke: comboStroke,
|
|
},
|
|
state: {
|
|
selected: {
|
|
halo: true,
|
|
labelFontSize: 14,
|
|
labelFontWeight: 700,
|
|
lineWidth: 4,
|
|
},
|
|
active: {
|
|
halo: true,
|
|
},
|
|
highlight: {
|
|
labelFontWeight: 700,
|
|
lineWidth: 4,
|
|
},
|
|
inactive: {
|
|
fillOpacity: 0.65,
|
|
labelOpacity: 0.25,
|
|
strokeOpacity: 0.65,
|
|
},
|
|
disabled: {
|
|
fill: comboColorDisabled,
|
|
fillOpacity: 0.25,
|
|
labelOpacity: 0.25,
|
|
stroke: comboStrokeDisabled,
|
|
strokeOpacity: 0.25,
|
|
},
|
|
},
|
|
animation: {
|
|
enter: 'fade',
|
|
exit: 'fade',
|
|
show: 'fade',
|
|
hide: 'fade',
|
|
expand: 'combo-expand',
|
|
collapse: 'combo-collapse',
|
|
update: [{ fields: ['x', 'y'] }, { fields: ['fill', 'stroke', 'lineWidth'], shape: 'key' }],
|
|
translate: [{ fields: ['x', 'y'] }],
|
|
},
|
|
},
|
|
};
|
|
}
|
|
//# sourceMappingURL=base.js.map
|