From bf06ee13787a697b821fda829983820e5079716b Mon Sep 17 00:00:00 2001 From: pomelo Date: Mon, 10 Apr 2023 12:01:26 +0800 Subject: [PATCH] feat: activate relations (#4380) * chore: fix typing to support vite * feat: Add browser-side integration testing * feat: add activate-relations behaviros * feat: update typing * feat: add activate-relations logic * feat: add typing * feat: add demo * feat: update demo --------- Co-authored-by: pomelo.lcw Co-authored-by: pomelo-nwu --- package.json | 4 +- packages/g6/package.json | 1 + packages/g6/src/runtime/controller/data.ts | 16 +- .../src/stdlib/behavior/activate-relations.ts | 129 +++ packages/g6/src/stdlib/index.ts | 33 +- packages/g6/src/types/index.ts | 21 +- packages/g6/tests/datasets/const.ts | 840 ++++++++++++++++++ packages/g6/tests/index.html | 18 + .../behaviors/activate-relations.ts | 41 + .../intergration/behaviors/brush-select.ts | 25 + .../intergration/behaviors/click-select.ts | 25 + packages/g6/tests/intergration/index.ts | 10 + .../g6/tests/intergration/layouts/circular.ts | 17 + packages/g6/tests/main.ts | 28 + packages/g6/vite.config.js | 9 + 15 files changed, 1183 insertions(+), 34 deletions(-) create mode 100644 packages/g6/src/stdlib/behavior/activate-relations.ts create mode 100644 packages/g6/tests/datasets/const.ts create mode 100644 packages/g6/tests/index.html create mode 100644 packages/g6/tests/intergration/behaviors/activate-relations.ts create mode 100644 packages/g6/tests/intergration/behaviors/brush-select.ts create mode 100644 packages/g6/tests/intergration/behaviors/click-select.ts create mode 100644 packages/g6/tests/intergration/index.ts create mode 100644 packages/g6/tests/intergration/layouts/circular.ts create mode 100644 packages/g6/tests/main.ts create mode 100644 packages/g6/vite.config.js diff --git a/package.json b/package.json index 2723375e43..d65f98c486 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "devDependencies": { "@commitlint/cli": "^17.5.0", "@commitlint/config-conventional": "^17.4.4", - "husky": "^8.0.3" + "husky": "^8.0.3", + "react-scripts": "3.1.2", + "vite": "^4.2.1" } } diff --git a/packages/g6/package.json b/packages/g6/package.json index 10009f57da..64a6e1e82a 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -31,6 +31,7 @@ "module": "es/index.js", "types": "lib/index.d.ts", "scripts": { + "dev":"vite", "start": "father build --watch", "build": "npm run clean && father build", "ci": "npm run build && npm run coverage", diff --git a/packages/g6/src/runtime/controller/data.ts b/packages/g6/src/runtime/controller/data.ts index 2f214828c5..deaf25b1fc 100644 --- a/packages/g6/src/runtime/controller/data.ts +++ b/packages/g6/src/runtime/controller/data.ts @@ -1,13 +1,13 @@ import { Graph as GraphLib, ID } from '@antv/graphlib'; -import { GraphData, IGraph, ComboModel, ComboUserModel } from '../../types'; -import { registry } from '../../stdlib'; -import { getExtension } from '../../util/extension'; -import { clone, isArray, isNumber, isString, isFunction, isObject } from '@antv/util'; -import { NodeModel, NodeModelData, NodeUserModel, NodeUserModelData } from '../../types/node'; -import { EdgeModel, EdgeModelData, EdgeUserModel, EdgeUserModelData } from '../../types/edge'; -import { DataChangeType, GraphCore } from '../../types/data'; -import { ITEM_TYPE } from '../../types/item'; +import { clone, isArray, isFunction, isNumber, isObject, isString } from '@antv/util'; +import { registery as registry } from '../../stdlib'; +import { ComboModel, ComboUserModel, GraphData, IGraph } from '../../types'; import { ComboUserModelData } from '../../types/combo'; +import { DataChangeType, GraphCore } from '../../types/data'; +import { EdgeModel, EdgeModelData, EdgeUserModel, EdgeUserModelData } from '../../types/edge'; +import { ITEM_TYPE } from '../../types/item'; +import { NodeModel, NodeModelData, NodeUserModel, NodeUserModelData } from '../../types/node'; +import { getExtension } from '../../util/extension'; /** * Manages the data transform extensions; diff --git a/packages/g6/src/stdlib/behavior/activate-relations.ts b/packages/g6/src/stdlib/behavior/activate-relations.ts new file mode 100644 index 0000000000..23b8f46650 --- /dev/null +++ b/packages/g6/src/stdlib/behavior/activate-relations.ts @@ -0,0 +1,129 @@ +import type { ID, IG6GraphEvent } from '../../types'; +import { Behavior } from '../../types/behavior'; + +const KEYBOARD_TRIGGERS = ['shift', 'ctrl', 'alt', 'meta'] as const; +const MOUSE_TRIGGERS = ['mouseenter', 'click'] as const; + +type Trigger = (typeof MOUSE_TRIGGERS)[number]; + +const compare = (prev: ID[], curr: ID[]) => { + const inactive = prev.filter((v) => !curr.includes(v)); + const active = curr.filter((v) => !prev.includes(v)); + return { + active, + inactive, + }; +}; + +interface ActivateRelationsOptions { + /** + * Whether to allow multiple selection. + * Defaults to true. + * If set to false, `trigger` options will be ignored. + */ + multiple: boolean; + /** + * The key to pressed with mouse click to apply multiple selection. + * Defaults to `"click"`. + * Could be "click", "mouseenter". + */ + trigger: Trigger; + + /** + * + * Defaults to `"selected"`. + * + */ + activeState: 'selected'; + + /** + * Whether allow the behavior happen on the current item. + */ + shouldBegin: (event: IG6GraphEvent) => boolean; + /** + * Whether to update item state. + * If it returns false, you may probably listen to `eventName` and + * manage states or data manually + */ + shouldUpdate: (event: IG6GraphEvent) => boolean; +} + +const DEFAULT_OPTIONS: ActivateRelationsOptions = { + multiple: true, + shouldBegin: () => true, + shouldUpdate: () => true, + trigger: 'click', + + activeState: 'selected', +}; + +export default class ActivateRelations extends Behavior { + options: ActivateRelationsOptions; + timer: number; + inactiveItems: {}; + prevNodeIds: ID[]; + prevEdgeIds: ID[]; + + constructor(options: Partial) { + super(Object.assign({}, DEFAULT_OPTIONS, options)); + // Validate options + if (options.trigger && !MOUSE_TRIGGERS.includes(options.trigger)) { + console.warn( + `G6: Invalid trigger option "${options.trigger}" for activate-relations behavior!`, + ); + this.options.trigger = DEFAULT_OPTIONS.trigger; + } + this.prevEdgeIds = []; + this.prevNodeIds = []; + } + + getEvents = () => { + const { trigger } = this.options; + if (trigger === 'mouseenter') { + return { + 'node:mouseenter': this.setAllItemStates, + 'combo:mouseenter': this.setAllItemStates, + 'node:mouseleave': this.clearActiveState, + 'combo:mouseleave': this.clearActiveState, + }; + } + + return { + 'node:click': this.setAllItemStates, + 'combo:click': this.setAllItemStates, + 'canvas:click': this.clearActiveState, + }; + }; + + setAllItemStates = (e: IG6GraphEvent) => { + const { itemId } = e; + const { graph } = this; + const { activeState: ACTIVE_STATE } = this.options; + if (!graph || graph.destroyed) return; + if (!this.options.shouldBegin(e)) return; + + const ids = graph.getNeighborNodesData(itemId, 'both').map((item) => item.id); + const edgeIds = graph.getRelatedEdgesData(itemId, 'both').map((item) => item.id); + const nodeIds = [itemId, ...ids]; + /** 数据对比，处理得到最小改动的高亮和非高亮的数据 */ + const { active: activeNodeIds, inactive: inactiveNodeIds } = compare(this.prevNodeIds, nodeIds); + const { active: activeEdgeIds, inactive: inactiveEdgeIds } = compare(this.prevEdgeIds, edgeIds); + + /** 节点 */ + graph.setItemState(activeNodeIds, ACTIVE_STATE, true); + graph.setItemState(inactiveNodeIds, ACTIVE_STATE, false); + /** 边 */ + graph.setItemState(activeEdgeIds, ACTIVE_STATE, true); + graph.setItemState(inactiveEdgeIds, ACTIVE_STATE, false); + + this.prevNodeIds = nodeIds; + this.prevEdgeIds = edgeIds; + }; + clearActiveState = (e: any) => { + const { activeState: ACTIVE_STATE } = this.options; + this.graph.setItemState(this.prevNodeIds, ACTIVE_STATE, false); + this.graph.setItemState(this.prevEdgeIds, ACTIVE_STATE, false); + this.prevNodeIds = []; + this.prevEdgeIds = []; + }; +} diff --git a/packages/g6/src/stdlib/index.ts b/packages/g6/src/stdlib/index.ts index 22f9e0a8d7..08e874390b 100644 --- a/packages/g6/src/stdlib/index.ts +++ b/packages/g6/src/stdlib/index.ts @@ -1,49 +1,52 @@ import { registry as layoutRegistry } from '@antv/layout'; import { Lib } from '../types/stdlib'; -import DragCanvas from './behavior/drag-canvas'; -import ClickSelect from "./behavior/click-select"; +import ActivateRelations from './behavior/activate-relations'; import BrushSelect from './behavior/brush-select'; +import ClickSelect from './behavior/click-select'; +import DragCanvas from './behavior/drag-canvas'; import LassoSelect from './behavior/lasso-select'; import { DragNode } from "./behavior/drag-node"; import { comboFromNode } from './data/comboFromNode'; import { LineEdge } from './item/edge'; import { CircleNode } from './item/node'; -import SpecThemeSolver from './themeSolver/spec'; -import LightTheme from './theme/light'; import DarkTheme from './theme/dark'; +import LightTheme from './theme/light'; +import SpecThemeSolver from './themeSolver/spec'; import SubjectThemeSolver from './themeSolver/subject'; -import rectSelector from './selector/rect'; + import lassoSelector from './selector/lasso'; +import rectSelector from './selector/rect'; const stdLib = { transforms: { comboFromNode, }, themes: { - 'light': LightTheme, - 'dark': DarkTheme + light: LightTheme, + dark: DarkTheme, }, themeSolvers: { - 'spec': SpecThemeSolver, - 'subject': SubjectThemeSolver, + spec: SpecThemeSolver, + subject: SubjectThemeSolver, }, layouts: layoutRegistry, behaviors: { + 'activate-relations': ActivateRelations, 'drag-canvas': DragCanvas, 'drag-node': DragNode, 'click-select': ClickSelect, 'brush-select': BrushSelect, - 'lasso-select': LassoSelect + 'lasso-select': LassoSelect, }, plugins: {}, nodes: { - 'circle-node': CircleNode + 'circle-node': CircleNode, }, edges: { - 'line-edge': LineEdge + 'line-edge': LineEdge, }, combos: {}, -} +}; const useLib: Lib = { transforms: {}, @@ -58,8 +61,8 @@ const useLib: Lib = { const utils = { rectSelector, - lassoSelector -} + lassoSelector, +}; const registery = { useLib }; export default registery; diff --git a/packages/g6/src/types/index.ts b/packages/g6/src/types/index.ts index 4869268ef3..91646f6596 100644 --- a/packages/g6/src/types/index.ts +++ b/packages/g6/src/types/index.ts @@ -1,13 +1,14 @@ -export { IGraph } from './graph'; -export { GraphData } from './data'; -export { NodeUserModel, NodeModel, NodeDisplayModel } from './node'; -export { EdgeUserModel, EdgeModel, EdgeDisplayModel } from './edge'; -export { ComboUserModel, ComboModel, ComboDisplayModel } from './combo'; -export { Specification } from './spec'; -export { - StandardLayoutOptions, +export type { ID } from '@antv/graphlib'; +export type { ComboDisplayModel, ComboModel, ComboUserModel, ICombo } from './combo'; +export type { GraphData } from './data'; +export type { EdgeDisplayModel, EdgeModel, EdgeUserModel, IEdge } from './edge'; +export type { IG6GraphEvent } from './event'; +export type { IGraph } from './graph'; +export { isImmediatelyInvokedLayoutOptions, isLayoutWorkerized } from './layout'; // function 不应该放在 types 文件下面 +export type { ImmediatelyInvokedLayoutOptions, LayoutOptions, - isImmediatelyInvokedLayoutOptions, - isLayoutWorkerized, + StandardLayoutOptions, } from './layout'; +export type { INode, NodeDisplayModel, NodeModel, NodeUserModel } from './node'; +export type { Specification } from './spec'; diff --git a/packages/g6/tests/datasets/const.ts b/packages/g6/tests/datasets/const.ts new file mode 100644 index 0000000000..e79d59e5d4 --- /dev/null +++ b/packages/g6/tests/datasets/const.ts @@ -0,0 +1,840 @@ +export const container = document.getElementById('container'); +export const width = document.getElementById('container').clientWidth; +export const height = document.getElementById('container').clientHeight; +export const data = { + nodes: [ + { + id: 'Argentina', + data: { + name: 'Argentina', + }, + }, + { + id: 'Australia', + data: { + name: 'Australia', + }, + }, + { + id: 'Belgium', + data: { + name: 'Belgium', + }, + }, + { + id: 'Brazil', + data: { + name: 'Brazil', + }, + }, + { + id: 'Colombia', + data: { + name: 'Colombia', + }, + }, + { + id: 'Costa Rica', + data: { + name: 'Costa Rica', + }, + }, + { + id: 'Croatia', + data: { + name: 'Croatia', + }, + }, + { + id: 'Denmark', + data: { + name: 'Denmark', + }, + }, + { + id: 'Egypt', + data: { + name: 'Egypt', + }, + }, + { + id: 'England', + data: { + name: 'England', + }, + }, + { + id: 'France', + data: { + name: 'France', + }, + }, + { + id: 'Germany', + data: { + name: 'Germany', + }, + }, + { + id: 'Iceland', + data: { + name: 'Iceland', + }, + }, + { + id: 'IR Iran', + data: { + name: 'IR Iran', + }, + }, + { + id: 'Japan', + data: { + name: 'Japan', + }, + }, + { + id: 'Korea Republic', + data: { + name: 'Korea Republic', + }, + }, + { + id: 'Mexico', + data: { + name: 'Mexico', + }, + }, + { + id: 'Morocco', + data: { + name: 'Morocco', + }, + }, + { + id: 'Nigeria', + data: { + name: 'Nigeria', + }, + }, + { + id: 'Panama', + data: { + name: 'Panama', + }, + }, + { + id: 'Peru', + data: { + name: 'Peru', + }, + }, + { + id: 'Poland', + data: { + name: 'Poland', + }, + }, + { + id: 'Portugal', + data: { + name: 'Portugal', + }, + }, + { + id: 'Russia', + data: { + name: 'Russia', + }, + }, + { + id: 'Saudi Arabia', + data: { + name: 'Saudi Arabia', + }, + }, + { + id: 'Senegal', + data: { + name: 'Senegal', + }, + }, + { + id: 'Serbia', + data: { + name: 'Serbia', + }, + }, + { + id: 'Spain', + data: { + name: 'Spain', + }, + }, + { + id: 'Sweden', + data: { + name: 'Sweden', + }, + }, + { + id: 'Switzerland', + data: { + name: 'Switzerland', + }, + }, + { + id: 'Tunisia', + data: { + name: 'Tunisia', + }, + }, + { + id: 'Uruguay', + data: { + name: 'Uruguay', + }, + }, + ], + edges: [ + { + id: '0', + target: 'Russia', + source: 'Saudi Arabia', + data: { + target_score: 5, + source_score: 0, + directed: true, + }, + }, + { + id: '1', + target: 'Uruguay', + source: 'Egypt', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '2', + target: 'Russia', + source: 'Egypt', + data: { + target_score: 3, + source_score: 1, + directed: true, + }, + }, + { + id: '3', + target: 'Uruguay', + source: 'Saudi Arabia', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '4', + target: 'Uruguay', + source: 'Russia', + data: { + target_score: 3, + source_score: 0, + directed: true, + }, + }, + { + id: '5', + target: 'Saudi Arabia', + source: 'Egypt', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '6', + target: 'IR Iran', + source: 'Morocco', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '7', + target: 'Portugal', + source: 'Spain', + data: { + target_score: 3, + source_score: 3, + directed: false, + }, + }, + { + id: '8', + target: 'Portugal', + source: 'Morocco', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '9', + target: 'Spain', + source: 'IR Iran', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '10', + target: 'IR Iran', + source: 'Portugal', + data: { + target_score: 1, + source_score: 1, + directed: false, + }, + }, + { + id: '11', + target: 'Spain', + source: 'Morocco', + data: { + target_score: 2, + source_score: 2, + directed: false, + }, + }, + { + id: '12', + target: 'France', + source: 'Australia', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '13', + target: 'Denmark', + source: 'Peru', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '14', + target: 'Denmark', + source: 'Australia', + data: { + target_score: 1, + source_score: 1, + directed: false, + }, + }, + { + id: '15', + target: 'France', + source: 'Peru', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '16', + target: 'Denmark', + source: 'France', + data: { + target_score: 0, + source_score: 0, + directed: false, + }, + }, + { + id: '17', + target: 'Peru', + source: 'Australia', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '18', + target: 'Argentina', + source: 'Iceland', + data: { + target_score: 1, + source_score: 1, + }, + }, + { + id: '19', + target: 'Croatia', + source: 'Nigeria', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '20', + target: 'Croatia', + source: 'Argentina', + data: { + target_score: 3, + source_score: 0, + directed: true, + }, + }, + { + id: '21', + target: 'Nigeria', + source: 'Iceland', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '22', + target: 'Argentina', + source: 'Nigeria', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '23', + target: 'Croatia', + source: 'Iceland', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '24', + target: 'Serbia', + source: 'Costa Rica', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '25', + target: 'Brazil', + source: 'Switzerland', + data: { + target_score: 1, + source_score: 1, + directed: false, + }, + }, + { + id: '26', + target: 'Brazil', + source: 'Costa Rica', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '27', + target: 'Switzerland', + source: 'Serbia', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '28', + target: 'Brazil', + source: 'Serbia', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '29', + target: 'Switzerland', + source: 'Costa Rica', + data: { + target_score: 2, + source_score: 2, + directed: false, + }, + }, + { + id: '30', + target: 'Mexico', + source: 'Germany', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '31', + target: 'Sweden', + source: 'Korea Republic', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '32', + target: 'Mexico', + source: 'Korea Republic', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '33', + target: 'Germany', + source: 'Sweden', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '34', + target: 'Korea Republic', + source: 'Germany', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '35', + target: 'Sweden', + source: 'Mexico', + data: { + target_score: 3, + source_score: 0, + directed: true, + }, + }, + { + id: '36', + target: 'Belgium', + source: 'Panama', + data: { + target_score: 3, + source_score: 0, + directed: true, + }, + }, + { + id: '37', + target: 'England', + source: 'Tunisia', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '38', + target: 'Belgium', + source: 'Tunisia', + data: { + target_score: 5, + source_score: 2, + directed: true, + }, + }, + { + id: '39', + target: 'England', + source: 'Panama', + data: { + target_score: 6, + source_score: 1, + directed: true, + }, + }, + { + id: '40', + target: 'Belgium', + source: 'England', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '41', + target: 'Tunisia', + source: 'Panama', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '42', + target: 'Japan', + source: 'Colombia', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '43', + target: 'Senegal', + source: 'Poland', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '44', + target: 'Japan', + source: 'Senegal', + data: { + target_score: 2, + source_score: 2, + directed: false, + }, + }, + { + id: '45', + target: 'Colombia', + source: 'Poland', + data: { + target_score: 3, + source_score: 0, + directed: true, + }, + }, + { + id: '46', + target: 'Poland', + source: 'Japan', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '47', + target: 'Colombia', + source: 'Senegal', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '48', + target: 'Uruguay', + source: 'Portugal', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '49', + target: 'France', + source: 'Argentina', + data: { + target_score: 4, + source_score: 3, + directed: true, + }, + }, + { + id: '50', + target: 'Russia', + source: 'Spain', + data: { + target_score: 5, + source_score: 4, + directed: true, + }, + }, + { + id: '51', + target: 'Croatia', + source: 'Denmark', + data: { + target_score: 4, + source_score: 3, + directed: true, + }, + }, + { + id: '52', + target: 'Brazil', + source: 'Mexico', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '53', + target: 'Belgium', + source: 'Japan', + data: { + target_score: 3, + source_score: 2, + directed: true, + }, + }, + { + id: '54', + target: 'Sweden', + source: 'Switzerland', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '55', + target: 'England', + source: 'Colombia', + data: { + target_score: 4, + source_score: 3, + directed: true, + }, + }, + { + id: '56', + target: 'France', + source: 'Uruguay', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '57', + target: 'Belgium', + source: 'Brazil', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '58', + target: 'Croatia', + source: 'Russia', + data: { + target_score: 6, + source_score: 5, + directed: true, + }, + }, + { + id: '59', + target: 'England', + source: 'Sweden', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '60', + target: 'France', + source: 'Belgium', + data: { + target_score: 1, + source_score: 0, + directed: true, + }, + }, + { + id: '61', + target: 'Croatia', + source: 'England', + data: { + target_score: 2, + source_score: 1, + directed: true, + }, + }, + { + id: '62', + target: 'Belgium', + source: 'England', + data: { + target_score: 2, + source_score: 0, + directed: true, + }, + }, + { + id: '63', + target: 'France', + source: 'Croatia', + data: { + target_score: 4, + source_score: 2, + directed: true, + }, + }, + ], +}; diff --git a/packages/g6/tests/index.html b/packages/g6/tests/index.html new file mode 100644 index 0000000000..bd9fe1b353 --- /dev/null +++ b/packages/g6/tests/index.html @@ -0,0 +1,18 @@ + + + + + + + G6: Preview + + + +
+ +
+
+ + + + \ No newline at end of file diff --git a/packages/g6/tests/intergration/behaviors/activate-relations.ts b/packages/g6/tests/intergration/behaviors/activate-relations.ts new file mode 100644 index 0000000000..3beb6543c1 --- /dev/null +++ b/packages/g6/tests/intergration/behaviors/activate-relations.ts @@ -0,0 +1,41 @@ +import G6 from '../../../src/index'; +import { container, height, width } from '../../datasets/const'; +export default () => { + return new G6.Graph({ + container, + width, + height, + type: 'graph', + layout: { + type: 'grid', + }, + node: { + labelShape: { + text: { + fields: ['id'], + formatter: (model) => model.id, + }, + }, + }, + data: { + nodes: [ + { id: 'node1', data: {} }, + { id: 'node2', data: {} }, + { id: 'node3', data: {} }, + { id: 'node4', data: {} }, + { id: 'node5', data: {} }, + ], + edges: [ + { id: 'edge1', source: 'node1', target: 'node2', data: {} }, + { id: 'edge2', source: 'node1', target: 'node3', data: {} }, + { id: 'edge3', source: 'node1', target: 'node4', data: {} }, + { id: 'edge4', source: 'node2', target: 'node3', data: {} }, + { id: 'edge5', source: 'node3', target: 'node4', data: {} }, + { id: 'edge6', source: 'node4', target: 'node5', data: {} }, + ], + }, + modes: { + default: [{ type: 'activate-relations', trigger: 'click' }], + }, + }); +}; diff --git a/packages/g6/tests/intergration/behaviors/brush-select.ts b/packages/g6/tests/intergration/behaviors/brush-select.ts new file mode 100644 index 0000000000..2b145792b0 --- /dev/null +++ b/packages/g6/tests/intergration/behaviors/brush-select.ts @@ -0,0 +1,25 @@ +import G6 from '../../../src/index'; +import { container, height, width } from '../../datasets/const'; +export default () => { + return new G6.Graph({ + container, + width, + height, + type: 'graph', + layout: { + type: 'grid', + }, + data: { + nodes: [ + { id: 'node1', data: {} }, + { id: 'node2', data: {} }, + { id: 'node3', data: {} }, + { id: 'node4', data: {} }, + ], + edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], + }, + modes: { + default: ['brush-select'], + }, + }); +}; diff --git a/packages/g6/tests/intergration/behaviors/click-select.ts b/packages/g6/tests/intergration/behaviors/click-select.ts new file mode 100644 index 0000000000..c497fab4c0 --- /dev/null +++ b/packages/g6/tests/intergration/behaviors/click-select.ts @@ -0,0 +1,25 @@ +import G6 from '../../../src/index'; +import { container, height, width } from '../../datasets/const'; +export default () => { + return new G6.Graph({ + container, + width, + height, + type: 'graph', + layout: { + type: 'grid', + }, + data: { + nodes: [ + { id: 'node1', data: {} }, + { id: 'node2', data: {} }, + { id: 'node3', data: {} }, + { id: 'node4', data: {} }, + ], + edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], + }, + modes: { + default: ['click-select'], + }, + }); +}; diff --git a/packages/g6/tests/intergration/index.ts b/packages/g6/tests/intergration/index.ts new file mode 100644 index 0000000000..205e15e38b --- /dev/null +++ b/packages/g6/tests/intergration/index.ts @@ -0,0 +1,10 @@ +import behaviors_activateRelations from './behaviors/activate-relations'; +import behaviors_brush_select from './behaviors/brush-select'; +import behaviors_click_select from './behaviors/click-select'; +import layouts_circular from './layouts/circular'; +export { + behaviors_activateRelations, + layouts_circular, + behaviors_brush_select, + behaviors_click_select, +}; diff --git a/packages/g6/tests/intergration/layouts/circular.ts b/packages/g6/tests/intergration/layouts/circular.ts new file mode 100644 index 0000000000..93c31267dd --- /dev/null +++ b/packages/g6/tests/intergration/layouts/circular.ts @@ -0,0 +1,17 @@ +import G6 from '../../../src/index'; +import { container, data, height, width } from '../../datasets/const'; + +export default () => { + return new G6.Graph({ + container, + width, + height, + type: 'graph', + data, + layout: { + type: 'circular', + center: [250, 250], + radius: 200, + }, + }); +}; diff --git a/packages/g6/tests/main.ts b/packages/g6/tests/main.ts new file mode 100644 index 0000000000..20b6a061f4 --- /dev/null +++ b/packages/g6/tests/main.ts @@ -0,0 +1,28 @@ +import * as graphs from './intergration/index'; + +const SelectGraph = document.getElementById('select') as HTMLSelectElement; +let firstKey; +console.log('firstKey', firstKey); +const Options = Object.keys(graphs).map((key, index) => { + const option = document.createElement('option'); + if (index === 0) { + firstKey = key; + } + option.value = key; + option.textContent = key; + return option; +}); + +SelectGraph.replaceChildren(...Options); + +SelectGraph.onchange = (e) => { + //@ts-ignore + const { value } = e.target; + console.log(value); + history.pushState({ value }, '', `?name=${value}`); + const container = document.getElementById('container'); + container.replaceChildren(''); + graphs[value](); +}; +// 初始化 +graphs[firstKey](); diff --git a/packages/g6/vite.config.js b/packages/g6/vite.config.js new file mode 100644 index 0000000000..0405da488b --- /dev/null +++ b/packages/g6/vite.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + root: './tests', + server: { + port: 8080, + open: '/', + }, +});