From 2794852bd915fb5e57f4c69b6a742878d563061f Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Tue, 10 Oct 2023 17:41:48 +0800 Subject: [PATCH] feat: update docs --- packages/gi-sdk/.umirc.ts | 2 +- packages/gi-sdk/docs/const.tsx | 864 ++++++++++++++++++ packages/gi-sdk/docs/index.tsx | 101 +- .../SimpleNode/registerTransform.ts | 2 +- packages/gi-site/.umirc.ts | 2 +- packages/graphin/.umirc.ts | 2 +- packages/graphin/src/ExtendGraph.tsx | 22 +- packages/graphin/src/Graphin.tsx | 82 +- .../src/styling/node-style-transform.ts | 2 +- 9 files changed, 1020 insertions(+), 59 deletions(-) create mode 100644 packages/gi-sdk/docs/const.tsx diff --git a/packages/gi-sdk/.umirc.ts b/packages/gi-sdk/.umirc.ts index a87aae82d..660efa907 100644 --- a/packages/gi-sdk/.umirc.ts +++ b/packages/gi-sdk/.umirc.ts @@ -10,7 +10,7 @@ export default { 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/antv/g6/5.0.0-beta.20/dist/g6.min.js', 'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.min.js', ], }; diff --git a/packages/gi-sdk/docs/const.tsx b/packages/gi-sdk/docs/const.tsx new file mode 100644 index 000000000..8e5d75d28 --- /dev/null +++ b/packages/gi-sdk/docs/const.tsx @@ -0,0 +1,864 @@ +export const data = { + nodes: [ + { + id: 'account_7', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-03T00:00:00', + icon: 'account_balance', + id: 'account_7', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_20', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-05T00:00:00', + icon: 'account_balance', + id: 'account_20', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_55', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-07T00:00:00', + icon: 'account_balance', + id: 'account_55', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_81', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-15T00:00:00', + icon: 'account_balance', + id: 'account_81', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_103', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-15T00:00:00', + icon: 'account_balance', + id: 'account_103', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_901', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-03T00:00:00', + icon: 'account_balance', + id: 'account_901', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_902', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-10T00:00:00', + icon: 'account_balance', + id: 'account_902', + is_different_bank: 0, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_903', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-09T00:00:00', + icon: 'account_balance', + id: 'account_903', + is_different_bank: 1, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'account_904', + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + data: { + create_date: '2019-01-08T00:00:00', + icon: 'account_balance', + id: 'account_904', + is_different_bank: 1, + data: {}, + defaultStyle: {}, + }, + }, + { + id: 'customer_7', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_7', + data: {}, + defaultStyle: {}, + address: '-', + customer_type: 'retail', + first_name: '-', + last_name: '-', + phone: '-', + remarks: "high-value IB txn into customer 103's account", + risk_category: 'medium', + risk_score: 50, + }, + }, + { + id: 'customer_20', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_20', + data: {}, + defaultStyle: {}, + address: '-', + customer_type: 'retail', + first_name: '-', + last_name: '-', + phone: '-', + remarks: "high-value IB txn into customer 103's account", + risk_category: 'medium', + risk_score: 50, + }, + }, + { + id: 'customer_55', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_55', + data: {}, + defaultStyle: {}, + address: '-', + customer_type: 'retail', + first_name: '-', + last_name: '-', + phone: '-', + remarks: "high-value IB txn into customer 103's account", + risk_category: 'medium', + risk_score: 50, + }, + }, + { + id: 'customer_81', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_81', + data: {}, + defaultStyle: {}, + address: '-', + customer_type: 'retail', + first_name: '-', + last_name: '-', + phone: '-', + remarks: "high-value IB txn into customer 103's account", + risk_category: 'medium', + risk_score: 50, + }, + }, + { + id: 'customer_103', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_103', + data: {}, + defaultStyle: {}, + address: '103 RD', + customer_type: 'retail', + first_name: 'john', + last_name: 'doe', + phone: '+65 0000 0103', + remarks: 'high-value purchases from luxury retailer. source of funds from 4 related accounts', + risk_category: 'high', + risk_score: 99, + }, + }, + { + id: 'customer_901', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_901', + data: {}, + defaultStyle: {}, + address: '901 RD', + customer_type: 'retail', + first_name: 'jane', + last_name: 'doe', + phone: '+65 0000 0103', + remarks: + "source of funds for customer 103's purchase of luxury items. customer has same phone number as customer 103.", + risk_category: 'medium', + risk_score: 74, + }, + }, + { + id: 'customer_902', + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: 'account_box', + id: 'customer_902', + data: {}, + defaultStyle: {}, + address: '103 RD', + customer_type: 'retail', + first_name: 'jim', + last_name: 'smith', + phone: '+65 0000 0902', + remarks: + "source of funds for customer 103's purchase of luxury items. customer has same address as customer 103.", + risk_category: 'medium', + risk_score: 74, + }, + }, + { + id: 'other_banks', + nodeType: '-', + nodeTypeKeyFromProperties: 'icon', + data: { + icon: '-', + id: 'other_banks', + data: {}, + defaultStyle: {}, + address: '-', + customer_type: '-', + first_name: '-', + last_name: '-', + phone: '-', + remarks: 'other banks', + risk_category: '-', + risk_score: '-', + }, + }, + ], + edges: [ + { + source: 'account_103', + target: 'account_904', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 1000000, + balance: 200000, + category: 'ib_txn', + date: '2020-01-01T00:00:00', + id: 'ib_txn_1', + is_foreign_source: 0, + is_foreign_target: 1, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_103', + source_owner: 'customer_103', + target: 'account_904', + target_owner: 'other_banks', + time: '00:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_903', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 100000, + balance: null, + category: 'ib_txn', + date: '2020-01-02T01:00:00', + id: 'ib_txn_2', + is_foreign_source: 1, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_903', + source_owner: 'other_banks', + target: 'account_103', + target_owner: 'customer_103', + time: '01:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_103', + target: 'account_904', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 50000, + balance: 250000, + category: 'ib_txn', + date: '2020-01-02T02:00:00', + id: 'ib_txn_3', + is_foreign_source: 0, + is_foreign_target: 1, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_103', + source_owner: 'customer_103', + target: 'account_904', + target_owner: 'other_banks', + time: '02:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_904', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 2000000, + balance: null, + category: 'ib_txn', + date: '2020-01-01T03:00:00', + id: 'ib_txn_4', + is_foreign_source: 1, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_904', + source_owner: 'other_banks', + target: 'account_103', + target_owner: 'customer_103', + time: '03:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_103', + target: 'account_903', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 1000000, + balance: 1250000, + category: 'ib_txn', + date: '2020-01-02T04:00:00', + id: 'ib_txn_5', + is_foreign_source: 0, + is_foreign_target: 1, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_103', + source_owner: 'customer_103', + target: 'account_903', + target_owner: 'other_banks', + time: '04:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_103', + target: 'account_903', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 1000000, + balance: 250000, + category: 'ib_txn', + date: '2020-01-02T05:00:00', + id: 'ib_txn_6', + is_foreign_source: 0, + is_foreign_target: 1, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_103', + source_owner: 'customer_103', + target: 'account_903', + target_owner: 'other_banks', + time: '05:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_901', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 250000, + balance: 10000, + category: 'ib_txn', + date: '2020-01-01T06:00:00', + id: 'ib_txn_7', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_901', + source_owner: 'customer_901', + target: 'account_103', + target_owner: 'customer_103', + time: '06:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_902', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 250000, + balance: 300000, + category: 'ib_txn', + date: '2020-01-01T06:30:00', + id: 'ib_txn_8', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_902', + source_owner: 'customer_902', + target: 'account_103', + target_owner: 'customer_103', + time: '06:30:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_903', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 250000, + balance: null, + category: 'ib_txn', + date: '2020-01-02T06:00:00', + id: 'ib_txn_9', + is_foreign_source: 1, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_903', + source_owner: 'other_banks', + target: 'account_103', + target_owner: 'customer_103', + time: '06:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_904', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 250000, + balance: null, + category: 'ib_txn', + date: '2020-01-01T00:00:00', + id: 'ib_txn_10', + is_foreign_source: 1, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_904', + source_owner: 'other_banks', + target: 'account_103', + target_owner: 'customer_103', + time: '00:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_7', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 125000, + balance: 225000, + category: 'ib_txn', + date: '2020-01-03T22:00:00', + id: 'ib_txn_72', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_7', + source_owner: 'customer_7', + target: 'account_103', + target_owner: 'customer_103', + time: '22:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_55', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 250000, + balance: 475000, + category: 'ib_txn', + date: '2020-01-03T22:00:00', + id: 'ib_txn_73', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_55', + source_owner: 'customer_55', + target: 'account_103', + target_owner: 'customer_103', + time: '22:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_20', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 150000, + balance: 625000, + category: 'ib_txn', + date: '2020-01-04T18:00:00', + id: 'ib_txn_74', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_20', + source_owner: 'customer_20', + target: 'account_103', + target_owner: 'customer_103', + time: '18:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'account_81', + target: 'account_103', + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + data: { + amount: 300000, + balance: 925000, + category: 'ib_txn', + date: '2020-01-04T18:00:00', + id: 'ib_txn_75', + is_foreign_source: 0, + is_foreign_target: 0, + is_high_risk_source_target_location: 0, + relation: 'ib_transfer', + source: 'account_81', + source_owner: 'customer_81', + target: 'account_103', + target_owner: 'customer_103', + time: '18:00:00', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_7', + target: 'account_7', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_210', + relation: 'owns', + source: 'customer_7', + target: 'account_7', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_20', + target: 'account_20', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_223', + relation: 'owns', + source: 'customer_20', + target: 'account_20', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_55', + target: 'account_55', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_258', + relation: 'owns', + source: 'customer_55', + target: 'account_55', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_81', + target: 'account_81', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_284', + relation: 'owns', + source: 'customer_81', + target: 'account_81', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_103', + target: 'account_103', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_306', + relation: 'owns', + source: 'customer_103', + target: 'account_103', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_901', + target: 'account_901', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_307', + relation: 'owns', + source: 'customer_901', + target: 'account_901', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'customer_902', + target: 'account_902', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_308', + relation: 'owns', + source: 'customer_902', + target: 'account_902', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'other_banks', + target: 'account_903', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_310', + relation: 'owns', + source: 'other_banks', + target: 'account_903', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'other_banks', + target: 'account_904', + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + data: { + category: 'ownership', + id: 'ownership_311', + relation: 'owns', + source: 'other_banks', + target: 'account_904', + data: {}, + defaultStyle: {}, + }, + }, + { + source: 'other_banks', + target: 'account_103', + edgeTypeKeyFromProperties: 'category', + data: { + source: 'other_banks', + target: 'account_103', + }, + }, + ], + combos: [], +}; + +export const schemaData = { + nodes: [ + { + nodeType: 'account_balance', + nodeTypeKeyFromProperties: 'icon', + properties: { + create_date: 'string', + icon: 'string', + id: 'string', + is_different_bank: 'number', + }, + }, + { + nodeType: 'account_box', + nodeTypeKeyFromProperties: 'icon', + properties: { + icon: 'string', + id: 'string', + address: 'string', + customer_type: 'string', + first_name: 'string', + last_name: 'string', + phone: 'string', + remarks: 'string', + risk_category: 'string', + risk_score: 'number', + }, + }, + { + nodeType: '-', + nodeTypeKeyFromProperties: 'icon', + properties: { + icon: 'string', + id: 'string', + address: 'string', + customer_type: 'string', + first_name: 'string', + last_name: 'string', + phone: 'string', + remarks: 'string', + risk_category: 'string', + risk_score: 'string', + }, + }, + ], + edges: [ + { + edgeType: 'ib_txn', + edgeTypeKeyFromProperties: 'category', + sourceNodeType: 'account_balance', + targetNodeType: 'account_balance', + properties: { + amount: 'number', + balance: 'number', + category: 'string', + date: 'string', + id: 'string', + is_foreign_source: 'number', + is_foreign_target: 'number', + is_high_risk_source_target_location: 'number', + relation: 'string', + source: 'string', + source_owner: 'string', + target: 'string', + target_owner: 'string', + time: 'string', + }, + }, + { + edgeType: 'ownership', + edgeTypeKeyFromProperties: 'category', + sourceNodeType: 'account_box', + targetNodeType: 'account_balance', + properties: { + category: 'string', + id: 'string', + relation: 'string', + source: 'string', + target: 'string', + }, + }, + { + edgeType: 'UNKNOW', + edgeTypeKeyFromProperties: 'category', + sourceNodeType: '-', + targetNodeType: 'account_balance', + properties: { + source: 'string', + target: 'string', + }, + }, + ], +}; + +export const layout = { + id: 'Dagre', + props: { + type: 'dagre', + rankdir: 'TB', + align: null, + nodesep: 40, + ranksep: 80, + preset: {}, + }, +}; diff --git a/packages/gi-sdk/docs/index.tsx b/packages/gi-sdk/docs/index.tsx index 06a294b44..687076601 100644 --- a/packages/gi-sdk/docs/index.tsx +++ b/packages/gi-sdk/docs/index.tsx @@ -1,6 +1,6 @@ import GISDK, { Initializer, SimpleEdge, SimpleNode, useContext } from '@antv/gi-sdk'; -import { Utils } from '@antv/graphin'; import React from 'react'; +import { data, schemaData } from './const'; interface DEMOProps {} const Counter = props => { @@ -9,22 +9,10 @@ const Counter = props => { 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 (
{title}: {nodes} -
); }; @@ -53,7 +41,78 @@ const assets = { }; const config = { - nodes: [{ id: 'SimpleNode' }], + nodes: [ + { + id: 'SimpleNode', + props: { + size: 26, + color: '#ddd', + label: [], + }, + name: '官方节点', + order: -1, + expressions: [], + logic: true, + groupName: '默认样式', + }, + { + id: 'SimpleNode', + props: { + size: 26, + color: '#3056E3', + label: ['account_balance^^id'], + }, + name: '官方节点', + expressions: [ + { + name: 'icon', + operator: 'eql', + value: 'account_balance', + }, + ], + order: 0, + logic: true, + groupName: 'ACCOUNT_BALANCE TYPE', + }, + { + id: 'SimpleNode', + props: { + size: 26, + color: '#faad14', + label: ['account_box^^id'], + }, + name: '官方节点', + expressions: [ + { + name: 'icon', + operator: 'eql', + value: 'account_box', + }, + ], + order: 1, + logic: true, + groupName: 'ACCOUNT_BOX TYPE', + }, + { + id: 'SimpleNode', + props: { + size: 26, + color: '#a0d911', + label: ['-^^id'], + }, + name: '官方节点', + expressions: [ + { + name: 'icon', + operator: 'eql', + value: '-', + }, + ], + order: 2, + logic: true, + groupName: '- TYPE', + }, + ], edges: [{ id: 'SimpleEdge' }], components: [ { @@ -91,14 +150,9 @@ const services = [ method: 'GET', id: 'GI/GI_SERVICE_INTIAL_GRAPH', service: async () => { + console.log('data', data); return new Promise(resolve => { - resolve({ - nodes: [ - { id: 'node-1', data: {} }, - { id: 'node-2', data: {} }, - ], - edges: [], - }); + resolve(data); }); }, }, @@ -108,10 +162,7 @@ const services = [ id: 'GI/GI_SERVICE_SCHEMA', service: async () => { return new Promise(resolve => { - resolve({ - nodes: [], - edges: [], - }); + resolve(schemaData); }); }, }, diff --git a/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts b/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts index 026f44c0f..9352a5d37 100644 --- a/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts +++ b/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts @@ -175,7 +175,7 @@ export const defaultConfig = { export type NodeConfig = typeof defaultConfig; /** 数据映射函数 需要根据配置自动生成*/ -const transform = (_nodes, nodeConfig: GINodeConfig, reset?: boolean) => { +const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { try { /** 解构配置项 */ diff --git a/packages/gi-site/.umirc.ts b/packages/gi-site/.umirc.ts index d6caf2080..22205ff67 100644 --- a/packages/gi-site/.umirc.ts +++ b/packages/gi-site/.umirc.ts @@ -8,7 +8,7 @@ export const GI_THEME_ANTD_VERSION = GI_THEME_ANTD.version; export const isDev = process.env.NODE_ENV === 'development'; //@ts-ignore export const { BUILD_MODE } = process.env; -const G6_VERSION = '5.0.0-beta.11'; +const G6_VERSION = '5.0.0-beta.20'; export const externals = deps_externals.reduce((acc, curr) => { return { diff --git a/packages/graphin/.umirc.ts b/packages/graphin/.umirc.ts index fc256d8ac..018c25e75 100644 --- a/packages/graphin/.umirc.ts +++ b/packages/graphin/.umirc.ts @@ -10,7 +10,7 @@ export default { 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/antv/g6/5.0.0-beta.20/dist/g6.min.js', 'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.min.js', ], }; diff --git a/packages/graphin/src/ExtendGraph.tsx b/packages/graphin/src/ExtendGraph.tsx index 7669742fb..a07d1aaae 100644 --- a/packages/graphin/src/ExtendGraph.tsx +++ b/packages/graphin/src/ExtendGraph.tsx @@ -1,15 +1,27 @@ import { Extensions, Graph as G6Graph, extend } from '@antv/g6'; const TransformGraphinData = data => { - const { nodes, combos } = data; + const { combos } = data; + const nodes = data.nodes.map(item => { + const { id } = item; + return { + id: id, + data: item, + }; + }); const edges = data.edges.map((item, index) => { + const { source, target, id } = item; return { - ...item, id: item.id || `edge-${index}`, + source, + target, + data: item, }; }); + console.log('TransformGraphinData edges ', edges, nodes); + return { nodes, edges, @@ -18,6 +30,10 @@ const TransformGraphinData = data => { }; export default extend(G6Graph, { + edges: { + 'quadratic-edge': Extensions.QuadraticEdge, + }, + layouts: { //@ts-ignore dagre: Extensions.DagreLayout, @@ -25,6 +41,8 @@ export default extend(G6Graph, { force: Extensions.ForceLayout, //@ts-ignore force2: Extensions.ForceLayout, + //@ts-ignore + radial: Extensions.RadialLayout, }, behaviors: { //@ts-ignore diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx index 5359a86b3..cd660deba 100644 --- a/packages/graphin/src/Graphin.tsx +++ b/packages/graphin/src/Graphin.tsx @@ -15,6 +15,8 @@ interface GraphinProps extends Specification<{}, {}> { children?: React.ReactNode[]; /** 是否兼容V2 */ compatibility?: boolean; + node?: any; + edge?: any; } const Graphin: React.FunctionComponent = forwardRef((props, ref) => { @@ -26,11 +28,16 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = layout, container = `graphin-container-${Math.random()}`, onInit, + node = nodeStyleTransform, + edge = edgeStyleTransform, + renderer = 'canvas', ...options } = props; const dataRef = useRef(data); const layoutRef = useRef(layout); + const nodeMapperRef = useRef(node); + const edgeMapperRef = useRef(edge); const [state, setState] = useState<{ isReady: boolean; @@ -40,32 +47,46 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = graph: null, })); const { isReady, graph } = state; - - if (dataRef.current !== data) { - console.log('%c GRAPHIN DATA CHANGE....', 'color:rgba(48,86,227,0.8)', dataRef.current, data); - console.time('COST_CHANGE_DATA'); - //@ts-ignore - graph && graph.changeData(data, 'replace'); - //@ts-ignore - dataRef.current = data; - console.timeEnd('COST_CHANGE_DATA'); - } - if (layoutRef.current !== layout) { - console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:rgba(48,86,227,0.8)'); - console.time('COST_CHANGE_LAYOUT'); - //@ts-ignore - graph && graph.layout(layout); - //@ts-ignore - layoutRef.current = layout; - console.timeEnd('COST_CHANGE_LAYOUT'); - } + console.log('%c GRAPHIN RENDER....', 'color:rgba(48,86,227,1)', nodeMapperRef.current, node); + useEffect(() => { + if (nodeMapperRef.current !== node) { + console.log('%c GRAPHIN NODE MAPPER CHANGE....', 'color:rgba(48,86,227,0.8)', node, graph); + //@ts-ignore + graph && graph.updateMapper('node', node); + nodeMapperRef.current = node; + } + if (edgeMapperRef.current !== edge) { + console.log('%c GRAPHIN EDGE MAPPER CHANGE....', 'color:rgba(48,86,227,0.8)'); + //@ts-ignore + graph && graph.updateMapper('edge', edge); + edgeMapperRef.current = edge; + } + if (dataRef.current !== data) { + // console.log('%c GRAPHIN DATA CHANGE....', 'color:rgba(48,86,227,0.8)', dataRef.current, data); + console.time('GRAPHIN_CHANGE_DATA_COST'); + //@ts-ignore + graph && graph.changeData(data, 'replace'); + //@ts-ignore + dataRef.current = data; + console.timeEnd('GRAPHIN_CHANGE_DATA_COST'); + } + if (layoutRef.current !== layout) { + // console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:rgba(48,86,227,0.8)'); + console.time('GRAPHIN_CHANGE_LAYOUT_COST'); + //@ts-ignore + graph && graph.layout(layout); + //@ts-ignore + layoutRef.current = layout; + console.timeEnd('GRAPHIN_CHANGE_LAYOUT_COST'); + } + }, [data, layout, node, edge]); useEffect(() => { let { width, height, - node = nodeStyleTransform, - edge = edgeStyleTransform, + // node = nodeStyleTransform, + // edge = edgeStyleTransform, // behaviors modes = { default: ['zoom-canvas', 'drag-canvas', 'drag-node'] }, } = options; @@ -81,11 +102,12 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = height, modes, data, - //@ts-ignore - node, - //@ts-ignore - edge, + // //@ts-ignore + // node, + // // //@ts-ignore + // edge, layout, + renderer, transforms: ['transform-graphin-data'], }); console.log('init ...', instance, ref); @@ -108,6 +130,14 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = isReady: true, }; }); + + instance.once('afterrender', e => { + console.log('afterlayout', nodeMapperRef.current, edgeMapperRef.current); + //@ts-ignore + instance.updateMapper('node', nodeMapperRef.current); + //@ts-ignore + instance.updateMapper('edge', edgeMapperRef.current); + }); return () => { console.log('%c GRAPHIN DESTORY....', 'color:rgba(48,86,227,1)'); instance.destroy(); @@ -122,8 +152,6 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = ...style, }; - console.log('%c GRAPHIN RENDER....', 'color:rgba(48,86,227,1)'); - if (children) { return ( diff --git a/packages/graphin/src/styling/node-style-transform.ts b/packages/graphin/src/styling/node-style-transform.ts index 3becc1937..dcfe3b5ee 100644 --- a/packages/graphin/src/styling/node-style-transform.ts +++ b/packages/graphin/src/styling/node-style-transform.ts @@ -35,7 +35,7 @@ const transGraphinStyle = style => { export const nodeStyleTransform = node => { const { style, type, id, data } = node; const IS_GRAPHIN = (style && type === 'graphin-circle') || !type; - // console.log('node', node); + if (IS_GRAPHIN) { return { id,