feat: add plugin snapline

.vscode/settings.json

@@ -63,5 +63,6 @@
  ],
  "javascript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.importModuleSpecifier": "relative",
- "svg.preview.background": "transparent"
+ "svg.preview.background": "transparent",
+ "typescript.tsdk": "node_modules/typescript/lib"
 }

packages/g6/__tests__/demos/behavior-scroll-canvas.ts

@@ -39,5 +39,11 @@ export const behaviorScrollCanvas: TestCase = async (context) => {
 
  await graph.render();
 
+ (window as any).__graph = graph;
+ (window as any).__g_instances__ = [];
+
+ const canvas = graph.getCanvas();
+
+ (window as any).__g_instances__.push(canvas);
  return graph;
 };

packages/g6/__tests__/demos/index.ts

@@ -121,7 +121,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 { pluginSnapline, 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-grid-line.ts

@@ -10,7 +10,7 @@ export const pluginGridLine: TestCase = async (context) => {
  behaviors: ['drag-canvas'],
  plugins: [{ type: 'grid-line', follow: false }],
  });
-
+ (window as any).__graph = graph;
  await graph.render();
 
  pluginGridLine.form = (panel) => {

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

@@ -1,74 +1,65 @@
-import { Graph, Node } from '@antv/g6';
+import { Graph } from '@/src';
 
 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 } },
+ { id: 'node-1', style: { x: 100, y: 100 } },
+ { id: 'node-2', combo: 'combo-1', style: { x: 200, y: 100 } },
+ { id: 'node-3', style: { x: 100, y: 200 } },
+ { id: 'node-4', combo: 'combo-1', style: { x: 200, y: 200 } },
  ],
+ 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: {
- type: (datum) => (datum.id === 'node3' ? 'circle' : 'rect'),
- style: {
- size: (datum) => (datum.id === 'node3' ? 40 : [60, 30]),
- fill: 'transparent',
- lineWidth: 2,
- labelText: (datum) => datum.id,
- },
+ node: { style: { size: 20 } },
+ edge: {
+ style: { endArrow: true },
  },
- behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
+ behaviors: [
+ {
+ type: 'drag-element',
+ // shadow: true
+ },
+ // {
+ // type: 'scroll-canvas',
+ // // shadow: true
+ // },
+ {
+ type: 'zoom-canvas',
+ // shadow: true
+ },
+ ],
  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,
- autoSnap: false,
- };
-
  pluginSnapline.form = (panel) => {
+ const config = {
+ enable: true,
+ hideEdge: 'none',
+ shadow: false,
+ };
+ const handleChange = () => {
+ graph.setBehaviors([{ type: 'drag-element', ...config }]);
+ };
  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),
- });
- }),
- panel
- .add(config, 'offset', [0, 20, Infinity])
- .name('Offset')
- .onChange((offset: string) => {
- graph.updatePlugin({
- key: 'snapline',
- offset,
- });
- }),
- panel
- .add(config, 'autoSnap')
- .name('Auto Snap')
- .onChange((autoSnap: boolean) => {
- graph.updatePlugin({
- key: 'snapline',
- autoSnap,
- });
- }),
+ panel.add(config, 'enable').onChange(handleChange),
+ panel.add(config, 'hideEdge', ['none', 'in', 'out', 'both']).onChange(handleChange),
+ panel.add(config, 'shadow').onChange(handleChange),
  ];
  };
+
  return graph;
 };

packages/g6/src/behaviors/drag-element.ts

@@ -236,6 +236,7 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
  * @internal
  */
  protected onDragStart(event: IElementDragEvent) {
+ // console.log('onDragStart', event, event.target, event.target.id)
  this.enable = this.validate(event);
  if (!this.enable) return;
 

packages/g6/src/plugins/index.ts

@@ -11,7 +11,7 @@ export { History } from './history';
 export { Hull } from './hull';
 export { Legend } from './legend';
 export { Minimap } from './minimap';
-export { Snapline } from './snapline';
+export { SnapLine, Snapline } from './snapline';
 export { Timebar } from './timebar';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';