feat: add snapline plugin (#6188)

* feat: add snapline plugin

* test: add snapline unit tests

* refactor(plugin): support auto snap and ignore items outside viewport

* fix: fix cr issues

.vscode/settings.json

@@ -58,6 +58,7 @@
     "pointset",
     "Polyline",
     "ranksep",
+    "Snapline",
     "Timebar"
   ],
   "javascript.preferences.importModuleSpecifier": "relative",

packages/g6/__tests__/demos/index.ts

@@ -119,6 +119,7 @@ export { pluginHistory } from './plugin-history';
 export { pluginHull } from './plugin-hull';
 export { pluginLegend } from './plugin-legend';
 export { pluginMinimap } from './plugin-minimap';
+export { pluginSnapline } from './plugin-snapline';
 export { pluginTimebar } from './plugin-timebar';
 export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
 export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';

packages/g6/__tests__/demos/plugin-snapline.ts

@@ -0,0 +1,66 @@
+import { Graph, Node } from '@antv/g6';
+
+export const pluginSnapline: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node1', style: { x: 100, y: 100 } },
+        { id: 'node2', style: { x: 300, y: 300 } },
+        { id: 'node3', style: { x: 120, y: 200 } },
+      ],
+    },
+    node: {
+      type: (datum) => (datum.id === 'node3' ? 'circle' : 'rect'),
+      style: {
+        size: (datum) => (datum.id === 'node3' ? 40 : [60, 30]),
+        fill: 'transparent',
+        lineWidth: 2,
+        labelText: (datum) => datum.id,
+      },
+    },
+    behaviors: ['drag-element', 'drag-canvas'],
+    plugins: [
+      {
+        type: 'snapline',
+        key: 'snapline',
+        verticalLineStyle: { stroke: '#F08F56', lineWidth: 2 },
+        horizontalLineStyle: { stroke: '#17C76F', lineWidth: 2 },
+        autoSnap: false,
+      },
+    ],
+  });
+
+  await graph.render();
+
+  const config = {
+    filter: false,
+    offset: 20,
+  };
+
+  pluginSnapline.form = (panel) => {
+    return [
+      panel
+        .add(config, 'filter')
+        .name('Add Filter(exclude circle)')
+        .onChange((filter: boolean) => {
+          graph.updatePlugin({
+            key: 'snapline',
+            filter: (node: Node) => (filter ? node.id !== 'node3' : true),
+          });
+          graph.render();
+        }),
+      panel
+        .add(config, 'offset', [0, 20, Infinity])
+        .name('Offset')
+        .onChange((offset: string) => {
+          graph.updatePlugin({
+            key: 'snapline',
+            offset,
+          });
+          graph.render();
+        }),
+    ];
+  };
+  return graph;
+};