Skip to content

Commit

Permalink
feat: update sdk
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Oct 11, 2023
1 parent 15e4937 commit b53c459
Show file tree
Hide file tree
Showing 9 changed files with 265 additions and 216 deletions.
32 changes: 16 additions & 16 deletions packages/gi-assets-basic/src/components/Toolbar/Component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { utils } from '@antv/gi-sdk';
import { useComponents, useContext, utils } from '@antv/gi-sdk';
import React, { memo } from 'react';
import Toolbar from './Toolbar';
const { getPositionStyles } = utils;
Expand All @@ -10,30 +10,30 @@ export interface ToolbarProps {
assets?: any;
placement: string;
offset: number[];
GI_CONTAINER: string[];
}

/**
* 获取根据容器资产配置，获取容器内资产实例
*
* @param context GISDK 上下文
* @param containers 容器资产 props.containers
* @returns
*/

const ToolbarContainer: React.FunctionComponent<ToolbarProps> = props => {
const { direction = 'horizontal', components, assets, placement, offset } = props;
const { direction = 'horizontal', placement, offset, GI_CONTAINER } = props;
const { assets, config } = useContext();
const { components } = useComponents(GI_CONTAINER, config, assets);
const positionStyles = getPositionStyles(placement, offset);

const sortedComponents = components.sort((a, b) => a.props?.GI_CONTAINER_INDEX - b.props?.GI_CONTAINER_INDEX);
return (
<>
<Toolbar direction={direction} style={positionStyles}>
{sortedComponents.map(item => {
if (!item) {
return null;
}
const { props: itemProps, id: itemId } = item;
const asset = assets[itemId];
if (!asset) {
console.warn(`asset: ${itemId} not found`);
return null;
}
const { component: Component } = asset;
{components.map(item => {
return (
<span key={itemId}>
<Component {...itemProps} />
<span key={item.id}>
<item.component {...item.props} />
</span>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion packages/gi-assets-basic/src/elements/SimpleEdge/registerTransform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const transform = (config: GIEdgeConfig, reset?: boolean) => {
},
preStyle,
);
console.log('edge.......', id);
// console.log('edge.......', id);

return {
source,
Expand Down
2 changes: 1 addition & 1 deletion packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => {
},
},
};
console.log('keyshape', node.id);
// console.log('keyshape', node.id);
return {
id: node.id,
data: {
Expand Down
210 changes: 40 additions & 170 deletions packages/gi-sdk/src/GISDK.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,23 @@ import React, { useEffect, useMemo } from 'react';
import { IntlProvider, useIntl } from 'react-intl';
import { useImmer } from 'use-immer';
import { deepClone } from './components/const';
import getComponents from './hooks/useComponents';
import { getComponents } from './hooks/useComponents';
import useConstant from './hooks/useConstant';
import './index.less';
import { createUuid } from './process/common';
import { getMapperByCfg } from './process/getMapperByCfg';
import type { GIGraphData, Props, State } from './typing';

let updateHistoryTimer: number;

const getComponentsCfg = (componentsCfg, pageLayout) => {
let GICC_LAYOUT = { id: 'EmptyLayout', props: {} };
let INITIALIZER;
if (pageLayout) GICC_LAYOUT = pageLayout;
componentsCfg.forEach(item => {
if (pageLayout) {
if (item.id === pageLayout.id) {
GICC_LAYOUT = item;
return;
}
} else if (item.type === 'GICC_LAYOUT') {
GICC_LAYOUT = item;
return;
}
if (item.type === 'INITIALIZER' || item.props.GI_INITIALIZER) {
INITIALIZER = item;
return;
}
});
return { componentsCfg, GICC_LAYOUT, INITIALIZER };
};

const GISDK = (props: Props) => {
const { children, assets, id, services, locales } = props;
const { language = 'zh-CN', ...localeMessages } = locales || {};

/** get gisdk id */
const GISDK_ID = React.useMemo(() => {
if (!id) {
const defaultId = `${Math.random().toString(36).substr(2)}`;
console.warn(`⚠️: props.id 缺失，默认生成 GISDK_ID : ${defaultId} 用于多实例管理`);
return defaultId;
}
return id;
}, []);

const { components: ComponentAssets, elements: ElementAssets, layouts: LayoutAssets } = assets;
const { language = 'zh-CN', ...localeMessages } = locales || {};

// registerShapes(ElementAssets);
// registerLayouts(LayoutAssets);

const [state, updateState] = useImmer<State>({
config: props.config,
layout: props.config.layout.props,
data: { nodes: [], edges: [] } as GIGraphData,
propertyGraphData: undefined,
schemaData: {
Expand All @@ -62,7 +29,7 @@ const GISDK = (props: Props) => {
},
HAS_GRAPH: false,
source: { nodes: [], edges: [] } as GIGraphData,
config: props.config,

isLoading: false,
isContextReady: false,
initialized: false,
Expand All @@ -76,170 +43,73 @@ const GISDK = (props: Props) => {
const { data, HAS_GRAPH, graph, config } = state;
/** 计算逻辑 */
const { layout: layoutCfg, components: componentsCfg = [], nodes: nodesCfg, edges: edgesCfg, pageLayout } = config;
const constants = useConstant(id, state, updateState);
const { GISDK_ID } = constants;

/**
* 响应 graph 的变化
*/
const handleGraphInit = ins => {
updateState(draft => {
draft.graph = ins;
draft.HAS_GRAPH = true;
});
};

/**
* 响应 props.config 变化
*/
useEffect(() => {
console.log('gisdk props config change.....');
updateState(draft => {
draft.config = props.config;
//@ts-ignore
draft.layout = props.config.layout.props;
});
}, [props.config]);

const { GICC_LAYOUT, INITIALIZER, ComponentCfg } = useMemo(() => {
const { GICC_LAYOUT, INITIALIZER, componentsCfg: ComponentCfg } = getComponentsCfg(componentsCfg, pageLayout);
return {
GICC_LAYOUT,
INITIALIZER,
ComponentCfg,
};
}, [componentsCfg, pageLayout, HAS_GRAPH]);

const sourceDataMap = useMemo(() => {
const nodes = state.source.nodes.reduce((acc, cur) => {
acc[cur.id] = cur;
return acc;
}, {});

const edges = state.source.edges.reduce((acc, cur) => {
acc[cur.id] = cur;
return acc;
}, {});

return {
nodes,
edges,
};
}, [state.source]);

const stopForceSimulation = () => {
// if (graphinRef.current) {
// const { layout, graph } = graphinRef.current;
// const { instance } = layout;
// if (instance) {
// const { type, simulation } = instance;
// if (type === 'graphin-force') {
// simulation.stop();
// return;
// }
// }
// const layoutController = graph.get('layoutController');
// const layoutMethod = layoutController.layoutMethods?.[0];
// if (layoutMethod?.type === 'force2') {
// layoutMethod.stop();
// }
// }
};
const restartForceSimulation = (nodes = []) => {
// if (graphinRef.current) {
// const { layout: graphLayout, graph } = graphinRef.current;
// const { instance } = graphLayout;
// if (instance) {
// const { type, simulation } = instance;
// if (type === 'graphin-force') {
// simulation.restart(nodes, graph);
// return;
// }
// }
// const layoutController = graph.get('layoutController');
// const layoutMethod = layoutController.layoutMethods?.[0];
// if (layoutMethod?.type === 'force2') {
// graph.updateLayout({ animate: true, disableTriggerLayout: false });
// updateState(draft => {
// draft.layout.animate = true;
// });
// }
// }
};

console.log('%c GISDK RENDER....', 'color:rgba(255,87,34,1)', HAS_GRAPH, state.initialized, state);
/**
* 响应 config.components 变化，重新渲染组件
*/
const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
useMemo(() => {
return getComponents(componentsCfg, pageLayout, ComponentAssets);
}, [componentsCfg, pageLayout, HAS_GRAPH]);

/**
* 响应 config.layout 变化，重新布局
*/
const layout = useMemo(() => {
return deepClone(layoutCfg.props);
}, [layoutCfg]);

const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
getComponents({
config: { pageLayout, components: ComponentCfg },
initializer: INITIALIZER,
GICC_LAYOUT,
components: ComponentCfg,
GISDK_ID,
propsComponentsCfg: ComponentCfg,
ComponentAssets,
});

/** 节点样式映射 */
/**
* 响应 config.nodes 变化，重新设置节点样式
*/
const nodeMapper = useMemo(() => getMapperByCfg(nodesCfg, ElementAssets), [nodesCfg]);
/** 边样式映射 */
/**
* 响应 config.edges 变化，重新设置节点样式
*/
const edgeMapper = useMemo(() => getMapperByCfg(edgesCfg, ElementAssets), [edgesCfg]);

/**
* 组装 context value
*/
const ContextValue = {
...state,
...constants,
layout,
GISDK_ID,
services,
assets,
sourceDataMap,
HAS_GRAPH,
graph,
updateContext: updateState,
updateData: res => {
updateState(draft => {
const newData = res;
draft.data = newData;
draft.source = newData;
draft.layoutCache = false;
});
},
updateLayout: res => {
updateState(draft => {
draft.config.layout = res;
draft.layoutCache = false;
});
},
updateDataAndLayout: (res, lay) => {
updateState(draft => {
const newData = res;
draft.data = newData;
draft.source = newData;
draft.config.layout = lay;
draft.layoutCache = false;
});
},
// 更新历史记录
updateHistory: param => {
const time = new Date().getTime();

const fn = () => {
updateState(draft => {
// @ts-ignore
draft.history = (draft.history || []).concat([
{
id: createUuid(),
timestamp: time,
...param,
},
]);
});
};
// 防止频繁更新导致的重复 updateHistory
// 同时，间隔一定时间再更新到历史栈中，保证画布数据已经更新完成
if (updateHistoryTimer) window.clearTimeout(updateHistoryTimer);
updateHistoryTimer = window.setTimeout(fn, 500);
},
stopForceSimulation: stopForceSimulation,
restartForceSimulation: restartForceSimulation,
/** props */
assets,
services,
locales,
useIntl,
language,
};

console.log('%c GISDK RENDER....', 'color:rgba(255,87,34,1)', HAS_GRAPH, state.initialized, state);
return (
<div id={`${GISDK_ID}-container`} style={{ width: '100%', height: '100%', position: 'relative', ...props.style }}>
{/* @ts-ignore */}
Expand Down
Loading

0 comments on commit b53c459

Please sign in to comment.