Browse Source

refactor: code optimize

master
smallstonesk 4 years ago
parent
commit
62130b37a1
  1. 1
      packages/core/package.json
  2. 68
      packages/core/src/api/index.ts
  3. 2
      packages/core/src/mods/flowChart/index.tsx
  4. 24
      packages/core/src/mods/flowChart/registerServerStorage.ts
  5. 23
      packages/core/src/mods/toolBar/widgets/modifyStatus.tsx
  6. 12
      packages/core/src/utils/index.ts

1
packages/core/package.json

@ -40,6 +40,7 @@
"@antv/x6": "^0.13.0",
"ace-builds": "^1.4.12",
"antd": "^4.5.3",
"axios": "^0.21.0",
"lodash.merge": "^4.6.2",
"query-string": "^6.13.7",
"react-ace": "^9.1.3",

68
packages/core/src/api/index.ts

@ -1,9 +1,16 @@
import axios from 'axios';
import { message} from 'antd';
export interface ILocalConfig {
ip: string;
port: string;
}
export type ActionType = 'create' | 'update' | 'remove';
export enum ActionType {
create = 'create',
update = 'update',
remove = 'remove'
}
export interface IModifyGraphAction {
type: string;
@ -11,6 +18,40 @@ export interface IModifyGraphAction {
data: any;
}
interface RequestConfig {
url: string;
method?: 'get' | 'post';
params?: {[key: string]: any};
headers?: {[key: string]: string};
}
const request = (function() {
const instance = axios.create();
instance.interceptors.response.use((response: any) => {
const {data} = response || {};
const {success, msg} = data || {};
if(success) {
return data;
} else {
message.error(msg);
return Promise.reject(data);
}
});
return (config: RequestConfig) => {
const {url, method = 'post', params, headers = {}} = config;
return instance.request({
url,
method,
headers: {
'Content-Type': 'application/json;charset=utf-8',
...headers
},
data: params,
timeout: 3000
});
};
})();
export const localConfig: ILocalConfig = {
ip: '127.0.0.1',
port: '3500'
@ -37,29 +78,20 @@ export const localSave = (data: any) => {
}
export const queryGraph = (projectId: string) => {
return fetch('/api/queryGraph', {
method: 'POST',
headers: {'Content-Type': 'application/json;charset=utf-8'},
body: JSON.stringify({
return request({
url: '/api/queryGraph',
params: {
projectId
})
}).then(res => res.json()).then(res => {
const {success} = res;
if(success) {
return res;
} else {
return Promise.reject(res);
}
})
});
}
export const modifyGraph = (projectId: string, actions: IModifyGraphAction[]) => {
return fetch('/api/modifyGraph', {
method: 'POST',
headers: {'Content-Type': 'application/json;charset=utf-8'},
body: JSON.stringify({
return request({
url: '/api/modifyGraph',
params: {
projectId,
actions
})
}
});
}

2
packages/core/src/mods/flowChart/index.tsx

@ -32,7 +32,7 @@ const FlowChart: React.FC<IProps> = props => {
const { data: dsl } = res;
graph.fromJSON(dsl);
}).catch(err => {
message.error(err.msg);
console.log('query graph data failed, the error is:', err);
});
};

24
packages/core/src/mods/flowChart/registerServerStorage.ts

@ -50,10 +50,10 @@ const save = (flowChart: Graph, type: string, actionType: ActionType, data: any)
};
type ActionEventMap = {[key: string]: string[]};
const NODE_ACTION_EVENT_MAP: ActionEventMap = {
create: ['node:added'],
remove: ['node:removed'],
update: [
const nodeActionEventMap: ActionEventMap = {
[ActionType.create]: ['node:added'],
[ActionType.remove]: ['node:removed'],
[ActionType.update]: [
'node:moved',
'node:resized',
'node:rotated',
@ -64,18 +64,18 @@ const NODE_ACTION_EVENT_MAP: ActionEventMap = {
]
};
const EDGE_ACTION_EVENT_MAP: ActionEventMap = {
create: ['edge:connected'],
remove: ['edge:removed'],
update: [
const edgeActionEventMap: ActionEventMap = {
[ActionType.create]: ['edge:connected'],
[ActionType.remove]: ['edge:removed'],
[ActionType.update]: [
'edge:moved',
]
};
export const registerServerStorage = (flowChart: Graph) => {
Object.keys(NODE_ACTION_EVENT_MAP).forEach((actionType) => {
const events = NODE_ACTION_EVENT_MAP[actionType];
Object.keys(nodeActionEventMap).forEach((actionType) => {
const events = nodeActionEventMap[actionType];
events.forEach(event => {
flowChart.on(event, (args: any) => {
console.log('node event:', event, 'args:', args);
@ -84,8 +84,8 @@ export const registerServerStorage = (flowChart: Graph) => {
});
});
Object.keys(EDGE_ACTION_EVENT_MAP).forEach((actionType) => {
const events = EDGE_ACTION_EVENT_MAP[actionType];
Object.keys(edgeActionEventMap).forEach((actionType) => {
const events = edgeActionEventMap[actionType];
events.forEach(event => {
flowChart.on(event, (args: any) => {
console.log('edge event:', event, 'args:', args);

23
packages/core/src/mods/toolBar/widgets/modifyStatus.tsx

@ -15,8 +15,11 @@ interface IProps {
flowChart: Graph
}
const STATUS_TEXT_MAP = {
[Status.pending]: '',
const statusMap = {
[Status.pending]: {
color: '',
text: ''
},
[Status.syncing]: {
color: '#999',
text: '正在保存...'
@ -54,16 +57,12 @@ const ModifyStatus: React.FC<IProps> = (props) => {
};
}, []);
if(status === Status.pending) {
return null;
} else {
const {color, text} = STATUS_TEXT_MAP[status];
return (
<div className={styles.modifyStatusContainer}>
<span style={{color}}>{text}</span>
</div>
);
}
const {color, text} = statusMap[status];
return status === Status.pending ? null : (
<div className={styles.modifyStatusContainer}>
<span style={{color}}>{text}</span>
</div>
);
};
export default ModifyStatus;

12
packages/core/src/utils/index.ts

@ -14,20 +14,20 @@ export const safeGet = (obj: any, keyChain: string, defaultVal?: any): any => {
return defaultVal;
}
let retVal = obj;
let val = obj;
const keys = keyChain.split('.');
for(const key of keys) {
if(retVal[key] === undefined) {
if(val[key] === undefined) {
return defaultVal;
} else {
retVal = retVal[key];
val = val[key];
}
}
return retVal;
return val;
};
const PARSE_CONFIG = {
const parseConfig = {
skipNull: true,
skipEmptyString: true,
parseNumbers: false,
@ -35,5 +35,5 @@ const PARSE_CONFIG = {
};
export const parseQuery = (): {[key: string]: any} => {
return parse(location.search, PARSE_CONFIG);
return parse(location.search, parseConfig);
};

Loading…
Cancel
Save