feat: add dblClickSpeed init config (#1710) (#1736)

* feat: add `dblClickSpeed` init config (#1710) * chore: delete the configuration that was added by mistake * chore: remove redundant code
antvis · Jul 19, 2024 · 7c68899 · 7c68899
1 parent a88b8c9
commit 7c68899
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ pids
 *.seed
 *.pid.lock
 yarn.lock
+.dumi
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

diff --git a/__tests__/demos/event/dblClick.ts b/__tests__/demos/event/dblClick.ts
@@ -0,0 +1,83 @@
+import { Circle, Text } from '../../../packages/g';
+
+export async function dblClick(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  let DELAY = 200;
+  canvas.dblClickSpeed = DELAY;
+
+  const circle0 = new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+      cursor: 'pointer',
+    },
+  });
+  const circle1 = new Circle({
+    style: {
+      cx: 300,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+      cursor: 'pointer',
+    },
+  });
+  const circle2 = new Circle({
+    style: {
+      cx: 500,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+      cursor: 'pointer',
+    },
+  });
+  const text0 = new Text({
+    style: { x: 0, y: 200, text: `current dblclick delay: ${DELAY}ms` },
+  });
+  const text1 = new Text({
+    style: { x: 0, y: 220, text: `action: ` },
+  });
+
+  circle0.addEventListener('mouseenter', () => {
+    DELAY = 200;
+    canvas.dblClickSpeed = DELAY;
+
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+  circle1.addEventListener('mouseenter', () => {
+    DELAY = 500;
+    canvas.dblClickSpeed = DELAY;
+
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+  circle2.addEventListener('mouseenter', () => {
+    DELAY = 1000;
+    canvas.dblClickSpeed = DELAY;
+
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+
+  canvas.addEventListener('click', (event) => {
+    text1.attr({
+      text: `action: ${event.detail === 2 ? 'dblclick' : 'click'}`,
+    });
+  });
+
+  canvas.appendChild(circle0);
+  canvas.appendChild(circle1);
+  canvas.appendChild(circle2);
+  canvas.appendChild(text0);
+  canvas.appendChild(text1);
+}
diff --git a/__tests__/demos/event/index.ts b/__tests__/demos/event/index.ts
@@ -2,3 +2,4 @@ export { circle } from './circle';
 export { ellipse } from './ellipse';
 export { hierarchy } from './hierarchy';
 export { imageNonTransparentPixel } from './image-non-transparent-pixel';
+export { dblClick } from './dblClick';
diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
@@ -120,6 +120,11 @@ export class Canvas extends EventTarget implements ICanvas {
    */
   isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
 
+  /**
+   * double click speed (ms), default is 200ms
+   */
+  dblClickSpeed?: CanvasConfig['dblClickSpeed'];
+
   /**
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Element
    */
@@ -168,6 +173,7 @@ export class Canvas extends EventTarget implements ICanvas {
       alwaysTriggerPointerEventOnCanvas,
       isTouchEvent,
       isMouseEvent,
+      dblClickSpeed,
     } = config;
 
     if (!supportsMutipleCanvasesInOneContainer) {
@@ -222,6 +228,8 @@ export class Canvas extends EventTarget implements ICanvas {
           (!this.supportsPointerEvents ||
             !(event instanceof runtime.globalThis.PointerEvent))));
 
+    this.dblClickSpeed = dblClickSpeed ?? 200;
+
     this.initRenderingContext({
       container,
       canvas,

diff --git a/packages/g-lite/src/dom/interfaces.ts b/packages/g-lite/src/dom/interfaces.ts
@@ -556,6 +556,7 @@ export interface ICanvas extends IEventTarget {
   supportsPointerEvents: boolean;
   isTouchEvent: (event: InteractivePointerEvent) => event is TouchEvent;
   isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
+  dblClickSpeed?: number;
 
   render: () => void;
   destroy: (destroyScenegraph?: boolean) => void;

diff --git a/packages/g-lite/src/services/EventService.ts b/packages/g-lite/src/services/EventService.ts
@@ -311,11 +311,13 @@ export class EventService {
         };
       }
 
+      const canvas =
+        this.context.renderingContext.root.ownerDocument.defaultView;
       const clickHistory = trackingData.clicksByButton[from.button];
 
       if (
         clickHistory.target === clickEvent.target &&
-        now - clickHistory.timeStamp < 200
+        now - clickHistory.timeStamp < canvas.dblClickSpeed
       ) {
         ++clickHistory.clickCount;
       } else {

diff --git a/packages/g-lite/src/types.ts b/packages/g-lite/src/types.ts
@@ -447,6 +447,8 @@ export interface CanvasConfig {
   supportsTouchEvents?: boolean;
   isTouchEvent?: (event: InteractivePointerEvent) => event is TouchEvent;
   isMouseEvent?: (event: InteractivePointerEvent) => event is MouseEvent;
+  dblClickSpeed?: number;
+
   /**
    * Listen to native click event instead of mocking with pointerup & down events.
    */

diff --git a/site/docs/api/canvas/options.en.md b/site/docs/api/canvas/options.en.md
@@ -188,6 +188,10 @@ Optional. Determines if a native event is a TouchEvent, accepts the native event
 
 Optional. Determines if a native event is a MouseEvent, accepts the native event as parameter, and returns the result.
 
+### dblClickSpeed
+
+Optional. Numeric type, determines whether two consecutive clicks trigger a double-click event [dblclick](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event) , the default is 200 ms.
+
 ### offscreenCanvas
 
 Optional. Returns an `HTMLCanvasElement | OffscreenCanvas` or similar object. Used to generate an offscreen Canvas2D context, it is currently used in the following scenarios.

diff --git a/site/docs/api/canvas/options.zh.md b/site/docs/api/canvas/options.zh.md
@@ -193,6 +193,10 @@ $wrapper.style.transform = 'scale(1.1)';
 
 可选。判断一个原生事件是否是 MouseEvent，接受原生事件作为参数，返回判定结果。
 
+### dblClickSpeed
+
+可选。数值类型，判断两次连续点击是否触发双击事件 [dblclick](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/dblclick_event) 的速度，默认为 200 ms。
+
 ### offscreenCanvas
 
 可选。返回一个 `HTMLCanvasElement | OffscreenCanvas` 或类似对象。用于生成一个离屏的 Canvas2D 上下文，目前它使用在以下场景：

diff --git a/site/package.json b/site/package.json
@@ -26,39 +26,41 @@
   },
   "dependencies": {
     "@antv/g": "latest",
-    "@antv/g-lite": "latest",
     "@antv/g-canvas": "latest",
-    "@antv/g-webgl": "latest",
-    "@antv/g-svg": "latest",
-    "@antv/g-webgpu": "latest",
     "@antv/g-canvaskit": "latest",
-    "@antv/g-plugin-css-select": "latest",
+    "@antv/g-components": "latest",
+    "@antv/g-device-api": "latest",
+    "@antv/g-image-exporter": "latest",
+    "@antv/g-lite": "latest",
+    "@antv/g-lottie-player": "latest",
+    "@antv/g-pattern": "latest",
     "@antv/g-plugin-3d": "latest",
+    "@antv/g-plugin-a11y": "latest",
+    "@antv/g-plugin-annotation": "latest",
+    "@antv/g-plugin-box2d": "latest",
     "@antv/g-plugin-control": "latest",
-    "@antv/g-plugin-gpgpu": "latest",
+    "@antv/g-plugin-css-select": "latest",
+    "@antv/g-plugin-device-renderer": "latest",
+    "@antv/g-plugin-dragndrop": "latest",
     "@antv/g-plugin-gesture": "latest",
-    "@antv/g-plugin-physx": "latest",
-    "@antv/g-plugin-box2d": "latest",
+    "@antv/g-plugin-gpgpu": "latest",
+    "@antv/g-plugin-image-loader": "latest",
     "@antv/g-plugin-matterjs": "latest",
-    "@antv/g-plugin-yoga": "latest",
+    "@antv/g-plugin-physx": "latest",
     "@antv/g-plugin-rough-canvas-renderer": "latest",
     "@antv/g-plugin-rough-svg-renderer": "latest",
     "@antv/g-plugin-svg-renderer": "latest",
-    "@antv/g-plugin-dragndrop": "latest",
-    "@antv/g-plugin-a11y": "latest",
-    "@antv/g-plugin-annotation": "latest",
+    "@antv/g-plugin-yoga": "latest",
     "@antv/g-plugin-zdog-canvas-renderer": "latest",
     "@antv/g-plugin-zdog-svg-renderer": "latest",
-    "@antv/g-plugin-image-loader": "latest",
-    "@antv/webgpu-graph": "latest",
-    "@antv/g-components": "latest",
+    "@antv/g-svg": "latest",
     "@antv/g-web-components": "latest",
-    "@antv/g-image-exporter": "latest",
-    "@antv/g-lottie-player": "latest",
-    "@antv/g-pattern": "latest",
-    "@antv/react-g": "latest",
+    "@antv/g-webgl": "latest",
+    "@antv/g-webgpu": "latest",
     "@antv/g6": "^4.5.2",
+    "@antv/react-g": "latest",
     "@antv/util": "^3.3.5",
+    "@antv/webgpu-graph": "latest",
     "@naoak/workerize-transferable": "^0.1.0",
     "@observablehq/plot": "0.5.2",
     "@types/gl-matrix": "^2.4.5",