Skip to content

Commit

Permalink
feat:add theme dirs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Feb 2, 2021
1 parent 620a029 commit 6352f56
Show file tree
Hide file tree
Showing 8 changed files with 383 additions and 326 deletions.
13 changes: 13 additions & 0 deletions packages/graphin/docs/render/status/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
title: 设置状态
group:
path: /render
nav:
title: Graphin
path: /graphin
order: 1
---

## 节点的状态

## 边的状态
4 changes: 3 additions & 1 deletion packages/graphin/src/Graphin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ import { ApisType } from './apis/types';

/** types */
import { GraphinProps, IconLoader, GraphinData, GraphinTreeData } from './typings/type';
import { TREE_LAYOUTS, getDefaultStyleByTheme, ThemeData, DEFAULT_TREE_LATOUT_OPTIONS } from './consts';
import { TREE_LAYOUTS, DEFAULT_TREE_LATOUT_OPTIONS } from './consts';

import { getDefaultStyleByTheme, ThemeData } from './theme/index';

const { DragCanvas, ZoomCanvas, DragNode, DragCombo, ClickSelect, BrushSelect, ResizeCanvas, Hoverable } = Behaviors;

Expand Down
322 changes: 0 additions & 322 deletions packages/graphin/src/consts.ts
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,3 @@
import { NodeStyle } from '.';
import { ComboStyle, EdgeStyle } from './typings/type';

// interface ColorSetType {
// activeFill: string;
// activeStroke: string;
// comboActiveFill: string;
// comboActiveStroke: string;
// comboDisableFill: string;
// comboDisableStroke: string;
// comboHighlightFill: string;
// comboHighlightStroke: string;
// comboInactiveFill: string;
// comboInactiveStroke: string;
// comboMainFill: string;
// comboMainStroke: string;
// comboSelectedFill: string;
// comboSelectedStroke: string;
// disableFill: string;
// disableStroke: string;
// edgeActiveStroke: string;
// edgeDisableStroke: string;
// edgeHighlightStroke: string;
// edgeInactiveStroke: string;
// edgeMainStroke: string;
// edgeSelectedStroke: string;
// highlightFill: string;
// highlightStroke: string;
// inactiveFill: string;
// inactiveStroke: string;
// mainFill: string;
// mainStroke: string;
// selectedFill: string;
// selectedStroke: string;
// }

export const DEFAULT_TREE_LATOUT_OPTIONS = {
type: 'compactBox',
direction: 'LR',
Expand All @@ -55,289 +19,3 @@ export const DEFAULT_TREE_LATOUT_OPTIONS = {
},
};
export const TREE_LAYOUTS = ['dendrogram', 'compactBox', 'mindmap', 'indented'];

export const DEFAULT_THEME = {
mode: 'light',
primaryColor: '#269a99', // '#3D76DD',
nodeSize: 26,
edgeSize: 1,
edgePrimaryColor: '#AAB7C4',
background: '#fff',
};

export interface ThemeType {
/**
* @description 模式 light | dark
* @default light
*/
mode: 'light' | 'dark';
/**
* @description 主要的节点颜色
* @default #269a99
*/
primaryColor: string;
/**
* @description 节点大小
* @default 26
*/
nodeSize: number;
/**
* @description 边的大小，即边宽：lindwith
* @default 0.5
*/
edgeSize: number;
/**
* @description 边的主要颜色
* @default #ddd
*/
edgePrimaryColor: string;
/**
* @description 画布背景色
*/
background: string;
}

export const genDefaultNodeStyle = ({
nodeSize = 26,
primaryColor = '#FF6A00',
mode = 'light',
labelSize = 12,
}: {
nodeSize: number;
primaryColor: string;
mode: 'light' | 'dark';
labelSize?: number;
}) => {
const Colors = {
light: {
fill: primaryColor,
fillOpacity: 0.1,
stroke: primaryColor,
strokeOpacity: 1,

icon: primaryColor,
badge: {
fill: primaryColor,
stroke: primaryColor,
font: '#fff',
},
label: '#000',
disabled: '#ddd',
},
dark: {
fill: primaryColor,
fillOpacity: 0.3,
stroke: primaryColor,
strokeOpacity: 1,
icon: '#fff',
badge: {
fill: primaryColor,
stroke: primaryColor,
font: '#fff',
},
label: '#fff',
disabled: '#ddd3',
},
};

const Color = Colors[mode];

const defaultStyle = {
type: 'graphin-circle',
style: {
keyshape: {
size: [nodeSize, nodeSize],
fill: Color.fill,
fillOpacity: Color.fillOpacity,
stroke: Color.stroke, // storke is primaryColor
strokeOpacity: Color.strokeOpacity,
lineWidth: 1,
opacity: 1,
type: 'circle',
},
label: {
position: 'bottom',
value: 12,
fill: Color.label,
fontSize: labelSize,
offset: 0,
background: undefined,
},
icon: {
type: 'text',
value: '',
size: nodeSize / 2,
fill: Color.icon,
offset: [0, 0],
},
badges: [],
halo: {
visible: false,
},
},
status: {
selected: {
halo: {
visible: true,
},
keyshape: {
lineWidth: 5,
},
},
hover: {
halo: {
visible: true,
},
},
active: {
halo: {
visible: false,
},
},
inactive: {
halo: {
visible: false,
},
keyshape: {
lineWidth: 0,
fill: Color.disabled,
stroke: Color.disabled,
},
icon: {
fill: Color.disabled,
},
label: {
fill: Color.disabled,
},
},
disabled: {
halo: {
visible: false,
},
keyshape: {
lineWidth: 0,
fill: Color.disabled,
stroke: Color.disabled,
},
icon: {
fill: Color.disabled,
},
label: {
fill: Color.disabled,
},
},
},
};
return {
defaultNodeStyle: { type: defaultStyle.type, style: defaultStyle.style },
defaultNodeStatusStyle: { status: defaultStyle.status },
};
};

export const genDefaultEdgeStyle = ({ edgeSize = 1, edgePrimaryColor = '#ddd', mode = 'light' }: ThemeType) => {
const Colors = {
light: {
stroke: edgePrimaryColor,
label: edgePrimaryColor,
disabled: '#ddd',
},
dark: {
stroke: edgePrimaryColor,
label: edgePrimaryColor,
disabled: '#ddd3',
},
};
const Color = Colors[mode];

const defaultStyle = {
type: 'graphin-line',
style: {
keyshape: {
type: 'line',
lineWidth: edgeSize,
stroke: Color.stroke,
strokeOpacity: 1,
lineAppendWidth: 9,
cursor: 'pointer',
},
halo: {
// stroke: Color.stroke,
visible: false,
cursor: 'pointer',
strokeOpacity: 0.4,
},
label: {
value: '',
position: 'top',
fill: Color.label,
fontSize: 12,
textAlign: 'center',
},
},
status: {
hover: {
halo: {
visible: true,
},
},
selected: {
halo: {
visible: true,
},
keyShape: {
lineWidth: 2,
},
},
disabled: {
halo: {
visible: false,
},
keyShape: {
lineWidth: 0.5,
stroke: Color.disabled,
},
},
},
};
return {
defaultEdgeStyle: { type: defaultStyle.type, style: defaultStyle.style },
defaultEdgeStatusStyle: { status: defaultStyle.status },
};
};

export function genDefaultComboStyle() {
const defaultStyle = {
type: 'circle',
style: {
labelCfg: {
position: 'top',
},
},
status: {},
};
return {
defaultComboStyle: { type: defaultStyle.type, style: defaultStyle.style },
defaultComboStatusStyle: { status: defaultStyle.status },
};
}

export interface ThemeData extends ThemeType {
defaultNodeStyle: NodeStyle & { type: string };
defaultNodeStatusStyle: NodeStyle['status'];
defaultEdgeStyle: EdgeStyle & { type: string };
defaultEdgeStatusStyle: EdgeStyle['status'];
defaultComboStyle: ComboStyle & { type: string };
defaultComboStatusStyle: ComboStyle['status'];
}

export const getDefaultStyleByTheme = (inputTheme: Partial<ThemeType> | undefined) => {
const theme = { ...DEFAULT_THEME, ...inputTheme } as ThemeType;
const isLight = theme.mode === 'light';
return {
...theme,
background: isLight ? '#fff' : '#1f1f1f',
...genDefaultNodeStyle(theme),
...genDefaultEdgeStyle(theme),
...genDefaultComboStyle(),
};
};
5 changes: 2 additions & 3 deletions packages/graphin/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import registerGraphinForce from './layout/inner/registerGraphinForce';
import registerPresetLayout from './layout/inner/registerPresetLayout';
import { registerGraphinCircle, registerGraphinLine } from './shape';
/** export type */
import { NodeStyle, EdgeStyle } from './typings/type';
export { NodeStyle, EdgeStyle, GraphinData, GraphinTreeData } from './typings/type';
export { GraphinContextType };

/** 注册 Graphin force 布局 */
registerGraphinForce();
Expand All @@ -27,8 +28,6 @@ const { registerFontFamily } = Graphin;
export default Graphin;
export { Utils, Layout, GraphinContext, Behaviors, registerFontFamily };

export { GraphinContextType, NodeStyle, EdgeStyle };

export {
/** export G6 */
default as G6,
Expand Down
Loading

0 comments on commit 6352f56

Please sign in to comment.