refactor: gi-sdk

packages/gi-sdk/.umirc.ts

@@ -0,0 +1,16 @@
+export default {
+  resolve: { includes: ['docs'] },
+  externals: {
+    react: 'window.React',
+    'react-dom': 'window.ReactDOM',
+    '@antv/g6': 'window.G6V5',
+    antd: 'window.antd',
+  },
+  links: [{ href: 'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.css', rel: 'stylesheet' }],
+  scripts: [
+    'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.development.js',
+    'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.development.js',
+    'https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.11/dist/g6.min.js',
+    'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.min.js',
+  ],
+};

packages/gi-sdk/README.md

@@ -1,66 +1,7 @@
 ## GISDK 组件
 
-> WIP
-
-## Studio 组件
-
-通过接口，获得应用渲染的配置参数，从而让用户可以这么实现
-
 ```jsx
-export default () => {
-  return <window.GISDK.Studio id="xxxxx" service={getProject} />;
-};
-```
-
-组件属性说明
-
-- id：studio 的 唯一 id，可以通过接口获得全部的配置参数
-
-- service： 第三方托管平台提供的接口，类型：`POST`
-
-```js
-// 入参
-const request = {
-  id: 'app-xxx',
-};
-// 出参
-const response = {
-  workbook: {
-    id: 'd3a818ea-f833-4229-85ea-a6670dae4a18',
-    name: 'GI',
-    activeAssetsKeys: {},
-    projectConfig: {
-      nodes: [],
-      edges: [],
-      components: [],
-    },
-    themes: [],
-  },
-  dataset: {
-    id: 'ds_f16fce61-aa3e-420d-a6cc-6b409f9aa37e',
-    engineContext: {
-      engineId: 'R+',
-      schemaData: {},
-    },
-    data: {},
-  },
-  deps: {
-    react: '17.x',
-    'react-dom': '17.x',
-    localforage: '1.10.0',
-    antd: '4.24.8',
-    '@antv/gi-theme-antd': '0.4.2',
-    '@antv/g6': '4.8.14',
-    '@antv/graphin': '2.7.16',
-    '@antv/gi-sdk': '2.3.5',
-  },
-  GI_ASSETS_PACKAGES: {
-    GI_ASSETS_BASIC: {
-      name: '@antv/gi-assets-basic',
-      version: '2.3.6',
-      url: 'https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.3.6/dist/index.min.js',
-      global: 'GI_ASSETS_BASIC',
-    },
-  },
-};
+import React from 'react';
+import DEMO from './docs';
+export default DEMO;
 ```

packages/gi-sdk/docs/index.tsx

@@ -0,0 +1,124 @@
+import GISDK, { Initializer, SimpleEdge, SimpleNode, useContext } from '@antv/gi-sdk';
+import { Utils } from '@antv/graphin';
+import React from 'react';
+interface DEMOProps {}
+
+const Counter = props => {
+  const { graph, updateContext } = useContext();
+
+  const { title } = props;
+  const nodes = graph.getAllNodesData().length;
+  console.log('Counter render....', nodes);
+  const handleClick = () => {
+    const newData = Utils.mock(Math.round(Math.random() * 300))
+      .circle()
+      .graphin();
+
+    const preData = graph.getAllNodesData().length;
+    console.log('Pre Counts', preData);
+
+    updateContext(draft => {
+      draft.data = newData;
+    });
+  };
+  return (
+    <div style={{ position: 'absolute', top: '0px', left: '0px' }}>
+      {title}: {nodes}
+      <button onClick={handleClick}>add node</button>
+    </div>
+  );
+};
+
+const CounterAsset = {
+  info: {
+    id: 'Counter',
+    type: 'AUTO',
+  },
+  registerMeta: () => {
+    return {};
+  },
+  component: Counter,
+};
+
+const assets = {
+  elements: {
+    SimpleEdge,
+    SimpleNode,
+  },
+  layouts: {},
+  components: {
+    Initializer,
+    Counter: CounterAsset,
+  },
+};
+
+const config = {
+  nodes: [{ id: 'SimpleNode' }],
+  edges: [{ id: 'SimpleEdge' }],
+  components: [
+    {
+      id: 'Initializer',
+      type: 'INITIALIZER',
+      name: '初始化器',
+      props: {
+        serviceId: 'GI/GI_SERVICE_INTIAL_GRAPH',
+        schemaServiceId: 'GI/GI_SERVICE_SCHEMA',
+        GI_INITIALIZER: true,
+        aggregate: false,
+        transByFieldMapping: false,
+      },
+    },
+    {
+      id: 'Counter',
+      type: 'AUTO',
+      props: {
+        title: '画布节点数量',
+      },
+    },
+  ],
+  layout: {
+    id: 'Concentric',
+    props: {
+      type: 'concentric',
+    },
+  },
+  pageLayout: {},
+};
+
+const services = [
+  {
+    name: '初始化查询',
+    method: 'GET',
+    id: 'GI/GI_SERVICE_INTIAL_GRAPH',
+    service: async () => {
+      return new Promise(resolve => {
+        resolve({
+          nodes: [
+            { id: 'node-1', data: {} },
+            { id: 'node-2', data: {} },
+          ],
+          edges: [],
+        });
+      });
+    },
+  },
+  {
+    name: '查询图模型',
+    method: 'GET',
+    id: 'GI/GI_SERVICE_SCHEMA',
+    service: async () => {
+      return new Promise(resolve => {
+        resolve({
+          nodes: [],
+          edges: [],
+        });
+      });
+    },
+  },
+];
+
+const DEMO: React.FunctionComponent<DEMOProps> = props => {
+  return <GISDK assets={assets} config={config} services={services} />;
+};
+
+export default DEMO;

packages/gi-sdk/package.json

@@ -19,6 +19,7 @@
     "*.less"
   ],
   "scripts": {
+    "docs": "dumi dev",
     "build": "npm run clean && npm run build:es & npm run build:umd",
     "build:es": "father build",
     "build:umd": "webpack --mode production  -c ../../webpack.config.js --env path=/packages/gi-sdk",
@@ -31,8 +32,9 @@
     "postpublish": "tnpm sync @antv/gi-sdk"
   },
   "dependencies": {
+    "dumi": "^1.1.50",
     "@antv/graphin": "workspace:*",
-    "@antv/g6": "5.0.0-beta.3",
+    "@antv/g6": "5.0.0-beta.5",
     "@aligov/global-locale": "^1.0.5",
     "@aligov/global-string-format": "^1.0.7",
     "@ant-design/icons": "^4.7.0",