fix: fix the conflict issue of hover-element and drag-element

packages/cli/template-extension/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "g6-extension-test",
   "version": "0.0.1",
   "description": "Extension for G6",
   "repository": {

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

@@ -2,7 +2,7 @@ import { isFunction } from '@antv/util';
 import { CommonEvent } from '../constants';
 import { ELEMENT_TYPES } from '../constants/element';
 import type { RuntimeContext } from '../runtime/types';
-import type { Element, ElementType, ID, IPointerEvent, State } from '../types';
+import type { Element, ElementType, ID, IDragEvent, IPointerEvent, State } from '../types';
 import { idsOf } from '../utils/id';
 import { getElementNthDegreeIds } from '../utils/relation';
 import type { BaseBehaviorOptions } from './base-behavior';
@@ -84,11 +84,17 @@ export class HoverElement extends BaseBehavior<HoverElementOptions> {
     inactiveState: undefined,
   };
 
+  private isFrozen = false;
+
   constructor(context: RuntimeContext, options: HoverElementOptions) {
     super(context, Object.assign({}, HoverElement.defaultOptions, options));
     this.bindEvents();
   }
 
+  private toggleFrozen = (e: IDragEvent) => {
+    this.isFrozen = e.type === 'dragstart';
+  };
+
   private bindEvents() {
     const { graph } = this.context;
     this.unbindEvents();
@@ -97,6 +103,10 @@ export class HoverElement extends BaseBehavior<HoverElementOptions> {
       graph.on(`${type}:${CommonEvent.POINTER_OVER}`, this.hoverElement);
       graph.on(`${type}:${CommonEvent.POINTER_OUT}`, this.hoverEndElement);
     });
+
+    const canvas = this.context.canvas.document;
+    canvas.addEventListener(`${CommonEvent.DRAG_START}`, this.toggleFrozen);
+    canvas.addEventListener(`${CommonEvent.DRAG_END}`, this.toggleFrozen);
   }
 
   private hoverElement = (event: IPointerEvent) => {
@@ -149,7 +159,7 @@ export class HoverElement extends BaseBehavior<HoverElementOptions> {
   };
 
   private validate(event: IPointerEvent) {
-    if (this.destroyed) return false;
+    if (this.destroyed || this.isFrozen) return false;
     const { enable } = this.options;
     if (isFunction(enable)) return enable(event);
     return !!enable;
@@ -162,6 +172,10 @@ export class HoverElement extends BaseBehavior<HoverElementOptions> {
       graph.off(`${type}:${CommonEvent.POINTER_OVER}`, this.hoverElement);
       graph.off(`${type}:${CommonEvent.POINTER_OUT}`, this.hoverEndElement);
     });
+
+    const canvas = this.context.canvas.document;
+    canvas.removeEventListener(`${CommonEvent.DRAG_START}`, this.toggleFrozen);
+    canvas.removeEventListener(`${CommonEvent.DRAG_END}`, this.toggleFrozen);
   }
 
   public destroy() {

packages/site/package.json

@@ -30,6 +30,7 @@
     "doc": "ts-node ./scripts/generate-api.ts && ts-node ./scripts/generate-doc.ts",
     "doc:add": "node ./scripts/doc-template.mjs",
     "doc:clear": "ts-node ./scripts/clear-doc.ts",
+    "doc:dev": "npm run doc && rm -rf ./docs/api/reference",
     "doc:sort": "ts-node ./scripts/sort-doc.ts",
     "find-unused-demos": "node ./scripts/find-unused-demos.js",
     "lint": "eslint ./src  --quiet && prettier ./src  --check",

packages/site/scripts/generate-api.ts

@@ -39,7 +39,7 @@ export function mangleScopedPackageName(packageName: string): string {
 
 const reportFolderRoot = path.resolve(path.join('support', 'api'));
 const reportTempFolderRoot = path.resolve(reportFolderRoot, 'temp');
-const ignorePackages = new Set<string>(['@antv/g6-site', '@antv/g6-extension-3d', '@antv/g6-cli']);
+const includePackages = new Set<string>(['@antv/g6', '@antv/g6-extension-react']);
 
 /**
  * Get all typed packages.
@@ -49,7 +49,7 @@ async function getTypedPackages() {
   const packages = await getPackages(baseDir());
   return packages.packages.filter((pkg) => {
     const json = pkg.packageJson;
-    return !json.private && !ignorePackages.has(json.name);
+    return !json.private && includePackages.has(json.name);
   });
 }