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. 15
      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", "@antv/x6": "^0.13.0",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"antd": "^4.5.3", "antd": "^4.5.3",
"axios": "^0.21.0",
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"query-string": "^6.13.7", "query-string": "^6.13.7",
"react-ace": "^9.1.3", "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 { export interface ILocalConfig {
ip: string; ip: string;
port: string; port: string;
} }
export type ActionType = 'create' | 'update' | 'remove'; export enum ActionType {
create = 'create',
update = 'update',
remove = 'remove'
}
export interface IModifyGraphAction { export interface IModifyGraphAction {
type: string; type: string;
@ -11,6 +18,40 @@ export interface IModifyGraphAction {
data: any; 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 = { export const localConfig: ILocalConfig = {
ip: '127.0.0.1', ip: '127.0.0.1',
port: '3500' port: '3500'
@ -37,29 +78,20 @@ export const localSave = (data: any) => {
} }
export const queryGraph = (projectId: string) => { export const queryGraph = (projectId: string) => {
return fetch('/api/queryGraph', { return request({
method: 'POST', url: '/api/queryGraph',
headers: {'Content-Type': 'application/json;charset=utf-8'}, params: {
body: JSON.stringify({
projectId 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[]) => { export const modifyGraph = (projectId: string, actions: IModifyGraphAction[]) => {
return fetch('/api/modifyGraph', { return request({
method: 'POST', url: '/api/modifyGraph',
headers: {'Content-Type': 'application/json;charset=utf-8'}, params: {
body: JSON.stringify({
projectId, projectId,
actions actions
}) }
}); });
} }

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

@ -32,7 +32,7 @@ const FlowChart: React.FC<IProps> = props => {
const { data: dsl } = res; const { data: dsl } = res;
graph.fromJSON(dsl); graph.fromJSON(dsl);
}).catch(err => { }).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[]}; type ActionEventMap = {[key: string]: string[]};
const NODE_ACTION_EVENT_MAP: ActionEventMap = { const nodeActionEventMap: ActionEventMap = {
create: ['node:added'], [ActionType.create]: ['node:added'],
remove: ['node:removed'], [ActionType.remove]: ['node:removed'],
update: [ [ActionType.update]: [
'node:moved', 'node:moved',
'node:resized', 'node:resized',
'node:rotated', 'node:rotated',
@ -64,18 +64,18 @@ const NODE_ACTION_EVENT_MAP: ActionEventMap = {
] ]
}; };
const EDGE_ACTION_EVENT_MAP: ActionEventMap = { const edgeActionEventMap: ActionEventMap = {
create: ['edge:connected'], [ActionType.create]: ['edge:connected'],
remove: ['edge:removed'], [ActionType.remove]: ['edge:removed'],
update: [ [ActionType.update]: [
'edge:moved', 'edge:moved',
] ]
}; };
export const registerServerStorage = (flowChart: Graph) => { export const registerServerStorage = (flowChart: Graph) => {
Object.keys(NODE_ACTION_EVENT_MAP).forEach((actionType) => { Object.keys(nodeActionEventMap).forEach((actionType) => {
const events = NODE_ACTION_EVENT_MAP[actionType]; const events = nodeActionEventMap[actionType];
events.forEach(event => { events.forEach(event => {
flowChart.on(event, (args: any) => { flowChart.on(event, (args: any) => {
console.log('node event:', event, 'args:', args); console.log('node event:', event, 'args:', args);
@ -84,8 +84,8 @@ export const registerServerStorage = (flowChart: Graph) => {
}); });
}); });
Object.keys(EDGE_ACTION_EVENT_MAP).forEach((actionType) => { Object.keys(edgeActionEventMap).forEach((actionType) => {
const events = EDGE_ACTION_EVENT_MAP[actionType]; const events = edgeActionEventMap[actionType];
events.forEach(event => { events.forEach(event => {
flowChart.on(event, (args: any) => { flowChart.on(event, (args: any) => {
console.log('edge event:', event, 'args:', args); console.log('edge event:', event, 'args:', args);

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

@ -15,8 +15,11 @@ interface IProps {
flowChart: Graph flowChart: Graph
} }
const STATUS_TEXT_MAP = { const statusMap = {
[Status.pending]: '', [Status.pending]: {
color: '',
text: ''
},
[Status.syncing]: { [Status.syncing]: {
color: '#999', color: '#999',
text: '正在保存...' text: '正在保存...'
@ -54,16 +57,12 @@ const ModifyStatus: React.FC<IProps> = (props) => {
}; };
}, []); }, []);
if(status === Status.pending) { const {color, text} = statusMap[status];
return null; return status === Status.pending ? null : (
} else {
const {color, text} = STATUS_TEXT_MAP[status];
return (
<div className={styles.modifyStatusContainer}> <div className={styles.modifyStatusContainer}>
<span style={{color}}>{text}</span> <span style={{color}}>{text}</span>
</div> </div>
); );
}
}; };
export default ModifyStatus; 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; return defaultVal;
} }
let retVal = obj; let val = obj;
const keys = keyChain.split('.'); const keys = keyChain.split('.');
for(const key of keys) { for(const key of keys) {
if(retVal[key] === undefined) { if(val[key] === undefined) {
return defaultVal; return defaultVal;
} else { } else {
retVal = retVal[key]; val = val[key];
} }
} }
return retVal; return val;
}; };
const PARSE_CONFIG = { const parseConfig = {
skipNull: true, skipNull: true,
skipEmptyString: true, skipEmptyString: true,
parseNumbers: false, parseNumbers: false,
@ -35,5 +35,5 @@ const PARSE_CONFIG = {
}; };
export const parseQuery = (): {[key: string]: any} => { export const parseQuery = (): {[key: string]: any} => {
return parse(location.search, PARSE_CONFIG); return parse(location.search, parseConfig);
}; };

Loading…
Cancel
Save