+
+SDK for Graph Insight App.
+
+## 🔨 快速使用
+
+```jsx | pure
+import React from 'react';
+import { GISDK } from '@antv/gi-sdk';
+import { myAssetPackage } from './assets';
+import { config } from './config';
+
+export default () => {
+ const assets = [myAssetPackage];
+
+ return
;
+};
+```
diff --git a/packages/gi-sdk/docs/assets/CustomCanvasComponent/Component.tsx b/packages/gi-sdk/docs/assets/CustomCanvasComponent/Component.tsx
new file mode 100644
index 000000000..24c5e950a
--- /dev/null
+++ b/packages/gi-sdk/docs/assets/CustomCanvasComponent/Component.tsx
@@ -0,0 +1,32 @@
+import { CanvasEvent, NodeEvent } from '@antv/g6';
+import type { ImplementWidgetProps } from '@antv/gi-sdk';
+import { useGlobalModel, useGraph } from '@antv/gi-sdk';
+import React, { useEffect } from 'react';
+
+export const CustomCanvasComponent: React.FC
= () => {
+ const [, setGlobalModel] = useGlobalModel();
+ const [graph] = useGraph();
+
+ useEffect(() => {
+ if (!graph || graph.destroyed) return;
+
+ const clickNode = (e) => {
+ const nodeId = e.target.id;
+ setGlobalModel({ currentNode: graph?.getNodeData(nodeId), panel: true });
+ };
+
+ const clickCanvas = () => {
+ setGlobalModel({ currentNode: null, panel: false });
+ };
+
+ graph.on(NodeEvent.CLICK, clickNode);
+ graph.on(CanvasEvent.CLICK, clickCanvas);
+
+ return () => {
+ graph.off(NodeEvent.CLICK, clickNode);
+ graph.off(CanvasEvent.CLICK, clickCanvas);
+ };
+ }, [graph]);
+
+ return null;
+};
diff --git a/packages/gi-sdk/docs/assets/CustomCanvasComponent/index.tsx b/packages/gi-sdk/docs/assets/CustomCanvasComponent/index.tsx
new file mode 100644
index 000000000..594ef9463
--- /dev/null
+++ b/packages/gi-sdk/docs/assets/CustomCanvasComponent/index.tsx
@@ -0,0 +1,12 @@
+import type { ImplementWidget, ImplementWidgetProps } from '@antv/gi-sdk';
+import { CustomCanvasComponent as CustomCanvasComponent2 } from './Component';
+
+export const CustomCanvasComponent: ImplementWidget = {
+ version: 'v0.1',
+ metadata: {
+ name: 'CustomCanvasComponent',
+ displayName: '自定义图表组件',
+ description: '这是一个自定义图表组件',
+ },
+ component: CustomCanvasComponent2,
+};
diff --git a/packages/gi-sdk/docs/assets/CustomPanel/Component.tsx b/packages/gi-sdk/docs/assets/CustomPanel/Component.tsx
new file mode 100644
index 000000000..e4afd2fdd
--- /dev/null
+++ b/packages/gi-sdk/docs/assets/CustomPanel/Component.tsx
@@ -0,0 +1,24 @@
+import { ImplementWidgetProps, useGlobalModel } from '@antv/gi-sdk';
+import React from 'react';
+import { fontStyle } from '../../constant';
+
+export interface CustomPanelProps extends ImplementWidgetProps {
+ count: number;
+}
+
+export const CustomPanel: React.FC = (props) => {
+ const { count } = props;
+ const [{ currentNode }] = useGlobalModel();
+
+ const isSiderOpen = true;
+
+ return (
+
+
{count}...
+
Sider {isSiderOpen ? opened : closed}
+
+ current node: {currentNode?.id}
+
+
+
Sider
+
+ Panel {panel ? 'opened' : 'closed'}
+
+
+
+
{slotElements.default}
+
+
+ {showHeader &&
}
+
+
{slotElements.sider}
+
+ {slotElements.canvas}
+
+
{slotElements.panel}
+
+
{children}
;
diff --git a/packages/gi-sdk/docs/assets/MyAppLayout/components/index.ts b/packages/gi-sdk/docs/assets/MyAppLayout/components/index.ts
new file mode 100644
index 000000000..528228893
--- /dev/null
+++ b/packages/gi-sdk/docs/assets/MyAppLayout/components/index.ts
@@ -0,0 +1,3 @@
+export { Header } from './header';
+export { Panel } from './panel';
+export { Sider } from './sider';
diff --git a/packages/gi-sdk/docs/assets/MyAppLayout/components/panel/index.tsx b/packages/gi-sdk/docs/assets/MyAppLayout/components/panel/index.tsx
new file mode 100644
index 000000000..8d8ac93e7
--- /dev/null
+++ b/packages/gi-sdk/docs/assets/MyAppLayout/components/panel/index.tsx
@@ -0,0 +1,21 @@
+import { useGlobalModel } from '@antv/gi-sdk';
+import { Drawer } from 'antd';
+import React, { PropsWithChildren } from 'react';
+import { PREFIX } from '../../../../constant';
+
+export const Panel: React.FC = (props) => {
+ const { children } = props;
+ const [{ panel }, updateGlobalModel] = useGlobalModel();
+
+ const onClose = () => {
+ updateGlobalModel({ panel: false });
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+};
diff --git a/packages/gi-sdk/src/assets/sider/index.less b/packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.less
similarity index 96%
rename from packages/gi-sdk/src/assets/sider/index.less
rename to packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.less
index 763dbd3ed..acd5ed5fa 100644
--- a/packages/gi-sdk/src/assets/sider/index.less
+++ b/packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.less
@@ -1,4 +1,4 @@
-@import '../../global.less';
+@import '../../../../global.less';
.@{prefix}-sider {
display: flex;
@@ -11,7 +11,7 @@
height: 100%;
border-right: 1px solid var(--border-color);
}
-
+
.@{prefix}-sider-icon {
position: absolute;
width: 24px;
diff --git a/packages/gi-sdk/src/assets/sider/index.tsx b/packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.tsx
similarity index 57%
rename from packages/gi-sdk/src/assets/sider/index.tsx
rename to packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.tsx
index 2466dcb0f..9ffad812e 100644
--- a/packages/gi-sdk/src/assets/sider/index.tsx
+++ b/packages/gi-sdk/docs/assets/MyAppLayout/components/sider/index.tsx
@@ -1,14 +1,13 @@
-import React, { PropsWithChildren } from 'react';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
+import { useGlobalModel } from '@antv/gi-sdk';
+import React, { PropsWithChildren } from 'react';
import { CSSTransition } from 'react-transition-group';
-import { PREFIX } from '../../constants';
-import { useGlobalModel } from '../../context';
+import { PREFIX } from '../../../../constant';
import './index.less';
-export const Sider: React.FC = props => {
+export const Sider: React.FC = (props) => {
const { children } = props;
- const [globalModel, updateGlobalModel] = useGlobalModel();
- const isSiderOpen = Boolean(globalModel.sider);
+ const [{ sider }, updateGlobalModel] = useGlobalModel();
return (
@@ -17,13 +16,13 @@ export const Sider: React.FC = props => {
{
- updateGlobalModel({ sider: !globalModel.sider });
+ updateGlobalModel({ sider: !sider });
}}
>
- {isSiderOpen ? : }
+ {sider ? : }