feat: add isDblclickAction init config (#1710)

__tests__/demos/event/dblClick.ts

@@ -0,0 +1,79 @@
+import { Circle, Group, Text } from '../../../packages/g';
+
+export async function dblClick(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  let DELAY = 200;
+  canvas.isDblclickAction = (now, lastClickTime) => now - lastClickTime < DELAY;
+
+  // fill
+  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;
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+  circle1.addEventListener('mouseenter', () => {
+    DELAY = 500;
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+  circle2.addEventListener('mouseenter', () => {
+    DELAY = 1000;
+    text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
+    text1.attr({
+      text: `action: `,
+    });
+  });
+
+  canvas.addEventListener('click', (event) => {
+    console.log('click', event.detail);
+    text1.attr({
+      text: `action: ${event.detail === 2 ? 'dblclick' : 'click'}`,
+    });
+  });
+
+  canvas.appendChild(circle0);
+  canvas.appendChild(circle1);
+  canvas.appendChild(circle2);
+  canvas.appendChild(text0);
+  canvas.appendChild(text1);
+}

__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';

packages/g-lite/src/Canvas.ts

@@ -120,6 +120,11 @@ export class Canvas extends EventTarget implements ICanvas {
    */
   isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
 
+  /**
+   * Is this a double click action?
+   */
+  isDblclickAction: CanvasConfig['isDblclickAction'];
+
   /**
    * @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,
+      isDblclickAction,
     } = config;
 
     if (!supportsMutipleCanvasesInOneContainer) {
@@ -222,6 +228,9 @@ export class Canvas extends EventTarget implements ICanvas {
           (!this.supportsPointerEvents ||
             !(event instanceof runtime.globalThis.PointerEvent))));
 
+    this.isDblclickAction =
+      isDblclickAction ?? ((now, lastClickTime) => now - lastClickTime < 200);
+
     this.initRenderingContext({
       container,
       canvas,

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;
+  isDblclickAction?: (now: number, lastClickTime: number) => boolean;
 
   render: () => void;
   destroy: (destroyScenegraph?: boolean) => void;

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
+        canvas.isDblclickAction(now, clickHistory.timeStamp)
       ) {
         ++clickHistory.clickCount;
       } else {

packages/g-lite/src/types.ts

@@ -447,6 +447,7 @@ export interface CanvasConfig {
   supportsTouchEvents?: boolean;
   isTouchEvent?: (event: InteractivePointerEvent) => event is TouchEvent;
   isMouseEvent?: (event: InteractivePointerEvent) => event is MouseEvent;
+  isDblclickAction?: (now: number, lastClickTime: number) => boolean;
   /**
    * Listen to native click event instead of mocking with pointerup & down events.
    */