Skip to content

Commit

Permalink
feat: add style mappers
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Oct 10, 2023
1 parent 9a7dc91 commit 43c8f61
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 65 deletions.
137 changes: 72 additions & 65 deletions packages/gi-sdk/src/GISDK.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import Graphin, { GraphinContext } from '@antv/graphin';
import { original } from 'immer';
import React, { useEffect, useMemo, useRef } from 'react';
import { IntlProvider, useIntl } from 'react-intl';
import { useImmer } from 'use-immer';
import { defaultInitializerCfg } from './Initializer';
import { deepClone } from './components/const';
import getComponents from './hooks/useComponents';
import './index.less';
import * as utils from './process';
import { createUuid } from './process/common';
import { getMapperByCfg } from './process/getMapperByCfg';
import type { GIComponentConfig, GIGraphData, Props, State } from './typing';

let updateHistoryTimer: number;

let HAS_INIT = false;

const getComponentsCfg = (componentsCfg, pageLayout) => {
let GICC_LAYOUT = { id: 'EmptyLayout', props: {} };
let INITIALIZER;
Expand Down Expand Up @@ -105,60 +104,63 @@ const GISDK = (props: Props) => {
},
//@ts-ignore
GISDK_ID,
//@ts-ignore
nodeMapper: null,
});

const { data, layout, components, initializer, theme, transform, GICC_LAYOUT, HAS_GRAPH, graph } = state;

// const handleGraphInit = graph => {
// updateState(draft => {
// draft.graph = graph;
// draft.HAS_GRAPH = true;
// });
// };
useEffect(() => {
updateState(draft => {
draft.config = config;
});
}, [config]);

useEffect(() => {
// init...
if (!HAS_INIT) {
console.log('%c GISDK INTI ....', 'color:rgba(255,87,34,0.8)', graphRef);
HAS_INIT = true;
const { assets, config, services } = props;

const { GICC_LAYOUT, INITIALIZER, componentsCfg } = getComponentsCfg(config.components, config.pageLayout);
const transform = getTransformer(config.nodes, config.edges, ElementAssets);
console.log('%c GISDK INTI ....', 'color:rgba(255,87,34,0.8)', graphRef);

updateState(draft => {
/** initializer */
if (INITIALIZER.id !== draft.initializer?.id) {
draft.initializer = INITIALIZER;
}
/** components */
draft.config.components = componentsCfg;
draft.components = componentsCfg;
/** layout */
draft.config.layout = config.layout;
draft.layout = config.layout.props || {};
draft.layoutCache = false;
/** styling */
draft.transform = transform;
draft.config.nodes = config.nodes;
draft.config.edges = config.edges;
if (draft.data.nodes.length !== 0) {
const preData = original(draft.data);
// 当节点和边的Schema配置变化的时候，默认是重置视觉映射;
const newData = transform(preData, true);
//@ts-ignore
draft.data = newData;
}

draft.GICC_LAYOUT = GICC_LAYOUT;
/** props */
draft.config = config;
draft.servives = services;
/** flag */
draft.graph = graphRef.current;
draft.HAS_GRAPH = true;
});
}
const { assets, config, services } = props;

const { GICC_LAYOUT, INITIALIZER, componentsCfg } = getComponentsCfg(config.components, config.pageLayout);
const transform = getTransformer(config.nodes, config.edges, ElementAssets);
const nodeMapper = getMapperByCfg(config.nodes, ElementAssets);
const edgeMapper = getMapperByCfg(config.edges, ElementAssets);
updateState(draft => {
/** initializer */
if (INITIALIZER.id !== draft.initializer?.id) {
draft.initializer = INITIALIZER;
}
/** components */
draft.config.components = componentsCfg;
draft.components = componentsCfg;
/** layout */
draft.config.layout = config.layout;
draft.layout = config.layout.props || {};
draft.layoutCache = false;
/** styling */
draft.transform = transform;
draft.config.nodes = config.nodes;
draft.config.edges = config.edges;
// if (draft.data.nodes.length !== 0) {
// const preData = original(draft.data);
// // 当节点和边的Schema配置变化的时候，默认是重置视觉映射;
// const newData = transform(preData, true);
// //@ts-ignore
// draft.data = newData;
// }

draft.GICC_LAYOUT = GICC_LAYOUT;
/** props */
draft.config = config;
draft.servives = services;
/** flag */
draft.graph = graphRef.current;
draft.HAS_GRAPH = true;
draft.nodeMapper = nodeMapper;
draft.edgeMapper = edgeMapper;
});
}, []);

const {
Expand Down Expand Up @@ -200,14 +202,8 @@ const GISDK = (props: Props) => {
let otherOptions = {};

updateState(draft => {
draft.layout = {
type,
...options,
...otherOptions,
// 保证更新布局，因为有些函数映射的参数在 Graphin 内部被 JSON.stringify 后无法对比出区别
seed: Math.random(),
};
draft.config.layout = layoutCfg;
draft.layout = layoutCfg.props;
draft.layoutCache = false;
});
}, [layoutCfg, HAS_GRAPH]);
Expand All @@ -218,19 +214,25 @@ const GISDK = (props: Props) => {
return;
}
console.log('%c GISDK STYLE ....', 'color:rgba(255,87,34,0.8)');

const nodeMapper = getMapperByCfg(nodesCfg, ElementAssets);
const edgeMapper = getMapperByCfg(edgesCfg, ElementAssets);

const transform = getTransformer(nodesCfg, edgesCfg, ElementAssets);

updateState(draft => {
if (draft.data.nodes.length !== 0) {
const preData = original(draft.data);
// 当节点和边的Schema配置变化的时候，默认是重置视觉映射;
const newData = transform(preData, true);
//@ts-ignore
draft.data = newData;
}
// if (draft.data.nodes.length !== 0) {
// const preData = original(draft.data);
// // 当节点和边的Schema配置变化的时候，默认是重置视觉映射;
// const newData = transform(preData, true);
// //@ts-ignore
// draft.data = newData;
// }
draft.transform = transform;
draft.config.nodes = nodesCfg;
draft.config.edges = edgesCfg;
draft.nodeMapper = nodeMapper;
draft.edgeMapper = edgeMapper;
});
}, [nodesCfg, edgesCfg, HAS_GRAPH]);

Expand Down Expand Up @@ -292,7 +294,7 @@ const GISDK = (props: Props) => {
// }
};

console.log('%c GISDK RENDER....', 'color:rgba(255,87,34,1)', HAS_GRAPH, state.initialized);
console.log('%c GISDK RENDER....', 'color:rgba(255,87,34,1)', HAS_GRAPH, state.initialized, state);
const ContextValue = {
...state,
GISDK_ID,
Expand All @@ -301,7 +303,6 @@ const GISDK = (props: Props) => {
sourceDataMap,
HAS_GRAPH,
graph: graph,

updateContext: updateState,
updateData: res => {
updateState(draft => {
Expand Down Expand Up @@ -357,6 +358,8 @@ const GISDK = (props: Props) => {
return null;
}

const layout2 = useMemo(() => deepClone(layout), [layout]);

const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets);

Expand All @@ -371,10 +374,14 @@ const GISDK = (props: Props) => {
<Graphin
container={`${GISDK_ID}-graphin-container`}
style={{ transform: 'scale(1)' }}
//@ts-ignore
node={state.nodeMapper}
edge={state.edgeMapper}
data={data}
//@ts-ignore
layout={layout}
layout={layout2}
// onInit={handleGraphInit}
//@ts-ignore
ref={graphRef}
/>
{HAS_GRAPH && <InitializerComponent {...InitializerProps} />}
Expand Down
55 changes: 55 additions & 0 deletions packages/gi-sdk/src/process/getMapperByCfg.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { GIAssets, GIConfig } from '../typing';
import { filterByTopRule } from './filterByRules';

/**
*
* @param elementType 元素类型：node or edge
* @param data 数据
* @param config GISDK配置
* @param ElementAssets 元素资产
* @param reset 是否重置transform
* @returns nodes or edges
*/

export const getMapperByCfg = (
config: Partial<GIConfig['edges']> | Partial<GIConfig['nodes']>,
ElementAssets: GIAssets['elements'],
reset?: boolean,
) => {
/** 默认的Mapper */
const dumpMapper = item => item;
if (!config) {
return dumpMapper;
}
console.log('start Mapper.....', config);
const mapper = item => {
// [ruleA,ruleB,ruleC] RuleC 的优先级最高
const reverseCfg = [...config].reverse();
for (const cfg of reverseCfg) {
if (!cfg) {
return;
}
const { id, expressions, logic } = cfg;

if (!ElementAssets) {
console.error('ElementAssets not available');
return [];
}
const Element = ElementAssets[id];
//@ts-ignore
const isMatch = filterByTopRule(item.data, { logic, expressions });

if (isMatch) {
// console.log(id, cfg, item);
//@ts-ignore
const mapper = Element.registerTransform(cfg, reset);
//@ts-ignore
const formateNode = mapper(item);
// console.log(id, formateNode, 'isMatch', isMatch, expressions?.length, item);
//@ts-ignore
return formateNode;
}
}
};
return mapper;
};
2 changes: 2 additions & 0 deletions packages/gi-sdk/src/typing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export interface State<

/** 是否使用缓存的布局 */
layoutCache: boolean;
nodeMapper: (n: any) => any;
edgeMapper: (n: any) => any;
}

export interface Props {
Expand Down

0 comments on commit 43c8f61

Please sign in to comment.