From 72c5e746113e05df416d03c07e458e4922ee3b27 Mon Sep 17 00:00:00 2001 From: Frank William <65594180+ai-qing-hai@users.noreply.github.com> Date: Thu, 28 Mar 2024 13:16:44 +0800 Subject: [PATCH] feat(behavior): add click focus element(node/combo) (#5595) * feat(behavior): add click focus element --------- Co-authored-by: wb-xcf804241 --- .../demo/case/behavior-focus-element.ts | 32 ++ packages/g6/__tests__/demo/case/index.ts | 1 + .../behavior-focus-element/default.svg | 307 ++++++++++++++++++ .../behavior-focus-element/focus-combo.svg | 307 ++++++++++++++++++ .../behavior-focus-element/focus-node-1.svg | 307 ++++++++++++++++++ .../behavior-focus-element/focus-node-2.svg | 307 ++++++++++++++++++ .../behavior-focus-element/focus-node-3.svg | 307 ++++++++++++++++++ .../behavior-focus-element/focus-node-4.svg | 307 ++++++++++++++++++ .../behaviors/behavior-focus-element.spec.ts | 41 +++ packages/g6/src/behaviors/focus-element.ts | 89 +++++ packages/g6/src/behaviors/index.ts | 2 + packages/g6/src/registry/build-in.ts | 3 +- .../site/examples/interaction/focus/API.en.md | 11 + .../site/examples/interaction/focus/API.zh.md | 11 + .../interaction/focus/demo/clickFocus.ts | 34 ++ .../focus/demo/clickFocusAnimate.ts | 68 ++++ .../examples/interaction/focus/demo/meta.json | 18 + .../examples/interaction/focus/index.en.md | 10 + .../examples/interaction/focus/index.zh.md | 10 + .../examples/interaction/position/API.en.md | 5 - .../examples/interaction/position/API.zh.md | 5 - .../interaction/position/demo/meta.json | 24 -- .../interaction/position/demo/move.js | 87 ----- .../interaction/position/demo/moveAnimate.js | 90 ----- .../examples/interaction/position/index.en.md | 13 - .../examples/interaction/position/index.zh.md | 13 - 26 files changed, 2171 insertions(+), 238 deletions(-) create mode 100644 packages/g6/__tests__/demo/case/behavior-focus-element.ts create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/default.svg create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-combo.svg create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-1.svg create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-2.svg create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-3.svg create mode 100644 packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-4.svg create mode 100644 packages/g6/__tests__/unit/behaviors/behavior-focus-element.spec.ts create mode 100644 packages/g6/src/behaviors/focus-element.ts create mode 100644 packages/site/examples/interaction/focus/API.en.md create mode 100644 packages/site/examples/interaction/focus/API.zh.md create mode 100644 packages/site/examples/interaction/focus/demo/clickFocus.ts create mode 100644 packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts create mode 100644 packages/site/examples/interaction/focus/demo/meta.json create mode 100644 packages/site/examples/interaction/focus/index.en.md create mode 100644 packages/site/examples/interaction/focus/index.zh.md delete mode 100644 packages/site/examples/interaction/position/API.en.md delete mode 100644 packages/site/examples/interaction/position/API.zh.md delete mode 100644 packages/site/examples/interaction/position/demo/meta.json delete mode 100644 packages/site/examples/interaction/position/demo/move.js delete mode 100644 packages/site/examples/interaction/position/demo/moveAnimate.js delete mode 100644 packages/site/examples/interaction/position/index.en.md delete mode 100644 packages/site/examples/interaction/position/index.zh.md diff --git a/packages/g6/__tests__/demo/case/behavior-focus-element.ts b/packages/g6/__tests__/demo/case/behavior-focus-element.ts new file mode 100644 index 00000000000..dc42d97f9c3 --- /dev/null +++ b/packages/g6/__tests__/demo/case/behavior-focus-element.ts @@ -0,0 +1,32 @@ +import { Graph } from '@/src'; +import type { STDTestCase } from '../types'; + +export const behaviorFocusElement: STDTestCase = async (context) => { + const graph = new Graph({ + ...context, + data: { + nodes: [ + { id: 'node-1', style: { x: 100, y: 100 } }, + { id: 'node-2', style: { x: 200, y: 100, parentId: 'combo-1' } }, + { id: 'node-3', style: { x: 100, y: 200 } }, + { id: 'node-4', style: { x: 200, y: 200, parentId: 'combo-1' } }, + ], + edges: [ + { source: 'node-1', target: 'node-2' }, + { source: 'node-2', target: 'node-4' }, + { source: 'node-1', target: 'node-3' }, + { source: 'node-3', target: 'node-4' }, + ], + combos: [{ id: 'combo-1' }], + }, + node: { style: { size: 20 } }, + edge: { + style: { endArrow: true }, + }, + behaviors: [{ type: 'focus-element' }], + }); + + await graph.render(); + + return graph; +}; diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts index cbf412a866f..53457f73eeb 100644 --- a/packages/g6/__tests__/demo/case/index.ts +++ b/packages/g6/__tests__/demo/case/index.ts @@ -1,5 +1,6 @@ export * from './behavior-drag-canvas'; export * from './behavior-drag-element'; +export * from './behavior-focus-element'; export * from './behavior-hover-element'; export * from './behavior-zoom-canvas'; export * from './combo'; diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/default.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/default.svg new file mode 100644 index 00000000000..f3e4ceada3f --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/default.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-combo.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-combo.svg new file mode 100644 index 00000000000..d93b8f6c53a --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-combo.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-1.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-1.svg new file mode 100644 index 00000000000..3e00d32f342 --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-1.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-2.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-2.svg new file mode 100644 index 00000000000..081801405ad --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-2.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-3.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-3.svg new file mode 100644 index 00000000000..58674c1be90 --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-3.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-4.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-4.svg new file mode 100644 index 00000000000..3de40bc47bc --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-focus-element/focus-node-4.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/unit/behaviors/behavior-focus-element.spec.ts b/packages/g6/__tests__/unit/behaviors/behavior-focus-element.spec.ts new file mode 100644 index 00000000000..c21a994adc2 --- /dev/null +++ b/packages/g6/__tests__/unit/behaviors/behavior-focus-element.spec.ts @@ -0,0 +1,41 @@ +import { CommonEvent, type Graph } from '@/src'; +import { behaviorFocusElement } from '@@/demo/case'; +import { createDemoGraph } from '@@/utils'; + +describe('behavior focus element', () => { + let graph: Graph; + + beforeAll(async () => { + graph = await createDemoGraph(behaviorFocusElement, { animation: false }); + }); + + afterAll(() => { + graph.destroy(); + }); + + it('focus node', async () => { + await expect(graph).toMatchSnapshot(__filename); + + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node-1' }, targetType: 'node' }); + + await expect(graph).toMatchSnapshot(__filename, 'focus-node-1'); + + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node-2' }, targetType: 'node' }); + + await expect(graph).toMatchSnapshot(__filename, 'focus-node-2'); + + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node-3' }, targetType: 'node' }); + + await expect(graph).toMatchSnapshot(__filename, 'focus-node-3'); + + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node-4' }, targetType: 'node' }); + + await expect(graph).toMatchSnapshot(__filename, 'focus-node-4'); + }); + + it('focus combo', async () => { + graph.emit(`combo:${CommonEvent.CLICK}`, { target: { id: 'combo-1' }, targetType: 'combo' }); + + await expect(graph).toMatchSnapshot(__filename, 'focus-combo'); + }); +}); diff --git a/packages/g6/src/behaviors/focus-element.ts b/packages/g6/src/behaviors/focus-element.ts new file mode 100644 index 00000000000..86211dd4d23 --- /dev/null +++ b/packages/g6/src/behaviors/focus-element.ts @@ -0,0 +1,89 @@ +import type { FederatedMouseEvent } from '@antv/g'; +import type { ID } from '@antv/graphlib'; +import { isFunction } from '@antv/util'; +import { CommonEvent } from '../constants'; +import type { RuntimeContext } from '../runtime/types'; +import type { BehaviorEvent, ViewportAnimationEffectTiming } from '../types'; +import type { BaseBehaviorOptions } from './base-behavior'; +import { BaseBehavior } from './base-behavior'; + +const FOCUS_ELEMENT_TYPES = ['node', 'combo']; + +export interface FocusElementOptions extends BaseBehaviorOptions { + /** + * 是否启用动画以及动画配置 + * + * Whether to enable animation + */ + animation?: ViewportAnimationEffectTiming; + /** + * 是否启用聚焦功能 + * + * Whether to enable the function of dragging the node + */ + enable?: boolean | ((event: BehaviorEvent | BehaviorEvent) => boolean); +} + +export class FocusElement extends BaseBehavior { + static defaultOptions: Partial = { + animation: { + easing: 'ease-in', + duration: 500, + }, + enable: true, + }; + + constructor(context: RuntimeContext, options: FocusElementOptions) { + super(context, Object.assign({}, FocusElement.defaultOptions, options)); + this.bindEvents(); + } + + private bindEvents() { + const { graph } = this.context; + this.unbindEvents(); + + FOCUS_ELEMENT_TYPES.forEach((type) => { + graph.on(`${type}:${CommonEvent.CLICK}`, this.clickFocusElement); + }); + } + + private getSelectedNodeIDs(currTarget: ID[]) { + return Array.from( + new Set( + this.context.graph + .getElementDataByState('node', this.options.state) + .map((node) => node.id) + .concat(currTarget), + ), + ); + } + + private clickFocusElement = async (event: BehaviorEvent) => { + if (!this.validate(event)) return; + const { animation } = this.options; + const { graph } = this.context; + const id = this.getSelectedNodeIDs([event.target.id]); + + await graph.focusElement(id, animation); + }; + + private validate(event: BehaviorEvent) { + if (this.destroyed) return false; + const { enable } = this.options; + if (isFunction(enable)) return enable(event); + return !!enable; + } + + private unbindEvents() { + const { graph } = this.context; + + FOCUS_ELEMENT_TYPES.forEach((type) => { + graph.off(`${type}:${CommonEvent.CLICK}`, this.clickFocusElement); + }); + } + + public destroy() { + this.unbindEvents(); + super.destroy(); + } +} diff --git a/packages/g6/src/behaviors/index.ts b/packages/g6/src/behaviors/index.ts index 820f5b0be2c..fed084fdbee 100644 --- a/packages/g6/src/behaviors/index.ts +++ b/packages/g6/src/behaviors/index.ts @@ -2,6 +2,7 @@ export { BaseBehavior } from './base-behavior'; export { CollapseExpand } from './collapse-expand'; export { DragCanvas } from './drag-canvas'; export { DragElement } from './drag-element'; +export { FocusElement } from './focus-element'; export { HoverElement } from './hover-element'; export { ZoomCanvas } from './zoom-canvas'; @@ -9,5 +10,6 @@ export type { BaseBehaviorOptions } from './base-behavior'; export type { CollapseExpandOptions } from './collapse-expand'; export type { DragCanvasOptions } from './drag-canvas'; export type { DragElementOptions } from './drag-element'; +export type { FocusElementOptions } from './focus-element'; export type { HoverElementOptions } from './hover-element'; export type { ZoomCanvasOptions } from './zoom-canvas'; diff --git a/packages/g6/src/registry/build-in.ts b/packages/g6/src/registry/build-in.ts index b97242e90f9..46d4aef7008 100644 --- a/packages/g6/src/registry/build-in.ts +++ b/packages/g6/src/registry/build-in.ts @@ -1,5 +1,5 @@ import { comboCollapseExpand, fade, translate } from '../animations'; -import { CollapseExpand, DragCanvas, DragElement, HoverElement, ZoomCanvas } from '../behaviors'; +import { CollapseExpand, DragCanvas, DragElement, FocusElement, HoverElement, ZoomCanvas } from '../behaviors'; import { Circle, CircleCombo, @@ -58,6 +58,7 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = { 'drag-element': DragElement, 'collapse-expand': CollapseExpand, 'hover-element': HoverElement, + 'focus-element': FocusElement, }, combo: { circle: CircleCombo, diff --git a/packages/site/examples/interaction/focus/API.en.md b/packages/site/examples/interaction/focus/API.en.md new file mode 100644 index 00000000000..05434a92393 --- /dev/null +++ b/packages/site/examples/interaction/focus/API.en.md @@ -0,0 +1,11 @@ +--- +title: API +--- + +# Built-in Behaviors + +Refer to [Built-in Behavior](/en/docs/manual/middle/states/defaultBehavior). + +# Custom Behavior + +Refer to [Custom Behavior](/en/docs/manual/middle/states/custom-behavior). diff --git a/packages/site/examples/interaction/focus/API.zh.md b/packages/site/examples/interaction/focus/API.zh.md new file mode 100644 index 00000000000..f672ff9f3b0 --- /dev/null +++ b/packages/site/examples/interaction/focus/API.zh.md @@ -0,0 +1,11 @@ +--- +title: API +--- + +# 内置复合交互 + +请参考教程 [内置 Behavior](/zh/docs/manual/middle/states/defaultBehavior)。 + +# 自定义复合交互 + +请参考教程 [自定义 Behavior](/zh/docs/manual/middle/states/custom-behavior)。 diff --git a/packages/site/examples/interaction/focus/demo/clickFocus.ts b/packages/site/examples/interaction/focus/demo/clickFocus.ts new file mode 100644 index 00000000000..ec37e691584 --- /dev/null +++ b/packages/site/examples/interaction/focus/demo/clickFocus.ts @@ -0,0 +1,34 @@ +import { Graph } from '@antv/g6'; + +const data = { + nodes: [ + { id: 'node1', style: { x: 100, y: 150, parentId: 'combo1' } }, + { id: 'node2', style: { x: 180, y: 150, parentId: 'combo1' } }, + { id: 'node3', style: { x: 150, y: 200, parentId: 'combo2' } }, + ], + edges: [], + combos: [ + { id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true + { id: 'combo2', style: {} }, + ], +}; + +const graph = new Graph({ + container: 'container', + width: 500, + height: 400, + node: { + style: { + labelText: (d) => d.id, + }, + }, + combo: { + style: { + type: 'circle', // 👈🏻 Combo shape type. + }, + }, + data, + behaviors: ['drag-canvas', 'collapse-expand', 'focus-element', 'zoom-canvas'], +}); + +graph.render(); diff --git a/packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts b/packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts new file mode 100644 index 00000000000..a6cc00c38b2 --- /dev/null +++ b/packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts @@ -0,0 +1,68 @@ +import { Graph } from '@antv/g6'; + +const data = { + nodes: [ + { + id: 'node1', + data: { + x: 150, + y: 100, + }, + }, + { + id: 'node2', + data: { x: 250, y: 200 }, + }, + { + id: 'node3', + data: { x: 450, y: 200 }, + }, + ], + edges: [ + { + id: 'edge1', + source: 'node1', + target: 'node2', + }, + { + id: 'edge2', + source: 'node1', + target: 'node3', + }, + { + id: 'edge3', + source: 'node2', + target: 'node3', + }, + ], +}; + +const graph = new Graph({ + container: 'container', + width: 500, + height: 500, + data, + node: { + style: { + labelText: (d) => d.id, + labelPosition: 'bottom', + }, + }, + edge: {}, + layout: { + type: 'force', + }, + animation: true, + behaviors: [ + 'drag-element', + { + type: 'focus-element', + animation: { + easing: 'ease-out', + duration: 3500, + }, + }, + ], +}); + +graph.render(); diff --git a/packages/site/examples/interaction/focus/demo/meta.json b/packages/site/examples/interaction/focus/demo/meta.json new file mode 100644 index 00000000000..54627dd56f7 --- /dev/null +++ b/packages/site/examples/interaction/focus/demo/meta.json @@ -0,0 +1,18 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "clickFocus.ts", + "title": "节点聚焦", + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ph6tS4k6S-oAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "clickFocusAnimate.ts", + "title": "节点聚焦自定义动画", + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Fs_DT6n11zMAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/packages/site/examples/interaction/focus/index.en.md b/packages/site/examples/interaction/focus/index.en.md new file mode 100644 index 00000000000..4f72835a89b --- /dev/null +++ b/packages/site/examples/interaction/focus/index.en.md @@ -0,0 +1,10 @@ +--- +title: Focus +order: 6 +--- + +G6 provides a built-in node node, combo group click focus, can make the desired object quickly moved to the canvas to the center. + +## Usage + +- click to Focus: The default configuration of the built-in interaction `'focus-element'` allows the end user to click to focus the node node or combo group; `animation: false` is configured to turn off the motion animation, or `animation: AnimateCfg` is configured to customize the animation effect. diff --git a/packages/site/examples/interaction/focus/index.zh.md b/packages/site/examples/interaction/focus/index.zh.md new file mode 100644 index 00000000000..a7f7395d758 --- /dev/null +++ b/packages/site/examples/interaction/focus/index.zh.md @@ -0,0 +1,10 @@ +--- +title: 点击聚焦 +order: 6 +--- + +G6 提供内置的 node 节点、combo 群组的点击聚焦，可使需要的对象快速移动到画布到中心。 + +## 如何使用 + +- 点击聚焦：内置交互 `'focus-element'` 的默认配置允许终端用户单击聚焦 node 节点、combo 群组；配置 `animation: false` 即可关闭移动动画，也可配置 `animation: AnimateCfg` 用于自定义动画效果。 \ No newline at end of file diff --git a/packages/site/examples/interaction/position/API.en.md b/packages/site/examples/interaction/position/API.en.md deleted file mode 100644 index 486d5e0a9fe..00000000000 --- a/packages/site/examples/interaction/position/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/interaction/position/API.zh.md b/packages/site/examples/interaction/position/API.zh.md deleted file mode 100644 index e92fbefc35a..00000000000 --- a/packages/site/examples/interaction/position/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/interaction/position/demo/meta.json b/packages/site/examples/interaction/position/demo/meta.json deleted file mode 100644 index 5e0298ba0e2..00000000000 --- a/packages/site/examples/interaction/position/demo/meta.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "moveAnimate.js", - "title": { - "zh": "点击节点带有动画地移动到画布中心", - "en": "Click to Animately Focus a Node" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DxCTR4XH_XwAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "move.js", - "title": { - "zh": "点击节点移动到画布中心", - "en": "Click to Focus a Node" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DxCTR4XH_XwAAAAAAAAAAAAADmJ7AQ/original" - } - ] -} diff --git a/packages/site/examples/interaction/position/demo/move.js b/packages/site/examples/interaction/position/demo/move.js deleted file mode 100644 index 20eb25986f1..00000000000 --- a/packages/site/examples/interaction/position/demo/move.js +++ /dev/null @@ -1,87 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: 'node1', - data: { - x: 150, - y: 50, - label: 'node1', - }, - }, - { - id: 'node2', - data: { - x: 200, - y: 150, - label: 'node2', - }, - }, - { - id: 'node3', - data: { - x: 100, - y: 150, - label: 'node3', - }, - }, - ], - edges: [ - { - id: 'edge1', - source: 'node1', - target: 'node2', - }, - { - id: 'edge2', - source: 'node2', - target: 'node3', - }, - { - id: 'edge3', - source: 'node3', - target: 'node1', - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -const graph = new Graph({ - container: 'container', - width, - height, - plugins: [ - { - // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following - type: 'lod-controller', - disableLod: true, - }, - ], - data, - node: { - labelShape: { - position: 'center', - text: { - fields: ['label'], - formatter: (model) => model.data.label, - }, - }, - }, - edge: { - keyShape: { - stroke: '#b5b5b5', - }, - }, -}); - -// 节点上的点击事件 -graph.on('node:click', (event) => { - const { itemId } = event; - graph.focusItem(itemId); -}); - -window.graph = graph; diff --git a/packages/site/examples/interaction/position/demo/moveAnimate.js b/packages/site/examples/interaction/position/demo/moveAnimate.js deleted file mode 100644 index 32de7b0c5cf..00000000000 --- a/packages/site/examples/interaction/position/demo/moveAnimate.js +++ /dev/null @@ -1,90 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: 'node1', - data: { - x: 150, - y: 50, - label: 'node1', - }, - }, - { - id: 'node2', - data: { - x: 200, - y: 150, - label: 'node2', - }, - }, - { - id: 'node3', - data: { - x: 100, - y: 150, - label: 'node3', - }, - }, - ], - edges: [ - { - id: 'edge1', - source: 'node1', - target: 'node2', - }, - { - id: 'edge2', - source: 'node2', - target: 'node3', - }, - { - id: 'edge3', - source: 'node3', - target: 'node1', - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -const graph = new Graph({ - container: 'container', - width, - height, - plugins: [ - { - // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following - type: 'lod-controller', - disableLod: true, - }, - ], - data, - node: { - labelShape: { - position: 'center', - text: { - fields: ['label'], - formatter: (model) => model.data.label, - }, - }, - }, - edge: { - keyShape: { - stroke: '#b5b5b5', - }, - }, -}); - -// 节点上的点击事件 -graph.on('node:click', (event) => { - const { itemId } = event; - graph.focusItem(itemId, { - easing: 'ease-in', - duration: 1000, - }); -}); - -window.graph = graph; diff --git a/packages/site/examples/interaction/position/index.en.md b/packages/site/examples/interaction/position/index.en.md deleted file mode 100644 index c7ceb22ed7e..00000000000 --- a/packages/site/examples/interaction/position/index.en.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Click to Focus a Node -order: 6 ---- - -Move the graph by interaction. - -## Usage - -Move the graph to focus on the clicked node, which means pan the canvas to center at the clicked node. - -- 1st demo: move the graph with animation; -- 2nd demo: move the graph without animation. diff --git a/packages/site/examples/interaction/position/index.zh.md b/packages/site/examples/interaction/position/index.zh.md deleted file mode 100644 index e12b42828d6..00000000000 --- a/packages/site/examples/interaction/position/index.zh.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 聚焦一个节点 -order: 6 ---- - -通过交互改变节点的位置。 - -## 使用指南 - -点击某个节点，让其移动到画布中心。 - -- 第一个示例：带有动画地移动图； -- 第二个示例：不带动画移动图。