Gesture Library: More Features with Method and Event Usage Examples

Last updated: 29 days ago

Category: Examples

The Gesture library is a multi-device gesture module dedicated to OrcaUI. It standardizes events such as click (single tap), dblclick (double tap), hold (long press), cancel, scale (pinch zoom), rotate, and translate (pan). It also specifically handles wheel (scroll) events and right-click events on desktop platforms.

Non-Centered Scaling

By default, the center point for scaling operations is set to the center of the target element. If you need to scale with the touch point (mouse or finger) as the center, set the parameter scale.centered: false.

Increasing Drift Distance

You can change the drift distance by setting the drift.coef parameter. The default value is 0.5, and you can set any value greater than 0.

CSS Animation Drift

The drift callback function parameters include translate.value and drift.value. translate.value changes in real-time during drifting, while drift.value remains constant once drifting is confirmed.

Step Events

Step events include step (start) and stepped (progress/completion). Trigger step events on desktop via mouse wheel or keyboard keys.

For keyboard triggers, set spy:true and keyboard:true or keyboard:{enable:true} to ensure the element is fully visible before activation, avoiding unnecessary memory overhead.

Step Direction

The step.axis parameter controls movement direction (default: 'y' for vertical). Set to 'x' for horizontal movement.

Dynamic Steps

For non-fixed step values, modify the internal this.stepVal in step event and apply changes in stepped event.

Detection Observer

With spy:true, use showing (partial visibility), shown (fully visible), and hidden (not visible) events to monitor element's viewport position.

Drag Handle

By default, translation events act on the target node. However, in some scenarios where you need to limit the drag area to specific handles, you can set the translate.target parameter to specify handle nodes. This parameter follows the same syntax as the first parameter of getEls.

Drag Boundary

Due to differences across devices, on mobile you can continue dragging even when the touch point leaves the target node, while on desktop dragging stops when the mouse leaves the target node.

Comprehensive Events

This example combines all events to enable dragging, scaling, rotating, clicking, double-clicking, and long-press effects.

Range Limits

All scale, rotate, and translate events have min and max limits set via:

• scale.min/scale.max
• rotate.min/rotate.max
• translate.min/translate.max

Scaling, rotating and moving will be constrained within these ranges.

Non-Centered Scaling and Dragging

When the element's transform origin point changes, translate results may be unexpected. You can simultaneously set both scale and translate values in the move event.

Alternative approach: Handle translate and scale events separately by first executing translate, then executing the scaling and offset parts of the scale event.

Nesting

Supports nesting multiple parent/child Gesture instances. The target node's same events (pointerdown) prevent bubbling to avoid event penetration.

Non-triggerable

This module standardizes the "press + move + release" process. When a user clicks the target node:

Right-click Instead of Long-press

Mobile devices support long-press (holding left button), but desktop users aren't accustomed to this. You can use right-click instead by setting click.hold2Menu:true.

Viewport Usage

Enabling viewport allows continuous movement of the target node within the viewport until mouse/finger is released. Larger elements will show more content.

Viewport + Handle + Click

When enabling the viewport parameter along with translate.target, dragging is only effective when moving the handle to the edge, while dragging elsewhere has no effect.

Viewport Container

You can specify the viewport container using the viewport.selector parameter, which follows the same syntax as the first parameter of getEl.

Viewport Intersection Relationships

The target node's dimensions don't necessarily have to be completely smaller than the viewport. We define four types of intersection relationships between the target node and viewport:

Non-Bouncy Viewport

The default bounce effect helps enhance interaction, but if you don't need this overflow bounce effect, you can disable it by setting the parameter viewport.bouncy:false.

Scaling and Drifting in Viewport

In addition to drag movement, the viewport also supports scale zooming, rotate rotation and drift drifting. Any overflow behavior will automatically bounce back.

Image Viewer Simulation

In image gallery scenarios, you often need to double-click an image to zoom to a certain multiple, and then perform additional scaling on this basis, with the image not exceeding the specified container.

Single Page Demo

This example doesn't output anything to the console, so it appears very smooth.

Destruction and Initialization

Native events can be added and removed via addEventListener and removeEventListener methods. For this module, you can implement event addition and removal through init initialization and destroy destruction.