Skip to content

Commit

Permalink
feat: add dblClickSpeed init config (#1710) (#1736)
Browse files Browse the repository at this point in the history
* feat: add `dblClickSpeed` init config (#1710)

* chore: delete the configuration that was added by mistake

* chore: remove redundant code
  • Loading branch information
wang1212 authored Jul 19, 2024
1 parent a88b8c9 commit 7c68899
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 20 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ pids
*.seed
*.pid.lock
yarn.lock
.dumi

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
Expand Down
83 changes: 83 additions & 0 deletions __tests__/demos/event/dblClick.ts
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions __tests__/demos/event/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
8 changes: 8 additions & 0 deletions packages/g-lite/src/Canvas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -168,6 +173,7 @@ export class Canvas extends EventTarget implements ICanvas {
alwaysTriggerPointerEventOnCanvas,
isTouchEvent,
isMouseEvent,
dblClickSpeed,
} = config;

if (!supportsMutipleCanvasesInOneContainer) {
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/g-lite/src/dom/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion packages/g-lite/src/services/EventService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions packages/g-lite/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
4 changes: 4 additions & 0 deletions site/docs/api/canvas/options.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions site/docs/api/canvas/options.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 上下文,目前它使用在以下场景:
Expand Down
40 changes: 21 additions & 19 deletions site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 7c68899

Please sign in to comment.